/* ==========================================================
   LUXURY BRANDS OUTLET KS — Boutique Design System
   Ivory & Noir & Champagne — editorial modern luxury
   1. Tokens  2. Base  3. Utilities  4. Loader  5. Cursor
   6. Header & Mega Menu  7. Hero  8. Marquee  9. Categories
   10. Brand Wall  11. Collections  12. Shop bar
   ========================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Ivory day palette */
  --paper:#f7f4ee; --paper-2:#f0ece3; --porcelain:#fcfaf6;
  --ink:#17130e; --ink-2:#2b251d; --muted:#71685a; --faint:#a49a87;
  /* Noir night palette (dark bands) */
  --noir:#0d0b09; --noir-2:#15120e; --noir-3:#1d1913;
  --ivory-on-noir:#f3ece0; --muted-on-noir:#a79c8d;
  /* Champagne gold */
  --gold:#ab8544; --gold-2:#c9a45c; --gold-3:#e9d5a4; --gold-deep:#7c5f2c;
  --grad:linear-gradient(115deg,#8a6a33 0%,#c9a45c 45%,#efdfb2 100%);
  --grad-text:linear-gradient(105deg,#a8823f,#d8bc7d 55%,#8a6a33);
  --grad-text-noir:linear-gradient(105deg,#e8c987,#f6e7bd 55%,#caa15c);
  /* Lines & shadows */
  --line:rgba(23,19,14,.13); --line-soft:rgba(23,19,14,.07);
  --line-gold:rgba(171,133,68,.4); --line-noir:rgba(233,213,164,.16);
  --glass:rgba(255,255,255,.6); --glass-noir:rgba(255,255,255,.05);
  --sh-s:0 2px 14px rgba(23,19,14,.07);
  --sh-m:0 22px 50px -18px rgba(23,19,14,.22);
  --sh-l:0 40px 90px -28px rgba(23,19,14,.35);
  --glow:0 0 40px -8px rgba(171,133,68,.45);
  --font-d:"Cormorant Garamond",serif;
  --font-b:"Jost",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --t:.5s var(--ease);
  --header-h:76px;
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{
  font-family:var(--font-b);font-weight:300;background:var(--paper);
  color:var(--ink);line-height:1.7;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{display:block;max-width:100%}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
input,select,textarea{font:inherit;border:0;outline:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:rgba(171,133,68,.25)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
::-webkit-scrollbar{width:10px;height:8px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:#cfc6b5;border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}
body.locked{overflow:hidden}

/* ---------- 3. UTILITIES ---------- */
.container{width:min(1360px,92%);margin-inline:auto}
.section{padding:clamp(56px,6.5vw,96px) 0;position:relative}
.section.tight{padding-top:0}
.eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-size:.66rem;font-weight:500;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);margin-bottom:20px;
}
.eyebrow::before{content:"";width:38px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.eyebrow.center-line::after{content:"";width:38px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.h2{
  font-family:var(--font-d);font-weight:500;
  font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.08;margin-bottom:16px;
  letter-spacing:.01em;
}
.h2 em{font-style:italic;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-lead{color:var(--muted);max-width:560px;font-size:.98rem;font-weight:300}
.section-head{margin-bottom:clamp(30px,4vw,48px)}
.section-head.center{text-align:center}
.section-head.center .section-lead{margin-inline:auto}
.section-head.split{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap}

/* Noir band — inverted section */
.noir-band{background:var(--noir);color:var(--ivory-on-noir)}
.noir-band .h2 em{background:var(--grad-text-noir);-webkit-background-clip:text;background-clip:text;color:transparent}
.noir-band .section-lead{color:var(--muted-on-noir)}
.noir-band ::selection{background:rgba(201,164,92,.3)}

/* Buttons */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:17px 38px;font-weight:400;font-size:.72rem;
  letter-spacing:.3em;text-transform:uppercase;white-space:nowrap;
  transition:transform var(--t),box-shadow var(--t),background var(--t),color var(--t),border-color .4s;
  overflow:hidden;border-radius:0;
}
.btn-noir{background:var(--ink);color:var(--gold-3)}
.btn-noir::after,.btn-gold::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-140%);transition:transform 1s var(--ease);
}
.btn-noir:hover,.btn-gold:hover{transform:translateY(-3px);box-shadow:var(--sh-m)}
.btn-noir:hover::after,.btn-gold:hover::after{transform:translateX(140%)}
.btn-gold{background:var(--grad);background-size:200% 200%;color:#171106;animation:gradShift 8s ease infinite;box-shadow:var(--glow)}
.btn-line{border:1px solid var(--line);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--gold);color:var(--gold-deep);transform:translateY(-3px)}
.btn-line.on-noir{border-color:var(--line-noir);color:var(--ivory-on-noir)}
.btn-line.on-noir:hover{border-color:var(--gold-2);color:var(--gold-3)}
.btn.sm{padding:12px 24px;font-size:.64rem}
.btn-underline{
  display:inline-flex;align-items:center;gap:10px;padding:6px 0;
  font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;font-weight:500;
  border-bottom:1px solid var(--line);transition:border-color .4s,gap .4s var(--ease),color .4s;
}
.btn-underline:hover{border-color:var(--gold);color:var(--gold-deep);gap:16px}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* Reveal system */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-scale{opacity:0;transform:scale(.94) translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal-scale.in{opacity:1;transform:none}
.reveal-blur{opacity:0;filter:blur(14px);transform:translateY(24px);transition:opacity 1.1s var(--ease),filter 1.1s var(--ease),transform 1.1s var(--ease)}
.reveal-blur.in{opacity:1;filter:blur(0);transform:none}
.reveal-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease)}
.reveal-img.in{clip-path:inset(0 0 0% 0)}
[data-delay="1"]{transition-delay:.09s}[data-delay="2"]{transition-delay:.18s}
[data-delay="3"]{transition-delay:.27s}[data-delay="4"]{transition-delay:.36s}
[data-delay="5"]{transition-delay:.45s}[data-delay="6"]{transition-delay:.54s}

@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(171,133,68,.4)}70%{box-shadow:0 0 0 14px rgba(171,133,68,0)}100%{box-shadow:0 0 0 0 rgba(171,133,68,0)}}
@keyframes pop{40%{transform:scale(1.5)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes spinSlow{to{transform:rotate(360deg)}}

/* ---------- 4. LOADER ---------- */
.loader{
  position:fixed;inset:0;z-index:1000;background:var(--noir);
  display:grid;place-items:center;
  transition:opacity .9s var(--ease),visibility .9s;
}
.loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader-inner{text-align:center;color:var(--ivory-on-noir)}
.loader-mono{
  width:92px;height:92px;margin:0 auto 26px;border:1px solid rgba(201,164,92,.5);border-radius:50%;
  display:grid;place-items:center;position:relative;
  font-family:var(--font-d);font-size:1.7rem;font-weight:600;letter-spacing:.1em;color:var(--gold-3);
  animation:loaderGlow 2.4s ease-in-out infinite;
}
.loader-mono::before{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  border:1px solid transparent;border-top-color:var(--gold-2);
  animation:spinSlow 2.2s linear infinite;
}
@keyframes loaderGlow{0%,100%{box-shadow:0 0 24px -8px rgba(201,164,92,.35)}50%{box-shadow:0 0 54px -6px rgba(201,164,92,.65)}}
.loader-name{font-family:var(--font-d);font-size:1rem;letter-spacing:.55em;text-transform:uppercase;text-indent:.55em;margin-bottom:4px}
.loader-sub{font-size:.56rem;letter-spacing:.6em;text-transform:uppercase;text-indent:.6em;color:var(--gold-2)}
.loader-bar{width:180px;height:1px;background:rgba(233,213,164,.14);margin:26px auto 0;overflow:hidden}
.loader-bar i{display:block;height:100%;width:0;background:var(--grad);box-shadow:0 0 14px rgba(201,164,92,.8);transition:width .4s ease}

/* ---------- 5. LUXURY CURSOR (pointer:fine only) ---------- */
.cursor-dot,.cursor-ring{display:none}
@media(pointer:fine){
  .cursor-dot{
    display:block;position:fixed;top:0;left:0;z-index:1200;width:6px;height:6px;border-radius:50%;
    background:var(--gold);pointer-events:none;transform:translate(-50%,-50%);
    transition:opacity .3s;
  }
  .cursor-ring{
    display:block;position:fixed;top:0;left:0;z-index:1199;width:34px;height:34px;border-radius:50%;
    border:1px solid rgba(171,133,68,.55);pointer-events:none;transform:translate(-50%,-50%);
    transition:width .35s var(--ease),height .35s var(--ease),border-color .3s,opacity .3s,background .3s;
  }
  .cursor-ring.hovering{width:56px;height:56px;border-color:rgba(171,133,68,.9);background:rgba(171,133,68,.06)}
  body.cursor-hidden .cursor-dot,body.cursor-hidden .cursor-ring{opacity:0}
}

/* ---------- 6. HEADER ---------- */
.topbar{
  background:var(--noir);color:var(--gold-3);
  font-size:.6rem;letter-spacing:.38em;text-transform:uppercase;text-align:center;
  padding:9px 14px;font-weight:400;
  max-height:44px;overflow:hidden;
  transition:max-height .5s var(--ease),padding .5s var(--ease),opacity .4s;
}
.topbar b{color:#fff;font-weight:500}
.header.scrolled .topbar{max-height:0;padding-block:0;opacity:0}
.header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  transition:transform .55s var(--ease),background .45s,box-shadow .45s,border-color .45s;
  border-bottom:1px solid transparent;
}
.header.on-hero{color:var(--ivory-on-noir)}
.header.scrolled{
  background:rgba(250,248,243,.82);color:var(--ink);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  border-color:var(--line-soft);box-shadow:0 14px 40px -26px rgba(23,19,14,.4);
}
.header.hidden{transform:translateY(-110%)}
.nav{display:flex;align-items:center;gap:20px;height:var(--header-h)}
.logo{display:flex;align-items:center;gap:14px}
.logo-mark{
  width:44px;height:44px;border:1px solid var(--gold);border-radius:50%;flex:none;
  display:grid;place-items:center;color:var(--gold-2);position:relative;
  font-family:var(--font-d);font-size:.95rem;font-weight:600;letter-spacing:.05em;
}
.logo-mark::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid rgba(171,133,68,.3);border-top-color:transparent;border-left-color:transparent;
  animation:spinSlow 16s linear infinite;
}
.logo-name{font-family:var(--font-d);font-weight:600;font-size:1rem;letter-spacing:.3em;line-height:1.25;white-space:nowrap}
.logo-name small{display:block;font-family:var(--font-b);font-weight:400;font-size:.5rem;letter-spacing:.52em;color:var(--gold);text-transform:uppercase}
.menu{display:flex;gap:0;margin-inline:auto}
.menu>a,.menu>button{
  position:relative;padding:12px 15px;font-weight:400;font-size:.7rem;
  letter-spacing:.24em;text-transform:uppercase;transition:color .3s;color:inherit;opacity:.82;
}
.menu>a::after,.menu>button::after{
  content:"";position:absolute;left:15px;right:15px;bottom:6px;height:1px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.menu>a:hover,.menu>button:hover{opacity:1;color:var(--gold-2)}
.header.scrolled .menu>a:hover,.header.scrolled .menu>button:hover{color:var(--gold-deep)}
.menu>a:hover::after,.menu>button:hover::after{transform:scaleX(1)}
.nav-actions{display:flex;align-items:center;gap:0}
.icon-btn{
  position:relative;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;transition:background .3s,transform .3s var(--ease),color .3s;
}
.icon-btn:hover{background:rgba(171,133,68,.12);color:var(--gold-2);transform:translateY(-2px)}
.header.scrolled .icon-btn:hover{color:var(--gold-deep)}
.icon-btn svg{width:19px;height:19px}
.count-dot{
  position:absolute;top:2px;right:0;min-width:16px;height:16px;padding:0 4px;
  background:var(--grad);color:#171106;font-size:.58rem;font-weight:600;
  border-radius:100px;display:grid;place-items:center;
}
.count-dot.pop{animation:pop .45s var(--ease)}
.mini-select{
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:400;
  padding:8px 4px;cursor:pointer;color:inherit;opacity:.8;
}
.mini-select option{background:var(--porcelain);color:var(--ink);letter-spacing:.05em}
.burger{display:none;flex-direction:column;gap:5px;width:42px;height:42px;align-items:center;justify-content:center}
.burger span{width:20px;height:1.4px;background:currentColor;transition:transform .35s var(--ease),opacity .3s}
.burger.open span:nth-child(1){transform:translateY(6.4px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.4px) rotate(-45deg)}

/* Mega menu */
.mega{
  position:absolute;top:100%;left:0;right:0;
  background:rgba(250,248,243,.97);color:var(--ink);
  backdrop-filter:blur(24px);border-bottom:1px solid var(--line);
  box-shadow:0 40px 80px -30px rgba(23,19,14,.35);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;
}
.mega.open{opacity:1;visibility:visible;transform:none}
.mega-grid{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:44px;padding:44px 0 50px}
.mega h5{font-size:.6rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;font-weight:500}
.mega-col a,.mega-col button{
  display:block;padding:6px 0;font-family:var(--font-d);font-size:1.12rem;font-weight:500;
  color:var(--ink-2);transition:color .3s,transform .35s var(--ease);text-align:left;width:100%;
}
.mega-col a:hover,.mega-col button:hover{color:var(--gold-deep);transform:translateX(8px)}
.mega-feature{position:relative;overflow:hidden;min-height:250px;background:var(--paper-2)}
.mega-feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.mega-feature:hover img{transform:scale(1.06)}
.mega-feature .mf-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(13,11,9,.75))}
.mega-feature .mf-txt{position:absolute;left:22px;bottom:20px;color:#fff}
.mega-feature .mf-txt b{display:block;font-family:var(--font-d);font-size:1.4rem;font-weight:500}
.mega-feature .mf-txt span{font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-3)}

/* ---------- 7. HERO ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--header-h) + 126px) 0 110px;overflow:hidden;
  background:var(--noir);color:var(--ivory-on-noir);
}
.hero-bg{position:absolute;inset:-6%;z-index:0;will-change:transform}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.5;filter:saturate(.82) contrast(1.05)}
.hero-shade{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(105deg,rgba(13,11,9,.94) 8%,rgba(13,11,9,.55) 52%,rgba(13,11,9,.35) 100%),
    linear-gradient(180deg,rgba(13,11,9,.55),transparent 30%,transparent 60%,var(--noir) 100%);
}
.hero-grain{
  position:absolute;inset:0;z-index:2;opacity:.05;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-inner{position:relative;z-index:4;max-width:820px}
.hero-kicker{
  display:inline-flex;align-items:center;gap:14px;margin-bottom:28px;
  font-size:.62rem;letter-spacing:.5em;text-transform:uppercase;color:var(--gold-3);
  opacity:0;animation:fadeUp 1s var(--ease) .25s forwards;
}
.hero-kicker::before,.hero-kicker::after{content:"";width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-2))}
.hero-kicker::after{background:linear-gradient(90deg,var(--gold-2),transparent)}
.hero h1{
  font-family:var(--font-d);font-weight:500;
  font-size:clamp(3rem,8vw,6.4rem);line-height:1.02;margin-bottom:30px;letter-spacing:.01em;
}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .line span{display:block;transform:translateY(112%);animation:riseUp 1.3s var(--ease) forwards}
.hero h1 .line:nth-child(2) span{animation-delay:.15s}
.hero h1 .line:nth-child(3) span{animation-delay:.3s}
@keyframes riseUp{to{transform:none}}
.hero h1 em{
  font-style:italic;background:var(--grad-text-noir);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:gradShift 6s ease infinite;
}
.hero-sub{
  color:var(--muted-on-noir);font-size:clamp(.96rem,1.25vw,1.1rem);max-width:520px;
  margin-bottom:42px;opacity:0;animation:fadeUp 1s var(--ease) .55s forwards;font-weight:300;
}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:56px;opacity:0;animation:fadeUp 1s var(--ease) .7s forwards}
.hero-stats{display:flex;gap:clamp(30px,4.5vw,60px);flex-wrap:wrap;opacity:0;animation:fadeUp 1s var(--ease) .85s forwards}
.hero-stat .num{font-family:var(--font-d);font-weight:600;font-size:2rem;color:var(--gold-3)}
.hero-stat .lbl{font-size:.62rem;color:var(--muted-on-noir);letter-spacing:.3em;text-transform:uppercase;margin-top:2px}
.hero-particles{position:absolute;inset:0;z-index:3;pointer-events:none}
.hero-particles i{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:rgba(233,213,164,.7);box-shadow:0 0 8px rgba(233,213,164,.9);
  animation:particle 11s linear infinite;
}
@keyframes particle{
  0%{transform:translateY(20px) scale(.4);opacity:0}
  12%{opacity:.9}
  88%{opacity:.5}
  100%{transform:translateY(-92vh) scale(1);opacity:0}
}
.scroll-hint{
  position:absolute;left:50%;bottom:34px;z-index:5;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-size:.56rem;letter-spacing:.5em;text-transform:uppercase;color:var(--muted-on-noir);
  opacity:0;animation:fadeUp 1s var(--ease) 1.4s forwards;
}
.scroll-hint::after{
  content:"";width:1px;height:52px;
  background:linear-gradient(180deg,var(--gold-2),transparent);
  animation:scrollLine 2.2s var(--ease) infinite;transform-origin:top;
}
@keyframes scrollLine{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ---------- 8. MARQUEE ---------- */
.marquee{
  border-block:1px solid var(--line-noir);padding:24px 0;overflow:hidden;
  background:var(--noir);color:var(--ivory-on-noir);position:relative;z-index:2;
}
.marquee-track{display:flex;gap:70px;width:max-content;animation:marquee 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.mq-item{
  font-family:var(--font-d);font-weight:500;font-size:1.2rem;letter-spacing:.34em;
  text-transform:uppercase;color:rgba(243,236,224,.4);white-space:nowrap;
  display:flex;align-items:center;gap:70px;transition:color .3s;
}
.mq-item::after{content:"✦";color:var(--gold);font-size:.65rem}
.marquee .mq-item:hover{color:var(--gold-3)}

/* ---------- 9. SHOP BY CATEGORY ----------
   Mozaik me zona të emërtuara — paketohet gjithmonë plot, pa vrima */
.cat-grid{
  display:grid;gap:14px;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;
  grid-template-areas:
    "a a b b"
    "a a c d";
}
.cat-card{
  position:relative;overflow:hidden;background:var(--paper-2);cursor:pointer;text-align:left;
  transition:box-shadow .6s var(--ease),transform .6s var(--ease);
}
.cat-card:nth-child(1){grid-area:a}
.cat-card:nth-child(2){grid-area:b}
.cat-card:nth-child(3){grid-area:c}
.cat-card:nth-child(4){grid-area:d}
.cat-card:nth-child(5){grid-area:e}
.cat-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.3s var(--ease),filter .8s;filter:saturate(.85);
}
.cat-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,11,9,.05) 30%,rgba(13,11,9,.72));
  transition:background .6s;
}
.cat-card:hover{transform:translateY(-6px);box-shadow:var(--sh-l)}
.cat-card:hover img{transform:scale(1.09);filter:saturate(1.05)}
.cat-label{
  position:absolute;left:22px;bottom:18px;right:22px;z-index:2;color:#fff;
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
}
.cat-label b{font-family:var(--font-d);font-weight:500;font-size:clamp(1.2rem,1.7vw,1.6rem);line-height:1.1}
.cat-label small{display:block;font-family:var(--font-b);font-size:.56rem;letter-spacing:.36em;text-transform:uppercase;color:var(--gold-3);margin-top:3px}
.cat-arrow{
  width:36px;height:36px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  display:grid;place-items:center;transition:all .5s var(--ease);opacity:0;transform:translateX(-8px);
}
.cat-card:hover .cat-arrow{opacity:1;transform:none;background:var(--grad);border-color:transparent;color:#171106}
.cat-arrow svg{width:14px;height:14px}
.cat-fallback{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(55% 45% at 50% 40%,rgba(171,133,68,.2),transparent 70%),var(--noir-3);color:var(--gold-2)}
.cat-fallback svg{width:52px;height:52px;opacity:.7}

/* Gender editorial duo */
.gender-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.g-card{
  position:relative;overflow:hidden;height:min(560px,60vw);cursor:pointer;text-align:left;
  transition:box-shadow .6s var(--ease);
}
.g-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease);filter:saturate(.85)}
.g-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(13,11,9,.8))}
.g-card:hover{box-shadow:var(--sh-l)}
.g-card:hover img{transform:scale(1.07)}
.g-label{position:absolute;left:0;right:0;bottom:34px;z-index:2;text-align:center;color:#fff}
.g-label span{font-size:.6rem;letter-spacing:.44em;text-transform:uppercase;color:var(--gold-3)}
.g-label b{display:block;font-family:var(--font-d);font-weight:500;font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:.3em;text-indent:.3em;margin-top:4px}
.g-label .g-cta{
  display:inline-block;margin-top:14px;padding-bottom:5px;font-size:.62rem;letter-spacing:.34em;
  text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.5);
  opacity:0;transform:translateY(10px);transition:all .5s var(--ease);
}
.g-card:hover .g-cta{opacity:1;transform:none}

