/* ==========================================================================
   NEW MAHILA LOK — Design System
   Premium Indian women’s fashion & lifestyle e-commerce
   ========================================================================== */

/* ------------------------------ 1. TOKENS ------------------------------ */
:root {
  /* Brand palette */
  --ivory:        #FDFBF7;
  --cream:        #F7F1E8;
  --cream-deep:   #F0E7DA;
  --burgundy:     #7B1E35;
  --burgundy-mid: #9C2A46;
  --burgundy-dk:  #5C1626;
  --burgundy-lt:  #F6E9ED;
  --gold:         #B99148;
  --gold-lt:      #D9BB7A;
  --gold-pale:    #F1E4C8;
  --charcoal:     #221E20;
  --charcoal-2:   #4A4346;
  --muted:        #8A7F84;
  --line:         #E8DFD4;
  --line-soft:    #F1EAE0;
  --white:        #FFFFFF;

  /* Semantic */
  --success:  #2E7D53;
  --danger:   #C0392B;
  --star:     #C8952E;

  /* Type */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-body: "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Space & shape */
  --gutter: 24px;
  --maxw: 1320px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Elevation */
  --sh-xs: 0 1px 2px rgba(34,30,32,.05);
  --sh-sm: 0 2px 8px rgba(34,30,32,.05);
  --sh-md: 0 6px 20px rgba(34,30,32,.07);
  --sh-lg: 0 14px 38px rgba(34,30,32,.10);
  --sh-xl: 0 28px 64px rgba(34,30,32,.14);
  --sh-gold: 0 10px 30px rgba(185,145,72,.22);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .18s;
  --t: .28s;
  --t-slow: .5s;

  --header-h: 78px;
  --announce-h: 36px;
}

/* ------------------------------ 2. RESET ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }

body {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--charcoal-2);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-weight: 400;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--burgundy); color: var(--white); }

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: #D6C9B8; border-radius: 99px; border: 3px solid var(--cream); }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------ 3. TYPE ------------------------------ */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--charcoal);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.display {
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -.02em;
}

.h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.h4 { font-size: 1.1rem; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow.center { justify-content: center; }
.eyebrow.center::after {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.lede { font-size: clamp(.95rem, 1.15vw, 1.06rem); color: var(--muted); line-height: 1.7; max-width: 62ch; }
.muted { color: var(--muted); }
.small { font-size: .84rem; }
.tiny { font-size: .76rem; }
.strong { font-weight: 500; color: var(--charcoal); }
.strike { text-decoration: line-through; color: var(--muted); }

.serif { font-family: var(--font-display); font-style: italic; color: var(--burgundy); }
.gold-text {
  background: linear-gradient(100deg, var(--gold-lt), var(--gold) 45%, var(--gold-lt) 70%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ------------------------------ 4. LAYOUT ------------------------------ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 880px; }
.section { padding-block: clamp(52px, 7vw, 92px); }
.section-sm { padding-block: clamp(36px, 5vw, 60px); }
.section-cream { background: var(--cream); }
.section-burgundy { background: var(--burgundy); color: rgba(255,255,255,.82); }
.section-burgundy h2, .section-burgundy h3 { color: var(--white); }

.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;
}

.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 300;
  background: var(--burgundy); color: var(--white);
  padding: 12px 20px; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: .9rem; transition: top var(--t-fast);
}
.skip-link:focus { top: 0; }

/* Section heading */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.sec-head .titles { display: flex; flex-direction: column; gap: 12px; }
.sec-head.centered { flex-direction: column; align-items: center; text-align: center; }
.sec-head.centered .titles { align-items: center; }

/* ------------------------------ 5. BUTTONS ------------------------------ */
.btn {
  --btn-bg: var(--burgundy);
  --btn-fg: var(--white);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: .78rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 15px 30px; border-radius: var(--radius-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent;
  cursor: pointer; overflow: hidden; white-space: nowrap;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
              background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.24) 50%, transparent 75%);
  transform: translateX(-120%); transition: transform .65s var(--ease-out);
}
.btn:hover::after { transform: translateX(120%); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); }
.btn:active { transform: translateY(0); }

/* Icons inside buttons need an explicit size.
   Every other component that holds an SVG has one (.chip svg, .aux-btn svg,
   .qty button svg …) but .btn svg was never given a rule, so the icons only
   looked right because every button happened to be content-sized. An SVG with
   a viewBox and no CSS size falls back to default replaced-element sizing and
   will absorb free space, so any .btn that is allowed to grow balloons to the
   height of its icon instead of its label. `flex: none` stops it shrinking
   when the label is long. */
.btn svg { width: 15px; height: 15px; flex: none; }

.btn-gold { --btn-bg: var(--gold); --btn-fg: var(--white); }
.btn-gold:hover { box-shadow: var(--sh-gold); }
.btn-dark { --btn-bg: var(--charcoal); }
.btn-ivory { --btn-bg: var(--ivory); --btn-fg: var(--charcoal); border-color: var(--line); }
.btn-ivory:hover { border-color: var(--gold); }

.btn-outline { --btn-bg: transparent; --btn-fg: var(--charcoal); border-color: var(--charcoal); }
.btn-outline:hover { --btn-bg: var(--charcoal); --btn-fg: var(--white); }

.btn-ghost { --btn-bg: transparent; --btn-fg: var(--burgundy); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--burgundy); background: var(--burgundy-lt); }

.btn-wa { --btn-bg: #1FA855; }
.btn-sm { padding: 11px 20px; font-size: .7rem; }
.btn-lg { padding: 18px 38px; font-size: .82rem; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .76rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--burgundy); padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  transition: gap var(--t) var(--ease), color var(--t) var(--ease);
}
.link-arrow:hover { gap: 15px; color: var(--burgundy-dk); }
.link-arrow svg { width: 14px; height: 14px; }

/* ------------------------------ 6. ANNOUNCEMENT ------------------------------ */
.announce {
  height: var(--announce-h);
  background: var(--charcoal); color: var(--gold-lt);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  overflow: hidden; position: relative;
}
.announce-track { display: flex; gap: 64px; white-space: nowrap; animation: marquee 34s linear infinite; }
.announce-track span { display: inline-flex; align-items: center; gap: 10px; }
.announce-track span::before { content: "◆"; color: var(--burgundy-mid); font-size: .55rem; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.announce:hover .announce-track { animation-play-state: paused; }

/* ------------------------------ 7. HEADER ------------------------------ */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(253,251,247,.9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
.header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 4px 24px rgba(34,30,32,.05); }

.header-inner {
  height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px;
}

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo-mark {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  background: var(--burgundy);
  color: var(--gold-lt);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(185,145,72,.45);
  transition: transform var(--t-slow) var(--ease-out);
}
.logo:hover .logo-mark { transform: rotate(-8deg) scale(1.06); }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-name {
  font-family: var(--font-display); font-size: 1.42rem; font-weight: 600;
  color: var(--charcoal); letter-spacing: .01em;
}
.logo-tag {
  font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-top: 3px; font-weight: 500;
}

/* Header wordmark image.
   The height cap is the only constraint that matters: the artwork is 3.35:1,
   so `max-height` alone pins the aspect ratio and the header height stays
   fixed at 78px no matter how the lockup scales. `width: auto` lets it keep
   that ratio instead of being stretched by a percentage width.
   660x197 is the prepared asset (4x the rendered size), so it stays sharp on
   high-DPI screens while weighing 152 KB instead of 1.1 MB. */
.logo-img { display: inline-flex; align-items: center; }
.logo-img img {
  display: block;
  height: 42px;
  width: auto;
  max-width: 100%;
  transition: opacity var(--t) var(--ease);
}
.logo-img:hover img { opacity: .8; }

/* Primary nav */
.nav { display: flex; align-items: center; justify-content: center; gap: 2px; }
.nav-link {
  position: relative;
  padding: 9px 13px; border-radius: var(--radius-sm);
  font-size: .8rem; font-weight: 400; letter-spacing: .03em;
  color: var(--charcoal-2); white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.nav-link::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 2px;
  height: 1.5px; background: var(--burgundy);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--t) var(--ease-out);
}
.nav-link:hover { color: var(--burgundy); }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav-link.is-active { color: var(--burgundy); font-weight: 500; }

/* Header actions */
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }

.icon-btn {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: var(--charcoal);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.icon-btn:hover { background: var(--cream); color: var(--burgundy); }
.icon-btn:active { transform: scale(.9); }
.icon-btn svg { width: 19px; height: 19px; stroke-width: 1.5; }
.icon-btn .lbl { display: none; }

.badge-count {
  position: absolute; top: 3px; right: 2px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 99px; background: var(--burgundy); color: var(--white);
  font-size: 9.5px; font-weight: 600; line-height: 17px; text-align: center;
  border: 1.5px solid var(--ivory);
  transform: scale(0); transition: transform var(--t) var(--ease-out);
}
.badge-count.is-on { transform: scale(1); }
.badge-count.pop { animation: badgePop .45s var(--ease-out); }
@keyframes badgePop { 0%{transform:scale(1)} 40%{transform:scale(1.45)} 100%{transform:scale(1)} }

/* Header search trigger */
.search-trigger {
  display: flex; align-items: center; gap: 9px;
  height: 40px; padding: 0 16px; margin-right: 6px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--white); color: var(--muted);
  font-size: .8rem; min-width: 210px;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), color var(--t) var(--ease);
}
.search-trigger:hover { border-color: var(--gold); color: var(--charcoal); box-shadow: var(--sh-sm); }
.search-trigger svg { width: 16px; height: 16px; flex: none; }

.burger { display: none; }

/* Header mega dropdown */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--ivory);
  border-top: 1px solid var(--line);
  box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
}
.mega.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-inner { display: grid; grid-template-columns: repeat(4, 1fr) 1.2fr; gap: 30px; padding-block: 34px; }
.mega-inner > * { min-width: 0; }
.mega-col h5 { font-family: var(--font-body); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; font-weight: 600; }
.mega-col a { display: block; padding: 5px 0; font-size: .87rem; color: var(--charcoal-2); transition: color var(--t-fast), transform var(--t-fast); }
.mega-col a:hover { color: var(--burgundy); transform: translateX(4px); }
.mega-feature { position: relative; border-radius: var(--radius); overflow: hidden; height: 100%; min-height: 190px; }
.mega-feature img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.mega-feature:hover img { transform: scale(1.07); }
.mega-feature .ov { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(92,22,38,.85)); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; color: var(--white); }
.mega-feature .ov h4 { color: var(--white); font-size: 1.1rem; }
.mega-feature .ov span { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-lt); margin-top: 5px; }

