/* ==========================================================================
   SANDROS — Design System
   Warm bone canvas, wine accent, Colchian gold. Georgian-first typography.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* surface: warm cream, never white */
  --bone:        #FAF6EE;
  --bone-2:      #F2EBDD;
  --paper:       #FFFFFF;

  /* text: navy-black, so type sits in the same family as the brand */
  --ink:         #131A26;
  --ink-2:       #4C5666;
  --ink-3:       #8892A2;
  --line:        #E6DDCC;
  --line-2:      #D5C9B4;

  /* brand: rich navy */
  --wine:        #16233F;
  --wine-deep:   #0D1729;
  --wine-mid:    #24365C;
  --wine-soft:   #EAEEF6;

  /* metallic accent */
  --gold:        #A98A54;
  --gold-soft:   #F5EEE0;

  --green:       #2F6B52;
  --green-soft:  #E9F1ED;
  --sale:        #A8402F;

  --display: "Noto Serif Georgian", "Noto Serif", Georgia, "Times New Roman", serif;
  --sans:    "Noto Sans Georgian", "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1320px;
  --gut: 24px;
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* softer, cooler shadows: navy-tinted rather than brown */
  --shadow-1: 0 1px 2px rgba(19,26,38,.04), 0 1px 3px rgba(19,26,38,.03);
  --shadow-2: 0 2px 4px rgba(19,26,38,.04), 0 8px 22px -8px rgba(19,26,38,.10);
  --shadow-3: 0 4px 10px rgba(19,26,38,.05), 0 26px 54px -16px rgba(19,26,38,.16);
  --shadow-wine: 0 6px 20px -8px rgba(22,35,63,.38);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-slow: cubic-bezier(.16,.84,.44,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:130px; }
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; padding:0; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,p,figure{ margin:0; }
table{ border-collapse:collapse; width:100%; }
:focus-visible{ outline:2.5px solid var(--wine); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--wine); color:#fff; }

.num,.price,.price *,td.num,.qty-val{ font-variant-numeric:tabular-nums; }

/* ---------- 3. Typography ---------- */
.display{ font-family:var(--display); font-weight:700; line-height:1.14; letter-spacing:-.015em; }
h1.display{ font-size:clamp(32px,4.4vw,58px); }
h2.display{ font-size:clamp(25px,3.1vw,40px); }
h3.display{ font-size:clamp(19px,2.1vw,26px); }

.eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--wine); display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{ content:""; width:22px; height:1.5px; background:currentColor; opacity:.55; }
.eyebrow.gold{ color:var(--gold); }
.eyebrow.on-dark{ color:var(--gold); }
.lede{ font-size:clamp(15px,1.25vw,18px); color:var(--ink-2); line-height:1.68; max-width:62ch; }
.muted{ color:var(--ink-3); }
.small{ font-size:13px; }
.xsmall{ font-size:11.5px; }
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }

/* ---------- 4. Layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(46px,6vw,82px); }
.section-tight{ padding-block:clamp(30px,4vw,50px); }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:30px; flex-wrap:wrap; }
.section-head .sh-copy{ max-width:62ch; }
.section-head h2{ margin-top:10px; }
.stack-6{ display:grid; gap:6px; }
.stack-10{ display:grid; gap:10px; }
.stack-16{ display:grid; gap:16px; }
.stack-24{ display:grid; gap:24px; }
.row{ display:flex; align-items:center; gap:10px; }
.row-wrap{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.spacer{ flex:1; }

.rule{ height:1px; background:linear-gradient(90deg,transparent,var(--line-2) 12%,var(--line-2) 88%,transparent); border:0; margin:0; }
.rule-dot{ display:flex; align-items:center; gap:12px; color:var(--line-2); }
.rule-dot::before,.rule-dot::after{ content:""; flex:1; height:1px; background:currentColor; }
.rule-dot i{ width:5px; height:5px; background:var(--wine); transform:rotate(45deg); }

/* ---------- 5. Buttons ---------- */
.btn{
  --btn-bg:var(--wine); --btn-fg:#fff; --btn-bd:var(--wine);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:0 22px; height:46px; border-radius:var(--r);
  background:var(--btn-bg); color:var(--btn-fg); border:1.5px solid var(--btn-bd);
  font-weight:700; font-size:14.5px; white-space:nowrap;
  transition:transform .16s var(--ease), box-shadow .2s var(--ease), background .18s, border-color .18s, color .18s;
  box-shadow:var(--shadow-wine);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(151,20,43,.5); background:var(--wine-mid); border-color:var(--wine-mid); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:18px; height:18px; flex:none; }
