/* Koleksiyon vitrini: sitenin ortak header/footer'ini (layouts.store)
   kullanir, boylece navigasyon/sepet/arama her sayfada aynidir. Bu dosya
   yalnizca bu sayfaya ozgu editoryal duzeni (tam ekran hikaye anlatan
   panel/hero/secki bloklari) tasir; renk ve tipografi site.css'teki ayni
   degiskenlerden (--primary/--secondary/--text/--accent/--font-*) gelir,
   hicbir deger burada tekrar sabitlenmez. */
:root{
  --coll-bg:var(--secondary); --coll-panel:var(--surface);
  --coll-ink:var(--primary); --coll-text:var(--text);
  --coll-muted:color-mix(in srgb,var(--text) 68%,var(--secondary));
  --coll-line:color-mix(in srgb,var(--text) 12%,transparent);
  --coll-accent:var(--accent);
  --coll-accent-on-media:color-mix(in srgb,var(--coll-accent) 45%,#fff);
  --coll-on-media:#f5efe6;
}

/* ---------- Atlas (collections/index): kart grid degil, dikey panel dizisi ---------- */
.coll-intro{padding:clamp(3rem,7vw,5.5rem) clamp(1.2rem,5vw,3.5rem) clamp(1.5rem,4vw,2.5rem);max-width:70rem}
.coll-intro>span{display:block;color:var(--coll-accent);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1rem}
.coll-intro h1{font:600 clamp(2.4rem,6vw,4.4rem)/1.05 var(--font-heading);margin:0 0 1rem;color:var(--coll-ink)}
.coll-intro p{color:var(--coll-muted);font-style:italic;max-width:38rem;margin:0}

/* ---------- Sayfa girisi, tam ekran hero varyanti (misivva-intro.blade.php
   'style=hero' secildiginde) -- alt-hizali metin + iki katmanli vinyet,
   referans tasarimdaki "spot isik" hissi, ama sitenin kendi renk
   token'lariyla (koyu kahve/altin degil). ---------- */
.coll-intro-hero{
  position:relative;min-height:clamp(60vh,68vh,75vh);display:flex;align-items:flex-end;
  overflow:hidden;isolation:isolate;
}
.coll-intro-hero-media{position:absolute;inset:0;z-index:0}
.coll-intro-hero-media img{width:100%;height:100%;object-fit:cover}
.coll-intro-hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,transparent 30%,color-mix(in srgb,var(--coll-ink) 92%,transparent) 100%),
    linear-gradient(90deg,color-mix(in srgb,var(--coll-ink) 55%,transparent),transparent 30%,transparent 70%,color-mix(in srgb,var(--coll-ink) 55%,transparent));
}
.coll-intro-hero-body{
  position:relative;z-index:1;padding:clamp(2rem,6vw,4.5rem) clamp(1.2rem,5vw,3.5rem) clamp(2.5rem,6vw,4.5rem);
  max-width:44rem;
}
.coll-intro-hero-body .eyebrow{
  display:inline-block;font:700 .68rem/1 var(--font-accent);letter-spacing:.3em;text-transform:uppercase;
  color:var(--coll-accent-on-media);margin-bottom:1.1rem;padding:.5rem .9rem;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--coll-accent-on-media) 40%,transparent);
}
.coll-intro-hero-body h1{font:600 clamp(2.4rem,6vw,4.6rem)/1.05 var(--font-heading);margin:0 0 .9rem;color:var(--coll-on-media)}
.coll-intro-hero-body p{margin:0;color:var(--coll-on-media);opacity:.82;max-width:36rem;line-height:1.6}
.coll-intro-hero-stats{
  display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1.6rem;padding-top:1.4rem;
  border-top:1px solid color-mix(in srgb,var(--coll-on-media) 25%,transparent);
}
.coll-intro-hero-stats span{
  display:inline-flex;align-items:center;gap:.5rem;font:400 .78rem/1 var(--font-accent);
  letter-spacing:.05em;color:var(--coll-on-media);opacity:.8;
}
.coll-intro-hero-stats svg{color:var(--coll-accent-on-media);flex-shrink:0}
@media (max-width:780px){ .coll-intro-hero{min-height:56vh} }