/* ------------------------------ 8. MOBILE NAV ------------------------------ */
.mobile-drawer {
  position: fixed; inset: 0; z-index: 190; visibility: hidden;
}
.mobile-drawer.is-open { visibility: visible; }
.mobile-scrim {
  position: absolute; inset: 0; background: rgba(34,30,32,.5);
  opacity: 0; transition: opacity var(--t) var(--ease);
  backdrop-filter: blur(2px);
}
.mobile-drawer.is-open .mobile-scrim { opacity: 1; }
.mobile-panel {
  position: absolute; top: 0; left: 0; bottom: 0; width: min(86vw, 360px);
  background: var(--ivory); box-shadow: var(--sh-xl);
  transform: translateX(-100%); transition: transform var(--t) var(--ease-out);
  display: flex; flex-direction: column; overflow-y: auto;
}
.mobile-drawer.is-open .mobile-panel { transform: translateX(0); }
.mobile-head { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--line); }
.mobile-body { padding: 12px 20px 28px; flex: 1; }
.m-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 0; border-bottom: 1px solid var(--line-soft);
  font-size: .95rem; color: var(--charcoal);
}
.m-link:hover { color: var(--burgundy); }
.m-link .chev { transition: transform var(--t) var(--ease); }
.m-link[aria-expanded="true"] .chev { transform: rotate(90deg); }

/* Icons in the mobile drawer.
   The drawer is a flex column, so an SVG with a viewBox and no CSS size falls
   back to default replaced-element sizing and absorbs the free space. That
   rendered the chevrons at 215-262px inside rows whose labels are 15.2px,
   which is what made the menu look oversized. 15px sits just under the label
   and matches the icon sizes used elsewhere on the site; `flex: none` stops a
   long label squeezing it. */
.m-link svg, .m-sub svg, .mobile-foot svg { width: 15px; height: 15px; flex: none; }
.m-sub { overflow: hidden; max-height: 0; transition: max-height var(--t) var(--ease); }
.m-sub.is-open { max-height: 500px; }
.m-sub a { display: block; padding: 11px 0 11px 16px; font-size: .88rem; color: var(--muted); border-left: 1px solid var(--line); }
.m-sub a:hover { color: var(--burgundy); border-color: var(--burgundy); }
.mobile-foot { padding: 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }

/* ------------------------------ 9. SEARCH OVERLAY ------------------------------ */
.search-overlay {
  position: fixed; inset: 0; z-index: 200; visibility: hidden;
}
.search-overlay.is-open { visibility: visible; }
.search-scrim { position: absolute; inset: 0; background: rgba(34,30,32,.45); opacity: 0; transition: opacity var(--t) var(--ease); backdrop-filter: blur(3px); }
.search-overlay.is-open .search-scrim { opacity: 1; }
.search-box {
  position: relative; background: var(--ivory);
  transform: translateY(-24px); opacity: 0;
  transition: transform var(--t) var(--ease-out), opacity var(--t) var(--ease);
  box-shadow: var(--sh-xl);
  max-height: 88vh; display: flex; flex-direction: column;
}
.search-overlay.is-open .search-box { transform: translateY(0); opacity: 1; }
.search-top { display: flex; align-items: center; gap: 14px; padding: 20px clamp(18px, 4vw, 40px); border-bottom: 1px solid var(--line); }
.search-top input {
  flex: 1; border: 0; background: none; outline: none;
  font-family: var(--font-display); font-size: clamp(1.15rem, 2.4vw, 1.6rem); color: var(--charcoal);
}
.search-top input::placeholder { color: #C9BEB4; }
.search-body { overflow-y: auto; padding: 24px clamp(18px, 4vw, 40px) 34px; }
.search-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-bottom: 30px; }
.search-col h5 { font-family: var(--font-body); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 13px; font-weight: 600; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; margin: 0 8px 8px 0; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--white);
  font-size: .82rem; color: var(--charcoal-2);
  transition: all var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--burgundy); background: var(--burgundy-lt); color: var(--burgundy); transform: translateY(-1px); }
.chip svg { width: 12px; height: 12px; opacity: .5; }

.sr-item {
  display: flex; align-items: center; gap: 13px; padding: 10px 0;
  border-bottom: 1px solid var(--line-soft); transition: padding var(--t-fast) var(--ease);
}
.sr-item:hover { padding-left: 7px; }
.sr-item img { width: 54px; height: 54px; border-radius: var(--radius-sm); object-fit: cover; flex: none; }
.sr-item .meta { flex: 1; min-width: 0; }
.sr-item .nm { font-size: .88rem; color: var(--charcoal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-item .pr { font-size: .82rem; color: var(--burgundy); font-weight: 500; }
.search-cat { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: .88rem; color: var(--charcoal-2); }
.search-cat i { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; }
.search-cat .tag { margin-left: auto; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.search-cat:hover { color: var(--burgundy); }
.search-empty { text-align: center; padding: 40px 20px; color: var(--muted); }

/* ------------------------------ 10. PRODUCT CARD ------------------------------ */
.grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 28px 24px;
}

.card { position: relative; display: flex; flex-direction: column; }

.card-media {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--cream); aspect-ratio: 3/3.7;
  margin-bottom: 15px;
  box-shadow: var(--sh-xs);
  transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.card:hover .card-media { box-shadow: var(--sh-lg); transform: translateY(-4px); }

.card-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity .45s var(--ease), transform .7s var(--ease-out);
}
.card-media .img-b { opacity: 0; }
.card:hover .img-a { opacity: 0; }
.card:hover .img-b { opacity: 1; transform: scale(1.04); }

.card-flags { position: absolute; top: 11px; left: 11px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; z-index: 3; }
.flag {
  padding: 5px 10px; border-radius: var(--radius-pill);
  font-size: 9.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  box-shadow: var(--sh-sm);
}
.flag-sale { background: var(--burgundy); color: var(--white); }
.flag-new { background: var(--gold); color: var(--white); }
.flag-best { background: var(--charcoal); color: var(--gold-lt); }

.fav-btn {
  position: absolute; top: 11px; right: 11px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.94); color: var(--charcoal);
  display: grid; place-items: center;
  box-shadow: var(--sh-sm);
  transition: transform var(--t) var(--ease-out), color var(--t-fast), background var(--t-fast);
}
.fav-btn:hover { transform: scale(1.13); color: var(--burgundy); }
.fav-btn svg { width: 16px; height: 16px; }
.fav-btn.is-on { color: var(--burgundy); }
.fav-btn.is-on svg { fill: var(--burgundy); animation: favPop .4s var(--ease-out); }
@keyframes favPop { 0%{transform:scale(1)} 45%{transform:scale(1.35) rotate(-9deg)} 100%{transform:scale(1)} }

/* Hover action rail */
.card-actions {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3;
  display: flex; flex-direction: column; gap: 7px;
  transform: translateY(calc(100% + 14px)); opacity: 0;
  transition: transform var(--t) var(--ease-out), opacity var(--t) var(--ease);
}
.card:hover .card-actions, .card:focus-within .card-actions { transform: translateY(0); opacity: 1; }

.act {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; border-radius: var(--radius-pill);
  font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255,255,255,.96); color: var(--charcoal);
  box-shadow: var(--sh-md);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.act svg { width: 13px; height: 13px; }
.act:hover { background: var(--charcoal); color: var(--white); transform: translateY(-1px); }
.act-primary { background: var(--burgundy); color: var(--white); }
.act-primary:hover { background: var(--burgundy-dk); color: var(--white); }
.act-buy { background: var(--gold); color: var(--white); }
.act-buy:hover { background: #A37F38; color: var(--white); }

/* Card body */
.card-cat { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 500; }
.card-name {
  font-family: var(--font-body); font-size: .93rem; font-weight: 500;
  color: var(--charcoal); margin: 6px 0 5px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card:hover .card-name { color: var(--burgundy); }
.card-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card-desc {
  font-size: .8rem; color: var(--muted); line-height: 1.5; margin-bottom: 9px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em;
}

.card-rate { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.stars { display: inline-flex; gap: 1.5px; }
.stars svg { width: 12px; height: 12px; fill: var(--star); }
.stars .off { fill: #DCD3C7; }
.rate-num { font-size: .76rem; color: var(--charcoal); font-weight: 500; }
.rate-cnt { font-size: .72rem; color: var(--muted); }

.card-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.price-now { font-size: 1.12rem; font-weight: 600; color: var(--charcoal); font-family: var(--font-body); letter-spacing: -.01em; }
.price-mrp { font-size: .84rem; color: var(--muted); text-decoration: line-through; }
.price-off { font-size: .74rem; font-weight: 600; color: var(--success); }

/* Mobile tap targets */
.card-tap { display: none; }
@media (hover: none) {
  .card-actions { position: static; transform: none; opacity: 1; margin-top: 12px; }
  .act { height: 42px; }
}

/* Horizontal scroller (mobile carousels) */
.rail { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; flex: 0 0 auto; }
.rail .card { width: 232px; }
.rail-cat { width: 168px; }

/* ---------------------------- 11. TOP BANNER ---------------------------- */
/* The shop's name artwork, sitting directly under the header.
   It is a transparent PNG, so there is no image box: the calligraphy rests on
   the page's own cream and needs no background, border or shadow of its own.
   max-width keeps it inside the type measure rather than letting a 2153px
   source sprawl edge to edge, and guarantees it is downscaled (never
   upscaled) on every viewport. */
.top-banner {
  background: var(--cream);
  padding-block: 34px 10px;
  text-align: center;
}
.top-banner-img {
  display: block;
  width: 100%;
  max-width: 1040px;
  height: auto;
  margin-inline: auto;
}

/* ------------------------------ 12. HERO ------------------------------ */
/* Two columns: copy left, store photograph right. */
.hero {
  position: relative; overflow: hidden;
  background: var(--cream);
  padding-block: 46px 78px;
}
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }
.hero-copy { position: relative; z-index: 2; max-width: 640px; }
.hero h1 { margin: 18px 0 20px; }
.hero h1 .line2 { display: block; color: var(--burgundy); }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 11px; padding: 8px 17px; border-radius: var(--radius-pill); background: var(--white); border: 1px solid var(--line); font-size: .68rem; letter-spacing: .17em; text-transform: uppercase; color: var(--burgundy); box-shadow: var(--sh-xs); }
.hero-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--burgundy); animation: pulseDot 2s infinite; }
@keyframes pulseDot { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(1.5)} }

