/* ===================================================================
   FASHION HOUSE v2 — "Porcelain & Terra" design system
   Fraunces + Archivo · one light theme · zero radius signature
   =================================================================== */
:root{
  --paper:   #FBFAF7;
  --sand:    #F2EEE7;
  --line:    #E3DCD1;
  --ink:     #1B1916;
  --body:    #433E36;
  --mineral: #8A7D6C;
  --terra:   #9C4A32;
  --terra-d: #7E3A27;
  --ok:      #4A6B4F;
  --sans:'Archivo',system-ui,-apple-system,Segoe UI,sans-serif;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
  --maxw:1400px; --header-h:84px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--body);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:340;line-height:1.04;color:var(--ink);letter-spacing:-.015em}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* utility */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,4vw,64px)}
.eyebrow{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--mineral)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:16px 32px;border:1px solid var(--ink);color:var(--ink);background:transparent;transition:all .4s var(--ease);text-align:center}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:transparent;color:var(--ink)}
.btn--block{width:100%}
.btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none;flex:0 0 auto}
.btn[data-wish]{padding-inline:16px}
.btn[data-wish].is-on svg{fill:var(--terra);stroke:var(--terra)}
.link-underline{position:relative;font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
.link-underline::after{content:"";position:absolute;left:0;bottom:-5px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.link-underline:hover::after{transform:scaleX(1);transform-origin:left}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* reveal on scroll — item 6 fix (05.09): elements are visible/static by
   default. Only content JS determines is genuinely BELOW the fold at load
   gets the ".is-pending" hidden pre-state + fade-up; above-the-fold content
   never receives it, so it paints correctly on the very first frame. See
   initReveal() in app.js for why (root cause of the load flicker/jump). */
.reveal.is-pending{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-pending.in{opacity:1;transform:none}
.reveal.is-pending[data-d="1"]{transition-delay:.08s}.reveal.is-pending[data-d="2"]{transition-delay:.16s}.reveal.is-pending[data-d="3"]{transition-delay:.24s}

/* ============ ANNOUNCEMENT (static, single line on desktop) ============
   Round 4 (06.09.2026) fix — item 2, "доставка с еконт... смачкано е" on
   mobile: measured (Playwright, real viewport widths) that this line only
   fits on one line above ~590-600px container width; every phone width
   (320-430px tested) wraps to 2 lines. The old rule locked the row to a
   fixed height:34px sized for ONE line only, so once it wrapped, the
   flex-centered 2-line text (~37px tall) no longer fit inside the 34px
   band — it got pushed ~1.4px above the bar's own top (nothing to clip
   against there, since it's the first element on the page) AND ~1.4px
   into the header's territory below (visually swallowed by the header's
   opaque background, since the header paints after/on top) — the two
   lines also had no breathing room (default line-height), so they sat
   almost touching. Net effect on any phone width: a visibly squashed
   2-line block. Desktop/most tablets (>~600px) never wrapped, so round 2's
   testing never caught it. Fix: switch the fixed height to min-height (no
   visual change at all when content is one line, i.e. desktop/tablet)
   and, only below the width where wrapping actually starts, let the row
   grow to fit both lines with real padding + line-height instead of
   forcing them into an undersized box. */
.announce{background:var(--ink);color:var(--paper);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.announce .container{display:flex;align-items:center;justify-content:center;min-height:34px}
.announce__line{opacity:.92}
@media (max-width:640px){
  .announce .container{height:auto;padding-block:9px}
  .announce__line{display:inline-block;line-height:1.45}
}

/* ============ HEADER ============ */
.header{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line)}
.header__bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--header-h)}
.nav{display:flex;align-items:center;gap:30px}
.nav--right{justify-content:flex-end}
.nav__item{position:relative}
.nav__link{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;padding:32px 2px;color:var(--ink);transition:color .3s}
.nav__link .tick{width:5px;height:5px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s;opacity:.55}
.nav__item:hover .nav__link{color:var(--mineral)}
.nav__item:hover .tick{transform:rotate(225deg) translateY(-1px)}
.nav__link--sale{color:var(--terra)}
.brand{font-family:var(--serif);font-weight:340;font-size:26px;line-height:1;letter-spacing:-.01em;text-align:center;color:var(--ink);white-space:nowrap}
.icons{display:flex;align-items:center;gap:20px}
.icon-btn{position:relative;display:inline-flex;color:var(--ink);transition:opacity .3s}
.icon-btn:hover{opacity:.55}
.icon-btn svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.5;fill:none}
.icon-btn .count{position:absolute;top:-7px;right:-9px;min-width:16px;height:16px;padding:0 4px;background:var(--ink);color:var(--paper);border-radius:9px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:var(--sans)}
.icon-btn .count:empty,.icon-btn .count[data-c="0"]{display:none}
.burger{display:none}

/* MEGA MENU */
.mega{position:absolute;left:0;top:100%;width:min(760px,86vw);background:var(--paper);border:1px solid var(--line);border-top:2px solid var(--ink);padding:36px 40px;display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:34px;opacity:0;visibility:hidden;transform:translateY(10px);transition:all .35s var(--ease);box-shadow:0 24px 60px -30px rgba(27,25,22,.25);z-index:70}
.nav__item--mega:hover .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega__col h4{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mineral);margin-bottom:16px}
.mega__col a{display:block;font-size:13.5px;color:var(--body);padding:6px 0;transition:color .25s,padding-left .25s}
.mega__col a:hover{color:var(--ink);padding-left:6px}
.mega__promo{position:relative;overflow:hidden;min-height:230px;display:flex;align-items:flex-end;padding:20px;color:var(--paper)}
.mega__promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.mega__promo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(27,25,22,.7),rgba(27,25,22,.05));z-index:1}
.mega__promo .p{position:relative;z-index:2}
.mega__promo .eyebrow{color:rgba(251,250,247,.8)}
.mega__promo strong{display:block;font-family:var(--serif);font-weight:340;font-size:22px;margin:6px 0 12px}