/* ---------- Kadin/Erkek split-hero: sayfanin girisi, iki yarim ekran panel ----------
   '--coll-accent-override' / '--panel-overlay': misivva-gender-split.blade.php section'i
   panelin kendi inline style'inda bu iki degiskeni tanimlar (admin panelden renk
   secilebilir); burada tanimsizsa siteC.css'teki varsayilan --coll-accent'e duser. */
.gender-split{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  min-height:78vh;border-top:1px solid var(--coll-line);border-bottom:1px solid var(--coll-line);
  isolation:isolate;
}
/* BULUNAN HATA: '.gender-showcase' (vitrin overlay'i, z-index:70) bu
   section'in KENDI ICINDE dogar. 'isolation:isolate' overlay'i kendi yerel
   yigin baglamina hapsediyor -- disaridan bakildiginda '.gender-split' tum
   overlay'i ile birlikte, aciktan z-index tasimadigi icin "z-index:0" gibi
   davranir. Sonuc: acikca z-index:37 tasiyan '.site-header' (sticky), her
   zaman overlay'in USTUNE cizilir -- ozellikle overlay'in kendi ust cubugu
   (basliK+geri+KAPATMA IKONU) tam o 76px'lik seritte kaliyor ve tamamen
   gorunmez oluyordu (grid altta dogru gorunuyordu, sadece bu ust serit
   gizliydi). Cozum: overlay GERCEKTEN acikken section'i kendi izole
   baglaminin disina, header'in bile ustune cikaracak kadar yukseltiyoruz;
   kapaliyken hicbir sey degismiyor (normal kaydirmada headerla eski
   davranis aynen korunuyor). */
.gender-split:has(.gender-showcase.is-open){ z-index:80; }
/* Ortadaki ince ayrac: markanin dikis motifini cagristiran tek bir altin iplik. */
.gender-split::before{
  content:"";position:absolute;top:8%;bottom:8%;left:50%;width:1px;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--coll-accent-override,var(--coll-accent)) 55%,transparent) 45%,color-mix(in srgb,var(--coll-accent-override,var(--coll-accent)) 55%,transparent) 55%,transparent);
}
.gender-panel{
  position:relative;display:flex;align-items:flex-end;padding:clamp(2rem,5vw,4rem);
  min-height:38vh;overflow:hidden;background:var(--coll-ink);text-decoration:none;
  transition:box-shadow .4s ease;
}
.gender-panel:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--coll-accent-override,var(--coll-accent)) 35%,transparent)}
.gender-panel-media{position:absolute;inset:0;z-index:0}
.gender-panel-media img{
  width:100%;height:100%;object-fit:cover;opacity:.55;filter:grayscale(12%);
  transform:scale(1.03);transition:transform 1.2s cubic-bezier(.2,.7,.3,1),opacity .8s ease;
}
.gender-panel:hover .gender-panel-media img{transform:scale(1.09);opacity:.72}
.gender-panel-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel-overlay,#0a0907) 0%,transparent) 30%,color-mix(in srgb,var(--panel-overlay,#0a0907) 88%,transparent) 100%);
}
.gender-panel-body{position:relative;z-index:1;max-width:26rem}
.gender-panel-eyebrow{
  display:block;font:700 .68rem/1 var(--font-accent);letter-spacing:.3em;text-transform:uppercase;
  color:var(--coll-accent-override,var(--coll-accent-on-media));margin-bottom:.9rem;opacity:.9;
}
.gender-panel-title{
  display:block;font:600 clamp(2.2rem,4.6vw,3.6rem)/1.04 var(--font-heading);margin:0 0 .9rem;color:var(--coll-on-media);
}
.gender-panel-title em{font-style:italic;font-weight:400;opacity:.88}
.gender-panel-desc{display:block;margin:0 0 1.4rem;color:var(--coll-on-media);opacity:.75;font-size:.92rem;line-height:1.6;max-width:24rem}
.gender-panel-cta{
  display:inline-flex;align-items:center;gap:.55rem;font:700 .74rem/1 var(--font-accent);
  letter-spacing:.14em;text-transform:uppercase;color:var(--coll-on-media);
  border-bottom:1px solid color-mix(in srgb,var(--coll-on-media) 35%,transparent);padding-bottom:.3rem;
  transition:border-color .25s ease,gap .25s ease;
}
.gender-panel:hover .gender-panel-cta{border-color:var(--coll-accent-override,var(--coll-accent-on-media));gap:.85rem}
.gender-panel-cta svg{transition:transform .25s ease}
.gender-panel:hover .gender-panel-cta svg{transform:translateX(3px)}
.gender-panel-count{
  position:absolute;top:clamp(1.5rem,4vw,2.5rem);right:clamp(1.5rem,4vw,2.5rem);z-index:1;
  font:400 .72rem/1 var(--font-accent);letter-spacing:.05em;color:var(--coll-on-media);opacity:.65;
}