.hero-cta { display: flex; flex-wrap: wrap; gap: 13px; margin: 30px 0 34px; }

.hero-proof {
  display: flex; align-items: center;
  gap: 26px; flex-wrap: wrap;
  padding-top: 26px; border-top: 1px solid var(--line);
  max-width: 560px;
}
.prof-item { display: flex; flex-direction: column; }
.prof-item b { font-family: var(--font-display); font-size: 1.6rem; color: var(--burgundy); line-height: 1; font-weight: 600; }
.prof-item span { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }

/* Featured product row. Three chips below the CTAs — one product from each
   of the headline ranges. Deliberately not overlaid on the photograph: the
   photo carries no text, so the composition stays clean. */
.hero-picks { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-pick {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px 10px 11px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-pill); box-shadow: var(--sh-xs);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.hero-pick:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--gold); }
.hero-pick img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.hero-pick .nm { display: block; font-size: .8rem; font-weight: 500; color: var(--charcoal); line-height: 1.3; }
.hero-pick .pr { display: block; font-size: .78rem; font-weight: 600; color: var(--burgundy); margin-top: 2px; }

/* Hero photograph.
   ------------------------------------------------------------------
   Two deliberate constraints:

   max-width: 480px is the photo's native width. The grid column is wider
   than that on a large desktop, so without the cap the browser would
   upscale the image and soften it. At 480px the photo is used 1:1 or
   downscaled at every viewport.

   aspect-ratio: 3/4 is within 2px of the source's 0.748, so object-fit
   crops a couple of rows rather than stretching the photo.

   The gold hairline sits behind the frame (a sibling pseudo-element, not a
   child) because the image is clipped by its own border-radius and would
   clip the offset outline too. */
.hero-visual { position: relative; justify-self: end; width: 100%; max-width: 480px; }
.hero-visual::before {
  content: "";
  position: absolute;
  top: 22px; left: 24px; right: -20px; bottom: -20px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  opacity: .5;
}
.hero-visual img {
  position: relative; z-index: 1;
  display: block; width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-xl);
  background: var(--cream-deep);
}

/* Hero strip */
.hero-strip { background: var(--charcoal); color: var(--white); padding-block: 15px; overflow: hidden; }
.hero-strip-track { display: flex; gap: 56px; white-space: nowrap; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-lt); animation: marquee 40s linear infinite; }

/* ------------------------------ 12. CATEGORY CARDS ------------------------------ */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cat-card {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); aspect-ratio: 4/5; background: var(--cream);
  box-shadow: var(--sh-xs);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.cat-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.cat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.cat-card:hover img { transform: scale(1.09); }
.cat-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 32%, rgba(60,16,28,.5) 72%, rgba(60,16,28,.9));
  transition: opacity var(--t) var(--ease);
}
.cat-ov {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 22px 20px; color: var(--white);
  display: flex; flex-direction: column; gap: 3px;
}
.cat-ov h3 { color: var(--white); font-size: 1.24rem; }
.cat-ov .tg { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-lt); }
.cat-ov .go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 11px;
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.cat-card:hover .go { opacity: 1; transform: translateY(0); }
.cat-ov .go svg { width: 12px; height: 12px; }

/* "Shop everything" tile — keeps the category grid to a clean 8-up */
.cat-card.is-all { background: linear-gradient(150deg, var(--burgundy) 0%, #4E1122 100%); }
.cat-card.is-all::after { display: none; }
.cat-card.is-all::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 78% 22%, rgba(217,187,122,.28), transparent 52%),
    radial-gradient(circle at 16% 84%, rgba(255,255,255,.12), transparent 46%);
}
.cat-card.is-all .cat-ov { position: relative; z-index: 2; height: 100%; justify-content: flex-end; }
.cat-card.is-all .cat-ov h3 { font-size: 1.5rem; line-height: 1.16; }
.cat-card.is-all .go { opacity: 1; transform: none; }
.cat-card.is-all:hover { background: linear-gradient(150deg, #8C2440 0%, #571429 100%); }
.cat-all-num {
  position: absolute; top: 20px; left: 20px; z-index: 2;
  font-family: var(--font-display); font-size: 3.1rem; line-height: 1;
  color: rgba(255,255,255,.16); font-weight: 600; letter-spacing: -.02em;
}
.cat-card.is-all .go { color: var(--gold-lt); }
.cat-count {
  position: absolute; top: 13px; right: 13px; z-index: 2;
  padding: 5px 11px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.92); color: var(--burgundy);
  font-size: .66rem; font-weight: 600; letter-spacing: .06em;
}

/* ------------------------------ 13. SHOWCASE TILES ------------------------------ */
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tile-grid.five { grid-template-columns: repeat(5, 1fr); }
.tile-grid.six { grid-template-columns: repeat(6, 1fr); }
.tile {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); aspect-ratio: 1; background: var(--cream);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.tile:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.tile:hover img { transform: scale(1.1); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(60,16,28,.78)); }
.tile-ov { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 15px 14px; color: var(--white); }
.tile-ov h4 { color: var(--white); font-size: .95rem; line-height: 1.25; }
.tile-ov .go { display: flex; align-items: center; gap: 6px; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-lt); margin-top: 5px; opacity: 0; transform: translateY(6px); transition: all var(--t) var(--ease); }
.tile:hover .go { opacity: 1; transform: translateY(0); }
.tile-ov .go svg { width: 11px; height: 11px; }

/* ------------------------------ 14. OFFER BANNER ------------------------------ */
.offer-hero {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--burgundy-dk), var(--burgundy) 45%, #A63254);
  color: var(--white); padding: clamp(34px, 5vw, 60px);
  box-shadow: var(--sh-lg);
}
.offer-hero::before {
  content: ""; position: absolute; top: -40%; right: -8%; width: 460px; height: 460px;
  border-radius: 50%; background: radial-gradient(circle, rgba(217,187,122,.28), transparent 68%);
}
.offer-hero::after {
  content: ""; position: absolute; bottom: -50%; left: -6%; width: 380px; height: 380px;
  border-radius: 50%; border: 1px solid rgba(217,187,122,.22);
}
.offer-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.offer-hero h2 { color: var(--white); }
.offer-kicker { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-lt); }
.offer-copy p { color: rgba(255,255,255,.78); margin: 14px 0 26px; max-width: 46ch; }
.offer-timer { display: flex; gap: 10px; margin-bottom: 28px; }
.timer-box {
  min-width: 62px; padding: 10px 8px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  text-align: center; backdrop-filter: blur(6px);
}
.timer-box b { display: block; font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--white); font-weight: 600; }
.timer-box span { font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-lt); }

.offer-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 26px; }
.offer-card {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: var(--white); box-shadow: var(--sh-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.offer-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.offer-card img { width: 100%; aspect-ratio: 16/11; object-fit: cover; }
.offer-card .body { padding: 17px 19px 20px; }
.offer-pct { display: inline-block; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--burgundy); color: var(--white); font-size: .68rem; font-weight: 600; letter-spacing: .08em; margin-bottom: 10px; }
.offer-card h4 { font-size: 1.02rem; margin-bottom: 5px; }
.offer-card .terms { font-size: .76rem; color: var(--muted); margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line); }

/* ------------------------------ 15. FEATURE STRIP ------------------------------ */
.feature-band { background: var(--cream); padding-block: 20px; border-block: 1px solid var(--line); }
.feature-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.feature-item { display: flex; align-items: center; justify-content: center; gap: 11px; text-align: left; }
.feature-item i {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: var(--white); color: var(--burgundy);
  display: grid; place-items: center; box-shadow: var(--sh-xs);
  transition: transform var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease);
}
.feature-item:hover i { transform: translateY(-3px) scale(1.06); background: var(--burgundy); color: var(--gold-lt); }
.feature-item i svg { width: 17px; height: 17px; }
.feature-item b { display: block; font-size: .8rem; color: var(--charcoal); font-weight: 500; line-height: 1.3; }
.feature-item span { font-size: .7rem; color: var(--muted); line-height: 1.3; }

/* ------------------------------ 16. STORY / ABOUT ------------------------------ */
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.story-media { position: relative; }
.story-img-main { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--sh-lg); aspect-ratio: 4/4.4; }
.story-img-main img { width: 100%; height: 100%; object-fit: cover; }
.story-img-sub {
  position: absolute; bottom: -34px; right: -30px; width: 46%;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--sh-xl); border: 6px solid var(--ivory); aspect-ratio: 1;
}
.story-img-sub img { width: 100%; height: 100%; object-fit: cover; }
.story-badge {
  position: absolute; top: 22px; left: -26px;
  background: var(--burgundy); color: var(--white);
  padding: 18px 22px; border-radius: var(--radius);
  box-shadow: var(--sh-lg); text-align: center;
}
.story-badge b { display: block; font-family: var(--font-display); font-size: 2.1rem; line-height: 1; color: var(--gold-lt); font-weight: 600; }
.story-badge span { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; }

.story-list { display: flex; flex-direction: column; gap: 20px; margin-top: 28px; }
.story-item { display: flex; gap: 15px; }
.story-item i {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  background: var(--burgundy-lt); color: var(--burgundy);
  display: grid; place-items: center;
}
.story-item i svg { width: 16px; height: 16px; }
.story-item b { display: block; color: var(--charcoal); font-size: .95rem; margin-bottom: 3px; }
.story-item p { font-size: .86rem; color: var(--muted); line-height: 1.6; }

