/* ============================================================================
   GIFTοPOLIS — «Cadou cald» design system
   Modern grotesque · near-white canvas · Bricolage Grotesque display · red accent
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  /* ---- surfaces : near-white canvas ---- */
  --paper:#FCFCFB;
  --paper-2:#F4F4F3;
  --paper-3:#EAEAE9;
  --cream:#FFFFFF;
  --dark:#111114;
  --dark-2:#1B1B1F;

  /* ---- ink ---- */
  --ink:#17171A;
  --ink-2:#3F424A;
  --muted:#52565C;
  --muted-2:#6F7379;

  /* ---- lines ---- */
  --line:#E7E7E9;
  --line-2:#D5D6D9;

  /* ---- accents ---- */
  --red:#E31E24;
  --red-deep:#B4171C;
  --red-soft:#FDECEC;
  --red-light:#FF5257;
  --gold:#C8860F;
  --gold-soft:#FBF0DC;
  --sage:#3F7D4E;
  --sage-soft:#E9F3EB;
  --danger:#C21F26;

  /* ---- type : modern grotesque, no serifs ---- */
  --font-display:"Audiowide","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --font-mono:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

  --t-hero:clamp(1.7rem,3.3vw,2.95rem);
  --t-h1:clamp(1.65rem,2.8vw,2.45rem);
  --t-h2:clamp(1.4rem,2.2vw,2rem);
  --t-h3:clamp(1.14rem,1.6vw,1.36rem);
  --t-h4:clamp(1.04rem,1.25vw,1.14rem);
  --t-lead:clamp(1.02rem,1.4vw,1.16rem);
  --t-body:1rem;
  --t-small:.875rem;
  --t-xs:.8125rem;
  --t-label:.6875rem;

  /* ---- space ---- */
  --gutter:24px;
  --container:1320px;
  --pad-x:clamp(20px,4vw,56px);
  --s-section:clamp(64px,8.5vw,124px);

  /* ---- radii (crisper) ---- */
  --r-xs:5px;
  --r-sm:9px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;
  --r-pill:999px;

  /* ---- shadows ---- */
  --sh-1:0 1px 2px rgba(17,17,20,.05);
  --sh-2:0 2px 6px rgba(17,17,20,.05),0 16px 40px -18px rgba(17,17,20,.18);
  --sh-3:0 30px 70px -30px rgba(17,17,20,.3);

  /* ---- motion ---- */
  --e-out:cubic-bezier(.22,.61,.36,1);
  --e-inout:cubic-bezier(.32,.72,0,1);
  --t-fast:150ms;
  --t-med:240ms;
  --t-slow:600ms;

  --hdr-h:84px;
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--t-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5,p{margin:0}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
::selection{background:var(--red);color:var(--cream)}

/* ----------------------------------------------------------------- paper grain */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:.018;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- layout */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad-x)}
.container--wide{max-width:1560px}
.section{padding-block:var(--s-section)}
.section--tight{padding-block:clamp(44px,5.5vw,76px)}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.grid{display:grid;gap:var(--gutter)}
.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}

/* ---------------------------------------------------------------- type */
/* Audiowide: display / titles only. Single weight (400) — no synthetic bold. */
.display,h1,.h1,h2,.h2{
  font-family:var(--font-display);
  font-weight:400;
  font-synthesis-weight:none;
  font-style:normal;
  letter-spacing:-.012em;
}
.display{line-height:1.04}
h1,.h1{font-size:var(--t-h1);line-height:1.08;text-wrap:balance}
h2,.h2{font-size:var(--t-h2);line-height:1.14;text-wrap:balance}

/* Smaller headings use the body grotesque so density stays readable. */
h3,.h3{
  font-family:var(--font-body);font-size:var(--t-h3);font-weight:800;
  line-height:1.2;letter-spacing:-.024em;
}
h4,.h4{
  font-family:var(--font-body);font-size:var(--t-h4);font-weight:800;
  line-height:1.3;letter-spacing:-.014em;
}

/* accent word: colour only (the display face has one weight) */
.display em,h1 em,h2 em,h3 em,.italic-accent{
  font-style:normal;font-weight:inherit;color:var(--red);letter-spacing:-.015em;
}
.lead{font-size:var(--t-lead);line-height:1.62;color:var(--ink-2)}
.small{font-size:var(--t-small);color:var(--muted)}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* eyebrow / mono label */
.eyebrow{
  font-family:var(--font-mono);font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.13em;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--line-2);flex:none}