/* ============ HERO ============ */
.hero{position:relative;height:min(78svh,760px);min-height:480px;overflow:hidden;background:var(--sand)}
.hero__slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .8s var(--ease),visibility .8s;z-index:0}
.hero__slide.is-active{opacity:1;visibility:visible;z-index:1}
.hero__slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;transform:scale(1.05);transition:transform 7s ease-out}
.hero__slide.is-active img{transform:scale(1)}
.hero__slide::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(251,250,247,.94) 0%,rgba(251,250,247,.8) 32%,rgba(251,250,247,.28) 62%,transparent 88%)}
.hero__inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.hero__eyebrow,.hero__title,.hero__text,.hero__cta{max-width:540px}
.hero__eyebrow{margin-bottom:20px}
.hero__title{font-size:clamp(44px,7vw,76px);font-weight:340;line-height:.98;letter-spacing:-.02em;margin-bottom:20px;color:var(--ink)}
.hero__text{font-size:15.5px;max-width:400px;margin-bottom:32px;line-height:1.6;color:var(--body)}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.hero__nav{position:absolute;z-index:5;bottom:28px;right:clamp(20px,4vw,64px);display:flex;align-items:center;gap:26px}
.hero__index{display:flex;gap:20px}
.hero__idx{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(27,25,22,.45);display:flex;align-items:center;gap:8px;transition:color .35s}
.hero__idx b{font-family:var(--serif);font-weight:340;font-size:15px}
.hero__idx.is-active{color:var(--ink)}
.hero__idx .bar{width:26px;height:1px;background:currentColor;opacity:.45}
.hero__idx.is-active .bar{opacity:1}
.hero__arrows{display:flex;gap:8px}
.hero__arrow{width:44px;height:44px;border:1px solid rgba(27,25,22,.35);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:all .3s}
.hero__arrow:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.hero__arrow svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none}

/* ============ SECTION SHELL ============ */
.section{padding-block:clamp(64px,9vw,128px)}
.section--sand{background:var(--sand)}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(30px,4vw,52px)}
.section__title{font-size:clamp(28px,4vw,42px);font-weight:340}
.section__head .eyebrow{margin-bottom:14px;display:block}

/* ============ CATEGORY STRIP ============ */
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;background:var(--line)}
.cat{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--sand);display:flex;align-items:flex-end;justify-content:center;padding-bottom:22px}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);filter:saturate(.97)}
.cat:hover img{transform:scale(1.04)}
.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(27,25,22,.5),transparent 55%);transition:background .4s}
.cat:hover::after{background:linear-gradient(0deg,rgba(27,25,22,.64),transparent 60%)}
.cat span{position:relative;z-index:2;color:var(--paper);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}

/* ============ PRODUCT CAROUSEL / GRID / CARD ============ */
.carousel{position:relative}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(220px,23vw,300px);gap:clamp(14px,2vw,32px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
.track::-webkit-scrollbar{display:none}
.grid-products{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,32px)}
.card{scroll-snap-align:start;position:relative;background:transparent}
.card__media{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--sand);margin-bottom:16px}
.card__media a{display:block;height:100%}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),opacity .5s}
.card:hover .card__media img{transform:scale(1.045)}
.card__tag{position:absolute;top:12px;left:12px;z-index:3;background:var(--paper);color:var(--ink);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px}
.card__tag--sale{background:var(--terra);color:#fff}
.card__wish{position:absolute;top:10px;right:10px;z-index:3;width:36px;height:36px;border-radius:50%;background:rgba(251,250,247,.9);display:flex;align-items:center;justify-content:center;transition:background .3s,transform .3s}
.card__wish svg{width:18px;height:18px;stroke:var(--ink);stroke-width:1.5;fill:none;transition:fill .3s,stroke .3s}
.card__wish:hover{background:var(--paper);transform:scale(1.06)}
.card__wish.is-on svg{fill:var(--terra);stroke:var(--terra)}
.card__quick{position:absolute;left:0;right:0;bottom:0;z-index:3;background:var(--ink);color:var(--paper);text-align:center;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:14px;transform:translateY(101%);transition:transform .4s var(--ease);display:flex;align-items:center;justify-content:center;gap:9px}
.card:hover .card__quick{transform:translateY(0)}
.card__quick svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none}
.card__cat{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mineral);font-weight:700;margin-bottom:5px}
.card__name{font-family:var(--sans);font-weight:500;font-size:16px;color:var(--ink);margin-bottom:8px;line-height:1.25}
.card__row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card__price{font-size:14px;font-weight:600;color:var(--ink)}
.card__price s{color:var(--mineral);font-weight:400;margin-right:7px}
.card__price .new{color:var(--terra)}
.card__dots{display:flex;gap:6px}
.card__dots i{width:12px;height:12px;border-radius:50%;border:1px solid var(--line);display:inline-block}
.car-arrows{display:flex;gap:8px}
.car-arrow{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:all .3s}
.car-arrow:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.car-arrow:disabled{opacity:.3;cursor:default}
.car-arrow:disabled:hover{background:none;color:var(--ink);border-color:var(--line)}
.car-arrow svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.7;fill:none}

/* ============ CATEGORY DUO BANNER ============ */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.duo__tile{position:relative;overflow:hidden;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;padding:40px;text-align:center}
.duo__tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.duo__tile:hover img{transform:scale(1.04)}
.duo__tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(251,250,247,.62),rgba(251,250,247,.18))}
.duo__in{position:relative;z-index:2;max-width:320px}
.duo__label{font-family:var(--serif);font-weight:340;font-size:clamp(34px,4.6vw,58px);line-height:1;margin-bottom:20px;color:var(--ink)}
.duo__in .btn{position:relative;z-index:3}