/* ---------- 10. BRAND WALL (18 = 6×3) ---------- */
.brand-wall{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.bw-cell{
  position:relative;background:var(--porcelain);min-height:150px;
  display:grid;place-items:center;padding:26px 18px;overflow:hidden;cursor:pointer;
  transition:background .5s;
}
.bw-cell::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s;
  background:radial-gradient(260px 170px at 50% 100%,rgba(171,133,68,.14),transparent 70%);
}
.bw-cell:hover{background:#fff}
.bw-cell:hover::before{opacity:1}
.bw-name{
  position:relative;color:var(--ink-2);text-align:center;transition:transform .5s var(--ease),color .4s;
  font-size:1.05rem;white-space:nowrap;
}
.bw-serif .bw-name{font-family:var(--font-d);font-weight:600;letter-spacing:.3em;text-transform:uppercase;font-size:1.15rem}
.bw-caps .bw-name{font-family:var(--font-b);font-weight:500;letter-spacing:.38em;text-transform:uppercase;font-size:.8rem}
.bw-wide .bw-name{font-family:var(--font-b);font-weight:300;letter-spacing:.5em;text-transform:uppercase;font-size:.82rem}
.bw-cell:hover .bw-name{transform:translateY(-12px);color:var(--ink)}
.bw-meta{
  position:absolute;left:0;right:0;bottom:20px;text-align:center;
  font-size:.56rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);
  opacity:0;transform:translateY(10px);transition:all .5s var(--ease) .05s;
}
.bw-cell:hover .bw-meta{opacity:1;transform:none}
.bw-cell.active{background:#fff}
.bw-cell.active .bw-name{color:var(--gold-deep)}
.bw-cell::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--grad);transform:scaleX(0);transition:transform .5s var(--ease);
}
.bw-cell:hover::after,.bw-cell.active::after{transform:scaleX(1)}