.story-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }
.stat { text-align: center; }
.stat b { display: block; font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 2.6rem); color: var(--burgundy); line-height: 1; font-weight: 600; }
.stat span { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 8px; display: block; }

/* ------------------------------ 17. INSTAGRAM ------------------------------ */
.ig-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 34px; }
.ig-handle { font-size: .95rem; color: var(--charcoal-2); }
.ig-handle b { color: var(--burgundy); font-weight: 500; }
/* 9 posts -> a clean 3x3 at every width, like a real feed */
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ig-post {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-sm); aspect-ratio: 1; background: var(--cream);
}
.ig-post img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out), filter var(--t) var(--ease); }
.ig-post:hover img { transform: scale(1.09); filter: brightness(.72); }
.ig-post .ig-ov {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  color: var(--white); opacity: 0; transition: opacity var(--t) var(--ease);
  text-align: center; padding: 16px;
}
.ig-post:hover .ig-ov { opacity: 1; }
.ig-post .ig-ov svg { width: 22px; height: 22px; }
.ig-post .ig-ov b { font-size: .84rem; font-weight: 500; }
.ig-post .ig-ov span { font-size: .7rem; opacity: .82; line-height: 1.4; }
.ig-cta { display: flex; justify-content: center; margin-top: 32px; }

/* ------------------------------ 18. TESTIMONIALS ------------------------------ */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.testi {
  background: var(--white); border-radius: var(--radius);
  padding: 28px 26px; box-shadow: var(--sh-sm);
  border: 1px solid var(--line-soft);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
  position: relative;
}
.testi:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.testi .quote { position: absolute; top: 16px; right: 22px; font-family: var(--font-display); font-size: 4rem; color: var(--gold-pale); line-height: 1; }
.testi p { font-size: .88rem; line-height: 1.7; color: var(--charcoal-2); font-style: italic; margin-bottom: 18px; }
.testi-who { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.testi-av { width: 38px; height: 38px; border-radius: 50%; background: var(--burgundy-lt); color: var(--burgundy); display: grid; place-items: center; font-family: var(--font-display); font-size: 1rem; font-weight: 600; flex: none; }
.testi-who b { display: block; font-size: .86rem; color: var(--charcoal); font-weight: 500; }
.testi-who span { font-size: .74rem; color: var(--muted); }

/* ------------------------------ 19. BREADCRUMBS ------------------------------ */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: .78rem; color: var(--muted); padding-block: 18px; }
.crumbs a { transition: color var(--t-fast); }
.crumbs a:hover { color: var(--burgundy); }
.crumbs .sep { opacity: .5; }
.crumbs .cur { color: var(--charcoal); font-weight: 500; }

/* ------------------------------ 20. PDP ------------------------------ */
.pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }

.gallery { position: sticky; top: calc(var(--header-h) + 20px); display: grid; grid-template-columns: 82px 1fr; gap: 14px; }
.gal-thumbs { display: flex; flex-direction: column; gap: 11px; }
.gal-thumb {
  position: relative; aspect-ratio: 1; border-radius: var(--radius-sm);
  overflow: hidden; border: 1.5px solid var(--line); background: var(--cream);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
  cursor: pointer;
}
.gal-thumb:hover { transform: translateX(2px); }
.gal-thumb.is-on { border-color: var(--burgundy); box-shadow: 0 0 0 1px var(--burgundy); }
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; }

.gal-main {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--cream); aspect-ratio: 4/4.7; box-shadow: var(--sh-md);
  cursor: zoom-in;
}
.gal-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.gal-main.is-zoom img { transform: scale(1.75); transition: transform .5s var(--ease); }
.gal-flags { position: absolute; top: 14px; left: 14px; z-index: 3; display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.gal-zoomhint {
  position: absolute; bottom: 14px; right: 14px; z-index: 3;
  padding: 8px 13px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.93); color: var(--charcoal);
  font-size: .66rem; letter-spacing: .08em; display: flex; align-items: center; gap: 6px;
}
.gal-zoomhint svg { width: 13px; height: 13px; }

.pdp-head { display: flex; flex-direction: column; gap: 13px; }
.pdp-brand { display: flex; align-items: center; gap: 10px; }
.pdp-brand b { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.pdp-brand .tag { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--burgundy); background: var(--burgundy-lt); padding: 3px 9px; border-radius: 99px; }
.pdp h1 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.pdp-rate { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-block: 4px; }
.rate-box { display: flex; align-items: center; gap: 8px; }
.rate-box b { font-size: .96rem; color: var(--charcoal); font-weight: 600; }
.rate-sep { width: 1px; height: 14px; background: var(--line); }
.pdp-stock { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--success); font-weight: 500; }
.pdp-stock i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulseDot 2s infinite; }
.pdp-stock.low { color: #C87A1E; }
.pdp-stock.out { color: var(--muted); }

.pdp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; padding: 16px 0; border-block: 1px solid var(--line); }
.pdp-price .now { font-size: 2.1rem; font-weight: 600; color: var(--burgundy); font-family: var(--font-body); letter-spacing: -.02em; }
.pdp-price .was { font-size: 1.02rem; color: var(--muted); text-decoration: line-through; }
.pdp-price .save { font-size: .8rem; font-weight: 600; color: var(--success); }
.pdp-price .tax { font-size: .74rem; color: var(--muted); width: 100%; }

.pdp-desc { font-size: .9rem; line-height: 1.72; color: var(--charcoal-2); }

.opt-block { display: flex; flex-direction: column; gap: 11px; }
.opt-label { display: flex; align-items: center; justify-content: space-between; font-size: .78rem; }
.opt-label b { color: var(--charcoal); font-weight: 500; letter-spacing: .04em; }
.opt-label span { color: var(--muted); }
.swatch-row { display: flex; flex-wrap: wrap; gap: 9px; }
.swatch {
  padding: 8px 15px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--line); background: var(--white);
  font-size: .8rem; color: var(--charcoal-2);
  transition: all var(--t-fast) var(--ease);
}
.swatch:hover { border-color: var(--gold); }
.swatch.is-on { border-color: var(--burgundy); background: var(--burgundy); color: var(--white); font-weight: 500; }
.swatch:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--radius-pill); overflow: hidden; background: var(--white); }
.qty button { width: 40px; height: 42px; display: grid; place-items: center; color: var(--charcoal); transition: background var(--t-fast); }
.qty button:hover:not(:disabled) { background: var(--cream); color: var(--burgundy); }
.qty button:disabled { opacity: .3; cursor: not-allowed; }
.qty button svg { width: 13px; height: 13px; }
.qty input { width: 48px; height: 42px; border: 0; text-align: center; font-size: .95rem; font-weight: 500; color: var(--charcoal); background: none; outline: none; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pdp-actions { display: flex; flex-direction: column; gap: 11px; }
/* Add to Cart / Buy Now sit side by side sized to their own labels.
   This was a 1fr 1fr grid, which stretched both buttons to half the column
   regardless of how short the text is — the padding was only half the
   problem. flex + fit-content keeps them compact on desktop while .btn's
   15px vertical padding still clears the 44px touch-target minimum. */
.pdp-actions .row { display: flex; flex-wrap: wrap; gap: 10px; }
.pdp-actions .row .btn { flex: 0 0 auto; }
.pdp-aux { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.aux-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 13px 6px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); font-size: .7rem; color: var(--charcoal-2);
  transition: all var(--t-fast) var(--ease); text-align: center;
}
.aux-btn:hover { border-color: var(--burgundy); color: var(--burgundy); transform: translateY(-2px); }
.aux-btn.is-on { border-color: var(--burgundy); background: var(--burgundy-lt); color: var(--burgundy); }
.aux-btn svg { width: 17px; height: 17px; }

.pdp-usps { display: flex; flex-direction: column; gap: 11px; padding: 19px; border-radius: var(--radius); background: var(--cream); }

/* Visiting card (contact page, "Visit The Store").
   The artwork is a fully opaque gold card — it has no alpha, so unlike the
   name banner it cannot dissolve into the page. It is framed as a physical
   object instead: a small radius, a hairline in the site's gold, and a
   layered shadow that lifts it off the cream. */
.vcard { margin: 0 0 22px; }
.vcard-frame {
  max-width: 460px;
  border: 1px solid rgba(185, 145, 72, .55);
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream-deep);
  box-shadow: 0 1px 2px rgba(34,30,32,.10),
              0 10px 24px rgba(34,30,32,.13),
              0 24px 48px rgba(34,30,32,.10);
}
.vcard-frame img { display: block; width: 100%; height: auto; }
.vcard figcaption {
  margin-top: 11px;
  font-size: .72rem;
  letter-spacing: .03em;
  color: var(--muted);
}
.usp { display: flex; align-items: flex-start; gap: 11px; font-size: .82rem; }
.usp i { color: var(--burgundy); flex: none; margin-top: 1px; }
.usp i svg { width: 15px; height: 15px; }
.usp b { color: var(--charcoal); font-weight: 500; }
.usp span { color: var(--muted); display: block; font-size: .78rem; }