@media (max-width:900px){
  .gender-split{grid-template-columns:1fr;min-height:auto}
  .gender-split::before{display:none}
  .gender-panel{min-height:62vh}
}
.coll-atlas{display:flex;flex-direction:column}
.coll-panel{
  position:relative;min-height:62vh;display:flex;align-items:flex-end;
  border-bottom:1px solid var(--coll-line);overflow:hidden;
  transition:box-shadow .4s ease;
}
.coll-panel:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--coll-accent-on-media) 35%,transparent)}
.coll-panel-media{position:absolute;inset:0;display:block}
.coll-panel-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.coll-panel:hover .coll-panel-media img{transform:scale(1.035)}
.coll-panel-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(21,19,16,0) 35%,rgba(21,19,16,.86) 100%);
}
.coll-panel-body{display:block;position:relative;z-index:1;padding:clamp(1.6rem,5vw,3.5rem);max-width:38rem}
.coll-panel:nth-child(even) .coll-panel-body{margin-left:auto;text-align:right}
.coll-panel-eyebrow{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--coll-accent-on-media);margin-bottom:.6rem}
.coll-panel-title{
  display:block;font:600 clamp(2.1rem,5.5vw,4rem)/1.05 var(--font-heading);margin:0 0 .7rem;color:var(--coll-on-media);
}
.coll-panel-teaser{display:block;margin:0;font-style:italic;color:var(--coll-on-media);opacity:.82;font-size:1.02rem;max-width:34rem}
.coll-panel:nth-child(even) .coll-panel-teaser{margin-left:auto}
.coll-panel-link{
  display:inline-block;margin-top:1.1rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  border-bottom:1px solid var(--coll-accent-on-media);color:var(--coll-accent-on-media);padding-bottom:.15rem;
  transition:opacity .2s ease;
}
.coll-panel:hover .coll-panel-link{opacity:.7}

/* ---------- Bos durum (koleksiyon yoksa) ---------- */
.coll-empty{
  margin:4rem auto;max-width:32rem;text-align:center;padding:3.5rem 1.5rem;
  border:1px solid var(--coll-line);
}
.coll-empty p{color:var(--coll-muted);margin:0 0 1.3rem}
.coll-empty a{
  display:inline-block;border:1px solid var(--coll-accent);color:var(--coll-accent);
  padding:.7rem 1.4rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
}
.coll-empty a:hover{background:var(--coll-accent);color:var(--coll-bg)}

/* ---------- Show: hero + hikaye + secki ---------- */
.coll-hero{position:relative;min-height:88vh;display:flex;align-items:flex-end}
.coll-hero-media{position:absolute;inset:0}
.coll-hero-media img{width:100%;height:100%;object-fit:cover}
.coll-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,19,16,.15) 0%,rgba(21,19,16,.92) 100%)}
.coll-hero-body{position:relative;z-index:1;padding:clamp(2rem,6vw,4.5rem) clamp(1.2rem,5vw,3.5rem) clamp(2.5rem,7vw,5rem);max-width:56rem}
.coll-origin{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--coll-accent-on-media);margin-bottom:1rem}
.coll-hero-title{font:600 clamp(2.6rem,7vw,5.6rem)/1.02 var(--font-heading);margin:0;color:var(--coll-on-media)}