.btn-lg{ height:54px; padding-inline:30px; font-size:16px; border-radius:12px; }
.btn-sm{ height:38px; padding-inline:15px; font-size:13.5px; }
.btn-ghost{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line-2); box-shadow:none; }
.btn-ghost:hover{ background:var(--paper); border-color:var(--ink); color:var(--ink); box-shadow:var(--shadow-2); }
.btn-ghost-light{ --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.4); box-shadow:none; }
.btn-ghost-light:hover{ background:rgba(255,255,255,.12); border-color:#fff; color:#fff; }
.btn-ink{ --btn-bg:var(--ink); --btn-fg:#fff; --btn-bd:var(--ink); box-shadow:var(--shadow-2); }
.btn-ink:hover{ background:#24365C; border-color:#24365C; }
.btn-gold{ --btn-bg:var(--gold); --btn-fg:#FFFDF8; --btn-bd:var(--gold); box-shadow:0 6px 18px -6px rgba(169,138,84,.45); }
.btn-gold:hover{ background:#B8975E; border-color:#B8975E; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.45; pointer-events:none; }

.link-arrow{ display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:14px; color:var(--wine); border-bottom:1.5px solid transparent; transition:.18s var(--ease); }
.link-arrow svg{ width:15px; height:15px; transition:transform .22s var(--ease); }
.link-arrow:hover{ border-color:var(--wine); }
.link-arrow:hover svg{ transform:translateX(4px); }

/* ---------- 6. Badges & chips ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; height:23px; padding:0 9px;
  border-radius:5px; font-size:11px; font-weight:700;
  background:var(--bone-2); color:var(--ink-2); border:1px solid var(--line);
}
.badge svg{ width:12px; height:12px; }
.badge-wine{ background:var(--wine-soft); color:var(--wine); border-color:#D6DEEC; }
.badge-gold{ background:var(--gold-soft); color:#7C6231; border-color:#E7DAC2; }
.badge-green{ background:var(--green-soft); color:var(--green); border-color:#CFE0D7; }
.badge-sale{ background:var(--sale); color:#fff; border-color:var(--sale); }
.badge-ink{ background:var(--ink); color:#fff; border-color:var(--ink); }

.chip{
  display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 16px;
  border-radius:999px; background:var(--paper); border:1.5px solid var(--line);
  font-size:13.5px; font-weight:600; color:var(--ink-2);
  transition:.18s var(--ease); white-space:nowrap;
}
.chip:hover{ border-color:var(--ink); color:var(--ink); transform:translateY(-1px); }
.chip[aria-pressed="true"],.chip.is-on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.chip svg{ width:15px; height:15px; }

/* ---------- 7. The seal — signature element ---------- */
.seal{ width:76px; height:76px; flex:none; color:var(--wine); }
.seal-sm{ width:46px; height:46px; }
.seal-lg{ width:116px; height:116px; }
.seal-rot{ transform-origin:50% 50%; animation:sealspin 40s linear infinite; }
@keyframes sealspin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .seal-rot{ animation:none; } }

.stamped{ position:relative; background:var(--paper); border-radius:var(--r-lg); }
.stamped::before{
  content:""; position:absolute; inset:9px; border:1.5px dashed var(--line-2);
  border-radius:calc(var(--r-lg) - 6px); pointer-events:none;
}

/* ---------- 8. Top bar ---------- */
.topbar{ background:var(--wine-deep); color:#D9DFEA; font-size:12.5px; position:relative; z-index:60; }
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:38px; }
.topbar-msgs{ overflow:hidden; height:38px; flex:1; }
.topbar-msgs ul{ animation:tick 16s infinite; }
.topbar-msgs li{ height:38px; display:flex; align-items:center; gap:8px; }
.topbar-msgs svg{ width:14px; height:14px; color:var(--gold); flex:none; }
@keyframes tick{
  0%,26%{transform:translateY(0)} 31%,57%{transform:translateY(-38px)}
  62%,88%{transform:translateY(-76px)} 93%,100%{transform:translateY(-114px)}
}
@media (prefers-reduced-motion:reduce){ .topbar-msgs ul{ animation:none; } }
.topbar-right{ display:flex; align-items:center; gap:16px; flex:none; }
.topbar-right a{ opacity:.82; transition:.15s; }
.topbar-right a:hover{ opacity:1; color:var(--gold); }
.topbar-sep{ width:1px; height:14px; background:rgba(255,255,255,.2); }

/* ---------- 9. Header ---------- */
.header{ position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--line); transition:box-shadow .25s var(--ease); }
.header.is-stuck{ box-shadow:var(--shadow-2); }
.header-main{ display:flex; align-items:center; gap:24px; height:74px; }

.logo{ display:flex; align-items:center; gap:11px; flex:none; }
.logo-mark{ width:38px; height:38px; flex:none; }
.logo-txt{ display:grid; line-height:1; }
.logo-name{ font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:-.01em; color:var(--ink); }
.logo-sub{ font-size:9px; letter-spacing:.19em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-top:5px; }

.search{ flex:1; position:relative; max-width:660px; }
.search-form{ display:flex; align-items:center; height:46px; background:var(--bone); border:1.5px solid var(--line-2); border-radius:var(--r); overflow:hidden; transition:.2s var(--ease); }
.search-form:focus-within{ border-color:var(--wine); background:var(--paper); box-shadow:0 0 0 4px var(--wine-soft); }
.search-cat{ height:100%; padding:0 10px 0 15px; background:transparent; border:0; font-size:13px; font-weight:600; color:var(--ink-2); cursor:pointer; border-right:1.5px solid var(--line-2); max-width:165px; }
.search-input{ flex:1; height:100%; border:0; background:transparent; padding:0 14px; font-size:14.5px; outline:0; min-width:0; }
.search-input::placeholder{ color:var(--ink-3); }
.search-go{ height:100%; width:56px; display:grid; place-items:center; background:var(--wine); color:#fff; transition:background .18s; flex:none; }
.search-go:hover{ background:var(--wine-mid); }
.search-go svg{ width:19px; height:19px; }

.header-actions{ display:flex; align-items:center; gap:2px; flex:none; }
.hact{ display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:var(--r); transition:background .16s; position:relative; }
.hact:hover{ background:var(--bone); }
.hact svg{ width:21px; height:21px; flex:none; }
.hact-txt{ display:grid; line-height:1.3; text-align:left; }
.hact-txt b{ font-size:13px; font-weight:700; }
.hact-txt span{ font-size:10.5px; color:var(--ink-3); }
.cart-count{
  position:absolute; top:1px; left:25px; min-width:19px; height:19px; padding:0 5px;
  background:var(--wine); color:#fff; border-radius:999px; font-size:11px; font-weight:800;
  display:grid; place-items:center; border:2px solid var(--paper);
}
.cart-count[data-n="0"]{ display:none; }

.burger{ display:none; width:42px; height:42px; place-items:center; border-radius:var(--r); border:1.5px solid var(--line-2); }
.burger svg{ width:20px; height:20px; }

/* ---------- 10. Category nav ---------- */
.catnav{ background:var(--paper); border-bottom:1px solid var(--line); }
.catnav .wrap{ display:flex; align-items:center; gap:2px; height:48px; overflow-x:auto; scrollbar-width:none; }
.catnav .wrap::-webkit-scrollbar{ display:none; }
.catnav a{
  display:flex; align-items:center; gap:8px; padding:0 13px; height:34px; border-radius:8px;
  font-size:13.5px; font-weight:600; color:var(--ink-2); white-space:nowrap; transition:.16s;
}
.catnav a svg{ width:17px; height:17px; opacity:.7; flex:none; }
.catnav a:hover{ background:var(--bone); color:var(--ink); }
.catnav a.is-active{ background:var(--wine-soft); color:var(--wine); }
.catnav a.is-active svg{ opacity:1; }
.catnav-all{ background:var(--ink); color:#fff; }
.catnav-all:hover{ background:#24365C !important; color:#fff !important; }
.catnav-deal{ margin-left:auto; color:var(--wine) !important; font-weight:700 !important; }

/* ---------- 11. Hero ---------- */
.hero{ position:relative; background:var(--wine-deep); color:#EEF1F7; overflow:hidden; }
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1100px 560px at 78% 12%, rgba(36,54,92,.55), transparent 64%),
    radial-gradient(820px 480px at 6% 94%, rgba(169,138,84,.16), transparent 68%);
}
.hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center; padding-block:clamp(48px,5.4vw,76px); }
.hero-copy h1{ margin:16px 0 20px; color:#FBF8F1; }
.hero-copy h1 em{ font-style:normal; color:var(--gold); }
.hero-copy .lede{ color:#B9C2D2; }
.hero-cta{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:34px; margin-top:38px; padding-top:26px; border-top:1px solid rgba(255,255,255,.14); flex-wrap:wrap; }
.hero-stat b{ display:block; font-family:var(--display); font-size:27px; color:var(--gold); line-height:1.1; }
.hero-stat span{ font-size:12.5px; color:#8C97A9; }

.hero-art{ position:relative; }
.hero-cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hero-card{
  background:var(--paper); border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow-3);
  color:var(--ink); transition:transform .3s var(--ease);
}
.hero-card:nth-child(1){ transform:translateY(-18px); }
.hero-card:nth-child(4){ transform:translateY(18px); }
.hero-card:hover{ transform:translateY(-24px); }
.hero-card:nth-child(4):hover{ transform:translateY(12px); }
.hero-card .pc-media{ margin:-16px -16px 12px; border-radius:var(--r-lg) var(--r-lg) 0 0; }
.hero-card h4{ font-size:13.5px; font-weight:600; line-height:1.4; margin-bottom:7px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hero-seal{
  position:absolute; right:-14px; bottom:-22px; z-index:3;
  background:var(--gold); color:#FFFDF8; border-radius:50%; width:118px; height:118px;
  display:grid; place-items:center; box-shadow:0 16px 40px -12px rgba(0,0,0,.5);
}
.hero-seal .seal{ color:#FFFDF8; width:118px; height:118px; }

/* ---------- 12. Trust strip ---------- */
.trust{ background:var(--paper); border-bottom:1px solid var(--line); }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.trust-item{ display:flex; gap:14px; padding:22px 24px; align-items:flex-start; border-right:1px solid var(--line); }
.trust-item:last-child{ border-right:0; }
.trust-item .ti-ico{ width:40px; height:40px; border-radius:10px; background:var(--wine-soft); color:var(--wine); display:grid; place-items:center; flex:none; }
.trust-item:nth-child(2) .ti-ico{ background:var(--gold-soft); color:#7C6231; }
.trust-item:nth-child(3) .ti-ico{ background:var(--green-soft); color:var(--green); }
.trust-item:nth-child(4) .ti-ico{ background:var(--bone-2); color:var(--ink); }
.trust-item .ti-ico svg{ width:21px; height:21px; }
.trust-item b{ display:block; font-size:14px; margin-bottom:2px; }
.trust-item p{ font-size:12.5px; color:var(--ink-3); line-height:1.5; }

/* ---------- 13. Product card ---------- */
.pgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:18px; }
.pgrid-5{ grid-template-columns:repeat(5,1fr); }
.pgrid-4{ grid-template-columns:repeat(4,1fr); }

.pc{
  position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s;
}
.pc:hover{ transform:translateY(-4px); box-shadow:var(--shadow-3); border-color:var(--line-2); }
.pc-media{ position:relative; aspect-ratio:1/1; background:var(--bone-2); overflow:hidden; }
.pc-media > svg,.pc-media > img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.pc:hover .pc-media > svg,.pc:hover .pc-media > img{ transform:scale(1.055); }
.pc-tags{ position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:5px; align-items:flex-start; z-index:2; }
.pc-fav{
  position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.94); display:grid; place-items:center; z-index:2;
  box-shadow:var(--shadow-1); opacity:0; transform:translateY(-4px); transition:.2s var(--ease);
}
.pc:hover .pc-fav{ opacity:1; transform:translateY(0); }
.pc-fav svg{ width:16px; height:16px; color:var(--ink-2); }
.pc-fav.is-on svg{ color:var(--wine); fill:var(--wine); }
.pc-quick{
  position:absolute; left:10px; right:10px; bottom:10px; z-index:2;
  opacity:0; transform:translateY(8px); transition:.24s var(--ease);
}
.pc:hover .pc-quick{ opacity:1; transform:translateY(0); }

.pc-body{ padding:13px 14px 15px; display:flex; flex-direction:column; gap:8px; flex:1; }
.pc-cat{ font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
.pc-title{ font-size:13.8px; font-weight:600; line-height:1.42; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.84em; }
.pc:hover .pc-title{ color:var(--wine); }
.pc-rate{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-3); }
.stars{ display:inline-flex; gap:1.5px; color:var(--gold); }
.stars svg{ width:12px; height:12px; }
.pc-price{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:auto; }
.price-now{ font-family:var(--display); font-size:20px; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.price-was{ font-size:12.5px; color:var(--ink-3); text-decoration:line-through; }
.price-off{ font-size:11px; font-weight:800; color:var(--sale); }
.pc-meta{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-3); }
.pc-meta svg{ width:13px; height:13px; flex:none; }
.pc-moq{ font-size:11px; color:var(--ink-3); border-top:1px dashed var(--line); padding-top:8px; display:flex; justify-content:space-between; gap:8px; }
.pc-moq b{ color:var(--ink-2); }
.pc-link{ position:absolute; inset:0; z-index:1; }

/* ---------- 14. Rails ---------- */
.rail-shell{ position:relative; }
.rail{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(228px,1fr); gap:18px;
  overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; scrollbar-width:none; }
.rail::-webkit-scrollbar{ display:none; }
.rail > *{ scroll-snap-align:start; }
.rail-nav{ display:flex; gap:8px; }
.rail-btn{ width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line-2); background:var(--paper);
  display:grid; place-items:center; transition:.18s var(--ease); }
.rail-btn:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.rail-btn svg{ width:17px; height:17px; }

/* ---------- 15. Category tiles ---------- */
.cattiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.cattile{
  position:relative; border-radius:var(--r-xl); overflow:hidden; min-height:290px;
  display:flex; flex-direction:column; justify-content:flex-end; padding:26px;
  color:#fff; background:var(--wine-deep); isolation:isolate;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.cattile:hover{ transform:translateY(-6px); box-shadow:var(--shadow-3); }
.cattile-bg{ position:absolute; inset:0; z-index:-2; }
.cattile-bg svg{ width:100%; height:100%; object-fit:cover; }
.cattile::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(9,15,28,.93) 0%, rgba(9,15,28,.56) 44%, rgba(9,15,28,.10) 100%); }
.cattile h3{ font-family:var(--display); font-size:23px; font-weight:700; margin-bottom:6px; }
.cattile p{ font-size:12.5px; color:rgba(255,255,255,.72); margin-bottom:14px; line-height:1.5; }
.cattile-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.cattile-tags span{ font-size:11px; padding:3px 9px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.16); }
.cattile-go{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--gold); }
.cattile-go svg{ width:15px; height:15px; transition:transform .22s var(--ease); }
.cattile:hover .cattile-go svg{ transform:translateX(5px); }
.cattile-n{ position:absolute; top:22px; right:24px; font-family:var(--display); font-size:12px;
  font-weight:700; letter-spacing:.1em; color:rgba(255,255,255,.55); }

/* ---------- 16. How it works ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; counter-reset:s; }
.step{ position:relative; padding:0 26px; counter-increment:s; }
.step:first-child{ padding-left:0; }
.step:last-child{ padding-right:0; }
.step::after{ content:""; position:absolute; top:26px; right:0; width:1px; height:calc(100% - 40px); background:var(--line); }
.step:last-child::after{ display:none; }
.step-n{
  width:54px; height:54px; border-radius:50%; border:1.5px dashed var(--line-2);
  display:grid; place-items:center; margin-bottom:18px; position:relative; background:var(--paper);
}
.step-n::before{ content:"0" counter(s); font-family:var(--display); font-size:17px; font-weight:700; color:var(--wine); }
.step-n svg{ position:absolute; width:22px; height:22px; right:-11px; bottom:-6px; color:var(--gold); background:var(--bone); border-radius:50%; padding:2px; }
.step h4{ font-size:16px; font-weight:700; margin-bottom:8px; font-family:var(--display); }
.step p{ font-size:13.5px; color:var(--ink-2); line-height:1.62; }

/* ---------- 17. Deals band ---------- */
.deals{ background:var(--wine-deep); color:#EEF1F7; position:relative; overflow:hidden; }
.deals::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(950px 440px at 15% 0%, rgba(36,54,92,.55), transparent 62%); }
.deals > *{ position:relative; z-index:2; }
.deals .section-head h2{ color:#FBF8F1; }
.deals .lede{ color:#A9B4C6; }
.countdown{ display:flex; align-items:center; gap:10px; }
.cd-box{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:9px;
  min-width:54px; padding:7px 8px; text-align:center; backdrop-filter:blur(6px); }
.cd-box b{ display:block; font-family:var(--display); font-size:22px; line-height:1.05; color:var(--gold); font-variant-numeric:tabular-nums; }
.cd-box span{ font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:#8C97A9; }
.cd-sep{ font-size:20px; color:rgba(255,255,255,.3); font-weight:700; }

/* ---------- 18. Wholesale band ---------- */
.wholesale{ background:var(--paper); border-block:1px solid var(--line); }
.ws-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:center; }
.ws-table{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--bone); }
.ws-table thead th{ background:var(--wine-deep); color:#DCE2EC; font-size:11.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:12px 16px; text-align:left; }
.ws-table td{ padding:14px 16px; border-top:1px solid var(--line); font-size:14px; }
.ws-table tbody tr{ background:var(--paper); transition:background .16s; }
.ws-table tbody tr:hover{ background:var(--wine-soft); }
.ws-table tbody tr.is-best{ background:var(--gold-soft); }
.ws-table td:first-child{ font-weight:700; }
.ws-table td:last-child{ text-align:right; font-family:var(--display); font-size:17px; font-weight:700; }
.ws-points{ display:grid; gap:14px; margin:26px 0 30px; }
.ws-point{ display:flex; gap:12px; align-items:flex-start; }
.ws-point svg{ width:19px; height:19px; color:var(--green); flex:none; margin-top:2px; }
.ws-point b{ font-size:14px; }
.ws-point p{ font-size:13px; color:var(--ink-2); }

/* ---------- 19. Reviews ---------- */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.review{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; position:relative; }
.review-q{ position:absolute; top:16px; right:20px; font-family:var(--display); font-size:60px; line-height:1; color:var(--line); }
.review p{ font-size:14.5px; line-height:1.68; color:var(--ink-2); margin:12px 0 18px; position:relative; }
.review-by{ display:flex; align-items:center; gap:11px; padding-top:16px; border-top:1px solid var(--line); }
.rv-av{ width:38px; height:38px; border-radius:50%; background:var(--wine); color:#fff; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:15px; flex:none; }
.review-by b{ display:block; font-size:13.5px; }
.review-by span{ font-size:11.5px; color:var(--ink-3); }

/* ---------- 20. FAQ ---------- */
.faq{ display:grid; gap:0; border-top:1px solid var(--line); max-width:900px; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 4px; cursor:pointer; list-style:none; font-size:16px; font-weight:700; font-family:var(--display); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .fq-ico{ width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line-2);
  display:grid; place-items:center; flex:none; transition:.22s var(--ease); }
.faq summary .fq-ico svg{ width:15px; height:15px; transition:transform .22s var(--ease); }
.faq details[open] summary .fq-ico{ background:var(--wine); border-color:var(--wine); color:#fff; }
.faq details[open] summary .fq-ico svg{ transform:rotate(45deg); }
.faq .fq-body{ padding:0 4px 24px; max-width:74ch; }
.faq .fq-body p{ font-size:14.5px; color:var(--ink-2); line-height:1.7; }
.faq .fq-body p + p{ margin-top:12px; }

/* ---------- 21. CTA band ---------- */
.ctaband{ background:var(--wine); color:#fff; position:relative; overflow:hidden; }
.ctaband::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(760px 420px at 85% 18%, rgba(169,138,84,.30), transparent 64%); }
.ctaband > *{ position:relative; z-index:2; }
.ctaband h2{ color:#fff; }
.ctaband p{ color:rgba(255,255,255,.82); }
.subform{ display:flex; gap:10px; max-width:480px; margin-top:24px; }
.subform input{ flex:1; height:52px; border-radius:12px; border:1.5px solid rgba(255,255,255,.32);
  background:rgba(255,255,255,.1); padding:0 18px; color:#fff; font-size:15px; outline:0; }
.subform input::placeholder{ color:rgba(255,255,255,.6); }
.subform input:focus{ border-color:#fff; background:rgba(255,255,255,.16); }

/* ---------- 22. Footer ---------- */
.footer{ background:var(--wine-deep); color:#9FAABB; font-size:13.5px; }
.footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr; gap:40px; padding-block:56px; }
.footer h5{ font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:#F0E9E0; margin-bottom:16px; }
.footer li{ margin-bottom:9px; }
.footer li a{ transition:.15s; }
.footer li a:hover{ color:var(--gold); }
.footer-brand .logo-name{ color:#F6F1EA; }
.footer-brand .logo-sub{ color:#877B6E; }
.footer-brand p{ margin:16px 0 20px; line-height:1.68; max-width:34ch; }
.socials{ display:flex; gap:9px; }
.socials a{ width:36px; height:36px; border-radius:9px; border:1px solid rgba(255,255,255,.14);
  display:grid; place-items:center; transition:.18s var(--ease); }
.socials a:hover{ background:var(--gold); border-color:var(--gold); color:#231803; transform:translateY(-2px); }
.socials svg{ width:17px; height:17px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-block:22px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:12.5px; }
.pays{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pay{ height:28px; padding:0 10px; border-radius:6px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12); display:grid; place-items:center; font-size:10.5px; font-weight:700; letter-spacing:.04em; color:#D8CEC3; }
.footer-note{ color:#7C7166; max-width:70ch; line-height:1.6; }

/* ---------- 23. Breadcrumb ---------- */
.crumbs{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-3); padding-block:16px; flex-wrap:wrap; }
.crumbs a:hover{ color:var(--wine); }
.crumbs svg{ width:13px; height:13px; opacity:.5; }
.crumbs b{ color:var(--ink); font-weight:600; }

/* ---------- 24. Category page ---------- */
.cathero{ position:relative; background:var(--wine-deep); color:#EEF1F7; overflow:hidden; }
.cathero-bg{ position:absolute; inset:0; opacity:.5; }
.cathero-bg svg{ width:100%; height:100%; object-fit:cover; }
.cathero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(9,15,28,.96) 32%, rgba(9,15,28,.72) 62%, rgba(9,15,28,.34) 100%); }
.cathero .wrap{ position:relative; z-index:3; padding-block:clamp(38px,4.4vw,58px); }
.cathero h1{ color:#FBF8F1; margin:14px 0 14px; }
.cathero .lede{ color:#B9C2D2; }
.cathero-stats{ display:flex; gap:28px; margin-top:24px; flex-wrap:wrap; }
.cathero-stats div b{ font-family:var(--display); font-size:21px; color:var(--gold); display:block; line-height:1.15; }
.cathero-stats div span{ font-size:12px; color:#8C97A9; }

.subcats{ background:var(--paper); border-bottom:1px solid var(--line); }
.subcats .wrap{ display:flex; gap:10px; padding-block:16px; overflow-x:auto; scrollbar-width:none; }
.subcats .wrap::-webkit-scrollbar{ display:none; }

.shop{ display:grid; grid-template-columns:262px 1fr; gap:34px; align-items:start; padding-block:34px 70px; }
.filters{ position:sticky; top:138px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; }
.filters-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line); }
.filters-head b{ font-size:14px; }
.filters-head button{ font-size:12px; color:var(--wine); font-weight:700; }
.fgroup{ border-bottom:1px solid var(--line); padding:16px 18px; }
.fgroup:last-child{ border-bottom:0; }
.fgroup > b{ display:block; font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); margin-bottom:12px; }
.fopt{ display:flex; align-items:center; gap:10px; padding:5px 0; cursor:pointer; font-size:13.5px; color:var(--ink-2); }
.fopt input{ appearance:none; width:17px; height:17px; border:1.5px solid var(--line-2); border-radius:5px;
  flex:none; position:relative; cursor:pointer; transition:.15s; background:var(--paper); }
.fopt input:checked{ background:var(--wine); border-color:var(--wine); }
.fopt input:checked::after{ content:""; position:absolute; left:5px; top:1.5px; width:5px; height:9px;
  border:2px solid #fff; border-top:0; border-left:0; transform:rotate(43deg); }
.fopt input[type="radio"]{ border-radius:50%; }
.fopt input[type="radio"]:checked::after{ left:4px; top:4px; width:5px; height:5px; border:0; background:#fff; border-radius:50%; transform:none; }
.fopt:hover{ color:var(--ink); }
.fopt .fc{ margin-left:auto; font-size:11.5px; color:var(--ink-3); }
.frange{ display:flex; align-items:center; gap:9px; }
.frange input{ width:100%; height:38px; border:1.5px solid var(--line-2); border-radius:8px;
  padding:0 10px; font-size:13px; background:var(--bone); outline:0; min-width:0; }
.frange input:focus{ border-color:var(--wine); background:var(--paper); }
.frange span{ color:var(--ink-3); }

.shopbar{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:11px 16px; margin-bottom:20px; flex-wrap:wrap; }
.shopbar-count{ font-size:13.5px; color:var(--ink-2); }
.shopbar-count b{ color:var(--ink); }
.sortsel{ height:38px; border:1.5px solid var(--line-2); border-radius:8px; padding:0 32px 0 12px;
  font-size:13.5px; font-weight:600; background:var(--bone) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23574E45' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/15px;
  appearance:none; cursor:pointer; }
.sortsel:focus{ border-color:var(--wine); outline:0; }
.filter-toggle{ display:none; }

.empty{ text-align:center; padding:70px 20px; border:1.5px dashed var(--line-2); border-radius:var(--r-lg); background:var(--paper); }
.empty svg{ width:48px; height:48px; color:var(--line-2); margin:0 auto 16px; }
.empty b{ display:block; font-family:var(--display); font-size:19px; margin-bottom:6px; }
.empty p{ color:var(--ink-3); font-size:14px; margin-bottom:18px; }

.loadmore{ display:grid; place-items:center; gap:14px; margin-top:36px; }
.loadmore .prog{ width:220px; height:4px; border-radius:99px; background:var(--line); overflow:hidden; }
.loadmore .prog i{ display:block; height:100%; background:var(--wine); border-radius:99px; transition:width .4s var(--ease); }

.seo-copy{ background:var(--paper); border-top:1px solid var(--line); }
.seo-copy .cols{ columns:2; column-gap:48px; max-width:1000px; }
.seo-copy p{ font-size:14px; color:var(--ink-2); line-height:1.75; margin-bottom:14px; break-inside:avoid; }
.seo-copy h3{ margin-bottom:14px; }

/* ---------- 25. Product page ---------- */
.pdp{ display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:start; padding-block:26px 60px; }
.gallery{ position:sticky; top:138px; display:grid; grid-template-columns:78px 1fr; gap:14px; }
.gal-thumbs{ display:grid; gap:10px; align-content:start; }
.gal-thumb{ aspect-ratio:1; border-radius:10px; overflow:hidden; border:2px solid var(--line);
  background:var(--bone-2); transition:.18s; }
.gal-thumb.is-on{ border-color:var(--wine); }
.gal-thumb:hover{ border-color:var(--line-2); }
.gal-main{ position:relative; aspect-ratio:1; border-radius:var(--r-lg); overflow:hidden;
  background:var(--bone-2); border:1px solid var(--line); }
.gal-main svg{ width:100%; height:100%; }
.gal-tags{ position:absolute; top:16px; left:16px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }

.pdp-info h1{ font-size:clamp(22px,2.5vw,31px); line-height:1.28; margin:10px 0 12px; }
.pdp-rate{ display:flex; align-items:center; gap:14px; font-size:13px; color:var(--ink-3); flex-wrap:wrap; }
.pdp-rate a{ color:var(--wine); font-weight:600; }
.pdp-price{ background:var(--bone); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; margin:22px 0; }
.pdp-price-row{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.pdp-price .price-now{ font-size:38px; }
.pdp-price-note{ font-size:12.5px; color:var(--ink-3); margin-top:8px; display:flex; align-items:center; gap:6px; }
.pdp-price-note svg{ width:14px; height:14px; color:var(--green); }

.tiers{ margin-top:16px; border-top:1px dashed var(--line-2); padding-top:14px; }
.tiers b{ font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); }
.tier-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:10px; }
.tier{ background:var(--paper); border:1.5px solid var(--line); border-radius:10px; padding:10px 8px; text-align:center; transition:.16s; }
.tier:hover,.tier.is-on{ border-color:var(--wine); background:var(--wine-soft); }
.tier span{ display:block; font-size:11px; color:var(--ink-3); }
.tier b{ display:block; font-family:var(--display); font-size:17px; color:var(--ink); text-transform:none; letter-spacing:0; margin-top:3px; }

.opt-group{ margin-bottom:20px; }
.opt-group > b{ display:block; font-size:12.5px; font-weight:700; margin-bottom:10px; }
.opt-group > b span{ color:var(--ink-3); font-weight:500; }
.swatches{ display:flex; gap:9px; flex-wrap:wrap; }
.swatch{ min-width:42px; height:42px; padding:0 13px; border-radius:9px; border:1.5px solid var(--line-2);
  background:var(--paper); font-size:13px; font-weight:600; display:grid; place-items:center; transition:.16s; }
.swatch:hover{ border-color:var(--ink); }
.swatch.is-on{ border-color:var(--wine); background:var(--wine-soft); color:var(--wine); box-shadow:0 0 0 3px var(--wine-soft); }
.swatch-color{ width:42px; padding:0; }
.swatch-color i{ width:24px; height:24px; border-radius:6px; display:block; border:1px solid rgba(0,0,0,.12); }

.qty{ display:inline-flex; align-items:center; border:1.5px solid var(--line-2); border-radius:10px; overflow:hidden; height:48px; }
.qty button{ width:44px; height:100%; display:grid; place-items:center; transition:.15s; color:var(--ink-2); }
.qty button:hover{ background:var(--bone-2); color:var(--ink); }
.qty svg{ width:16px; height:16px; }
.qty input{ width:56px; height:100%; border:0; border-inline:1.5px solid var(--line-2); text-align:center;
  font-weight:700; font-size:15px; outline:0; background:var(--paper); -moz-appearance:textfield; }
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

.buybox{ display:flex; gap:10px; margin:20px 0; flex-wrap:wrap; }
.buybox .btn{ flex:1; min-width:180px; height:52px; }

.delivery-box{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.dbox-row{ display:flex; gap:13px; padding:15px 17px; align-items:flex-start; border-bottom:1px solid var(--line); }
.dbox-row:last-child{ border-bottom:0; }
.dbox-row svg{ width:19px; height:19px; color:var(--wine); flex:none; margin-top:2px; }
.dbox-row b{ display:block; font-size:13.5px; margin-bottom:2px; }
.dbox-row p{ font-size:12.5px; color:var(--ink-3); line-height:1.55; }

.tabs{ border-top:1px solid var(--line); padding-top:0; }
.tablist{ display:flex; gap:4px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.tablist::-webkit-scrollbar{ display:none; }
.tabbtn{ padding:16px 20px; font-size:14.5px; font-weight:700; color:var(--ink-3);
  border-bottom:2.5px solid transparent; margin-bottom:-1px; white-space:nowrap; transition:.16s; }
.tabbtn:hover{ color:var(--ink); }
.tabbtn.is-on{ color:var(--wine); border-color:var(--wine); }
.tabpanel{ padding-block:28px; display:none; }
.tabpanel.is-on{ display:block; }
.spec-table td{ padding:11px 14px; border-bottom:1px solid var(--line); font-size:14px; }
.spec-table tr td:first-child{ width:230px; color:var(--ink-3); background:var(--bone); font-weight:600; }
.prose{ max-width:76ch; }
.prose p{ font-size:14.5px; line-height:1.75; color:var(--ink-2); margin-bottom:14px; }
.prose ul{ margin-bottom:14px; display:grid; gap:9px; }
.prose li{ font-size:14.5px; color:var(--ink-2); padding-left:24px; position:relative; }
.prose li::before{ content:""; position:absolute; left:5px; top:9px; width:6px; height:6px;
  background:var(--wine); transform:rotate(45deg); }

/* ---------- 26. Cart & checkout ---------- */
.cart-layout{ display:grid; grid-template-columns:1fr 372px; gap:32px; align-items:start; padding-block:26px 70px; }
.cart-list{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.cart-row{ display:grid; grid-template-columns:96px 1fr auto; gap:18px; padding:18px; border-bottom:1px solid var(--line); align-items:start; }
.cart-row:last-child{ border-bottom:0; }
.cart-thumb{ width:96px; aspect-ratio:1; border-radius:10px; overflow:hidden; background:var(--bone-2); border:1px solid var(--line); }
.cart-name{ font-size:14.5px; font-weight:600; line-height:1.45; }
.cart-name:hover{ color:var(--wine); }
.cart-opts{ font-size:12.5px; color:var(--ink-3); margin-top:4px; }
.cart-actions{ display:flex; gap:14px; margin-top:12px; align-items:center; flex-wrap:wrap; }
.cart-rm{ font-size:12.5px; color:var(--ink-3); display:inline-flex; align-items:center; gap:5px; }
.cart-rm:hover{ color:var(--sale); }
.cart-rm svg{ width:14px; height:14px; }
.cart-line-price{ text-align:right; }
.cart-line-price .price-now{ font-size:19px; }
.cart-line-price span{ display:block; font-size:11.5px; color:var(--ink-3); margin-top:3px; }

.summary{ position:sticky; top:138px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.summary-head{ padding:18px; border-bottom:1px solid var(--line); font-family:var(--display); font-size:18px; font-weight:700; }
.summary-body{ padding:18px; display:grid; gap:12px; }
.sum-row{ display:flex; justify-content:space-between; gap:12px; font-size:14px; color:var(--ink-2); }
.sum-row b{ color:var(--ink); }
.sum-row.is-free b{ color:var(--green); }
.sum-total{ display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding-top:14px; margin-top:4px; border-top:1.5px dashed var(--line-2); }
.sum-total span{ font-size:15px; font-weight:700; }
.sum-total b{ font-family:var(--display); font-size:27px; }
.promo{ display:flex; gap:8px; }
.promo input{ flex:1; height:42px; border:1.5px solid var(--line-2); border-radius:9px; padding:0 13px; font-size:13.5px; background:var(--bone); outline:0; min-width:0; }
.promo input:focus{ border-color:var(--wine); background:var(--paper); }
.freeship{ background:var(--green-soft); border:1px solid #CFE6DB; border-radius:10px; padding:11px 14px; font-size:12.5px; color:#0B5E3D; }
.freeship .bar{ height:5px; border-radius:99px; background:#CFE6DB; margin-top:8px; overflow:hidden; }
.freeship .bar i{ display:block; height:100%; background:var(--green); border-radius:99px; transition:width .5s var(--ease); }

.checkout-layout{ display:grid; grid-template-columns:1fr 372px; gap:32px; align-items:start; padding-block:26px 70px; }
.co-steps{ display:flex; gap:0; margin-bottom:28px; }
.co-step{ flex:1; display:flex; align-items:center; gap:11px; font-size:13.5px; color:var(--ink-3); }
.co-step i{ width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line-2); display:grid;
  place-items:center; font-size:13px; font-weight:700; font-style:normal; flex:none; background:var(--paper); }
.co-step.is-on{ color:var(--ink); font-weight:700; }
.co-step.is-on i{ background:var(--wine); border-color:var(--wine); color:#fff; }
.co-step::after{ content:""; flex:1; height:1px; background:var(--line); }
.co-step:last-child::after{ display:none; }

.card-panel{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; margin-bottom:20px; }
.card-panel > h3{ margin-bottom:18px; }
.formgrid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:grid; gap:7px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:12.5px; font-weight:700; color:var(--ink-2); }
.field label i{ color:var(--wine); font-style:normal; }
.field input,.field select,.field textarea{
  height:46px; border:1.5px solid var(--line-2); border-radius:9px; padding:0 14px;
  font-size:14.5px; background:var(--bone); outline:0; transition:.16s; width:100%;
}
.field textarea{ height:auto; padding:12px 14px; resize:vertical; min-height:88px; line-height:1.6; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--wine); background:var(--paper); box-shadow:0 0 0 3.5px var(--wine-soft); }
.field .hint{ font-size:11.5px; color:var(--ink-3); }
.radio-cards{ display:grid; gap:11px; }
.radio-card{ display:flex; gap:13px; align-items:flex-start; padding:15px 17px; border:1.5px solid var(--line-2);
  border-radius:12px; cursor:pointer; transition:.16s; background:var(--bone); }
.radio-card:hover{ border-color:var(--ink-3); }
.radio-card:has(input:checked){ border-color:var(--wine); background:var(--wine-soft); box-shadow:0 0 0 3px var(--wine-soft); }
.radio-card input{ appearance:none; width:19px; height:19px; border:1.5px solid var(--line-2); border-radius:50%;
  flex:none; margin-top:2px; position:relative; background:#fff; }
.radio-card input:checked{ border-color:var(--wine); border-width:6px; }
.radio-card b{ display:block; font-size:14px; margin-bottom:2px; }
.radio-card p{ font-size:12.5px; color:var(--ink-3); line-height:1.5; }
.radio-card .rc-price{ margin-left:auto; font-weight:700; font-size:14px; white-space:nowrap; }

/* ---------- 27. Toast & drawer ---------- */
.toast-zone{ position:fixed; right:20px; bottom:20px; z-index:200; display:grid; gap:10px; justify-items:end; }
.toast{ display:flex; align-items:center; gap:12px; background:var(--wine-deep); color:#EEF1F7;
  padding:13px 18px; border-radius:12px; box-shadow:var(--shadow-3); font-size:14px; font-weight:600;
  animation:toastin .3s var(--ease); max-width:340px; }
.toast svg{ width:18px; height:18px; color:#6FD3A4; flex:none; }
@keyframes toastin{ from{ opacity:0; transform:translateY(14px) scale(.96); } }

.scrim{ position:fixed; inset:0; background:rgba(9,15,28,.55); backdrop-filter:blur(3px); z-index:99;
  opacity:0; pointer-events:none; transition:opacity .28s var(--ease); }
.scrim.is-on{ opacity:1; pointer-events:auto; }
.drawer{ position:fixed; top:0; right:0; height:100%; width:min(420px,92vw); background:var(--bone);
  z-index:100; display:flex; flex-direction:column; transform:translateX(100%);
  transition:transform .34s var(--ease); box-shadow:var(--shadow-3); }
.drawer.is-on{ transform:translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 20px; border-bottom:1px solid var(--line); background:var(--paper); }
.drawer-head b{ font-family:var(--display); font-size:18px; }
.drawer-close{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--line-2); transition:.16s; }
.drawer-close:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }
.drawer-close svg{ width:16px; height:16px; }
.drawer-body{ flex:1; overflow-y:auto; padding:16px 20px; display:grid; gap:12px; align-content:start; }
.drawer-foot{ padding:18px 20px; border-top:1px solid var(--line); background:var(--paper); display:grid; gap:12px; }
.dcart-row{ display:grid; grid-template-columns:64px 1fr auto; gap:12px; background:var(--paper);
  border:1px solid var(--line); border-radius:12px; padding:11px; align-items:center; }
.dcart-row .cart-thumb{ width:64px; border-radius:8px; }
.dcart-row b{ font-size:13px; font-weight:600; line-height:1.4; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dcart-row .small{ color:var(--ink-3); }

/* mobile nav drawer */
.mnav{ display:grid; gap:2px; }
.mnav a{ display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:10px;
  font-size:15px; font-weight:600; background:var(--paper); border:1px solid var(--line); }
.mnav a svg{ width:19px; height:19px; color:var(--wine); }

/* ---------- 28. Misc ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

.skip{ position:absolute; left:-9999px; top:0; z-index:300; background:var(--wine); color:#fff; padding:12px 20px; border-radius:0 0 10px 0; font-weight:700; }
.skip:focus{ left:0; }

/* ---------- 29. Responsive ---------- */
@media (max-width:1180px){
  .pgrid-5{ grid-template-columns:repeat(4,1fr); }
  .hero-grid{ grid-template-columns:1fr; gap:44px; }
  .hero-art{ max-width:560px; }
  .ws-grid{ grid-template-columns:1fr; gap:36px; }
  .cattiles{ grid-template-columns:repeat(2,1fr); }
  .shop{ grid-template-columns:230px 1fr; gap:24px; }
  .pdp{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:980px){
  .search-cat{ display:none; }
  .hact-txt{ display:none; }
  .hact{ padding:9px; }
  .cart-count{ left:26px; }
  .trust-grid{ grid-template-columns:repeat(2,1fr); }
  .trust-item:nth-child(2){ border-right:0; }
  .trust-item:nth-child(1),.trust-item:nth-child(2){ border-bottom:1px solid var(--line); }
  .steps{ grid-template-columns:repeat(2,1fr); gap:30px 0; }
  .step::after{ display:none; }
  .step:nth-child(odd){ padding-left:0; }
  .step:nth-child(even){ padding-right:0; }
  .reviews{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:34px; }
  .cart-layout,.checkout-layout{ grid-template-columns:1fr; }
  .summary{ position:static; }
  .pdp{ grid-template-columns:1fr; }
  .gallery{ position:static; max-width:520px; }
  .seo-copy .cols{ columns:1; }
}
@media (max-width:860px){
  .shop{ grid-template-columns:1fr; }
  .filters{ position:fixed; top:0; right:0; height:100%; width:min(340px,92vw); z-index:100;
    border-radius:0; border:0; transform:translateX(100%); transition:transform .34s var(--ease);
    overflow-y:auto; box-shadow:var(--shadow-3); }
  .filters.is-on{ transform:translateX(0); }
  .filter-toggle{ display:inline-flex; }
  .pgrid-5,.pgrid-4{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:720px){
  :root{ --gut:16px; }
  .topbar-right a:not(.tb-keep){ display:none; }
  .topbar-sep{ display:none; }
  .header-main{ height:64px; gap:12px; flex-wrap:wrap; }
  .search{ order:3; flex-basis:100%; max-width:none; margin-bottom:12px; }
  .header-main{ height:auto; padding-top:12px; }
  .burger{ display:grid; }
  .catnav{ display:none; }
  .hact.hact-acc{ display:none; }
  .pgrid,.pgrid-5,.pgrid-4{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .cattiles{ grid-template-columns:1fr; }
  .cattile{ min-height:230px; }
  .hero-stats{ gap:22px; }
  .hero-seal{ width:88px; height:88px; right:-4px; bottom:-14px; }
  .hero-seal .seal{ width:88px; height:88px; }
  .formgrid{ grid-template-columns:1fr; }
  .co-steps{ font-size:12px; }
  .co-step span{ display:none; }
  .footer-top{ grid-template-columns:1fr; gap:28px; }
  .gallery{ grid-template-columns:1fr; }
  .gal-thumbs{ grid-auto-flow:column; grid-auto-columns:64px; overflow-x:auto; order:2; }
  .cart-row{ grid-template-columns:76px 1fr; }
  .cart-thumb{ width:76px; }
  .cart-line-price{ grid-column:2; text-align:left; }
  .pdp-price .price-now{ font-size:31px; }
  .buybox .btn{ min-width:100%; }
  .tier-row{ grid-template-columns:1fr; }
  .spec-table tr td:first-child{ width:140px; }
}
@media (max-width:420px){
  .pgrid,.pgrid-5,.pgrid-4{ grid-template-columns:1fr; }
  .trust-grid{ grid-template-columns:1fr; }
  .trust-item{ border-right:0 !important; border-bottom:1px solid var(--line); }
  .steps{ grid-template-columns:1fr; }
}

/* ---------- 30. how-it-works page ---------- */
.hiw-hero{ display:grid; grid-template-columns:1.4fr auto; gap:40px; align-items:center; }
.steps-8{ grid-template-columns:repeat(4,1fr); row-gap:36px; }
.cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cards-3 > .stamped{ border:1px solid var(--line); padding:30px; color:var(--ink); }

@media (max-width:980px){
  .hiw-hero{ grid-template-columns:1fr; gap:28px; }
  .hiw-hero > div:last-child{ justify-self:start; }
  .steps-8{ grid-template-columns:repeat(2,1fr); }
  .cards-3{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .steps-8{ grid-template-columns:1fr; }
}

/* ---------- 31. Overflow hardening ---------- */
/* Grid children default to min-content width, which lets long tables and
   Georgian words push a column wider than the viewport. Cap them. */
.ws-grid,.shop,.pdp,.cart-layout,.checkout-layout,.hero-grid,.hiw-hero{ grid-template-columns:none; }
.ws-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); }
.shop{ grid-template-columns:262px minmax(0,1fr); }
.pdp{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); }
.cart-layout,.checkout-layout{ grid-template-columns:minmax(0,1fr) 372px; }
.hero-grid{ grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); }
.hiw-hero{ grid-template-columns:minmax(0,1.4fr) auto; }
.ws-grid > *,.shop > *,.pdp > *,.cart-layout > *,.checkout-layout > *,
.hero-grid > *,.hiw-hero > *,.cards-3 > *,.steps > *,.footer-top > *{ min-width:0; }

.tscroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tscroll .ws-table{ min-width:460px; }

@media (max-width:1180px){
  .ws-grid{ grid-template-columns:minmax(0,1fr); }
  .shop{ grid-template-columns:230px minmax(0,1fr); }
  .pdp{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .hero-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:980px){
  .cart-layout,.checkout-layout,.pdp{ grid-template-columns:minmax(0,1fr); }
  .hiw-hero{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:860px){
  .shop{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- 32. Shop bar on narrow screens ---------- */
.shopbar > .row{ flex-wrap:wrap; min-width:0; }
.sortsel{ max-width:100%; }
@media (max-width:720px){
  .shopbar{ gap:12px; }
  .shopbar-count{ width:100%; }
  .shopbar > .row{ width:100%; }
  .shopbar > .row > label{ display:none; }
  .sortsel{ flex:1 1 auto; min-width:0; }
  .filter-toggle{ flex:none; }
}

/* ---------- 33. Ultra-narrow safety (<320px) ---------- */
.header-main > *{ min-width:0; }
.search,.search-form{ min-width:0; }
@media (max-width:400px){
  .search-go{ width:46px; }
  .btn-lg{ height:48px; padding-inline:18px; font-size:14.5px; }
  .hero-stat b{ font-size:22px; }
  .cd-box{ min-width:46px; }
}

/* ---------- 34. Real product photography ---------- */
.pc-media > img{ object-fit:contain; background:#F7F3EA; padding:0; }
.gal-main img{ width:100%; height:100%; object-fit:contain; background:#F7F3EA; }
.gal-thumb img{ width:100%; height:100%; object-fit:contain; background:#F7F3EA; }
.cart-thumb img{ width:100%; height:100%; object-fit:contain; background:#F7F3EA; }
.hero-card .pc-media img{ object-fit:contain; }

/* ---------- 35. Free-shipping reached: one quiet line, not a panel ---------- */
.freeship-done{
  margin:0; font-size:12.5px; font-weight:600; color:var(--green);
  display:flex; align-items:center; gap:6px;
}
.freeship-done::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--green); flex:none;
}
/* safety net: any icon dropped inside these blocks stays icon-sized */
.freeship svg,.freeship-done svg{ width:14px; height:14px; flex:none; }

/* cart line meta: icon sits inline with the text */
.cart-opts{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.cart-opts svg{ width:13px; height:13px; flex:none; }

/* ==========================================================================
   36. Premium pass — cream & navy
   ========================================================================== */

/* ---- hover cross-fade to the second shot ---- */
.pc-media.has-alt .pc-alt{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; background:#F7F3EA;
  opacity:0; transition:opacity .55s var(--ease-slow);
  z-index:1; pointer-events:none;
}
.pc:hover .pc-media.has-alt .pc-alt{ opacity:1; }
.pc:hover .pc-media.has-alt > img:first-of-type,
.pc:hover .pc-media.has-alt > svg{ opacity:0; transition:opacity .55s var(--ease-slow); }
.pc-media.has-alt > img:first-of-type,
.pc-media.has-alt > svg{ transition:opacity .55s var(--ease-slow); }
/* the zoom fights the cross-fade, so hold still where an alt exists */
.pc:hover .pc-media.has-alt > img,
.pc:hover .pc-media.has-alt > svg{ transform:none; }
@media (prefers-reduced-motion:reduce){
  .pc-media.has-alt .pc-alt{ transition:none; }
}

/* ---- colour swatches under the title ---- */
.pc-swatches{ display:flex; align-items:center; gap:5px; margin-top:-2px; }
.pc-sw{
  width:11px; height:11px; border-radius:50%; display:block;
  box-shadow:0 0 0 1px rgba(19,26,38,.16) inset, 0 0 0 1.5px var(--paper);
  outline:1px solid transparent; transition:box-shadow .18s var(--ease);
}
.pc-sw.is-on{ box-shadow:0 0 0 1px rgba(19,26,38,.16) inset, 0 0 0 1.5px var(--paper), 0 0 0 2.5px var(--ink); }
.pc-sw-more{ font-size:10.5px; color:var(--ink-3); letter-spacing:.02em; margin-left:2px; }

/* ---- quieter card hierarchy: same information, less shouting ---- */
.pc{ border-radius:var(--r-lg); transition:transform .35s var(--ease-slow), box-shadow .35s var(--ease-slow), border-color .35s; }
.pc:hover{ transform:translateY(-3px); box-shadow:var(--shadow-3); }
.pc-cat{ font-size:9.5px; letter-spacing:.16em; color:var(--ink-3); font-weight:600; }
.pc-title{ font-size:13.5px; font-weight:600; letter-spacing:-.005em; }
.pc-rate{ font-size:11px; }
.pc-rate b{ font-weight:600; color:var(--ink-2); }
.stars{ color:var(--gold); }
.stars svg{ width:11px; height:11px; }
.price-now{ font-size:19px; letter-spacing:-.015em; }
.price-was{ font-size:12px; opacity:.75; }
.price-off{ font-size:10.5px; font-weight:700; color:var(--sale); letter-spacing:.01em; }
.pc-meta{ font-size:11px; }
.pc-moq{ font-size:10.5px; border-top:1px solid var(--line); padding-top:9px; letter-spacing:.005em; }
.pc-moq b{ font-weight:600; }
.badge{ border-radius:3px; letter-spacing:.05em; font-size:10px; height:21px; }
.badge-sale{ background:var(--sale); }

/* ---- typography: more air, finer labels ---- */
.display{ letter-spacing:-.022em; line-height:1.1; }
.eyebrow{ letter-spacing:.22em; font-size:10.5px; font-weight:600; }
.eyebrow::before{ width:26px; opacity:.5; }
.lede{ line-height:1.72; }
.section-head{ margin-bottom:36px; }

/* ---- a hairline brass rule as the recurring detail ---- */
.rule-dot i{ background:var(--gold); }
.seal{ color:var(--gold); }

/* ---- buttons: squarer, calmer ---- */
.btn{ border-radius:var(--r); letter-spacing:.01em; font-size:14px; }
.btn:hover{ transform:translateY(-1px); }
.btn-lg{ border-radius:var(--r); }
.chip{ border-radius:var(--r); }

/* ---- surfaces ---- */
.pc-media{ background:#F7F3EA; }
.stamped::before{ border-color:var(--line-2); }
.cattile{ border-radius:var(--r-xl); }

/* ---- on navy grounds the primary button inverts to cream ---- */
.hero .btn:not(.btn-ghost-light):not(.btn-gold),
.deals .btn:not(.btn-ghost-light):not(.btn-gold),
.cathero .btn:not(.btn-ghost-light):not(.btn-gold),
.ctaband .btn:not(.btn-ghost-light):not(.btn-gold){
  --btn-bg:var(--bone); --btn-fg:var(--wine-deep); --btn-bd:var(--bone);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.55);
}
.hero .btn:not(.btn-ghost-light):not(.btn-gold):hover,
.deals .btn:not(.btn-ghost-light):not(.btn-gold):hover,
.cathero .btn:not(.btn-ghost-light):not(.btn-gold):hover,
.ctaband .btn:not(.btn-ghost-light):not(.btn-gold):hover{
  background:#fff; border-color:#fff; color:var(--wine-deep);
}
/* secondary on dark: hairline ghost, never a filled slab */
.hero .btn-ghost,.deals .btn-ghost,.cathero .btn-ghost,.ctaband .btn-ghost{
  --btn-bg:transparent; --btn-fg:#EEF1F7; --btn-bd:rgba(255,255,255,.34); box-shadow:none;
}
.hero .btn-ghost:hover,.deals .btn-ghost:hover,.cathero .btn-ghost:hover,.ctaband .btn-ghost:hover{
  background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.7); color:#fff;
}

/* ==========================================================================
   37. Editorial pass — restraint, air, photography first
   ========================================================================== */

/* ---- type: quieter, wider tracking on labels, serif carries the voice ---- */
body{ font-size:14px; letter-spacing:.002em; }
.display{ letter-spacing:-.025em; font-weight:700; }
h1.display{ font-size:clamp(30px,3.8vw,52px); }
h2.display{ font-size:clamp(22px,2.6vw,34px); }
.eyebrow{ font-size:10px; letter-spacing:.28em; font-weight:600; color:var(--ink-3); }
.eyebrow::before{ display:none; }
.eyebrow.on-dark,.eyebrow.gold{ color:var(--gold); }
.lede{ font-size:15px; line-height:1.75; color:var(--ink-2); }
.section{ padding-block:clamp(56px,7vw,104px); }
.section-head{ margin-bottom:44px; }

/* ---- top bar: one quiet line, no colour block ---- */
.topbar{ background:var(--paper); color:var(--ink-3); border-bottom:1px solid var(--line); }
.topbar .wrap{ height:34px; }
.topbar-msgs li{ height:34px; font-size:11px; letter-spacing:.06em; }
.topbar-msgs svg{ color:var(--ink-3); width:12px; height:12px; }
.topbar-right{ font-size:11px; letter-spacing:.06em; }
.topbar-right a:hover{ color:var(--ink); }
.topbar-sep{ background:var(--line-2); }

/* ---- header: centred wordmark, nav beneath, search reduced to a field ---- */
.header-main{ height:88px; gap:20px; }
.logo-mark{ width:32px; height:32px; }
.logo-name{ font-size:24px; letter-spacing:.02em; }
.logo-sub{ font-size:8.5px; letter-spacing:.3em; }
.search-form{ height:38px; background:transparent; border:0; border-bottom:1px solid var(--line-2); border-radius:0; }
.search-form:focus-within{ background:transparent; border-color:var(--ink); box-shadow:none; }
.search-cat{ border-right:1px solid var(--line); font-size:11px; letter-spacing:.1em; color:var(--ink-3); }
.search-input{ font-size:13px; }
.search-go{ width:38px; background:transparent; color:var(--ink); }
.search-go:hover{ background:transparent; color:var(--wine); }
.search-go svg{ width:16px; height:16px; }
.hact svg{ width:19px; height:19px; }
.hact-txt b{ font-size:11px; font-weight:600; letter-spacing:.06em; }
.hact-txt span{ font-size:9.5px; letter-spacing:.04em; }
.cart-count{ background:var(--ink); font-size:10px; min-width:17px; height:17px; }

/* ---- category nav: uppercase, letterspaced, no chips or icons ---- */
.catnav{ border-bottom:1px solid var(--line); }
.catnav .wrap{ height:52px; justify-content:center; gap:0; }
.catnav a{ font-size:11px; letter-spacing:.2em; font-weight:600; color:var(--ink-2);
  padding:0 20px; height:auto; border-radius:0; background:none !important; }
.catnav a svg{ display:none; }
.catnav a:hover{ color:var(--ink); }
.catnav a.is-active{ color:var(--ink); }
.catnav a.is-active::after{ content:""; }
.catnav-all{ color:var(--ink) !important; }
.catnav-deal{ margin-left:0 !important; color:var(--ink-2) !important; font-weight:600 !important; }

/* ---- the tile: photograph first, three words of type ---- */
.pgrid{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:36px 24px; }
.pgrid-4,.pgrid-5{ grid-template-columns:repeat(4,1fr); }
.pc{ background:none; border:0; border-radius:0; overflow:visible; }
.pc:hover{ transform:none; box-shadow:none; }
.pc-media{ border-radius:0; background:#F4F1EA; aspect-ratio:3/4; }
.pc-media > img,.pc-media > svg,.pc-media .pc-alt{ object-fit:cover; background:#F4F1EA; }
.pc-body{ padding:14px 2px 0; gap:6px; }
.pc-title{ font-size:12.5px; font-weight:500; line-height:1.5; letter-spacing:.01em;
  color:var(--ink); min-height:0; -webkit-line-clamp:2; }
.pc:hover .pc-title{ color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:.5px; text-decoration-color:var(--line-2); }
.pc-price{ margin-top:2px; gap:9px; }
.price-now{ font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.01em; }
.price-was{ font-size:11.5px; }
.pc-swatches{ margin-top:1px; gap:6px; }
.pc-sw{ width:9px; height:9px; }
.pc-flag{ position:absolute; top:12px; left:12px; z-index:2; background:var(--paper);
  color:var(--ink); font-size:9px; letter-spacing:.18em; padding:4px 9px; }
.pc-fav{ background:transparent; box-shadow:none; top:8px; right:8px; }
.pc-fav svg{ width:17px; height:17px; color:var(--ink); }
.pc-quick{ left:0; right:0; bottom:0; }
.pc-quick button{ width:100%; background:rgba(255,255,255,.94); color:var(--ink);
  border:0; height:42px; font-size:10.5px; letter-spacing:.2em; font-weight:600; }
.pc-quick button:hover{ background:var(--ink); color:var(--paper); }

/* ---- rails and tiles inherit the same restraint ---- */
.rail{ grid-auto-columns:minmax(280px,1fr); gap:24px; }
.cattile{ border-radius:0; min-height:420px; }
.cattile h3{ font-size:20px; letter-spacing:.01em; }
.cattile-tags span{ font-size:10px; letter-spacing:.14em; background:none; border:0; padding:0 8px 0 0; }
.cattile-go{ font-size:10.5px; letter-spacing:.2em; }
.cattile-n{ font-size:10px; letter-spacing:.18em; }

/* ---- buttons: hairline, uppercase, no shadow ---- */
.btn{ border-radius:0; font-size:11px; letter-spacing:.2em; font-weight:600; height:48px;
  padding-inline:30px; box-shadow:none !important; }
.btn:hover{ transform:none; }
.btn-lg{ height:54px; border-radius:0; font-size:11px; }
.btn-sm{ height:40px; font-size:10px; }
.chip{ border-radius:0; font-size:11px; letter-spacing:.12em; height:36px; }
.link-arrow{ font-size:11px; letter-spacing:.2em; font-weight:600; color:var(--ink); }
.link-arrow:hover{ border-color:var(--ink); }

/* ---- editorial hero: one photograph, three lines of type ---- */
.ed-hero{ position:relative; min-height:min(84vh,760px); display:flex; align-items:flex-end;
  background:var(--wine-deep); overflow:hidden; }
.ed-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 30%; }
.ed-hero-veil{ position:absolute; inset:0;
  background:linear-gradient(to top, rgba(9,15,28,.72) 0%, rgba(9,15,28,.30) 45%, rgba(9,15,28,.10) 100%); }
.ed-hero-inner{ position:relative; z-index:2; padding-block:0 clamp(48px,7vw,84px); color:#fff; }
.ed-hero-inner h1{ color:#fff; margin:14px 0 16px; font-size:clamp(34px,5vw,64px); }
.ed-hero-inner .lede{ color:rgba(255,255,255,.86); max-width:46ch; }
.ed-hero-cta{ display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }
.ed-hero .btn:not(.btn-ghost-light){ --btn-bg:var(--paper); --btn-fg:var(--ink); --btn-bd:var(--paper); }
.ed-hero .btn:not(.btn-ghost-light):hover{ background:var(--bone); border-color:var(--bone); }
@media (max-width:720px){ .ed-hero{ min-height:70vh; } }

/* ---- category hero: photograph, not a stat panel ---- */
.ed-cathero{ position:relative; min-height:min(46vh,420px); display:flex; align-items:flex-end;
  overflow:hidden; }
.ed-cathero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% 22%; }
.ed-cathero-veil{ position:absolute; inset:0;
  background:linear-gradient(to top, rgba(9,15,28,.76) 0%, rgba(9,15,28,.34) 55%, rgba(9,15,28,.12) 100%); }
.ed-cathero .wrap{ position:relative; z-index:2; padding-block:0 clamp(30px,4vw,52px); }
.ed-cathero h1{ margin:12px 0 14px; }
.ed-cathero .lede{ max-width:52ch; }
.subcats .wrap{ justify-content:center; }

/* ---- Golden Goose model row: a second, quieter chip bar ---- */
.modelbar{ border-top:0; background:var(--bone); }
.modelbar .wrap{ padding-block:12px; }
.modelbar .chip{ height:32px; font-size:10.5px; letter-spacing:.16em; border-color:var(--line); }

/* ==========================================================================
   38. Phones — the editorial pass reset the grid, so restore a 2-up layout
   and give the small controls a thumb-sized target.
   ========================================================================== */
@media (max-width:760px){
  /* section 37 set an auto-fill minmax(280px) which collapses to one column
     on a phone. Fashion grids are 2-up on mobile, never 1-up. */
  .pgrid,.pgrid-4,.pgrid-5{ grid-template-columns:repeat(2,1fr) !important; gap:26px 12px; }
  .rail{ grid-auto-columns:minmax(58vw,1fr); gap:12px; }

  .pc-body{ padding-top:11px; gap:5px; }
  .pc-title{ font-size:12px; line-height:1.45; }
  .price-now{ font-size:12px; }
  .pc-flag{ font-size:8.5px; padding:3px 7px; top:9px; left:9px; }

  /* thumb targets */
  .search-form{ height:44px; }
  .search-input{ font-size:16px; }          /* 16px stops iOS zooming on focus */
  .search-go{ width:44px; }
  .hact{ min-height:42px; padding:8px 10px; }
  .chip{ height:38px; padding-inline:14px; }
  .modelbar .chip{ height:36px; }
  .burger{ width:44px; height:44px; }
  .pc-fav{ width:36px; height:36px; }
  .pc-quick button{ height:44px; }
  .btn{ height:50px; }
  .btn-sm{ height:42px; }
  .fopt{ padding:9px 0; }
  .qty{ height:50px; }
  .qty button{ width:48px; }

  /* the editorial hero needs less of the screen on a phone */
  .ed-hero{ min-height:66vh; }
  .ed-hero-inner h1{ font-size:clamp(28px,8vw,40px); }
  .ed-cathero{ min-height:34vh; }

  .section{ padding-block:44px; }
  .section-head{ margin-bottom:26px; }
  .catnav .wrap{ justify-content:flex-start; }
}
@media (max-width:380px){
  .pgrid,.pgrid-4,.pgrid-5{ gap:20px 10px; }
  .pc-title{ font-size:11.5px; }
}

/* the "clear filters" control was a bare 19px line of text on a phone */
@media (max-width:760px){
  .filters-head{ padding:14px 16px; }
  .filters-head button{ min-height:40px; padding:0 4px; display:inline-flex; align-items:center; }
}

/* =========================================================
   39. SANDROS wordmark
   The name is Latin now, so it is set the way a fashion
   wordmark is set: caps, tracked open, no optical kerning
   tricks borrowed from the Georgian display face.
   ========================================================= */
.logo-name{
  font-family:var(--display);
  font-weight:600;
  font-size:19px;
  letter-spacing:.15em;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
}
.logo-txt{ padding-left:2px; }
.logo-sub{ letter-spacing:.2em; }

/* seven letters, so the tracking comes in on narrow screens */
@media (max-width:760px){
  .logo-name{ font-size:16px; letter-spacing:.1em; }
  .logo-sub{ letter-spacing:.14em; }
}
@media (max-width:400px){
  .logo-name{ font-size:15px; letter-spacing:.06em; }
}

/* ---- header height on phones ----------------------------------
   Section 37 sets .header-main{height:88px} unscoped, and it sits
   after the mobile media query, so it won a fight it shouldn't
   have been in: the search field wraps to its own row on a phone
   and the locked height pushed it out of the header and over the
   breadcrumbs. Height goes back to auto below 760px.            */
@media (max-width:760px){
  .header-main{ height:auto; min-height:64px; padding-top:12px; flex-wrap:wrap; }
  .search{ order:3; flex-basis:100%; max-width:none; margin-bottom:12px; }
}

/* ---- topbar ticker --------------------------------------------
   The keyframes stepped a hard 38px while section 37 reset the
   message rows to 34px, so each step landed 4px low and the rows
   drifted into one another. Step and row height now read from one
   value. Messages are also held to a single line: on a phone they
   were wrapping to three, and a 34px window showed slices of two
   at once.                                                       */
.topbar-msgs{ --tick:34px; height:var(--tick); }
.topbar-msgs li{ height:var(--tick); white-space:nowrap; overflow:hidden; }
@keyframes tick{
  0%,26%  { transform:translateY(0) }
  31%,57% { transform:translateY(calc(var(--tick) * -1)) }
  62%,88% { transform:translateY(calc(var(--tick) * -2)) }
  93%,100%{ transform:translateY(calc(var(--tick) * -3)) }
}
/* below this the "how it works" link crowds the ticker into wrapping;
   it is already in the nav drawer and the footer. */
@media (max-width:560px){
  .topbar-right{ display:none; }
  .topbar-msgs li{ font-size:10.5px; letter-spacing:.02em; }
}