/* PDP tabs */
.pdp-tabs { margin-top: clamp(46px, 6vw, 76px); }
.tab-head {
  display: flex; gap: 3px; border-bottom: 1.5px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.tab-head::-webkit-scrollbar { display: none; }
.tab-btn {
  position: relative; padding: 15px 22px; white-space: nowrap;
  font-size: .8rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); transition: color var(--t) var(--ease);
}
.tab-btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1.5px; height: 2px;
  background: var(--burgundy); transform: scaleX(0);
  transition: transform var(--t) var(--ease-out);
}
.tab-btn:hover { color: var(--charcoal); }
.tab-btn.is-on { color: var(--burgundy); }
.tab-btn.is-on::after { transform: scaleX(1); }
.tab-panel { display: none; padding-top: 30px; }
.tab-panel.is-on { display: block; animation: fadeUp .4s var(--ease-out); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.detail-body { max-width: 780px; }
.detail-body h4 { font-family: var(--font-body); font-size: .88rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 26px 0 12px; font-weight: 600; }
.detail-body h4:first-child { margin-top: 0; }
.detail-body p { font-size: .9rem; line-height: 1.78; }
.detail-body ul { display: flex; flex-direction: column; gap: 10px; }
.detail-body ul li { display: flex; align-items: flex-start; gap: 11px; font-size: .89rem; line-height: 1.6; }
.detail-body ul li::before { content: "✓"; color: var(--burgundy); font-weight: 700; flex: none; margin-top: 1px; }

.spec-table { width: 100%; border-collapse: collapse; max-width: 620px; }
.spec-table th, .spec-table td { text-align: left; padding: 13px 16px; font-size: .86rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { width: 40%; color: var(--muted); font-weight: 500; background: var(--cream); }
.spec-table td { color: var(--charcoal-2); }

/* Reviews */
.rev-summary { display: grid; grid-template-columns: 240px 1fr; gap: 40px; padding: 26px; background: var(--cream); border-radius: var(--radius); margin-bottom: 32px; }
.rev-score { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rev-score b { font-family: var(--font-display); font-size: 3.4rem; line-height: 1; color: var(--burgundy); font-weight: 600; }
.rev-score .stars { margin-block: 8px 5px; }
.rev-score span { font-size: .78rem; color: var(--muted); }
.rev-bars { display: flex; flex-direction: column; gap: 9px; justify-content: center; }
.rev-bar { display: grid; grid-template-columns: 46px 1fr 42px; align-items: center; gap: 11px; font-size: .78rem; }
.rev-bar .track { height: 7px; border-radius: 99px; background: #E2D9CC; overflow: hidden; }
.rev-bar .fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gold), var(--gold-lt)); transition: width .9s var(--ease-out); }

.rev-list { display: flex; flex-direction: column; gap: 0; }
.rev-item { padding-block: 22px; border-bottom: 1px solid var(--line); }
.rev-item:last-child { border-bottom: 0; }
.rev-item-head { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; flex-wrap: wrap; }
.rev-item-head b { font-size: .9rem; color: var(--charcoal); font-weight: 500; }
.rev-verified { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; color: var(--success); background: #E9F5EE; padding: 3px 9px; border-radius: 99px; }
.rev-verified svg { width: 10px; height: 10px; }
.rev-date { font-size: .74rem; color: var(--muted); margin-left: auto; }
.rev-item p { font-size: .88rem; line-height: 1.7; }
.rev-item .rev-sub { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; }
.rev-sub span { font-size: .72rem; color: var(--muted); background: var(--cream); padding: 4px 10px; border-radius: 99px; }

/* FAQ */
.faq-list { max-width: 820px; display: flex; flex-direction: column; gap: 10px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); overflow: hidden; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.faq-item.is-open { border-color: var(--burgundy); box-shadow: var(--sh-sm); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px 22px; text-align: left; font-size: .94rem; color: var(--charcoal); font-weight: 500; }
.faq-q i { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; transition: all var(--t) var(--ease); }
.faq-item.is-open .faq-q i { background: var(--burgundy); border-color: var(--burgundy); color: var(--white); transform: rotate(45deg); }
.faq-q i svg { width: 10px; height: 10px; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--t) var(--ease-out); }
.faq-item.is-open .faq-a { max-height: 400px; }
.faq-a p { padding: 0 22px 20px; font-size: .88rem; line-height: 1.75; color: var(--charcoal-2); }

/* ------------------------------ 21. SHOP / FILTERS ------------------------------ */
.shop-layout { display: grid; grid-template-columns: 264px 1fr; gap: 34px; align-items: start; }
/* Grid items default to min-width:auto, i.e. min-content. Without this, any
   wide (or nowrap) descendant floors the 1fr track and scrolls the page. */
.shop-layout > * { min-width: 0; }

.filters { position: sticky; top: calc(var(--header-h) + 20px); max-height: calc(100vh - var(--header-h) - 40px); overflow-y: auto; padding-right: 6px; }
.filters::-webkit-scrollbar { width: 6px; }
.filters::-webkit-scrollbar-thumb { background: var(--line); border: none; }

.fgroup { border-bottom: 1px solid var(--line); }
.fgroup:last-child { border-bottom: 0; }
.fgroup-btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 15px 0; font-size: .82rem; font-weight: 500; color: var(--charcoal); text-align: left;
}
/* the chevron is wrapped in an <i> like every other icon on the site, so it
   needs flex:none and an explicit size — the global reset leaves SVG at its
   intrinsic size, which is enormous next to a .82rem label */
.fgroup-btn i { display: grid; place-items: center; flex: none; transition: transform var(--t) var(--ease); opacity: .5; }
.fgroup-btn i svg { width: 12px; height: 12px; }
.fgroup.is-open .fgroup-btn i { transform: rotate(90deg); }
.fgroup-body { max-height: 0; overflow: hidden; transition: max-height var(--t) var(--ease-out); }
.fgroup.is-open .fgroup-body { max-height: 420px; }
.fgroup-body-inner { padding-bottom: 16px; display: flex; flex-direction: column; gap: 10px; }

.check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: .83rem; color: var(--charcoal-2); transition: color var(--t-fast); }
.check:hover { color: var(--burgundy); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box {
  width: 17px; height: 17px; flex: none; border: 1.5px solid var(--line);
  border-radius: 5px; background: var(--white);
  display: grid; place-items: center;
  transition: all var(--t-fast) var(--ease);
}
.check .box svg { width: 10px; height: 10px; color: var(--white); opacity: 0; transform: scale(.4); transition: all var(--t-fast) var(--ease-out); }
.check input:checked + .box { background: var(--burgundy); border-color: var(--burgundy); }
.check input:checked + .box svg { opacity: 1; transform: scale(1); }
.check input:focus-visible + .box { outline: 2px solid var(--burgundy); outline-offset: 2px; }
.check .cnt { margin-left: auto; font-size: .74rem; color: var(--muted); }

.radio-row { display: flex; flex-direction: column; gap: 10px; }
.radio { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: .83rem; color: var(--charcoal-2); }
.radio input { position: absolute; opacity: 0; }
.radio .dot { width: 17px; height: 17px; flex: none; border: 1.5px solid var(--line); border-radius: 50%; background: var(--white); display: grid; place-items: center; transition: all var(--t-fast); }
.radio .dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--burgundy); transform: scale(0); transition: transform var(--t-fast) var(--ease-out); }
.radio input:checked + .dot { border-color: var(--burgundy); }
.radio input:checked + .dot::after { transform: scale(1); }
.radio input:focus-visible + .dot { outline: 2px solid var(--burgundy); outline-offset: 2px; }

.range-out { display: flex; justify-content: space-between; font-size: .8rem; color: var(--charcoal); margin-bottom: 12px; }
.range-out span { color: var(--muted); }
.range-slider { position: relative; height: 4px; background: #E5DCCF; border-radius: 99px; margin-bottom: 16px; }
.range-slider .fill-line { position: absolute; height: 100%; background: var(--burgundy); border-radius: 99px; }
.range-slider input[type="range"] { position: absolute; top: -7px; left: 0; width: 100%; height: 18px; -webkit-appearance: none; appearance: none; background: none; pointer-events: none; margin: 0; }
.range-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 17px; height: 17px; border-radius: 50%; background: var(--white); border: 2.5px solid var(--burgundy); cursor: grab; box-shadow: var(--sh-sm); transition: transform var(--t-fast); }
.range-slider input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.15); }
.range-slider input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 17px; height: 17px; border-radius: 50%; background: var(--white); border: 2.5px solid var(--burgundy); cursor: grab; }

.color-row { display: flex; flex-wrap: wrap; gap: 8px; }
.color-dot { width: 25px; height: 25px; border-radius: 50%; border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast); }
.color-dot:hover { transform: scale(1.14); }
.color-dot.is-on { box-shadow: 0 0 0 2px var(--burgundy); transform: scale(1.1); }

/* Toolbar */
.shop-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.tool-left { display: flex; align-items: center; gap: 12px; }
.tool-count { font-size: .85rem; color: var(--muted); }
.tool-count b { color: var(--charcoal); font-weight: 500; }
.filter-trigger { display: none; }

.select-wrap { position: relative; display: inline-flex; align-items: center; }
.select-wrap select {
  appearance: none; -webkit-appearance: none;
  border: 1.5px solid var(--line); border-radius: var(--radius-pill);
  background: var(--white); color: var(--charcoal);
  padding: 10px 40px 10px 17px; font-size: .82rem; cursor: pointer;
  transition: border-color var(--t) var(--ease);
}
.select-wrap select:hover { border-color: var(--gold); }
.select-wrap svg { position: absolute; right: 15px; width: 12px; height: 12px; pointer-events: none; color: var(--muted); }

.chips-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.fchip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 8px 6px 13px; border-radius: var(--radius-pill);
  background: var(--burgundy-lt); color: var(--burgundy);
  font-size: .78rem; font-weight: 500;
  animation: chipIn .3s var(--ease-out);
}
@keyframes chipIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
.fchip button { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(123,30,53,.14); color: var(--burgundy); transition: background var(--t-fast); }
.fchip button:hover { background: var(--burgundy); color: var(--white); }
.fchip button svg { width: 8px; height: 8px; }
.clear-all { font-size: .78rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; align-self: center; }
.clear-all:hover { color: var(--burgundy); }

.shop-empty { text-align: center; padding: 70px 20px; }
.shop-empty i { width: 62px; height: 62px; border-radius: 50%; background: var(--cream); color: var(--muted); display: grid; place-items: center; margin: 0 auto 18px; }
.shop-empty i svg { width: 26px; height: 26px; }
.shop-empty h3 { margin-bottom: 8px; }
.shop-empty p { color: var(--muted); margin-bottom: 22px; font-size: .9rem; }

.load-more { display: flex; justify-content: center; margin-top: 44px; }
/* The label is long and .btn is nowrap, which would floor the shop grid's 1fr
   track at its text width and push the page sideways on a 390px screen. */
.load-more .btn { white-space: normal; max-width: 100%; }