.coll-back{
  display:inline-block;margin:2.6rem clamp(1.2rem,5vw,3.5rem) 0;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--coll-muted);border-bottom:1px solid transparent;
}
.coll-back:hover{color:var(--coll-accent);border-color:var(--coll-accent)}

.coll-story{
  max-width:38rem;margin:3.5rem clamp(1.2rem,5vw,3.5rem) 5rem;
}
.coll-story p{margin:0 0 1.4rem;font-size:1.14rem;line-height:1.85;color:var(--coll-text)}
.coll-story p:first-of-type::first-letter{
  font:600 3.4rem/.8 var(--font-heading);float:left;padding:.1rem .5rem 0 0;color:var(--coll-accent);
}

.coll-edit{border-top:1px solid var(--coll-line)}
.coll-edit-item{
  display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:clamp(1.5rem,4vw,3.5rem);
  padding:clamp(2rem,5vw,4rem) clamp(1.2rem,5vw,3.5rem);border-bottom:1px solid var(--coll-line);
}
.coll-edit-item:nth-child(even){grid-template-columns:1fr 1.1fr}
.coll-edit-item:nth-child(even) .coll-edit-media{order:2}
.coll-edit-media{aspect-ratio:4/5;overflow:hidden;background:var(--coll-panel);width:min(100%,calc(78vh * .8));justify-self:start}
.coll-edit-item:nth-child(even) .coll-edit-media{justify-self:end}
.coll-edit-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.coll-edit-item:hover .coll-edit-media img{transform:scale(1.03)}}
.coll-edit-caption{max-width:26rem}
.coll-edit-name{font:600 clamp(1.4rem,2.4vw,1.9rem)/1.2 var(--font-heading);margin:0 0 .6rem;color:var(--coll-ink)}
.coll-edit-name a:hover{color:var(--coll-accent)}
.coll-edit-price{margin:0 0 1.4rem;color:var(--coll-muted);font-size:.95rem;letter-spacing:.03em}
.coll-edit-link{display:inline-block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--coll-ink);border-bottom:1px solid var(--coll-line);padding-bottom:.25rem;transition:color .2s ease,border-color .2s ease}
.coll-edit-link:hover{color:var(--coll-accent);border-color:var(--coll-accent)}
.coll-edit-link:focus-visible,.coll-more a:focus-visible{outline:2px solid var(--coll-accent);outline-offset:4px}
.coll-more{text-align:center;padding:clamp(2.5rem,6vw,4.5rem) 1.2rem clamp(3rem,7vw,5.5rem)}
.coll-more a{display:inline-block;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--coll-ink);padding:1rem 2.2rem;border:1px solid var(--coll-ink);transition:background-color .2s ease,color .2s ease,transform .16s ease}
.coll-more a:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.coll-more a:hover{background:var(--coll-ink);color:var(--coll-bg)}}

/* ---------- Tek akan sayfa hissi: yumusak kaydirma + kademeli giris hareketi ----------
   Bu <style>/<link> sadece bu sayfa yuklendiginde head'e eklendigi icin
   'html{scroll-behavior}' burada tanimlansa bile diger sayfalari etkilemez. */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
  [data-reveal]{
    opacity:0;transform:translateY(14px);
    transition:opacity .6s cubic-bezier(.23,1,.32,1),transform .6s cubic-bezier(.23,1,.32,1);
    transition-delay:var(--reveal-delay,0ms);
  }
  [data-reveal].is-visible{opacity:1;transform:none}
  /* Hero ekranin ilk gorunen yeri: scroll-reveal'e (IntersectionObserver
     gelene kadar gizli) baglanmaz, sayfa yuklenince kendi kendine yukselir. */
  .coll-hero-body{animation:coll-rise .7s cubic-bezier(.23,1,.32,1) .1s both}
  @keyframes coll-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}