/* ---------- 11. COLLECTION TABS ---------- */
.coll-tabs{display:flex;gap:6px;flex-wrap:wrap}
.coll-tab{
  padding:12px 26px;font-size:.66rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);border:1px solid transparent;transition:all .4s var(--ease);
}
.coll-tab:hover{color:var(--ink)}
.coll-tab.active{border-color:var(--ink);color:var(--ink)}
.coll-row{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px)/4);
  gap:20px;overflow-x:auto;padding:8px 4px 22px;scroll-snap-type:x mandatory;
  scrollbar-width:thin;
}
.coll-row>*{scroll-snap-align:start}

/* ---------- 12. SHOP BAR ---------- */
.shop-bar{display:flex;flex-direction:column;gap:18px;margin-bottom:38px}
.shop-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.shop-row.right{justify-content:space-between}
.filter-pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{
  padding:11px 22px;font-size:.64rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line-soft);background:var(--porcelain);
  transition:all .4s var(--ease);
}
.pill:hover{color:var(--ink);border-color:var(--line);transform:translateY(-2px)}
.pill.active{background:var(--ink);color:var(--gold-3);border-color:var(--ink)}
.lux-select{
  padding:12px 16px;border:1px solid var(--line);background:var(--porcelain);
  font-size:.64rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);cursor:pointer;transition:border-color .3s;
}
.lux-select:hover{border-color:var(--gold)}
.lux-select option{background:var(--porcelain);color:var(--ink)}
.result-count{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--faint)}
.result-count b{color:var(--gold-deep);font-weight:500}