/* Mobile filter sheet */
.filter-sheet {
  position: fixed; inset: 0; z-index: 195; visibility: hidden;
}
.filter-sheet.is-open { visibility: visible; }
.filter-sheet .sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 88vh; background: var(--ivory);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transform: translateY(100%); transition: transform var(--t) var(--ease-out);
  display: flex; flex-direction: column;
}
.filter-sheet.is-open .sheet-panel { transform: translateY(0); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); flex: none; }
.sheet-head h3 { font-size: 1.1rem; }
.sheet-body { overflow-y: auto; padding: 8px 20px 20px; flex: 1; }
.sheet-foot { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.4fr; gap: 11px; flex: none; background: var(--ivory); }

/* ------------------------------ 22. CART DRAWER ------------------------------ */
.drawer {
  position: fixed; inset: 0; z-index: 210; visibility: hidden;
}
.drawer.is-open { visibility: visible; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(34,30,32,.5); opacity: 0; transition: opacity var(--t) var(--ease); backdrop-filter: blur(2px); }
.drawer.is-open .drawer-scrim { opacity: 1; }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(94vw, 430px);
  background: var(--ivory); box-shadow: var(--sh-xl);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--t) var(--ease-out);
}
.drawer.is-open .drawer-panel { transform: translateX(0); }

.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 19px 22px; border-bottom: 1px solid var(--line); flex: none; }
.drawer-head h3 { font-size: 1.16rem; display: flex; align-items: center; gap: 10px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 22px; }
.drawer-foot { flex: none; border-top: 1px solid var(--line); padding: 18px 22px calc(18px + env(safe-area-inset-bottom)); background: var(--white); }

.cart-item { display: flex; gap: 13px; padding-block: 15px; border-bottom: 1px solid var(--line-soft); animation: itemIn .32s var(--ease-out); }
@keyframes itemIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
.cart-item.removing { animation: itemOut .28s var(--ease) forwards; }
@keyframes itemOut { to { opacity: 0; transform: translateX(24px); max-height: 0; padding-block: 0; } }
.cart-item img { width: 78px; height: 92px; border-radius: var(--radius-sm); object-fit: cover; flex: none; background: var(--cream); }
.cart-item .ci-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cart-item .ci-name { font-size: .86rem; color: var(--charcoal); font-weight: 500; line-height: 1.35; }
.cart-item .ci-var { font-size: .72rem; color: var(--muted); }
.cart-item .ci-price { font-size: .9rem; color: var(--burgundy); font-weight: 600; margin-top: 2px; }
.cart-item .ci-price del { color: var(--muted); font-weight: 400; font-size: .78rem; margin-left: 5px; }
.cart-item .ci-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; }
.mini-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 99px; overflow: hidden; }
.mini-qty button { width: 26px; height: 26px; display: grid; place-items: center; color: var(--charcoal); }
.mini-qty button:hover { background: var(--cream); color: var(--burgundy); }
.mini-qty button svg { width: 9px; height: 9px; }
.mini-qty span { min-width: 26px; text-align: center; font-size: .8rem; font-weight: 500; }
.cart-item .ci-rm { font-size: .74rem; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; transition: color var(--t-fast); }
.cart-item .ci-rm:hover { color: var(--danger); }

.coupon-row { display: flex; gap: 8px; margin-bottom: 15px; }
.coupon-row input {
  flex: 1; border: 1.5px solid var(--line); border-radius: var(--radius-pill);
  padding: 11px 16px; font-size: .85rem; background: var(--white); outline: none; min-width: 0;
  text-transform: uppercase; transition: border-color var(--t) var(--ease);
}
.coupon-row input:focus { border-color: var(--burgundy); }
.coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: var(--radius-sm); background: #E9F5EE; color: var(--success); font-size: .82rem; margin-bottom: 14px; }
.coupon-applied b { font-weight: 600; }
.coupon-applied button { color: var(--success); opacity: .7; }
.coupon-applied button:hover { opacity: 1; }
.coupon-err { font-size: .76rem; color: var(--danger); margin-top: -8px; margin-bottom: 10px; }

.sum-row { display: flex; align-items: center; justify-content: space-between; font-size: .85rem; margin-bottom: 9px; color: var(--charcoal-2); }
.sum-row .free { color: var(--success); font-weight: 500; }
.sum-row.total {
  font-size: 1.08rem; font-weight: 600; color: var(--charcoal);
  padding-top: 13px; margin-top: 6px; border-top: 1.5px solid var(--line);
}
.sum-row.total span:last-child { font-size: 1.3rem; }
.sum-row.save { color: var(--success); font-weight: 500; }
.ship-progress { margin-bottom: 15px; }
.ship-progress p { font-size: .78rem; color: var(--muted); margin-bottom: 7px; }
.ship-progress p b { color: var(--burgundy); }
.ship-bar { height: 5px; border-radius: 99px; background: #E7DED1; overflow: hidden; }
.ship-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gold), var(--gold-lt)); transition: width .6s var(--ease-out); }

.drawer-empty { text-align: center; padding: 56px 20px; }
.drawer-empty i { width: 66px; height: 66px; border-radius: 50%; background: var(--cream); color: var(--burgundy); display: grid; place-items: center; margin: 0 auto 18px; }
.drawer-empty i svg { width: 27px; height: 27px; }
.drawer-empty h3 { margin-bottom: 8px; }
.drawer-empty p { color: var(--muted); font-size: .87rem; margin-bottom: 22px; }

/* ------------------------------ 23. TOASTS ------------------------------ */
.toasts {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 260; display: flex; flex-direction: column-reverse; gap: 10px;
  pointer-events: none; width: min(94vw, 400px);
}
.toast {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px; border-radius: var(--radius);
  background: var(--charcoal); color: var(--white);
  box-shadow: var(--sh-xl);
  animation: toastIn .38s var(--ease-out);
  pointer-events: auto; font-size: .85rem;
}
.toast.out { animation: toastOut .3s var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(20px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(14px) scale(.95); } }
.toast img { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; flex: none; }
.toast i { color: var(--gold-lt); flex: none; }
.toast i svg { width: 18px; height: 18px; }
.toast .t-body { flex: 1; min-width: 0; }
.toast b { display: block; font-weight: 500; font-size: .87rem; }
.toast span { font-size: .76rem; color: rgba(255,255,255,.62); }
.toast .t-x { color: rgba(255,255,255,.5); flex: none; }
.toast .t-x:hover { color: var(--white); }
.toast .t-x svg { width: 13px; height: 13px; }

/* ------------------------------ 24. WHATSAPP FAB ------------------------------ */
.wa-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 150;
  width: 56px; height: 56px; border-radius: 50%;
  background: #1FA855; color: var(--white);
  display: grid; place-items: center;
  box-shadow: 0 8px 26px rgba(31,168,85,.42);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease);
}
.wa-fab::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #1FA855; animation: waPulse 2.4s var(--ease-out) infinite;
}
@keyframes waPulse { 0%{transform:scale(1); opacity:.7} 100%{transform:scale(1.7); opacity:0} }
.wa-fab:hover { transform: scale(1.09); box-shadow: 0 12px 34px rgba(31,168,85,.55); }
.wa-fab svg { width: 27px; height: 27px; fill: currentColor; position: relative; z-index: 1; }
.wa-fab .wa-label {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) scale(.86);
  transform-origin: right center; white-space: nowrap;
  padding: 9px 15px; border-radius: var(--radius-pill);
  background: var(--charcoal); color: var(--white); font-size: .78rem;
  opacity: 0; pointer-events: none; transition: all var(--t) var(--ease-out); box-shadow: var(--sh-md);
}
.wa-fab:hover .wa-label { opacity: 1; transform: translateY(-50%) scale(1); }

.wa-menu { position: fixed; right: 20px; bottom: 88px; z-index: 151; display: flex; flex-direction: column; gap: 9px; align-items: flex-end; }
.wa-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 17px; border-radius: var(--radius-pill);
  background: var(--white); box-shadow: var(--sh-lg);
  font-size: .82rem; color: var(--charcoal); font-weight: 500;
  border: 1px solid var(--line);
  opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none;
  transition: all var(--t) var(--ease-out);
}
.wa-item svg { width: 16px; height: 16px; color: #1FA855; }
.wa-menu.is-open .wa-item { opacity: 1; transform: none; pointer-events: auto; }
.wa-menu.is-open .wa-item:nth-child(1) { transition-delay: .06s; }
.wa-menu.is-open .wa-item:nth-child(2) { transition-delay: .12s; }
.wa-menu.is-open .wa-item:nth-child(3) { transition-delay: .18s; }

/* ------------------------------ 25. FOOTER ------------------------------ */
.footer { background: var(--charcoal); color: rgba(255,255,255,.66); padding-top: clamp(50px, 6vw, 78px); }
.footer a { transition: color var(--t-fast), padding-left var(--t-fast); }
.footer a:hover { color: var(--gold-lt); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 44px; padding-bottom: 50px; }

.footer-brand .logo-name { color: var(--white); }
.footer-brand p { font-size: .87rem; line-height: 1.75; margin: 20px 0 22px; max-width: 40ch; }
.social-row { display: flex; gap: 9px; }
.social-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.8);
  display: grid; place-items: center;
  transition: all var(--t) var(--ease);
}
.social-btn:hover { background: var(--burgundy); border-color: var(--burgundy); color: var(--white); transform: translateY(-3px); }
.social-btn svg { width: 16px; height: 16px; }
.social-btn.wa:hover { background: #1FA855; border-color: #1FA855; }

.footer h5 { font-family: var(--font-body); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-lt); margin-bottom: 20px; font-weight: 600; }
.footer-links { display: flex; flex-direction: column; gap: 11px; }
.footer-links a { font-size: .87rem; display: inline-flex; align-items: center; gap: 7px; }
.footer-links a::before { content: ""; width: 0; height: 1px; background: var(--gold); transition: width var(--t) var(--ease); }
.footer-links a:hover::before { width: 10px; }