/* ---------- Kategori seridi: bu sayfada gender-split ile ayni sinematik dilde ---------- */
[data-section-id="categories"]{border-top:1px solid var(--coll-line)}
[data-section-id="categories"] .category-strip a{transition:transform .6s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease}
[data-section-id="categories"] .category-strip a:hover{transform:translateY(-4px);box-shadow:0 16px 32px -14px color-mix(in srgb,var(--coll-ink) 45%,transparent)}

@media (max-width:780px){
  .coll-panel{min-height:52vh}
  .coll-panel-body,.coll-panel:nth-child(even) .coll-panel-body{margin:0;text-align:left;max-width:none}
  .coll-panel:nth-child(even) .coll-panel-teaser{margin-left:0}
  .coll-hero{min-height:64vh}
  .coll-edit-item,.coll-edit-item:nth-child(even){grid-template-columns:1fr}
  .coll-edit-item:nth-child(even) .coll-edit-media{order:0}
  .coll-story p:first-of-type::first-letter{font-size:2.6rem}
}

/* ---------- Sayfalama: Laravel'in varsayilan (Tailwind class'li ama
   Tailwind hic yuklenmemis) pagination view'ini bu sayfanin diline gore
   sifirla; kesin class adlarina guvenmek yerine genel etiket secicileri. */
.coll-pagination{margin:3rem clamp(1.2rem,5vw,3.5rem) 0;font-size:.85rem;text-align:center}
.coll-pagination nav{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:.3rem}
.coll-pagination a,.coll-pagination span{color:var(--coll-muted)!important;background:none!important;border:1px solid var(--coll-line)!important;padding:.4rem .75rem!important;border-radius:0!important}
.coll-pagination a:hover{color:var(--coll-accent)!important;border-color:var(--coll-accent)!important}

/* ---------- Kayan urun vitrini (Kadin/Erkek panellerine tiklayinca acilir) ----------
   Seviye 1 (izgara) + Seviye 2 (hizli onizleme) ayni fixed overlay icinde;
   z-index:70 header/arama/cekmece/mobil-menunun (35-61) ustunde, admin'in
   canli-tasarim panelinin (100-101) altinda kalir. Yon (--coll-accent temelli
   degil, dogrudan translateX) kategoriye gore JS'te data-direction ile secilir. */