.eyebrow--plain::before{display:none}
.eyebrow--red{color:var(--red-deep)}
.eyebrow--red::before{background:var(--red-deep);opacity:.5}
.eyebrow--light{color:rgba(252,252,251,.62)}
.eyebrow--light::before{background:rgba(252,252,251,.3)}

/* section head */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,52px)}
.sec-head__text{max-width:62ch}
.sec-head h2{margin-top:14px}
.sec-head p{margin-top:14px;color:var(--ink-2);max-width:56ch}

/* hand-drawn underline */
.underline-svg{position:relative;display:inline-block;white-space:nowrap}
.underline-svg svg{position:absolute;left:0;right:0;bottom:-.14em;width:100%;height:.34em;overflow:visible}
.underline-svg svg path{fill:none;stroke:var(--red);stroke-width:2.2;stroke-linecap:round;opacity:.55}

/* ---------------------------------------------------------------- buttons */
.btn{
  --btn-bg:var(--red);--btn-fg:var(--cream);--btn-bd:var(--red);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);
  font-size:.9375rem;font-weight:600;letter-spacing:.005em;line-height:1;
  transition:background var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out),
             border-color var(--t-fast) var(--e-out),transform var(--t-fast) var(--e-out),
             box-shadow var(--t-med) var(--e-out);
  will-change:transform;text-align:center;
}
.btn:hover{transform:translateY(-1.5px);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0)}
.btn svg{width:17px;height:17px;flex:none}