/* ============ USP ============ */
/* item 14 (05.09): "Доставка с Еконт" tile read as cramped — the icon sat
   directly against the text with only a 16px gap and no dedicated space
   of its own, so icon and copy visually collided. Fix: give the icon a
   proper circular badge (its own breathing room, consistent with the
   site's other icon-badge treatments e.g. .card__wish/.footer__soc)
   instead of a bare inline glyph, and widen the row's own padding/gap. */
.usps{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.usp{display:flex;align-items:center;gap:20px;padding:38px clamp(22px,3vw,48px);border-right:1px solid var(--line)}
.usp:last-child{border-right:0}
.usp__ico{flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:var(--sand);display:flex;align-items:center;justify-content:center}
.usp svg{width:23px;height:23px;stroke:var(--ink);stroke-width:1.3;fill:none;flex:0 0 auto}
.usp h4{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-bottom:5px}
.usp p{font-size:12.5px;color:var(--mineral);line-height:1.4}

/* ============ INSTAGRAM ============ */
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2px}
.ig{position:relative;aspect-ratio:1;overflow:hidden;background:var(--sand)}
.ig img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.ig:hover img{transform:scale(1.07)}
.ig::after{content:"";position:absolute;inset:0;background:rgba(27,25,22,0);transition:background .4s}
.ig:hover::after{background:rgba(27,25,22,.3)}
.ig__ico{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .4s}
.ig:hover .ig__ico{opacity:1}
.ig__ico svg{width:26px;height:26px;stroke:var(--paper);stroke-width:1.5;fill:none}

/* ============ FOOTER ============ */
.footer{background:var(--sand);color:var(--body);border-top:1px solid var(--line);padding-top:clamp(48px,6vw,80px)}
.footer__top{display:grid;grid-template-columns:1.1fr .9fr .9fr .75fr .65fr;gap:40px;padding-bottom:48px}
.footer__brand .brand{color:var(--ink);text-align:left;font-size:24px}
.footer__brand p{font-size:13.5px;line-height:1.7;margin-top:16px;max-width:280px;color:var(--mineral)}
.footer__col h4{font-family:var(--sans);color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
.footer__col a{display:block;font-size:13.5px;padding:7px 0;color:var(--body);transition:color .25s,padding-left .25s}
.footer__col a:hover{color:var(--ink);padding-left:5px}
.footer__soc{display:flex;gap:12px;margin-top:8px}
.footer__soc a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s;padding:0}
.footer__soc a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.footer__soc svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.5;fill:none}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:24px;border-top:1px solid var(--line)}
.footer__legal{display:flex;gap:24px;flex-wrap:wrap;font-size:12.5px}
.footer__legal a:hover{color:var(--ink)}
.footer__pay{display:flex;align-items:center;gap:10px}
.pay-chip{height:26px;padding:0 12px;border:1px solid var(--line);display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--body)}
.footer__copy{text-align:center;font-size:12px;color:var(--mineral);padding-bottom:28px}
.footer__copy a{color:var(--body);border-bottom:1px solid var(--line)}
.footer__copy a:hover{color:var(--ink)}

/* ============ CART / WISH DRAWER ============ */
.scrim{position:fixed;inset:0;background:rgba(27,25,22,.5);z-index:90;opacity:0;visibility:hidden;transition:opacity .35s}
.scrim.is-open{opacity:1;visibility:visible}
.cart{position:fixed;top:0;right:0;bottom:0;width:min(92vw,420px);background:var(--paper);z-index:95;transform:translateX(100%);transition:transform .42s var(--ease);display:flex;flex-direction:column;box-shadow:0 24px 60px -30px rgba(27,25,22,.25)}
.cart.is-open{transform:translateX(0)}
.cart__head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--line)}
.cart__head h3{font-size:22px;font-weight:340}
.cart__head span{color:var(--mineral);font-size:13px}
.cart__close{width:34px;height:34px;color:var(--ink)}
.cart__close svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.6;fill:none}
.cart__body{flex:1;min-height:0;overflow-y:auto;padding:8px 24px}
.cart__empty{text-align:center;padding:60px 20px;color:var(--mineral)}
.cart__empty svg{width:40px;height:40px;stroke:var(--line);stroke-width:1.3;fill:none;margin:0 auto 16px}
.cart__empty p{font-size:14px;margin-bottom:22px}
.citem{display:grid;grid-template-columns:74px 1fr auto;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.citem__img{width:74px;height:98px;object-fit:cover;background:var(--sand)}
.citem__name{font-family:var(--serif);font-weight:340;font-size:15.5px;color:var(--ink);line-height:1.2;margin-bottom:4px}
.citem__meta{font-size:11.5px;color:var(--mineral);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.citem__qty{display:inline-flex;align-items:center;border:1px solid var(--line)}
.citem__qty button{width:28px;height:28px;font-size:15px;color:var(--ink);display:flex;align-items:center;justify-content:center}
.citem__qty button:hover{background:var(--sand)}
.citem__qty span{min-width:26px;text-align:center;font-size:13px;font-weight:600}
.citem__right{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between}
.citem__price{font-size:14px;font-weight:600;color:var(--ink)}
.citem__rm{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mineral);transition:color .25s}
.citem__rm:hover{color:var(--terra)}
.cart__foot{border-top:1px solid var(--line);padding:20px 24px 24px;background:var(--paper)}
.cart__promo{margin-bottom:14px;display:flex;gap:8px}
.cart__promo input{flex:1;min-width:0;width:auto;border:1px solid var(--line);background:var(--paper);padding:11px 12px;font-family:var(--sans);font-size:13px;color:var(--ink)}
.cart__promo .btn{flex:0 0 auto;padding:11px 18px;font-size:11px;white-space:nowrap}
.cart__promo-on{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--body)}
.cart__promo-on button{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--mineral)}
.cart__promo-on button:hover{color:var(--terra)}
.cart__lines{margin:14px 0}
.cline{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--body);padding:5px 0}
.cline--disc span:last-child{color:var(--terra)}
.cart__sum{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px}
.cart__sum span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mineral);font-weight:600}
.cart__sum b{font-family:var(--serif);font-weight:340;font-size:26px;color:var(--ink)}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:var(--ink);color:var(--paper);padding:14px 24px;font-size:13px;letter-spacing:.04em;z-index:120;opacity:0;visibility:hidden;transition:all .4s var(--ease);display:flex;align-items:center;gap:10px}
.toast.is-on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.toast svg{width:18px;height:18px;stroke:var(--paper);stroke-width:2;fill:none}