.footer-contact { display: flex; flex-direction: column; gap: 15px; }
.fc-item { display: flex; gap: 12px; font-size: .86rem; line-height: 1.6; }
.fc-item i { width: 32px; height: 32px; flex: none; border-radius: 9px; background: rgba(255,255,255,.06); color: var(--gold-lt); display: grid; place-items: center; }
.fc-item i svg { width: 15px; height: 15px; }
.fc-item b { display: block; color: var(--white); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }

.footer-news { padding: 26px 0; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.footer-news h4 { color: var(--white); font-size: 1.1rem; margin-bottom: 4px; }
.news-form { display: flex; gap: 9px; flex: 1; max-width: 400px; min-width: 260px; }
.news-form input {
  flex: 1; min-width: 0; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05);
  border-radius: var(--radius-pill); padding: 13px 19px; color: var(--white); font-size: .86rem; outline: none;
  transition: border-color var(--t) var(--ease);
}
.news-form input::placeholder { color: rgba(255,255,255,.38); }
.news-form input:focus { border-color: var(--gold-lt); }

.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-block: 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: .79rem; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 20px; }
.pay-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pay-chip { padding: 5px 11px; border-radius: 6px; background: rgba(255,255,255,.07); font-size: .66rem; letter-spacing: .07em; color: rgba(255,255,255,.66); font-weight: 500; white-space: nowrap; }

.trust-strip { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; padding-block: 20px; }

/* ------------------------------ 26. PAGE HERO ------------------------------ */
.page-hero { position: relative; background: var(--cream); padding-block: clamp(38px, 5vw, 62px); overflow: hidden; }
.page-hero::after {
  content: ""; position: absolute; bottom: -60%; right: -5%; width: 380px; height: 380px;
  border-radius: 50%; border: 1px solid var(--line); opacity: .7;
}
.page-hero h1 { margin: 12px 0 10px; position: relative; z-index: 1; }

/* ------------------------------ 27. ACCOUNT / MISC ------------------------------ */
.auth-card { max-width: 440px; margin-inline: auto; background: var(--white); border-radius: var(--radius-lg); padding: clamp(26px, 4vw, 40px); box-shadow: var(--sh-md); border: 1px solid var(--line-soft); }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 15px; }
.field label { font-size: .78rem; color: var(--charcoal); font-weight: 500; }
.field input, .field select, .field textarea {
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 15px; font-size: .88rem; background: var(--ivory); outline: none;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--burgundy); background: var(--white); }
.field .hint { font-size: .74rem; color: var(--muted); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .6; }

/* two-up form field grid — collapses to one column on small screens */
.grid-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.grid-fields > .span-2 { grid-column: 1 / -1; }
@media (max-width: 620px) { .grid-fields { grid-template-columns: 1fr; } }

.orders-list { display: flex; flex-direction: column; gap: 16px; }
.order-card { background: var(--white); border-radius: var(--radius); border: 1px solid var(--line-soft); overflow: hidden; box-shadow: var(--sh-xs); }
.order-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 15px 20px; background: var(--cream); border-bottom: 1px solid var(--line); font-size: .82rem; }
.order-head b { color: var(--charcoal); }
.order-status { padding: 4px 12px; border-radius: 99px; font-size: .7rem; font-weight: 500; letter-spacing: .05em; }
.order-status.ship { background: #E9F5EE; color: var(--success); }
.order-status.pack { background: #FDF2E0; color: #B57C1E; }
.order-status.done { background: #EDEAF5; color: #5B4A8A; }
.order-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 13px; }
.order-items { display: flex; gap: 11px; flex-wrap: wrap; }
.order-item { display: flex; gap: 9px; align-items: center; }
.order-item img { width: 48px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--cream); }
.order-item b { font-size: .8rem; color: var(--charcoal); font-weight: 500; display: block; line-height: 1.3; }
.order-item span { font-size: .74rem; color: var(--muted); }

.track-steps { display: flex; align-items: flex-start; padding: 6px 0 2px; }
.track-step { flex: 1; position: relative; text-align: center; }
.track-step::before {
  content: ""; position: absolute; top: 12px; left: -50%; width: 100%; height: 2px;
  background: var(--line); z-index: 0;
}
.track-step:first-child::before { display: none; }
.track-step.is-done::before { background: var(--burgundy); }
.track-step i {
  position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--line);
  display: grid; place-items: center; margin: 0 auto 9px; color: var(--muted);
  transition: all var(--t) var(--ease);
}
.track-step.is-done i { background: var(--burgundy); border-color: var(--burgundy); color: var(--white); }
.track-step i svg { width: 11px; height: 11px; }
.track-step b { display: block; font-size: .74rem; color: var(--muted); font-weight: 500; }
.track-step.is-done b { color: var(--charcoal); }

/* ------------------------------ 28. SCROLL REVEAL ------------------------------ */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][style*="--d"] { transition-delay: var(--d); }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ------------------------------ 29. BACK TO TOP ------------------------------ */
.to-top {
  position: fixed; left: 20px; bottom: 20px; z-index: 149;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); color: var(--charcoal);
  border: 1px solid var(--line); display: grid; place-items: center;
  box-shadow: var(--sh-md);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: all var(--t) var(--ease);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--burgundy); color: var(--white); border-color: var(--burgundy); }
.to-top svg { width: 15px; height: 15px; }

/* ------------------------------ 30. RESPONSIVE ------------------------------ */
/* Header compaction.
   The full nav (10 links + logo + 4 action buttons) needs ~1221px. This block
   trims the link padding and collapses the search label to an icon, which
   brings that requirement under 1180px.

   The cutoff is 1250px rather than 1180px because of what happened above it:
   at 1181-1245px the uncompacted header returned but still needed 1221px, so
   the action cluster spilled past the right edge and clipped the cart button
   on every page. Keep this cutoff at or above the width the full nav needs. */