.btn--red:hover{--btn-bg:var(--red-deep);--btn-bd:var(--red-deep)}
.btn--ink{--btn-bg:var(--ink);--btn-bd:var(--ink);--btn-fg:var(--cream)}
.btn--ink:hover{--btn-bg:#0F0B08;--btn-bd:#0F0B08}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line-2)}
.btn--ghost:hover{--btn-bg:var(--cream);--btn-bd:var(--ink)}
.btn--light{--btn-bg:var(--cream);--btn-fg:var(--ink);--btn-bd:var(--cream)}
.btn--outline-light{--btn-bg:transparent;--btn-fg:var(--paper);--btn-bd:rgba(252,252,251,.32)}
.btn--outline-light:hover{--btn-bg:rgba(252,252,251,.09);--btn-bd:rgba(252,252,251,.6)}
.btn--block{width:100%}
.btn--sm{padding:11px 20px;font-size:.875rem}
.btn--lg{padding:18px 38px;font-size:1rem}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

.link-arrow{
  display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.9375rem;
  border-bottom:1px solid var(--line-2);padding-bottom:3px;min-height:34px;
  transition:border-color var(--t-fast),gap var(--t-fast),color var(--t-fast);
}
.link-arrow:hover{border-color:var(--red);color:var(--red);gap:14px}
.link-arrow svg{width:15px;height:15px;transition:transform var(--t-fast)}
.link-arrow:hover svg{transform:translateX(2px)}
.link-arrow--light{border-color:rgba(252,252,251,.3);color:var(--paper)}
.link-arrow--light:hover{color:#fff;border-color:#fff}

/* ---------------------------------------------------------------- badges / chips */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:var(--t-label);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  padding:6px 11px;border-radius:var(--r-pill);line-height:1;
}
.badge--sale{background:var(--red-soft);color:var(--red-deep)}
.badge--new{background:var(--sage-soft);color:#445544}
.badge--gold{background:var(--gold-soft);color:#7A5A1E}
.badge--red{background:var(--red-soft);color:var(--red-deep)}
.badge--sage{background:var(--sage-soft);color:#2F6440}
.badge--dark{background:var(--ink);color:var(--paper)}
.badge--outline{border:1px solid var(--line-2);color:var(--muted)}

.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:transparent;color:var(--ink-2);
  font-size:.84375rem;font-weight:600;white-space:nowrap;
  transition:all var(--t-fast) var(--e-out);
}
.chip:hover{border-color:var(--line-2);background:var(--cream);color:var(--ink)}
.chip.is-active{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.chip__x{opacity:.6;display:inline-flex}
.chip__x:hover{opacity:1}

/* ---------------------------------------------------------------- forms */
.field{display:flex;flex-direction:column;gap:7px}
.field > label,.label{
  font-family:var(--font-mono);font-size:var(--t-label);text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted);
}
.input,.select,.textarea{
  width:100%;padding:13px 16px;background:var(--cream);
  border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:.9375rem;color:var(--ink);
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
}
.input::placeholder,.textarea::placeholder{color:var(--muted-2)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--line-2)}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--red);background:#fff;
  box-shadow:0 0 0 3px rgba(177,80,44,.10);
}
.textarea{resize:vertical;min-height:120px;line-height:1.55}
.select{
  appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2352565C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
.checkbox{display:flex;align-items:flex-start;gap:11px;font-size:.9375rem;color:var(--ink-2);cursor:pointer;line-height:1.45}
.checkbox input{
  appearance:none;width:19px;height:19px;flex:none;margin-top:2px;
  border:1px solid var(--line-2);border-radius:5px;background:var(--cream);
  cursor:pointer;transition:all var(--t-fast);position:relative;
}
.checkbox input:checked{background:var(--ink);border-color:var(--ink)}
.checkbox input:checked::after{
  content:"";position:absolute;left:6px;top:2.5px;width:5px;height:9px;
  border:solid var(--cream);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.field__err{font-size:.8125rem;color:var(--danger);display:none}
.field.has-err .input,.field.has-err .select{border-color:var(--danger)}
.field.has-err .field__err{display:block}

/* ---------------------------------------------------------------- product card */
.pcard{position:relative;display:flex;flex-direction:column;min-width:0}
.pcard__media{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--r-md);background:var(--paper-2);
  aspect-ratio:1/1;
}
.pcard__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 700ms var(--e-out),opacity var(--t-med);
}
.pcard:hover .pcard__media img{transform:scale(1.045)}
.pcard__badges{position:absolute;top:12px;left:12px;z-index:2;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.pcard__fav{
  position:absolute;top:11px;right:11px;z-index:3;
  width:36px;height:36px;display:grid;place-items:center;
  border-radius:var(--r-pill);background:rgba(255,253,249,.9);
  backdrop-filter:blur(6px);color:var(--ink-2);
  opacity:0;transform:translateY(-4px);
  transition:all var(--t-med) var(--e-out);
  box-shadow:var(--sh-1);
}
.pcard:hover .pcard__fav,.pcard__fav.is-on{opacity:1;transform:none}
.pcard__fav svg{width:17px;height:17px}
.pcard__fav:hover{background:var(--cream);color:var(--red);transform:scale(1.08)}
.pcard__fav.is-on{color:var(--red)}
.pcard__fav.is-on svg{fill:var(--red)}
.pcard__add{
  position:absolute;left:10px;right:10px;bottom:10px;z-index:2;
  opacity:0;transform:translateY(12px);
  transition:all var(--t-med) var(--e-out);
}
.pcard:hover .pcard__add,.pcard__add:focus-visible{opacity:1;transform:none}
.pcard__add .btn{width:100%;padding:12px 18px;font-size:.84375rem;box-shadow:var(--sh-2)}
.pcard__body{padding:15px 2px 0;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard__cat{font-family:var(--font-mono);font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-2)}
.pcard__name{
  font-family:var(--font-body);font-size:1.0625rem;font-weight:800;line-height:1.26;letter-spacing:-.018em;
  letter-spacing:-.008em;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color var(--t-fast);min-height:2.56em;
}
.pcard:hover .pcard__name{color:var(--red)}
.pcard__price{display:flex;align-items:baseline;gap:9px;margin-top:2px;font-variant-numeric:tabular-nums}
.pcard__price strong{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em}
.pcard__price s{color:var(--muted-2);font-size:.84375rem;text-decoration-thickness:1px}
.pcard__meta{display:flex;align-items:center;gap:7px;font-size:.78125rem;color:var(--muted)}
.pcard--row{flex-direction:row;gap:20px}
.pcard--row .pcard__media{width:132px;flex:none}

/* grid of products */
.pgrid{display:grid;gap:clamp(18px,2.2vw,30px) clamp(14px,1.6vw,24px);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:640px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1024px){.pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pgrid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){.pgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------------------------------------------------------------- rating */
.stars{display:inline-flex;align-items:center;gap:2px;color:var(--gold)}
.stars svg{width:14px;height:14px;fill:currentColor}
.stars--lg svg{width:17px;height:17px}
.rating-line{display:inline-flex;align-items:center;gap:9px;font-size:.8125rem;color:var(--muted)}
.rating-line b{color:var(--ink);font-weight:600}

/* ---------------------------------------------------------------- marquee */
.marquee{overflow:hidden;position:relative;display:flex;user-select:none;gap:0}
.marquee__track{display:flex;flex:none;align-items:center;gap:0;animation:marquee 38s linear infinite;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee__item{
  display:inline-flex;align-items:center;gap:14px;padding-inline:26px;
  font-family:var(--font-mono);font-size:var(--t-label);font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;white-space:nowrap;color:var(--muted);
}
.marquee__item::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--red);opacity:.5}

/* ---------------------------------------------------------------- reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity var(--t-slow) var(--e-out),transform var(--t-slow) var(--e-out)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.06s}
.reveal[data-d="2"]{transition-delay:.12s}
.reveal[data-d="3"]{transition-delay:.18s}
.reveal[data-d="4"]{transition-delay:.24s}
.reveal[data-d="5"]{transition-delay:.3s}
.reveal[data-d="6"]{transition-delay:.36s}

/* ---------------------------------------------------------------- header */
.utility{
  background:var(--dark);color:rgba(252,252,251,.78);
  font-family:var(--font-mono);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.14em;
}
.utility__in{display:flex;align-items:center;justify-content:center;gap:26px;min-height:40px;flex-wrap:wrap}
.utility__in span{display:inline-flex;align-items:center;gap:8px}
.utility__dot{width:3px;height:3px;border-radius:50%;background:rgba(252,252,251,.32)}
.utility a:hover{color:#fff}
.utility .utility__star{color:var(--gold)}

.site-header{
  position:sticky;top:0;z-index:60;background:rgba(252,252,251,.86);
  backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-med),box-shadow var(--t-med),background var(--t-med);
}
.site-header.is-stuck{border-bottom-color:var(--line);box-shadow:0 1px 24px -8px rgba(17,17,20,.14)}
.hdr{display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);min-height:var(--hdr-h)}
.hdr__logo{flex:none;display:flex;align-items:center;gap:10px;min-height:42px}
.hdr__logo img{height:27px;width:auto}
.hdr__logo--light img{height:27px}
.hdr__nav{display:none;align-items:center;gap:clamp(14px,1.8vw,30px);margin-inline:auto}
.hdr__nav > li > a,.hdr__nav > li > button{
  display:inline-flex;align-items:center;gap:6px;padding:10px 0;
  font-size:.9375rem;font-weight:600;color:var(--ink);position:relative;
  transition:color var(--t-fast);
}
.hdr__nav > li > a::after,.hdr__nav > li > button::after{
  content:"";position:absolute;left:0;bottom:4px;height:1.5px;width:0;background:var(--red);
  transition:width var(--t-med) var(--e-out);
}
.hdr__nav > li > a:hover::after,.hdr__nav > li > button:hover::after,
.hdr__nav > li.is-active > a::after{width:100%}
.hdr__nav > li > a:hover,.hdr__nav > li > button:hover{color:var(--red)}
.hdr__nav svg.chev{width:11px;height:11px;opacity:.55;transition:transform var(--t-fast)}
.hdr__actions{display:flex;align-items:center;gap:4px;flex:none;margin-left:auto}
.icon-btn{
  position:relative;width:42px;height:42px;display:grid;place-items:center;
  border-radius:var(--r-pill);color:var(--ink);transition:background var(--t-fast),color var(--t-fast);
}
.icon-btn:hover{background:var(--paper-2);color:var(--red)}
.icon-btn svg{width:20px;height:20px}
.icon-btn__count{
  position:absolute;top:5px;right:4px;min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;border-radius:var(--r-pill);
  background:var(--red);color:var(--cream);
  font-family:var(--font-mono);font-size:.625rem;font-weight:600;line-height:1;
  transition:transform var(--t-med) var(--e-out);
}
.icon-btn__count:empty,.icon-btn__count[data-n="0"]{display:none}
.icon-btn__count.is-bump{animation:bump 420ms var(--e-out)}
@keyframes bump{0%,100%{transform:scale(1)}35%{transform:scale(1.4)}}
.hdr__burger{display:grid}
@media(min-width:1080px){
  .hdr__nav{display:flex}
  .hdr__burger{display:none}
}