.gender-showcase{position:fixed;inset:0;z-index:70;visibility:hidden}
.gender-showcase.is-open,.gender-showcase:not([hidden]){visibility:visible}
.gender-showcase-backdrop{
  position:fixed;inset:0;background:color-mix(in srgb,var(--coll-ink) 55%,transparent);
  opacity:0;transition:opacity .4s ease;
}
.gender-showcase.is-open .gender-showcase-backdrop{opacity:1}
.gender-showcase-panel{
  position:fixed;inset:0;background:var(--coll-bg);overflow-y:auto;
  transform:translateX(100%);transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.gender-showcase[data-direction="left"] .gender-showcase-panel{transform:translateX(-100%)}
.gender-showcase.is-open .gender-showcase-panel{transform:translateX(0)}
@media (prefers-reduced-motion: reduce){
  .gender-showcase-panel,.gender-showcase-backdrop{transition:none}
}

.gender-showcase-header{
  position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:1rem;
  padding:1.2rem clamp(1.2rem,4vw,2.5rem);background:var(--coll-bg);
  border-bottom:1px solid var(--coll-line);
}
.gender-showcase-back{
  display:inline-flex;align-items:center;gap:.4rem;border:0;background:none;cursor:pointer;
  color:var(--coll-text);font:600 .8rem/1 var(--font-accent);letter-spacing:.06em;text-transform:uppercase;
}
/* BULUNAN HATA: 'display:inline-flex' burada, tarayicinin varsayilan
   '[hidden]{display:none}' kuralini ayni ozgulukte (tek sinif secici)
   fakat SONRA geldigi icin eziyordu -- JS 'backButton.hidden=true' yapsa
   bile buton Izgara seviyesinde gorunur kaliyordu ("Geri" hicbir yere
   gitmeden orada duruyordu). Once acikca yeniden kapatiyoruz. */
.gender-showcase-back[hidden]{display:none}
.gender-showcase-title{
  flex:1;font:600 1rem/1 var(--font-heading);color:var(--coll-ink);
}
.gender-showcase-close{
  border:0;background:none;cursor:pointer;color:var(--coll-text);
  display:grid;place-items:center;width:36px;height:36px;border-radius:999px;
  /* 'transform' de listede: site genelindeki 'button:active{transform:
     translateY(1px)}' basma geri bildirimi (bkz. site.css) bu butonda da
     calissin -- sadece 'background' yazilinca sessizce disariyla kaliyordu. */
  transition:background .2s ease,transform .16s ease;
}
.gender-showcase-close:hover{background:color-mix(in srgb,var(--coll-text) 8%,transparent)}

.gender-showcase-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(11rem,22vw,15rem),1fr));
  gap:clamp(.6rem,1.6vw,1.2rem);padding:clamp(1.2rem,4vw,2.5rem);
}
.gender-showcase-tile{
  border:1px solid var(--coll-line);background:var(--coll-panel);cursor:pointer;
  text-align:left;padding:0;overflow:hidden;transition:box-shadow .3s ease,border-color .3s ease;
  display:flex;flex-direction:column;
}
.gender-showcase-tile:hover{border-color:var(--coll-accent);box-shadow:0 14px 30px -16px color-mix(in srgb,var(--coll-ink) 45%,transparent)}
.gender-showcase-tile-media{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--coll-line)}
.gender-showcase-tile-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.gender-showcase-tile:hover .gender-showcase-tile-media img{transform:scale(1.05)}
.gender-showcase-tile-name{padding:.8rem .8rem 0;font:600 .88rem/1.3 var(--font-body);color:var(--coll-ink)}
.gender-showcase-tile-price{padding:.3rem .8rem .9rem;font:400 .82rem/1 var(--font-body);color:var(--coll-muted)}
.gender-showcase-empty{grid-column:1/-1;color:var(--coll-muted);text-align:center;padding:3.5rem 1rem}

.qv-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(1.5rem,4vw,3rem);padding:clamp(1.2rem,4vw,2.5rem)}
.qv-gallery-main{aspect-ratio:4/5;overflow:hidden;background:var(--coll-line)}
.qv-gallery-main img{width:100%;height:100%;object-fit:cover}
.qv-gallery-thumbs{display:flex;gap:.5rem;margin-top:.6rem}
.qv-thumb{width:56px;height:70px;border:1px solid var(--coll-line);padding:0;overflow:hidden;cursor:pointer;opacity:.6;transition:opacity .2s ease,border-color .2s ease}
.qv-thumb img{width:100%;height:100%;object-fit:cover}
.qv-thumb.is-active,.qv-thumb:hover{opacity:1;border-color:var(--coll-accent)}
.qv-body{display:flex;flex-direction:column;gap:.4rem;max-width:26rem}
.qv-sku{color:var(--coll-muted);font:400 .78rem/1 var(--font-accent);letter-spacing:.08em;text-transform:uppercase}
.qv-title{margin:0;font:600 1.5rem/1.2 var(--font-heading);color:var(--coll-ink)}
.qv-price{font:600 1.1rem/1 var(--font-body);color:var(--coll-accent);margin-bottom:.4rem}
.qv-variants{margin:.4rem 0}
.qv-view-full{margin-top:.6rem;font-size:.82rem;color:var(--coll-muted);text-decoration:underline}
.qv-view-full:hover{color:var(--coll-accent)}

@media (max-width:780px){
  .gender-showcase-grid{grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr))}
  .qv-layout{grid-template-columns:1fr}
}