@media (max-width: 1250px) {
  .nav-link { padding: 9px 9px; font-size: .76rem; }
  .nav-link::after { left: 9px; right: 9px; }
  .search-trigger { min-width: 0; width: 40px; padding: 0; justify-content: center; }
  .search-trigger span { display: none; }
  .shop-layout { grid-template-columns: 232px 1fr; gap: 26px; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; }
  .footer-contact { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  :root { --gutter: 20px; }
  .nav, .header-actions .search-trigger { display: none; }
  /* hover menus do not exist on touch — keep the panel out of the flow so its
     5-column grid cannot push the page sideways */
  .mega { display: none; }
  .header-inner { grid-template-columns: auto 1fr auto; }
  .header-actions { gap: 4px; }
  .burger { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }
  .burger:hover { background: var(--cream); }
  .burger svg { width: 21px; height: 21px; }

  .top-banner { padding-block: 22px 4px; }
  .hero { padding-block: 32px 56px; }

  /* One column, centred: the photo follows the copy and stops being a
     side-by-side element once there is no room for it. */
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-copy { max-width: 640px; margin-inline: auto; text-align: center; }
  .hero-cta, .hero-picks, .hero-proof { justify-content: center; margin-inline: auto; }
  .hero-visual { justify-self: center; max-width: 400px; }
  .hero-visual::before { top: 16px; left: 18px; right: -16px; bottom: -16px; }

  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .tile-grid.six { grid-template-columns: repeat(4, 1fr); }
  .tile-grid.five { grid-template-columns: repeat(3, 1fr); }
  .feature-row { grid-template-columns: repeat(4, 1fr); gap: 20px 8px; }
  .story-grid { gap: 40px; }
  .story-badge { left: 12px; }
  .story-img-sub { right: -14px; bottom: -26px; }

  .offer-hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .offer-cards { grid-template-columns: repeat(3, 1fr); }
  .pdp { grid-template-columns: 1fr; }
  /* Single-column PDP: let the two buttons share the width so they stay
     comfortable thumb targets instead of hugging their labels. */
  .pdp-actions .row .btn { flex: 1 1 150px; }
  .gallery { position: static; }
  .rev-summary { grid-template-columns: 200px 1fr; gap: 26px; }
}

@media (max-width: 860px) {
  .shop-layout { grid-template-columns: 1fr; }
  .filters { display: none; }
  .filter-trigger { display: inline-flex; }
  .grid-products { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px 16px; }
  .search-cols { grid-template-columns: 1fr; gap: 24px; }
  .story-grid { grid-template-columns: 1fr; }
  .story-media { max-width: 480px; margin-inline: auto; }
  .story-stats { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; }
  .story-stats { margin-top: 74px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .tabs-head-wrap { overflow-x: auto; }
}

@media (max-width: 680px) {
  :root { --gutter: 16px; --header-h: 64px; --announce-h: 32px; }

  body { font-size: 15px; }
  .announce { font-size: .62rem; }

  /* Header drops to a 64px bar on mobile, so the wordmark steps down to
     match. The .logo-mark / .logo-name rules below still apply to the mobile
     drawer and footer, which keep the typeset lockup. */
  .logo-img img { height: 34px; }

  .logo-mark { width: 34px; height: 34px; font-size: 1rem; }
  .logo-name { font-size: 1.16rem; }
  .logo-tag { font-size: 7.5px; letter-spacing: .16em; }
  .icon-btn { width: 36px; height: 36px; }
  .icon-btn svg { width: 18px; height: 18px; }
  .icon-btn.hide-sm { display: none; }

  .section { padding-block: 44px; }
  .top-banner { padding-block: 14px 2px; }
  .hero { padding-block: 24px 42px; }
  .hero-cta .btn { flex: 1 1 auto; }
  .hero-proof { gap: 18px; }
  .prof-item b { font-size: 1.35rem; }
  .hf-1 { top: 6%; } .hf-2 { bottom: 7%; }
  .offer-timer { gap: 7px; }
  .timer-box { min-width: 54px; padding: 8px 6px; }
  .timer-box b { font-size: 1.25rem; }

  /* Mobile-first product grid: 2 columns, always */
  .grid-products { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .card-name { font-size: .85rem; }
  .card-desc { display: none; }
  .card-media { margin-bottom: 11px; border-radius: 12px; }
  .price-now { font-size: 1rem; }
  .price-mrp { font-size: .78rem; }
  .act { height: 40px; font-size: .64rem; }
  .card-actions { gap: 6px; }
  .fav-btn { width: 30px; height: 30px; }
  .fav-btn svg { width: 14px; height: 14px; }
  .card-cat { font-size: .6rem; }
  .rate-cnt { display: none; }

  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cat-card { aspect-ratio: 3/4; }
  .cat-ov { padding: 14px 13px; }
  .cat-ov h3 { font-size: .98rem; }
  .cat-ov .go { display: none; }

  .tile-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tile-grid.five, .tile-grid.six { grid-template-columns: repeat(2, 1fr); }
  .tile-ov { padding: 11px 10px; }
  .tile-ov h4 { font-size: .82rem; }
  .tile-ov .go { display: none; }

  .offer-cards { grid-template-columns: 1fr; gap: 14px; }
  .testi-grid { grid-template-columns: 1fr; }
  .ig-grid { grid-template-columns: repeat(3, 1fr); gap: 7px; }  .feature-row { grid-template-columns: repeat(2, 1fr); gap: 16px 6px; }
  .feature-item { justify-content: flex-start; }
  .feature-item i { width: 34px; height: 34px; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-news { flex-direction: column; align-items: flex-start; }
  .news-form { max-width: none; width: 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }

  .gallery { grid-template-columns: 1fr; }
  .gal-thumbs { flex-direction: row; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .gal-thumbs::-webkit-scrollbar { display: none; }
  .gal-thumb { width: 68px; flex: none; }
  .pdp-price .now { font-size: 1.7rem; }
  .pdp-aux { grid-template-columns: repeat(2, 1fr); }
  .rev-summary { grid-template-columns: 1fr; gap: 22px; }
  .rev-score b { font-size: 2.6rem; }
  .tab-btn { padding: 13px 15px; font-size: .72rem; }
  .story-img-sub { width: 42%; right: -6px; bottom: -18px; border-width: 4px; }
  .story-badge { padding: 13px 15px; }
  .story-badge b { font-size: 1.6rem; }
  .story-stats { margin-top: 58px; }

  .wa-fab { width: 50px; height: 50px; right: 16px; bottom: 16px; }
  .wa-fab svg { width: 24px; height: 24px; }
  .wa-fab .wa-label { display: none; }
  .wa-menu { right: 16px; bottom: 76px; }
  .to-top { left: 16px; bottom: 76px; width: 40px; height: 40px; }
  .drawer-panel { width: 100%; }
  .toasts { bottom: 80px; }
}

@media (max-width: 380px) {
  .grid-products { gap: 18px 10px; }
  .card-name { font-size: .8rem; }
  .grid-products .act span { display: none; }
  .grid-products .act { padding-inline: 8px; }
}

/* ------------------------------ 31. COMPARE ------------------------------ */
.cmp-btn {
  position: absolute; top: 11px; right: 51px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.94); color: var(--charcoal);
  display: grid; place-items: center; box-shadow: var(--sh-sm);
  transition: transform var(--t) var(--ease-out), color var(--t-fast), background var(--t-fast);
}
.cmp-btn:hover { transform: scale(1.13); color: var(--burgundy); }
.cmp-btn svg { width: 15px; height: 15px; }
.cmp-btn.is-on { background: var(--charcoal); color: var(--gold-lt); }

.cmp-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 145;
  background: rgba(253,251,247,.97);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line); box-shadow: 0 -8px 32px rgba(34,30,32,.1);
  padding-bottom: env(safe-area-inset-bottom);
  animation: cmpUp .35s var(--ease-out);
}
@keyframes cmpUp { from { transform: translateY(100%); } to { transform: none; } }
.cmp-inner { padding-block: 12px 14px; }
.cmp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cmp-head b { font-family: var(--font-display); font-size: 1.02rem; color: var(--charcoal); }
.cmp-clear { font-size: .78rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.cmp-clear:hover { color: var(--burgundy); }
.cmp-grid { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.cmp-col { flex: 0 0 132px; display: flex; flex-direction: column; gap: 2px; }
.cmp-col.cmp-labels { flex: 0 0 92px; }
.cmp-cell {
  font-size: .74rem; color: var(--charcoal-2); padding: 5px 8px;
  background: var(--white); border-radius: 7px; min-height: 30px;
  display: flex; align-items: center; line-height: 1.3;
}
.cmp-labels .cmp-cell {
  background: none; color: var(--muted); font-size: .68rem;
  letter-spacing: .07em; text-transform: uppercase; padding-left: 0;
}
.cmp-img { position: relative; height: 96px; margin-bottom: 6px; }
.cmp-img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); background: var(--cream); }
.cmp-x {
  position: absolute; top: 4px; right: 4px; width: 20px; height: 20px;
  border-radius: 50%; background: rgba(255,255,255,.94); color: var(--charcoal);
  display: grid; place-items: center; box-shadow: var(--sh-xs);
}
.cmp-x:hover { background: var(--danger); color: var(--white); }
.cmp-x svg { width: 9px; height: 9px; }
.cmp-labels .cmp-img { height: 96px; }

@media (max-width: 680px) {
  .cmp-btn { width: 30px; height: 30px; right: 45px; top: 10px; }
  .cmp-col { flex: 0 0 116px; }
  .cmp-col.cmp-labels { flex: 0 0 74px; }
}

/* ------------------------------ 32. QUICK VIEW ------------------------------ */
.nav-item { position: static; }
.qv-panel { width: min(94vw, 720px); }
.qv-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px; align-items: start; }
.qv-img { border-radius: var(--radius); overflow: hidden; background: var(--cream); aspect-ratio: 3/3.7; }
.qv-img img { width: 100%; height: 100%; object-fit: cover; }
.qv-info .detail-body ul { gap: 8px; }
.qv-info .detail-body li { font-size: .82rem; }
@media (max-width: 620px) {
  .qv-grid { grid-template-columns: 1fr; }
  .qv-img { max-width: 240px; }
}

/* ------------------------------ 33. CONTENT PAGES ------------------------------ */
.journey-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.journey-card {
  position: relative; padding: 30px 24px;
  background: var(--white); border: 1px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--sh-xs);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
  overflow: hidden;
}
.journey-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.journey-n {
  position: absolute; top: 14px; right: 18px;
  font-family: var(--font-display); font-size: 2.6rem; line-height: 1;
  color: var(--gold-pale); font-weight: 600;
}
.journey-ic {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--burgundy-lt); color: var(--burgundy);
  display: grid; place-items: center;
}
.journey-ic svg { width: 20px; height: 20px; }

.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.value-card {
  padding: 28px 24px; border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--line-soft);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.value-card i {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--charcoal); color: var(--gold-lt);
  display: grid; place-items: center;
}
.value-card i svg { width: 19px; height: 19px; }

.timeline { display: flex; flex-direction: column; gap: 0; }
.tl-item { display: flex; gap: 22px; padding-bottom: 34px; position: relative; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: 21px; top: 48px; bottom: 0; width: 1.5px;
  background: linear-gradient(180deg, var(--gold), var(--line));
}
.tl-item:last-child::before { display: none; }
.tl-dot {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: var(--burgundy); color: var(--gold-lt);
  display: grid; place-items: center; font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 600; z-index: 1;
  box-shadow: 0 0 0 6px var(--ivory);
}
.tl-body h3 { font-size: 1.16rem; margin-bottom: 7px; }
.tl-body p { font-size: .88rem; line-height: 1.75; color: var(--charcoal-2); }

.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; }
.contact-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.c-card {
  padding: 22px 20px; border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--line-soft);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
  display: block;
}
.c-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--gold); }
.c-card i {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--burgundy-lt); color: var(--burgundy);
  display: grid; place-items: center; margin-bottom: 14px;
}
.c-card i svg { width: 18px; height: 18px; }
.c-card b { display: block; color: var(--charcoal); font-size: .95rem; margin-bottom: 4px; }
.c-card p, .c-card span { font-size: .84rem; color: var(--muted); line-height: 1.6; }

.policy-layout { display: grid; grid-template-columns: 250px 1fr; gap: 44px; align-items: start; }
.policy-nav { position: sticky; top: calc(var(--header-h) + 20px); }
.policy-nav a {
  display: block; padding: 11px 15px; border-radius: var(--radius-sm);
  font-size: .88rem; color: var(--charcoal-2);
  border-left: 2px solid transparent; margin-bottom: 3px;
  transition: all var(--t-fast) var(--ease);
}
.policy-nav a:hover { background: var(--cream); color: var(--burgundy); }
.policy-nav a.is-on { background: var(--burgundy-lt); color: var(--burgundy); border-left-color: var(--burgundy); font-weight: 500; }
/* No scroll-margin-top here on purpose: html already sets scroll-padding-top
   for the sticky header, and the two offsets would add up and land the heading
   twice as far down as intended. */
.policy-section { margin-bottom: 54px; }
.policy-section h2 { font-size: 1.7rem; margin-bottom: 8px; }
.policy-section h3 { font-family: var(--font-body); font-size: .84rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 26px 0 11px; font-weight: 600; }
.policy-section p { font-size: .9rem; line-height: 1.8; margin-bottom: 12px; color: var(--charcoal-2); }
.policy-section ul { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; }
.policy-section ul li { display: flex; gap: 11px; font-size: .89rem; line-height: 1.65; }
.policy-section ul li::before { content: "•"; color: var(--burgundy); font-weight: 700; flex: none; }

.policy-meta {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 15px; border-radius: var(--radius-pill);
  background: var(--cream); font-size: .76rem; color: var(--muted); margin-bottom: 30px;
}

@media (max-width: 1024px) {
  .journey-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .policy-layout { grid-template-columns: 1fr; gap: 28px; }
  .policy-nav { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
  .policy-nav a { border: 1px solid var(--line); border-left-width: 1px; }
  .contact-grid { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 640px) {
  .journey-grid, .values-grid, .contact-cards { grid-template-columns: 1fr; }
}

/* ------------------------------ 34. PRINT ------------------------------ */
@media print {
  .header, .footer, .wa-fab, .announce, .to-top, .pdp-actions, .drawer, .toasts { display: none !important; }
  body { background: #fff; }
  .pdp { grid-template-columns: 1fr; }
  .gallery { position: static; }
}