/* mega menu */
.mega{
  display:none;
  position:absolute;left:0;right:0;top:100%;
  background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:0 28px 50px -30px rgba(17,17,20,.28);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--t-med) var(--e-out),transform var(--t-med) var(--e-out),visibility var(--t-med);
  z-index:5;
}
.mega.is-open{opacity:1;visibility:visible;transform:none}
@media(min-width:1080px){.mega{display:block}}
.mega__in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 340px;gap:44px;padding-block:38px 42px}
.mega__col h5{
  font-family:var(--font-mono);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);margin-bottom:16px;font-weight:700;
}
.mega__col ul{display:flex;flex-direction:column;gap:1px}
.mega__col a{
  display:block;padding:6px 0;font-size:.9063rem;color:var(--ink-2);
  transition:color var(--t-fast),padding-left var(--t-fast);
}
.mega__col a:hover{color:var(--red);padding-left:5px}
.mega__feature{background:var(--paper-2);border-radius:var(--r-md);padding:18px;display:flex;flex-direction:column;gap:12px}
.mega__feature img{border-radius:var(--r-sm);aspect-ratio:4/3;object-fit:cover;width:100%}

/* ---------------------------------------------------------------- mobile nav */
.mnav{
  position:fixed;inset:0;z-index:90;background:var(--paper);
  transform:translateX(-100%);transition:transform var(--t-med) var(--e-inout);
  display:flex;flex-direction:column;overflow-y:auto;
}
.mnav.is-open{transform:none}
.mnav__top{display:flex;align-items:center;justify-content:space-between;padding:16px var(--pad-x);border-bottom:1px solid var(--line)}
.mnav__top img{height:24px}
.mnav__body{padding:14px var(--pad-x) 40px;flex:1}
.mnav__group{border-bottom:1px solid var(--line)}
.mnav__group > button,.mnav__group > a{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:17px 0;font-family:var(--font-body);font-size:1.25rem;font-weight:800;letter-spacing:-.026em;text-align:left;
}
.mnav__sub{display:none;padding-bottom:14px}
.mnav__sub.is-open{display:block}
.mnav__sub a{display:block;padding:9px 0 9px 14px;border-left:1px solid var(--line);font-size:.9375rem;color:var(--ink-2)}
.mnav__sub a:hover{color:var(--red);border-color:var(--red)}
.mnav__foot{display:flex;flex-direction:column;gap:10px;padding-top:26px}