/* ============ MOBILE DRAWER (nav) ============ */
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(88vw,380px);background:var(--paper);z-index:95;transform:translateX(-100%);transition:transform .4s var(--ease);overflow-y:auto;padding:22px;display:block;box-shadow:0 24px 60px -30px rgba(27,25,22,.25)}
.drawer.is-open{transform:translateX(0)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.drawer__head .brand{font-size:21px}
.drawer__close{width:34px;height:34px;color:var(--ink)}
.drawer__close svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.6;fill:none}
.drawer__toggles{display:flex;gap:8px;margin-bottom:20px}
.drawer__toggles button{flex:1;padding:12px;border:1px solid var(--ink);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.drawer__toggles button.is-active{background:var(--ink);color:var(--paper)}
.drawer__panel{display:none}
.drawer__panel.is-active{display:block}
.drawer__panel a{display:block;font-size:15px;padding:11px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.drawer__acc{margin-top:22px;display:flex;gap:16px}
.drawer__acc a{flex:1;text-align:center;padding:13px;border:1px solid var(--line);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}

/* ============ SUBPAGE SCAFFOLD (slim head) ============ */
.pagehero{position:relative;padding-block:40px 16px;background:var(--paper)}
.pagehero__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.breadcrumb{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mineral);font-weight:600;margin-bottom:16px;display:flex;gap:10px;flex-wrap:wrap}
.breadcrumb a{transition:color .25s}
.breadcrumb a:hover{color:var(--ink)}
.pagehero__title{font-size:clamp(32px,4.6vw,50px);font-weight:340;line-height:1}
.pagehero__count{font-size:13px;color:var(--mineral);letter-spacing:.04em;white-space:nowrap}

.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.chip{padding:9px 18px;border:1px solid var(--line);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--paper);transition:all .3s;white-space:nowrap}
.chip:hover,.chip.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.toolbar__count{font-size:13px;color:var(--mineral);letter-spacing:.04em}
.toolbar__sort{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);font-weight:600}

/* product detail */
.pdp{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4vw,64px);align-items:start}
.pdp__gallery{display:grid;grid-template-columns:1fr;gap:10px}
.pdp__main{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--sand);cursor:zoom-in}
.pdp__main img{width:100%;height:100%;object-fit:cover}
.pdp__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pdp__thumb{aspect-ratio:3/4;overflow:hidden;background:var(--sand);cursor:pointer;border:1px solid transparent}
.pdp__thumb.is-active{border-color:var(--ink)}
.pdp__thumb img{width:100%;height:100%;object-fit:cover}
.pdp__info{position:sticky;top:calc(var(--header-h) + 20px)}
.pdp__cat{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mineral);font-weight:600;margin-bottom:12px}
.pdp__title{font-size:clamp(28px,4vw,40px);font-weight:340;line-height:1.05;margin-bottom:16px}
.pdp__price{font-size:22px;font-weight:600;color:var(--ink);margin-bottom:24px}
.pdp__price s{color:var(--mineral);font-weight:400;margin-right:10px}
.pdp__price .new{color:var(--terra)}
.pdp__opt{margin-bottom:24px}
.pdp__opt h4{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:12px;display:flex;justify-content:space-between}
.opt-row{display:flex;gap:10px;flex-wrap:wrap}
.opt-size{min-width:48px;height:48px;padding:0 12px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;transition:all .25s;color:var(--ink)}
.opt-size:hover{border-color:var(--ink)}
.opt-size.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.opt-color{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);cursor:pointer;position:relative}
.opt-color.is-active::after{content:"";position:absolute;inset:-5px;border:1px solid var(--ink);border-radius:50%}
.pdp__actions{display:flex;gap:12px;margin:8px 0 26px}
.pdp__share{display:flex;align-items:center;gap:16px;margin-bottom:26px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mineral)}
.pdp__share-btn{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:all .3s}
.pdp__share-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pdp__share-btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.6;fill:none}
.pdp__share-copy{width:auto;border-radius:0;padding:0 14px;gap:8px}
.pdp__fact{border-top:1px solid var(--line);padding-top:20px;margin-top:4px;font-size:13.5px;color:var(--body)}
.pdp__acc details{border-top:1px solid var(--line)}
.pdp__acc details:last-child{border-bottom:1px solid var(--line)}
.pdp__acc summary{list-style:none;cursor:pointer;padding:16px 0;font-family:var(--sans);font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px}
.pdp__acc summary::-webkit-details-marker{display:none}
.pdp__acc summary::after{content:"+";font-size:18px;color:var(--mineral);line-height:1}
.pdp__acc details[open] summary::after{content:"–"}
.pdp__acc p{padding:0 0 18px;color:var(--body);font-size:13.5px;line-height:1.7}
.pdp__acc a{color:var(--ink);border-bottom:1px solid var(--line)}
.pdp__acc a:hover{border-color:var(--ink)}

.empty-state{text-align:center;padding:clamp(60px,10vw,120px) 20px}
.empty-state svg{width:52px;height:52px;stroke:var(--line);stroke-width:1.2;fill:none;margin:0 auto 22px}
.empty-state h2{font-size:30px;font-weight:340;margin-bottom:12px}
.empty-state p{color:var(--mineral);margin-bottom:28px}

