/* ==========================================================================
   Stonora — Category / Shop archive
   Place in:  wp-content/themes/<child>/assets/css/stonora-category.css
   Tweak the tokens in .stonora-archive to fine-tune the palette.
   ========================================================================== */

.stonora-archive{
	--st-ink:        #4a2a1a;   /* card titles / search text */
	--st-muted:      #6c6055;   /* description / placeholders */
	--st-accent:     #5a3f28;   /* page title + focus */
	--st-brown:      #4a2a1a;   /* dropdown background */
	--st-brown-ink:  #f4ece0;   /* dropdown text */
	--st-line:       #c8bba4;   /* search border */
	--st-card-bg:    #ddd4c4;   /* image placeholder */
	--st-card-radius: 8px;

	--st-serif: "Bodoni Moda", serif;;
	--st-sans:  "Open Sans", sans-serif;
}

/* ---------- HERO ---------------------------------------------------------- */
.stonora-hero{ width:100%; line-height:0; }
.stonora-hero__img{
	width:100%;
	height:clamp(260px, 38vw, 440px);
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}

/* ---------- SECTION ------------------------------------------------------- */
.stonora-archive{
	padding:clamp(40px,6vw,72px) 0 clamp(56px,8vw,96px);
}

/* ---------- HEADER -------------------------------------------------------- */
.stonora-archive__head{
	text-align:center;
	max-width:680px;
	margin:0 auto clamp(28px,4vw,40px);
}
.stonora-archive__title{
	font-family:var(--st-serif);
	font-style:italic;
	font-weight:500;
	font-size:clamp(2.4rem,5vw,3.4rem);
	line-height:1.05;
	color:var(--st-accent);
	margin:0 0 .5em;
}
.stonora-archive__desc{
	font-family:var(--st-sans);
	font-size:clamp(.9rem,1.4vw,1rem);
	line-height:1.6;
	color:var(--st-muted);
	max-width:560px;
	margin:0 auto;
}
.stonora-archive__desc p{ margin:0; }

/* ---------- FILTERS ------------------------------------------------------- */
.stonora-filters{
	/* max-width:760px; */
	margin:0 auto clamp(32px,5vw,48px);
}
.stonora-filters__row{
	display:flex;
	gap:16px;
	margin-bottom:14px;
}

/* Dropdowns */
.stonora-select{ position:relative; flex:1 1 0; min-width:0; }
.stonora-select__input{
	-webkit-appearance:none;
	appearance:none;
	width:100%;
	cursor:pointer;
	font-family:var(--st-sans);
	font-size:.95rem;
	color:var(--st-brown-ink);
	background:var(--st-brown);
	border:0;
	border-radius:7px;
	padding:14px 42px 14px 18px;
}
.stonora-select__input:focus-visible{ outline:2px solid var(--st-accent); outline-offset:2px; }
.stonora-select__input option{ color:#222; background:#fff; }
.stonora-select__chevron{
	position:absolute;
	top:50%; right:16px;
	width:9px; height:9px;
	margin-top:-6px;
	border-right:2px solid var(--st-brown-ink);
	border-bottom:2px solid var(--st-brown-ink);
	transform:rotate(45deg);
	pointer-events:none;
}

/* Search */
.stonora-search{ position:relative; }
.stonora-search__input{
	width:100%;
	font-family:var(--st-sans);
	font-size:.95rem;
	color:var(--st-ink);
	background:transparent;
	border:1px solid var(--st-line);
	border-radius:7px;
	padding:14px 46px 14px 18px;
}
.stonora-search__input::placeholder{ color:var(--st-muted); opacity:1; }
.stonora-search__input:focus{ outline:none; border-color:var(--st-accent); }
.stonora-search__icon{
	position:absolute;
	top:50%; right:16px;
	transform:translateY(-50%);
	color:var(--st-muted);
	line-height:0;
	pointer-events:none;
}

/* ---------- GRID ---------------------------------------------------------- */
.stonora-archive ul.products{
	display:grid !important;
	grid-template-columns:repeat(3,1fr);
	gap:clamp(20px,2.5vw,30px);
	margin:0;
	padding:0;
	list-style:none;
}
.stonora-archive ul.products::before,
.stonora-archive ul.products::after{ content:none !important; display:none !important; }
.stonora-archive ul.products li.product{
	width:auto !important;
	margin:0 !important;
	padding:0 !important;
	float:none !important;
	clear:none !important;
}

/* ---------- CARD ---------------------------------------------------------- */
.stonora-card__link{ display:block; text-decoration:none; color:inherit; }
.stonora-card__media{
	position:relative;
	overflow:hidden;
	border-radius:var(--st-card-radius);
	background:var(--st-card-bg);
	aspect-ratio:7/ 3;
}
.stonora-card__media img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform .6s ease;
}
.stonora-card__link:hover .stonora-card__media img{ transform:scale(1.05); }

.stonora-card__title{
	font-family:var(--st-sans);
	font-style:italic;
	font-weight:500;
	font-size:1.1rem;
	line-height:1.3;
	color:var(--st-ink);
	margin:12px 2px 0;
}

/* ---------- NO RESULTS ---------------------------------------------------- */
.stonora-no-results{
	font-family:var(--st-sans);
	text-align:center;
	color:var(--st-muted);
	padding:48px 0;
}

/* ---------- REVEAL (fail-safe) -------------------------------------------- */
/* Cards are visible by default. The .js-reveal class is added by JS only
   after confirming IntersectionObserver support, so if the script never
   runs the products always stay visible. */
.stonora-archive.js-reveal .stonora-card{
	opacity:0;
	transform:translateY(24px);
	transition:opacity .6s ease, transform .6s ease;
	will-change:opacity, transform;
}
.stonora-archive.js-reveal .stonora-card.is-in{
	opacity:1;
	transform:none;
}
@media (prefers-reduced-motion:reduce){
	.stonora-archive.js-reveal .stonora-card{
		opacity:1; transform:none; transition:none;
	}
}

/* ---------- RESPONSIVE ---------------------------------------------------- */
@media (max-width:900px){
	.stonora-archive ul.products{ grid-template-columns:repeat(2,1fr); }
	.stonora-archive{
	padding:clamp(40px,6vw,72px) 10px clamp(56px,8vw,96px);
}
}
@media (max-width:560px){
	.stonora-filters__row{ flex-direction:column; gap:12px; }
	.stonora-archive ul.products{ grid-template-columns:1fr 1fr; gap:14px; }
	.stonora-card__title{ font-size:1rem; }
}