/* ---------------------------------------------------------------- search overlay */
.search-ov{
  position:fixed;inset:0;z-index:95;background:rgba(252,252,251,.97);
  backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity var(--t-med),visibility var(--t-med);
  overflow-y:auto;
}
.search-ov.is-open{opacity:1;visibility:visible}
.search-ov__in{max-width:820px;margin:0 auto;padding:clamp(60px,10vh,120px) var(--pad-x)}
.search-ov__form{position:relative;display:flex;align-items:center;gap:16px;border-bottom:2px solid var(--ink);padding-bottom:14px}
.search-ov__form input{
  flex:1;background:none;border:0;font-family:var(--font-mono);font-size:clamp(1.25rem,2.6vw,1.85rem);font-weight:600;letter-spacing:-.026em;
  outline:none;color:var(--ink);
}
.search-ov__form input::placeholder{color:var(--muted-2)}
.search-ov__close{position:absolute;top:24px;right:clamp(20px,4vw,56px)}
.search-ov__hint{margin-top:22px;display:flex;flex-wrap:wrap;gap:9px}
.search-ov__results{margin-top:34px;display:flex;flex-direction:column;gap:2px}

/* ---------------------------------------------------------------- drawer (cart) */
.scrim{
  position:fixed;inset:0;z-index:80;background:rgba(30,23,18,.42);
  backdrop-filter:blur(2px);opacity:0;visibility:hidden;
  transition:opacity var(--t-med),visibility var(--t-med);
}
.scrim.is-open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:85;width:min(430px,100vw);
  background:var(--cream);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform var(--t-med) var(--e-inout);
  box-shadow:-30px 0 60px -30px rgba(17,17,20,.3);
}
.drawer.is-open{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line)}
.drawer__head h3{font-size:1.15rem}
.drawer__body{flex:1;overflow-y:auto;padding:8px 24px}
.drawer__foot{border-top:1px solid var(--line);padding:20px 24px;display:flex;flex-direction:column;gap:14px;background:var(--paper)}
.drawer__empty{text-align:center;padding:60px 20px;display:flex;flex-direction:column;align-items:center;gap:16px}