/* ============ CARD IMAGE SLIDER ============ */
.card__link{position:absolute;inset:0;display:block;z-index:1}
.card__imgs{position:absolute;inset:0}
.card__img{position:absolute;inset:0;opacity:0}
.card__img.is-active{opacity:1}
.card__cnav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:rgba(251,250,247,.9);color:var(--ink);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s,background .3s;z-index:4}
.card__media:hover .card__cnav{opacity:1}
.card__cnav--prev{left:10px}.card__cnav--next{right:10px}
.card__cnav:hover{background:var(--paper)}
.card__cnav svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none}
.card__idots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:4;opacity:0;transition:opacity .3s}
.card__media:hover .card__idots{opacity:1}
.card__idots i{width:6px;height:6px;border-radius:50%;background:rgba(251,250,247,.6);transition:background .3s}
.card__idots i.is-active{background:var(--paper)}
.grid-products .card__wish,.search__results .card__wish{width:42px;height:42px;top:12px;right:12px}
.grid-products .card__wish svg,.search__results .card__wish svg{width:21px;height:21px}
.listing-empty{grid-column:1/-1;text-align:center;padding:70px 20px;color:var(--mineral);font-size:15px}

/* ============ SEARCH POPUP ============ */
.search{position:fixed;inset:0;z-index:110;background:rgba(27,25,22,.5);opacity:0;visibility:hidden;transition:opacity .3s}
.search.is-open{opacity:1;visibility:visible}
.search__panel{background:var(--paper);padding:clamp(20px,3.4vw,38px) 0;max-height:90vh;overflow-y:auto;transform:translateY(-18px);transition:transform .38s var(--ease)}
.search.is-open .search__panel{transform:none}
.search__form{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--ink);padding-bottom:14px;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,4vw,64px)}
.search__ico{width:22px;height:22px;stroke:var(--mineral);stroke-width:1.6;fill:none;flex:0 0 auto}
.search__form input{flex:1;border:0;background:none;font-family:var(--serif);font-weight:340;font-size:clamp(20px,3vw,32px);color:var(--ink)}
.search__form input:focus{outline:none}
.search__form input::placeholder{color:var(--line)}
.search__close{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--mineral);white-space:nowrap}
.search__close:hover{color:var(--ink)}
.search__meta{max-width:var(--maxw);margin:16px auto 0;padding-inline:clamp(20px,4vw,64px);font-size:13px;color:var(--mineral);display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.search__meta a{color:var(--ink);border-bottom:1px solid var(--line)}
.search__results{max-width:var(--maxw);margin:26px auto 0;padding-inline:clamp(20px,4vw,64px)}
.search__results:empty{margin:0}
.search__empty{color:var(--mineral);padding:24px 0;font-size:15px}

/* ============ AUTH MODAL ============ */
.auth{position:fixed;inset:0;z-index:111;background:rgba(27,25,22,.5);opacity:0;visibility:hidden;transition:opacity .35s;display:flex;align-items:center;justify-content:center;padding:20px}
.auth.is-open{opacity:1;visibility:visible}
.auth__box{position:relative;background:var(--paper);width:min(94vw,420px);max-height:90vh;overflow-y:auto;padding:clamp(28px,4vw,44px) clamp(24px,3.6vw,40px) 32px;box-shadow:0 24px 60px -30px rgba(27,25,22,.35);transform:translateY(14px);transition:transform .38s var(--ease)}
.auth.is-open .auth__box{transform:translateY(0)}
.auth__close{position:absolute;top:16px;right:16px;width:34px;height:34px;color:var(--ink);display:flex;align-items:center;justify-content:center}
.auth__close svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.6;fill:none}
.auth__tabs{display:flex;gap:28px;border-bottom:1px solid var(--line);margin-bottom:24px;padding-right:34px}
.auth__tabs button{font-family:var(--serif);font-weight:340;font-size:19px;color:var(--mineral);padding-bottom:14px;position:relative;transition:color .25s}
.auth__tabs button.is-active{color:var(--ink)}
.auth__tabs button.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink)}
.auth__panel{display:none}
.auth__panel.is-active{display:block}
.auth__google{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--line);background:var(--paper);padding:13px 16px;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);transition:border-color .25s,background .25s}
.auth__google:hover{border-color:var(--ink);background:var(--sand)}
.auth__or{display:flex;align-items:center;gap:14px;margin:20px 0;color:var(--mineral);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.auth__or::before,.auth__or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth__form{display:flex;flex-direction:column;gap:16px}
.auth__form label{display:flex;flex-direction:column;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mineral)}
.auth__form input{font-family:var(--sans);font-size:14px;color:var(--ink);border:1px solid var(--line);background:var(--paper);padding:12px 14px;text-transform:none;letter-spacing:normal;font-weight:400}
.auth__form input:focus{outline:none;border-color:var(--ink)}
.auth__forgot{align-self:flex-end;font-size:12px;color:var(--mineral);margin-top:-8px;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.auth__forgot:hover{color:var(--ink);border-color:var(--ink)}
.auth__terms{font-size:11.5px;line-height:1.6;color:var(--mineral);margin-top:16px}
.auth__terms a{color:var(--body);border-bottom:1px solid var(--line)}
.auth__terms a:hover{color:var(--ink)}

/* ============ COOKIE BANNER ============ */
body.has-cookie-banner{padding-bottom:var(--cookie-space,120px)}
.cookie{position:fixed;left:50%;bottom:20px;transform:translate(-50%,150%);z-index:100;background:var(--ink);color:var(--paper);width:min(760px,94vw);padding:20px 24px;display:flex;align-items:center;gap:22px;box-shadow:0 24px 60px -30px rgba(27,25,22,.4);transition:transform .5s var(--ease);flex-wrap:wrap}
.cookie.is-on{transform:translate(-50%,0)}
.cookie p{font-size:13px;line-height:1.55;color:rgba(251,250,247,.85);flex:1;min-width:230px}
.cookie a{color:var(--paper);border-bottom:1px solid rgba(251,250,247,.4)}
.cookie__btns{display:flex;gap:10px}
.cookie .btn{padding:12px 20px;font-size:11px;border-color:rgba(251,250,247,.4);color:var(--paper)}
.cookie .btn:hover{background:var(--paper);color:var(--ink)}
.cookie .btn--solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cookie .btn--solid:hover{background:transparent;color:var(--paper)}

/* ============ LISTING FILTERS ============ */
.filters{display:flex;flex-wrap:wrap;gap:22px 40px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.filter-group{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.flabel{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--mineral)}
.swatch{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);position:relative;cursor:pointer;padding:0}
.swatch.is-active::after{content:"";position:absolute;inset:-4px;border:1px solid var(--ink);border-radius:50%}
.swatch--all{background:conic-gradient(#C9B79C,#6E5544,#1C1B19,#EFE9E0,#9A958C,#C9B79C)}
.pill{padding:8px 15px;border:1px solid var(--line);font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink);background:var(--paper);transition:all .25s;cursor:pointer;white-space:nowrap}
.pill:hover,.pill.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pill--sale.is-active{background:var(--terra);border-color:var(--terra);color:#fff}
.filters__clear{margin-left:auto;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--mineral);cursor:pointer}
.filters__clear:hover{color:var(--terra)}

/* ============ LEGAL / INFO PAGES ============ */
.legal{max-width:760px}
.legal h3{font-family:var(--serif);font-weight:340;font-size:22px;margin:32px 0 14px}
.legal h3:first-child{margin-top:0}
.legal p{font-size:15px;line-height:1.75;margin-bottom:16px;color:var(--body)}
.legal ul,.legal ol{margin:0 0 16px 20px;font-size:15px;line-height:1.75;color:var(--body)}
.legal li{margin-bottom:6px}
.legal a{color:var(--ink);border-bottom:1px solid var(--line)}
.legal a:hover{border-color:var(--ink)}

/* ============ FORMS (kontakti / vrashtane) ============ */
.formf{max-width:560px}
.formf label{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.formf .field{margin-bottom:20px}
.formf input[type=text],.formf input[type=email],.formf textarea,.formf select{width:100%;border:1px solid var(--line);background:var(--paper);padding:13px 14px;font-family:var(--sans);font-size:14px;color:var(--ink);transition:border-color .25s}
.formf input:focus,.formf textarea:focus,.formf select:focus{outline:none;border-color:var(--ink)}
.formf textarea{resize:vertical;min-height:120px}
.formf .radios{display:flex;gap:20px;flex-wrap:wrap}
.formf .radios label{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--body);cursor:pointer}
.formf .radios input{width:auto}

/* ============ VIEW TRANSITIONS ============ */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .32s var(--ease) both}
::view-transition-new(root){animation:vt-in .42s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
.header{view-transition-name:fh-header}
.announce{view-transition-name:fh-announce}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ============ CUSTOM SELECT (sort) ============ */
.fhselect{position:relative;min-width:236px}
.fhselect__btn{display:flex;align-items:center;gap:9px;width:100%;padding:12px 16px;border:1px solid var(--line);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.03em;color:var(--ink);transition:border-color .25s}
.fhselect__btn:hover{border-color:var(--ink)}
.fhselect__lbl{color:var(--mineral);text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;font-weight:700}
.fhselect__val{margin-right:auto}
.fhselect__chev{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .3s;flex:0 0 auto}
.fhselect.is-open .fhselect__chev{transform:rotate(180deg)}
.fhselect__list{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--paper);border:1px solid var(--ink);z-index:40;list-style:none;padding:6px;margin:0;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;box-shadow:0 24px 60px -30px rgba(27,25,22,.25)}
.fhselect.is-open .fhselect__list{opacity:1;visibility:visible;transform:none}
.fhselect__opt{padding:11px 12px;font-size:13px;color:var(--body);cursor:pointer;transition:background .2s,color .2s;display:flex;align-items:center;justify-content:space-between;gap:10px}
.fhselect__opt:hover{background:var(--sand);color:var(--ink)}
.fhselect__opt.is-active{color:var(--ink);font-weight:600}
.fhselect__opt.is-active::after{content:"";width:14px;height:14px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1916' stroke-width='2.4'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")}

/* ============ PDP ZOOM / LIGHTBOX (item 10) ============ */
.pdp__zoom{position:absolute;right:14px;bottom:14px;z-index:2;width:42px;height:42px;border-radius:50%;background:rgba(251,250,247,.92);display:flex;align-items:center;justify-content:center;color:var(--ink);opacity:0;transform:scale(.9);transition:opacity .3s,transform .3s}
.pdp__main:hover .pdp__zoom{opacity:1;transform:scale(1)}
.pdp__zoom svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.7;fill:none}
@media (hover:none){.pdp__zoom{opacity:1;transform:none}}
.lightbox{position:fixed;inset:0;z-index:130;background:rgba(24,20,15,.94);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s;padding:clamp(20px,6vw,64px)}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
.lightbox__close{position:absolute;top:20px;right:20px;width:44px;height:44px;color:var(--paper);display:flex;align-items:center;justify-content:center;transition:opacity .25s}
.lightbox__close:hover{opacity:.7}
.lightbox__close svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.6;fill:none}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid rgba(251,250,247,.35);color:var(--paper);display:flex;align-items:center;justify-content:center;transition:all .3s}
.lightbox__nav:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.lightbox__nav--prev{left:clamp(10px,3vw,40px)}
.lightbox__nav--next{right:clamp(10px,3vw,40px)}
.lightbox__nav svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none}
@media (max-width:600px){.lightbox__nav{width:40px;height:40px}}

/* ============ RESPONSIVE ============ */
@media (max-width:860px){
  .filters{gap:16px 24px}
  .search__results{--maxw:100%}
  /* item 13 (05.09): mobile-only sticky filter/sort bar on category
     pages — sticks right under the header once scrolled to, so filters
     and sort stay reachable at any scroll depth without scrolling back
     up. Desktop is untouched (filters stay in normal document flow). */
  .sticky-filters{position:sticky;top:var(--header-h);z-index:40;background:var(--paper);padding-top:6px;box-shadow:0 14px 28px -22px rgba(27,25,22,.22)}
  .on-dark .sticky-filters{background:var(--espresso)}
}
@media (max-width:1080px){
  .cats{grid-template-columns:repeat(3,1fr)}
  .ig-grid{grid-template-columns:repeat(3,1fr)}
  .grid-products{grid-template-columns:repeat(3,1fr)}
  .footer__top{grid-template-columns:1fr 1fr;gap:32px}
  .footer__brand{grid-column:1/-1}
  .pdp{grid-template-columns:1fr;gap:28px}
  .pdp__info{position:static}
}
@media (max-width:860px){
  :root{--header-h:66px}
  .nav--left,.nav--right .icon-btn--search{display:none}
  .nav--right{gap:16px}
  .burger{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;color:var(--ink)}
  .burger svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.6;fill:none}
  .header__bar{grid-template-columns:auto 1fr auto}
  .brand{font-size:22px;text-align:center;padding-left:0}
  .duo{grid-template-columns:1fr}
  .duo__tile{aspect-ratio:1/1}
  .hero__nav{bottom:18px}
  .hero__arrows{display:none}
  .section__head{flex-direction:column;align-items:flex-start}
  .footer__top{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column;align-items:flex-start}
  .grid-products{grid-template-columns:repeat(2,1fr);gap:12px 10px}
  .pagehero__row{flex-direction:column;align-items:flex-start;gap:6px}
}
@media (max-width:520px){
  .cats{grid-template-columns:repeat(2,1fr)}
  .ig-grid{grid-template-columns:repeat(2,1fr)}
  .usps{grid-template-columns:1fr}
  .usp{border-right:0;border-bottom:1px solid var(--line)}
  .hero__index{gap:12px}
  .hero__idx span:not(.bar){display:none}
  .hero__title{font-size:clamp(33px,9vw,44px)}
  .hero__text{font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ===================================================================
   MEN'S DARK THEME — reinstated round 2 (05.09.2026), color-only.
   Structure mirrors the proven pre-redesign pattern (fashionhouse/site
   assets/css/app.css: --espresso/--espresso-2/on-dark/section--dark/
   pagehero--dark/.btn--light), re-tokenized to Porcelain & Terra.
   Scope: маje listing, men's PDP (via .on-dark added by app.js when
   CATALOG item .cat==='men'), and the mobile nav drawer while its
   "Мъже" panel is active (see .drawer.is-dark below, item 12).

   ROUND 4 (06.09.2026) UPDATE — header/mega-menu now ALSO invert.
   Round 2 kept the header/mega-menu light everywhere, reasoning that a
   dark header risked a visual "jump" while hovering between the Жени/
   Мъже mega menus. Alex/client explicitly overrode that call in round 4
   ("на мъжкото и хедъра... инверсия на цветовете") — see SPEC.md §4b for
   the full decision record. The original flicker worry was specifically
   about a HOVER-driven toggle (header color flipping as the mouse moves
   between nav items would cause rapid flashing); the round-4
   implementation avoids that failure mode entirely because header/mega
   darkness is bound to PAGE CONTEXT, set once at boot (static class on
   men's category pages, one-time class toggle in mountProduct() for
   PDPs) — never to which nav item is currently hovered. Concretely: on
   any men's-context page BOTH the Жени mega and the Мъже mega render
   with the same dark ".header--dark .mega" styling (not just the one
   matching the page), so hovering back and forth between them shows a
   consistent dark panel — no color flash either way. See ".header--dark"
   rules below (kept in this file, not a separate section, since they are
   part of the same men's-context reversal).
   Active-link indicator: #navMenLink.is-here keeps its --terra text
   color (kept unchanged — terra-on-espresso is already the accepted
   contrast trade-off used elsewhere on this dark theme, e.g.
   .card__price .new / .pdp__price .new sale-price text, so this stays
   consistent rather than introducing a special-cased lighter tint). It's
   a smaller redundant accent now that the whole header inverts, but
   still a harmless "you're here" cue (tick indicator opacity too) —
   kept rather than removed.
   Footer stays light on every page per DESIGN-SYSTEM §11 (unrelated to
   this reversal). Announce bar needed NO change — it was already dark
   (--ink bg/--paper text) on every page, so it now reads as one
   continuous dark band with the header on men's pages instead of a
   light-header seam underneath it.
   =================================================================== */
:root{
  --espresso:   #18140F;
  --espresso-2: #0E0C08;
  --on-dark:    #B7A98F;
  --on-dark-line: rgba(251,250,247,.16);
}
#navMenLink.is-here{color:var(--terra)}
#navMenLink.is-here .tick{opacity:1}

.pagehero--dark{background:var(--espresso);color:var(--paper)}
.pagehero--dark .pagehero__title,.pagehero--dark .pagehero__count{color:var(--paper)}
.pagehero--dark .breadcrumb,.pagehero--dark .breadcrumb a{color:var(--on-dark)}
.pagehero--dark .breadcrumb a:hover{color:var(--paper)}
.pagehero--dark .chip{background:transparent;color:var(--paper);border-color:var(--on-dark-line)}
.pagehero--dark .chip:hover,.pagehero--dark .chip.is-active{background:var(--paper);color:var(--ink);border-color:var(--paper)}

.section--dark{background:var(--espresso);color:var(--paper)}
.section--dark h2,.section--dark h3{color:var(--paper)}
.section--dark .eyebrow{color:var(--on-dark)}

.on-dark .filters{border-color:var(--on-dark-line)}
.on-dark .flabel{color:var(--on-dark)}
.on-dark .pill{background:transparent;color:var(--paper);border-color:var(--on-dark-line)}
.on-dark .pill:hover,.on-dark .pill.is-active{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.on-dark .pill--sale.is-active{background:var(--terra);border-color:var(--terra);color:#fff}
.on-dark .swatch{border-color:var(--on-dark-line)}
.on-dark .swatch.is-active::after{border-color:var(--paper)}
.on-dark .filters__clear{color:var(--on-dark)}
.on-dark .toolbar{border-color:var(--on-dark-line)}
.on-dark .toolbar__count{color:var(--on-dark)}
.on-dark .toolbar__sort{color:var(--paper)}
.on-dark .fhselect__btn{background:var(--espresso);color:var(--paper);border-color:var(--on-dark-line)}
.on-dark .fhselect__btn:hover{border-color:var(--paper)}
.on-dark .fhselect__lbl{color:var(--on-dark)}
.on-dark .fhselect__list{background:var(--espresso);border-color:var(--paper)}
.on-dark .fhselect__opt{color:rgba(251,250,247,.82)}
.on-dark .fhselect__opt:hover{background:rgba(251,250,247,.08);color:var(--paper)}
.on-dark .fhselect__opt.is-active{color:var(--paper)}
.on-dark .fhselect__opt.is-active::after{filter:invert(1)}
.on-dark .listing-empty{color:var(--on-dark)}

.on-dark .card__name,.on-dark .card__price{color:var(--paper)}
.on-dark .card__cat{color:var(--on-dark)}
.on-dark .card__media{background:var(--espresso-2)}
.on-dark .card__wish{background:rgba(24,20,15,.75)}
.on-dark .card__wish svg{stroke:var(--paper)}
.on-dark .card__dots i{border-color:var(--on-dark-line)}
.on-dark .card__cnav{background:rgba(24,20,15,.85);color:var(--paper)}
.on-dark .car-arrow{border-color:var(--on-dark-line);color:var(--paper)}
.on-dark .car-arrow:hover{background:var(--paper);color:var(--ink)}
.on-dark .car-arrow:disabled:hover{background:none;color:var(--paper);border-color:var(--on-dark-line)}
.on-dark .card__tag{background:var(--paper);color:var(--ink)}

.on-dark .pdp__main,.on-dark .pdp__thumb{background:var(--espresso-2)}
.on-dark .pdp__thumb.is-active{border-color:var(--paper)}
.on-dark .pdp__title,.on-dark .pdp__price,.on-dark .pdp__opt h4{color:var(--paper)}
.on-dark .pdp__cat{color:var(--on-dark)}
.on-dark .pdp__fact{border-color:var(--on-dark-line);color:rgba(251,250,247,.82)}
.on-dark .pdp__acc details{border-color:var(--on-dark-line)}
.on-dark .pdp__acc summary{color:var(--paper)}
.on-dark .pdp__acc summary::after{color:var(--on-dark)}
.on-dark .pdp__acc p{color:rgba(251,250,247,.78)}
.on-dark .pdp__acc a{color:var(--paper);border-bottom-color:var(--on-dark-line)}
.on-dark .pdp__acc a:hover{border-bottom-color:var(--paper)}
.on-dark .opt-size{color:var(--paper);border-color:var(--on-dark-line)}
.on-dark .opt-size:hover{border-color:var(--paper)}
.on-dark .opt-size.is-active{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.on-dark .opt-color{border-color:var(--on-dark-line)}
.on-dark .opt-color.is-active::after{border-color:var(--paper)}
.on-dark .pdp__share{color:var(--on-dark)}
.on-dark .pdp__share-btn{border-color:var(--on-dark-line);color:var(--paper)}
.on-dark .pdp__share-btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.on-dark .breadcrumb,.on-dark .breadcrumb a{color:var(--on-dark)}
.on-dark .breadcrumb a:hover{color:var(--paper)}
.on-dark .empty-state{color:var(--on-dark)}
.on-dark .empty-state h2{color:var(--paper)}

.btn--light{border-color:var(--paper);color:var(--paper)}
.btn--light:hover{background:var(--paper);color:var(--ink)}
.btn--light[data-wish].is-on svg{fill:var(--terra);stroke:var(--terra)}

/* ---- header + mega-menu: follows men's context (round 4, 06.09.2026 —
   see the big comment above for why this is safe re: the round-2 hover-
   flicker concern). Applied via a static class on maje/index.html (and
   therefore on every generated maje/<sub>/index.html clone, see
   scripts/generate-pages.js generateCategoryPages()) and via a one-time
   classList.toggle() in app.js mountProduct() for PDPs (produkt.html is
   one shared template for all 20 products, so it can't be hardcoded). ---- */
.header--dark{background:var(--espresso);border-bottom-color:var(--on-dark-line)}
.header--dark .nav__link{color:var(--paper)}
.header--dark .nav__item:hover .nav__link{color:var(--on-dark)}
.header--dark .brand{color:var(--paper)}
.header--dark .icon-btn{color:var(--paper)}
.header--dark .icon-btn .count{background:var(--paper);color:var(--ink)}
.header--dark .burger{color:var(--paper)}
.header--dark .mega{background:var(--espresso);border-color:var(--on-dark-line);border-top-color:var(--paper)}
.header--dark .mega__col h4{color:var(--on-dark)}
.header--dark .mega__col a{color:rgba(251,250,247,.78)}
.header--dark .mega__col a:hover{color:var(--paper)}

/* ---- mobile nav drawer: follows men's context (item 12) ---- */
.drawer.is-dark{background:var(--espresso);color:var(--paper);box-shadow:0 24px 60px -30px rgba(0,0,0,.6)}
.drawer.is-dark .drawer__head{border-color:var(--on-dark-line)}
.drawer.is-dark .drawer__head .brand,.drawer.is-dark .drawer__close{color:var(--paper)}
.drawer.is-dark .drawer__toggles button{border-color:var(--paper);color:var(--paper)}
.drawer.is-dark .drawer__toggles button.is-active{background:var(--paper);color:var(--ink)}
.drawer.is-dark .drawer__panel a{color:var(--paper);border-color:var(--on-dark-line)}
.drawer.is-dark .drawer__acc a{border-color:var(--on-dark-line);color:var(--paper)}