/* cart line item */
.cline{display:flex;gap:15px;padding:18px 0;border-bottom:1px solid var(--line)}
.cline:last-child{border-bottom:0}
.cline__img{width:78px;height:78px;flex:none;border-radius:var(--r-sm);overflow:hidden;background:var(--paper-2)}
.cline__img img{width:100%;height:100%;object-fit:cover}
.cline__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.cline__name{font-family:var(--font-body);font-size:.9688rem;font-weight:800;line-height:1.28;letter-spacing:-.018em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cline__opt{font-size:.75rem;color:var(--muted);line-height:1.4}
.cline__bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.cline__price{font-weight:600;font-variant-numeric:tabular-nums;font-size:.9375rem}
.cline__rm{font-size:.75rem;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.cline__rm:hover{color:var(--danger)}

/* qty stepper */
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--cream);overflow:hidden}
.qty button{width:31px;height:31px;display:grid;place-items:center;color:var(--ink-2);transition:background var(--t-fast),color var(--t-fast)}
.qty button:hover{background:var(--paper-2);color:var(--red)}
.qty button svg{width:11px;height:11px}
.qty input{
  width:34px;text-align:center;border:0;background:none;font-size:.875rem;font-weight:600;
  font-variant-numeric:tabular-nums;padding:0;-moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty--lg button{width:40px;height:40px}
.qty--lg input{width:44px;font-size:.9375rem}

/* ---------------------------------------------------------------- toast */
.toasts{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:120;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;width:max-content;max-width:calc(100vw - 32px)}
.toast{
  display:flex;align-items:center;gap:11px;padding:13px 22px;border-radius:var(--r-pill);
  background:var(--ink);color:var(--paper);font-size:.875rem;font-weight:600;
  box-shadow:var(--sh-3);pointer-events:auto;
  animation:toastIn 320ms var(--e-out);
}
.toast.is-out{animation:toastOut 260ms var(--e-out) forwards}
.toast svg{width:16px;height:16px;color:var(--gold);flex:none}
.toast--err svg{color:#E98570}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px) scale(.98)}}

/* ---------------------------------------------------------------- breadcrumb */
.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.78125rem;color:var(--muted);padding-block:18px}
.crumbs a:hover{color:var(--red)}
.crumbs svg{width:9px;height:9px;opacity:.4;flex:none}
.crumbs span{color:var(--ink-2)}

/* ---------------------------------------------------------------- footer */
.site-footer{background:var(--dark);color:rgba(252,252,251,.72);margin-top:0}
.footer__top{display:grid;gap:clamp(34px,5vw,64px);grid-template-columns:1fr;padding-block:clamp(52px,7vw,84px)}
@media(min-width:760px){.footer__top{grid-template-columns:1.5fr 1fr 1fr 1.35fr}}
.footer__brand img{height:26px}
.footer__brand p{margin-top:18px;font-size:.9063rem;line-height:1.65;max-width:34ch;color:rgba(252,252,251,.62)}
.footer__contact{margin-top:24px;display:flex;flex-direction:column;gap:11px;font-size:.9063rem}
.footer__contact a,.footer__contact span{display:flex;align-items:center;gap:11px;color:rgba(252,252,251,.82);min-height:32px}
.footer__contact a:hover{color:#fff}
.footer__contact svg{width:15px;height:15px;color:var(--gold);flex:none}
.footer__h{font-family:var(--font-mono);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.14em;color:rgba(252,252,251,.5);margin-bottom:18px;font-weight:700}
.footer__links{display:flex;flex-direction:column;gap:11px;font-size:.9063rem}
.footer__links a{color:rgba(252,252,251,.82);transition:color var(--t-fast),padding-left var(--t-fast);min-height:32px;display:inline-flex;align-items:center}
.footer__links a:hover{color:#fff;padding-left:4px}
.footer__news p{font-size:.9063rem;color:rgba(252,252,251,.62);line-height:1.6;margin-bottom:16px}
.footer__newsform{display:flex;gap:8px;flex-wrap:wrap}
.footer__newsform input{
  flex:1;min-width:150px;padding:12px 15px;border-radius:var(--r-pill);
  background:rgba(252,252,251,.07);border:1px solid rgba(252,252,251,.16);
  color:var(--paper);font-size:.875rem;
}
.footer__newsform input::placeholder{color:rgba(252,252,251,.4)}
.footer__newsform input:focus{outline:none;border-color:rgba(252,252,251,.45);background:rgba(252,252,251,.1)}
.footer__bottom{
  border-top:1px solid rgba(252,252,251,.1);padding-block:24px;
  display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;justify-content:space-between;
  font-size:.78125rem;color:rgba(252,252,251,.48);
}
.footer__pay{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.footer__pay span{
  padding:5px 9px;border:1px solid rgba(252,252,251,.16);border-radius:var(--r-xs);
  font-family:var(--font-mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;
}
.footer__legal{display:flex;gap:18px;flex-wrap:wrap}
.footer__legal a:hover{color:#fff}

/* ---------------------------------------------------------------- page hero (generic) */
.page-hero{padding-block:clamp(36px,5vw,64px) clamp(26px,3.4vw,44px);border-bottom:1px solid var(--line)}
.page-hero h1{margin-top:14px;max-width:22ch}
.page-hero .lead{margin-top:18px;max-width:62ch}

/* ---------------------------------------------------------------- empty state */
.empty{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  text-align:center;padding:clamp(56px,9vw,110px) 20px;
}
.empty__ico{width:74px;height:74px;border-radius:50%;background:var(--paper-2);display:grid;place-items:center;color:var(--muted)}
.empty__ico svg{width:30px;height:30px}
.empty h2{max-width:20ch}
.empty p{color:var(--muted);max-width:44ch}

/* ---------------------------------------------------------------- pagination */
.pager{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:clamp(34px,4.5vw,56px)}
.pager a,.pager button{
  min-width:40px;height:40px;padding:0 13px;display:grid;place-items:center;
  border-radius:var(--r-pill);border:1px solid var(--line);background:var(--cream);
  font-size:.875rem;font-weight:600;color:var(--ink-2);
  transition:all var(--t-fast);
}
.pager a:hover,.pager button:hover{border-color:var(--line-2);background:var(--paper-2);color:var(--ink)}
.pager .is-current{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.pager .is-current:hover{background:var(--ink);color:var(--cream)}
.pager__gap{padding:0 6px;color:var(--muted-2)}
.pager svg{width:13px;height:13px}

/* ---------------------------------------------------------------- utility: modal */
.modal{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;
  opacity:0;visibility:hidden;transition:opacity var(--t-med),visibility var(--t-med);
}
.modal.is-open{opacity:1;visibility:visible}
.modal__box{
  position:relative;background:var(--cream);border-radius:var(--r-lg);
  width:min(520px,100%);max-height:88vh;overflow-y:auto;padding:clamp(26px,4vw,40px);
  box-shadow:var(--sh-3);transform:translateY(14px) scale(.985);
  transition:transform var(--t-med) var(--e-out);
}
.modal.is-open .modal__box{transform:none}
.modal__x{position:absolute;top:14px;right:14px}

/* ---------------------------------------------------------------- skeleton */
.skel{background:linear-gradient(100deg,var(--paper-2) 30%,var(--paper-3) 50%,var(--paper-2) 70%);background-size:220% 100%;animation:shimmer 1.3s linear infinite;border-radius:var(--r-md)}
@keyframes shimmer{from{background-position:180% 0}to{background-position:-80% 0}}

/* ---------------------------------------------------------------- responsive helpers */
.hide-sm{display:none}
@media(min-width:768px){.hide-sm{display:block}.show-sm{display:none}}
@media(max-width:767px){.hide-xs{display:none}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ---- accent words on dark surfaces ---- */
.statsband .italic-accent,.statsband h2 em,.statsband h1 em,
.customhero .italic-accent,.customhero h1 em{color:var(--red-light)}