/* ==========================================================
   PB84 Design System — v2 (Adil-Qadri-inspired premium layer)
   Palette is UNCHANGED from v1: maroon #4A0E1F, gold #C9A227,
   champagne #E8D9B5, ivory #FAF6F0, ink #1A1113. Every new rule
   below is built from these five colours only — no new hues.
   Type: Montserrat throughout, differentiated by weight/tracking.
   ========================================================== */

:root {
  --maroon: #4A0E1F;
  --maroon-light: #6B1730;
  --maroon-dark: #320A15;
  --gold: #C9A227;
  --gold-light: #DDBE5C;
  --gold-dark: #9C7D1B;
  --champagne: #E8D9B5;
  --ivory: #FAF6F0;
  --ink: #1A1113;

  /* ---- Off-white surface scale ----
     Every page/section/card/media surface now comes from these three.
     They are the ivory base stepped toward ink by 3% and 6% — neutral
     off-whites, no cream or gold cast. Champagne is now an ACCENT ONLY
     (badges, borders, text on maroon), never a background. */
  --surface:   #FAF6F0;  /* page base            */
  --surface-2: #F3EFE9;  /* alternating sections, cards, media wells */
  --surface-3: #EDE8E3;  /* deepest step: table heads, chat bubbles, image wells */

  /* ---- v2 additions: spacing + motion + radius scale ---- */
  --gutter: 24px;
  --container-max: 1320px;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.2s;
  --dur: 0.35s;
  --dur-slow: 0.6s;
  --header-h: 76px;   /* one row (mobile); 130px on desktop — see @media below.
                         No longer feeds the hero (that is --hero-h now); kept
                         because it is the correct value for scroll-margin /
                         sticky offsets if you need them. */
  --hero-h: 665px;    /* homepage hero — fixed (client brief: 665px so the headline and CTAs sit above the fold) */
  --announce-h: 38px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* clip (not hidden) — stops any stray absolute/negative-margin element
     creating a sideways scrollbar, without breaking the sticky header. */
  overflow-x: clip;
  background: var(--surface);
  color: var(--ink);
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
input, select, textarea, button { font-family: 'Montserrat', sans-serif; }

::selection { background: rgba(201,162,39,0.3); color: var(--maroon); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: 900px; margin: 0 auto; padding: 0 var(--gutter); }
.container-sm { max-width: 480px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---- Wordmark ---- */
.pb84-wordmark {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  background: linear-gradient(180deg, #ECD48A 0%, #C9A227 45%, #8A6A17 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold);
  display: inline-block;
}

.eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--gold-dark);
}

.hairline {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 13px 30px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  background: none;
}
.btn-primary { background: var(--maroon); color: var(--champagne); }
.btn-primary:hover { background: var(--gold); color: var(--maroon); box-shadow: 0 0 24px rgba(201,162,39,0.25); }
.btn-secondary { border-color: rgba(74,14,31,0.3); color: var(--maroon); background: transparent; }
.btn-secondary:hover { border-color: var(--maroon); background: var(--maroon); color: var(--ivory); }
.btn-block { display: flex; width: 100%; }
.btn-sm { padding: 9px 18px; font-size: 11px; }
.btn-ghost-gold {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Montserrat', sans-serif; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--gold-dark); border: none; border-bottom: 1px solid rgba(201,162,39,0.6);
  padding-bottom: 4px; background: none; cursor: pointer; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn-ghost-gold:hover { color: var(--maroon); border-color: var(--gold); }
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid rgba(26,17,19,0.12); background: transparent;
  border-radius: var(--radius-sm); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  color: var(--ink);
}
.btn-icon:hover { border-color: var(--gold); background: rgba(201,162,39,0.08); }

/* ---- Section heading ---- */
.section-heading { text-align: center; margin-bottom: 48px; }
.section-heading.align-left { text-align: left; }
.section-heading h2 { font-size: 34px; color: var(--ink); }
.section-heading .rule { width: 64px; height: 1px; background: var(--gold); margin: 16px auto 0; }
.section-heading.align-left .rule { margin: 16px 0 0; }
.section-heading p.lede { max-width: 520px; margin: 16px auto 0; color: rgba(26,17,19,0.6); font-size: 15px; }
.section-heading.align-left p.lede { margin: 12px 0 0; }

/* ---- Forms ---- */
.field { display: block; margin-bottom: 20px; }
.field label {
  display: block; font-family: 'Montserrat', sans-serif; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.2em; color: rgba(26,17,19,0.6); margin-bottom: 8px;
}
.field label .req { color: var(--maroon); }
.field input, .field select, .field textarea,
input.field, select.field, textarea.field {
  width: 100%; border: 1px solid rgba(26,17,19,0.15); background: var(--surface);
  padding: 12px 14px; font-size: 14px; color: var(--ink); border-radius: var(--radius-sm);
}
.field input:focus, .field select:focus, .field textarea:focus,
input.field:focus, select.field:focus, textarea.field:focus { border-color: var(--gold); outline: none; }
.field input:disabled, .field select:disabled, .field textarea:disabled {
  background: var(--surface-3); color: rgba(26,17,19,0.45); cursor: not-allowed;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.checkbox-row { display: flex; align-items: flex-start; gap: 8px; font-family: 'Montserrat', sans-serif; font-size: 12px; color: rgba(26,17,19,0.6); margin-bottom: 16px; }
.checkbox-row input { margin-top: 4px; width: auto; }
@media (max-width: 640px) { .field-row, .field-row-3 { grid-template-columns: 1fr; } }

/* Size / star pickers were display:none, which removes them from the tab
   order entirely. Visually hidden but focusable instead, with the selected
   state driven by :checked so it also works with JS off. */
.size-radio, .star-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.size-radio:checked + .btn { background: var(--maroon); color: var(--ivory); border-color: var(--maroon); }
.size-radio:focus-visible + .btn,
.star-radio:focus-visible + .star-choice { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---- Badges ---- */
.badge {
  display: inline-block; padding: 4px 10px; font-family: 'Montserrat', sans-serif;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; border-radius: var(--radius-sm);
}
.badge-maroon { background: var(--maroon); color: var(--champagne); }
.badge-gold { background: rgba(201,162,39,0.2); color: var(--gold-dark); }
.badge-muted { background: rgba(26,17,19,0.1); color: rgba(26,17,19,0.6); }

/* ==========================================================
   Announcement bar
   ========================================================== */
/* Maroon band with gold type. It was previously off-white on an off-white
   page, so it read as a stray line of text rather than a bar. --gold on
   --maroon is 6.32:1; the old 0.85 span opacity is gone because at 11px
   uppercase with 0.16em tracking it just made the type look muddy. */
.announce-bar {
  background: var(--maroon); color: var(--gold); text-align: center;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  height: var(--announce-h); display: flex; align-items: center; justify-content: center;
  padding: 0 var(--gutter); overflow: hidden;
  border-bottom: 1px solid rgba(201,162,39,0.35);
}
.announce-bar span { opacity: 1; }
/* --gold-dark would be 3.90:1 here, under AA — the light gold lifts the
   emphasis above the body text instead of sinking below it. */
.announce-bar strong { color: var(--gold-light); font-weight: 600; }

/* ==========================================================
   Header + Mega menu
   ========================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100; background: rgba(250,246,240,0.96);
  backdrop-filter: blur(8px); border-bottom: 1px solid rgba(201,162,39,0.2);
}
/* Row 1 of the header: hamburger (mobile only) | wordmark | icons.
   The nav USED to live in column 1 alongside the hamburger. That could not
   work: with a centred wordmark the side columns are symmetric 1fr, so
   column 1 never exceeded 582px while the seven nav labels need 583px at
   the 30px gap — the nav overflowed its column and printed on top of the
   wordmark at every desktop width. The nav is now its own row (below),
   which gives it the full 1272px container instead of half of it. */
/* FULL-BLEED: no max-width. The wordmark centres on the viewport and the
   icon cluster sits one gutter from the right edge, rather than both being
   pulled into a 1320px column. */
.site-header-inner {
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center;
  padding: 18px var(--gutter); width: 100%; gap: 16px;
}
.site-header .logo { font-size: 22px; text-align: center; justify-self: center; white-space: nowrap; }
.hamburger {
  display: flex; flex-direction: column; gap: 4px; width: 22px; background: none; border: none;
  cursor: pointer; padding: 8px 0; flex-shrink: 0; justify-self: start;
}
.hamburger span { display: block; height: 1px; width: 100%; background: var(--ink); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }

/* Row 2: the nav, centred across the full header width. flex-wrap is a
   safety net only — at the measured label widths it never triggers. */
.site-nav {
  display: none; gap: 28px; justify-content: center; align-items: center; flex-wrap: wrap;
  width: 100%; padding: 0 var(--gutter) 10px;
}
/* Intentionally NOT position:relative — the mega-menu below is meant to span
   the full sticky header (its containing block), not just this link's own
   box. Giving nav-item its own positioning context here is what was
   collapsing the dropdown to a sliver the width of the link text. */
.site-nav .nav-item { flex-shrink: 0; }
.site-nav a.nav-link {
  font-family: 'Montserrat', sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(26,17,19,0.82); padding: 12px 0; display: inline-block; position: relative; white-space: nowrap;
}
.site-nav a.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease);
}
.site-nav a.nav-link:hover::after, .site-nav .nav-item.open a.nav-link::after { transform: scaleX(1); }
.site-nav a.nav-link:hover, .site-nav .nav-item.open a.nav-link { color: var(--maroon); }

.header-icons { display: flex; align-items: center; gap: 10px; justify-self: end; flex-shrink: 0; }
.header-icons a, .header-icons button { position: relative; color: var(--ink); }
.header-icons a:hover, .header-icons button:hover { color: var(--maroon); }

/* Tagline under the wordmark/logo — desktop only, mobile has no vertical
   room in the single-row header (see the 380px collision note below). */
.brand-tagline {
  display: none; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(74,14,31,0.55); font-family: 'Montserrat', sans-serif; margin-top: 2px;
}
@media (min-width: 1024px) {
  .site-header .logo.brand-logo { display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
  .brand-tagline { display: block; }
}

/* Signed-in customer's first name next to the account icon — desktop only;
   mobile keeps the icon alone (the slide-out nav already shows "My Account"). */
.account-name { display: none; }
@media (min-width: 1024px) {
  .account-link.btn-icon { width: auto; padding: 0 14px 0 10px; border-radius: 20px; gap: 6px; }
  .account-name {
    display: inline-block; font-size: 12px; font-family: 'Montserrat', sans-serif;
    white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis;
  }
}
.cart-count {
  position: absolute; top: -4px; right: -4px; background: var(--maroon); color: var(--ivory);
  font-size: 9px; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
@media (min-width: 1024px) {
  :root { --header-h: 130px; }   /* wordmark row + nav row */
  .site-nav { display: flex; gap: 26px; }
  .hamburger { display: none; }
}
@media (min-width: 1180px) { .site-nav { gap: 34px; } }
/* Below 1024 the wordmark goes left and sizes to content, so the icon
   cluster can never be squeezed into it on a 320px screen. */
@media (max-width: 1023px) {
  .site-header-inner { grid-template-columns: auto 1fr auto; }
  .site-header .logo { justify-self: start; text-align: left; }
}
/* At 320px a logged-in customer has FOUR icons (search, account, wishlist,
   cart) = 190px, which left only 28px for a 76px wordmark. Tighten the
   gutter, the grid gap, the icon buttons and the wordmark to claw back
   ~60px so the two can never collide. */
@media (max-width: 380px) {
  .site-header-inner { padding-left: 16px; padding-right: 16px; gap: 8px; }
  .site-header .logo { font-size: 18px; }
  .header-icons { gap: 6px; }
  .header-icons .btn-icon { width: 36px; height: 36px; }
}

/* -- Mega menu panel -- */
/* Positions against .site-header (sticky = a valid containing block), so it
   spans the full header width and drops below the whole header, not just
   the hovered link. */
.mega-menu {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--surface);
  border-bottom: 1px solid rgba(201,162,39,0.25); box-shadow: 0 24px 48px -12px rgba(26,17,19,0.18);
  opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.nav-item.open .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.nav-item.open .mega-menu-simple { transform: translateX(-50%) translateY(0); }
/* Follows the header: full-bleed too, so the dropdown's columns line up
   with the bar it drops from instead of sitting inset from it. Capped on
   very wide screens so the 5 columns don't sprawl. */
.mega-menu-inner {
  max-width: 1800px; margin: 0 auto; padding: 40px var(--gutter) 48px;
  display: grid; grid-template-columns: repeat(4, 1fr) 1.2fr; gap: 40px;
}
.mega-menu h5 {
  font-family: 'Montserrat', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--gold-dark); margin-bottom: 16px;
}
.mega-menu ul { list-style: none; margin: 0; padding: 0; }
.mega-menu li { margin-bottom: 10px; }
.mega-menu a { font-size: 14px; color: rgba(26,17,19,0.78); transition: color var(--dur-fast) var(--ease); }
.mega-menu a:hover { color: var(--maroon); }

/* Compact variant for the new-taxonomy "By Type" tab (Attar & Forms,
   Leather, Saffron, etc.) — one dropdown with all categories laid out in
   a grid, instead of each category getting its own top-level nav item
   (which was overflowing the header at typical desktop widths once six
   new tabs were added alongside the original four). */
.mega-menu-simple {
  position: absolute; left: 50%; right: auto; top: 100%; min-width: 240px;
  transform: translateX(-50%) translateY(-8px);
  border: 1px solid rgba(201,162,39,0.25); box-shadow: 0 16px 32px -10px rgba(26,17,19,0.18);
}
.mega-menu-inner-simple { max-width: none; margin: 0; padding: 24px 28px; display: block; }
.mega-menu-bytype { min-width: 640px; max-width: calc(100vw - 48px); }
.mega-menu-bytype .mega-menu-inner-simple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 36px; }
.mega-menu-bytype h5 { margin-bottom: 12px; }
/* This one nav-item needs its own positioning context so the dropdown
   anchors under the "By Type" link itself, not the far-left edge of the
   header (the default .mega-menu behavior, intentional for the full-bleed
   legacy mega-menus — see the note above .site-nav). */
.nav-item--anchored { position: relative; }
.mega-promo {
  position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--surface-2);
  display: flex; align-items: flex-end; padding: 20px; border: 1px solid rgba(201,162,39,0.3);
}
.mega-promo::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 50% 0%, var(--surface), var(--surface-2) 80%); }
.mega-promo .inner { position: relative; z-index: 1; color: var(--maroon); }
.mega-promo .eyebrow { color: var(--gold-dark); }

/* -- Mobile nav drawer -- */
.mobile-nav-overlay { position: fixed; inset: 0; background: rgba(26,17,19,0.5); z-index: 199; opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur); }
.mobile-nav-overlay.open { opacity: 1; visibility: visible; }
.mobile-nav {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(340px, 86vw); background: var(--surface); z-index: 200;
  transform: translateX(-100%); transition: transform var(--dur-slow) var(--ease); overflow-y: auto;
  box-shadow: 24px 0 48px rgba(26,17,19,0.15);
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav-head { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid rgba(201,162,39,0.2); }
.mobile-nav ul { list-style: none; margin: 0; padding: 8px 8px 24px; }
.mobile-nav li a { display: block; padding: 14px 12px; font-size: 15px; border-bottom: 1px solid rgba(26,17,19,0.06); }
.mobile-nav .sub-label { padding: 16px 12px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold-dark); }

/* -- Search overlay -- */
.search-overlay {
  position: fixed; inset: 0; background: rgba(26,17,19,0.55); z-index: 199; opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.search-overlay.open { opacity: 1; visibility: visible; }
.search-panel {
  background: var(--surface); padding: 48px var(--gutter); border-bottom: 1px solid rgba(201,162,39,0.3);
  transform: translateY(-16px); transition: transform var(--dur) var(--ease); position: relative;
}
.search-overlay.open .search-panel { transform: translateY(0); }
.search-panel form { max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--gold); padding-bottom: 14px; }
.search-panel input { flex: 1; border: none; background: none; font-size: 22px; font-family: 'Montserrat', sans-serif; color: var(--ink); }
.search-panel input:focus { outline: none; }
.search-panel .search-close { position: absolute; top: 24px; right: 24px; }
.search-suggest { max-width: 720px; margin: 24px auto 0; display: flex; gap: 10px; flex-wrap: wrap; }
.search-suggest a { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; border: 1px solid rgba(201,162,39,0.4); padding: 8px 14px; color: rgba(26,17,19,0.7); border-radius: var(--radius-sm); }
.search-suggest a:hover { border-color: var(--maroon); color: var(--maroon); }

/* ==========================================================
   Footer
   ========================================================== */
.site-footer { background: var(--surface); color: var(--ink); border-top: 1px solid rgba(201,162,39,0.35); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 48px; padding: 72px var(--gutter) 56px; max-width: var(--container-max); margin: 0 auto; }
.footer-grid h4 { color: var(--gold-dark); font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; }
.footer-grid ul { list-style: none; padding: 0; margin: 18px 0 0; }
.footer-grid li { margin-bottom: 12px; }
.footer-grid a { font-family: 'Montserrat', sans-serif; font-size: 13px; color: rgba(26,17,19,0.7); transition: color var(--dur-fast) var(--ease); }
.footer-grid a:hover { color: var(--maroon); }
.footer-social { display: flex; gap: 14px; margin-top: 20px; }
.footer-social a { width: 36px; height: 36px; border: 1px solid rgba(201,162,39,0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.footer-social a:hover { border-color: var(--gold); background: rgba(201,162,39,0.1); }
.footer-bottom { border-top: 1px solid rgba(201,162,39,0.25); padding: 24px; font-family: 'Montserrat', sans-serif; font-size: 11px; color: rgba(26,17,19,0.5); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; max-width: var(--container-max); margin: 0 auto; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.4fr repeat(4, 1fr); } }

/* ==========================================================
   Hero
   ========================================================== */
/* Fixed hero height. min/max are pinned to the same value so nothing
   (viewport size, content length, the old 100vh calc) can stretch or
   squash it. Sub-page heroes — about / careers / distributors — set their
   own height inline and are unaffected. */
.hero {
  position: relative; display: flex; align-items: flex-end;
  height: var(--hero-h); min-height: var(--hero-h); max-height: var(--hero-h);
  padding-top: 64px; background: var(--surface);
  color: var(--ink);
}
.hero-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 25%, var(--surface) 45%, var(--surface-2) 100%); }
/* The glyph used to sit at `right: 4%` of the FULL-WIDTH hero, so on a wide
   monitor it drifted out to the viewport edge, far outside the 1320px
   container the rest of the page aligns to. The max() below parks it on the
   container's right edge once the viewport exceeds --container-max, and
   falls back to 4% on narrower screens. */
.hero-glyph {
  position: absolute; top: 8%; bottom: 8%; width: 34%; max-width: 420px;
  right: max(4%, calc((100% - var(--container-max)) / 2 + var(--gutter)));
  opacity: 0.95; display: flex;
}
.hero-glyph .pb-placeholder { border: 1px solid rgba(201,162,39,0.35); background: var(--surface-2); }
@media (max-width: 1099px) { .hero-glyph { display: none; } }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-slide .pb-placeholder { width: 100%; height: 100%; }
.hero-slide.is-active { opacity: 1; }
/* Was `max-width: 560px` directly inside the full-bleed hero, which pinned
   the headline 24px from the viewport edge while every section below it
   started ~300px in. It is now the container itself; the 560px text column
   moves to the children so the copy still wraps the same way. */
.hero-content {
  position: relative; z-index: 10;
  width: 100%; max-width: var(--container-max); margin: 0 auto;
  padding: 0 var(--gutter) 88px;
}
.hero-content > * { max-width: 560px; }
.hero h1 { font-size: 38px; line-height: 1.15; color: var(--maroon); }
@media (min-width: 480px) { .hero h1 { font-size: 44px; } }
@media (min-width: 640px) { .hero h1 { font-size: 54px; } }
@media (min-width: 1024px) { .hero h1 { font-size: 62px; } }
.shimmer-text {
  background: linear-gradient(90deg, var(--gold), #F2E3AB 20%, var(--gold) 40%);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-style: italic;
}

/* ==========================================================
   Product grid & card
   ========================================================== */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
.grid-3 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
.grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }
/* .grid-2 never had a breakpoint, so the cart, checkout and about pages
   stayed two-up at 320px. */
@media (max-width: 700px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Replaces the six `style="display:grid;..." class="grid-2"` elements that
   carried a DUPLICATE class attribute — parsers keep the first and discard
   the second, so grid-2 never applied and they never collapsed on mobile. */
.split-2-1, .split-1-1 { display: grid; gap: 24px; }
.split-2-1 { grid-template-columns: 2fr 1fr; }
.split-1-1 { grid-template-columns: 1fr 1fr; }
.split-2-1.gap-48 { gap: 48px; }
@media (max-width: 900px) { .split-2-1, .split-1-1 { grid-template-columns: 1fr; } }

/* PDP gallery/info split — was an inline <style> block injected into <body>
   fighting an inline style with !important. */
.pdp-grid { display: grid; grid-template-columns: 1fr; gap: 56px; }
@media (min-width: 900px) { .pdp-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.pdp-meta, .pdp-pack { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pdp-pack { gap: 32px; }
@media (max-width: 640px) { .pdp-meta, .pdp-pack { grid-template-columns: 1fr; } }

.product-card { display: block; position: relative; }
.product-card .thumb {
  position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--surface-2) 0%, var(--surface-3) 55%, var(--surface-2) 100%);
}
.product-card .thumb .pb-media { position: absolute; inset: 0; transition: transform var(--dur-slow) var(--ease); }
.product-card:hover .thumb .pb-media { transform: scale(1.06) translateY(-2%); }
.product-card .thumb-link { position: absolute; inset: 0; z-index: 1; }
.flag {
  position: absolute; left: 12px; top: 12px; background: var(--maroon); color: var(--champagne);
  font-family: 'Montserrat', sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; padding: 5px 10px; z-index: 2;
}
.product-card .wishlist-btn {
  position: absolute; right: 10px; top: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(250,246,240,0.88); display: flex; align-items: center; justify-content: center; color: var(--maroon);
  opacity: 0; transform: translateY(-4px); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.product-card:hover .wishlist-btn { opacity: 1; transform: translateY(0); }
.product-card .quick-add {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
  background: var(--maroon); color: var(--champagne); text-align: center; padding: 11px; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.16em; opacity: 0; transform: translateY(10px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.product-card:hover .quick-add { opacity: 1; transform: translateY(0); }
.product-card .quick-add:hover { background: var(--gold); color: var(--maroon); }
.product-card .info { margin-top: 16px; }
.product-card .info .eyebrow { font-size: 10px; }
.product-card h3 { font-size: 17px; margin: 5px 0; font-weight: 600; }
.product-card .rating-row { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.product-card .rating-row .stars { font-size: 11px; letter-spacing: 1px; }
.product-card .rating-row .count { font-size: 11px; color: rgba(26,17,19,0.45); }
.product-card .price { font-family: 'Montserrat', sans-serif; font-size: 14px; color: rgba(26,17,19,0.7); display: flex; align-items: baseline; gap: 8px; }
.product-card .price .compare { text-decoration: line-through; color: rgba(26,17,19,0.35); font-size: 12px; }
@media (hover:none) { .product-card .quick-add, .product-card .wishlist-btn { opacity: 1; transform: none; } }
/* On a 320px screen a 2-up card thumb is only ~124px wide, at which point
   the "Bestseller" flag (left) and the wishlist button (right) meet in the
   middle. Shrink both so they always clear each other. */
@media (max-width: 380px) {
  .flag { font-size: 9px; letter-spacing: 0.14em; padding: 4px 7px; left: 8px; top: 8px; }
  .product-card .wishlist-btn { width: 30px; height: 30px; right: 8px; top: 8px; }
}

/* ---- Collections tiles ---- */
.collection-tile {
  position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--surface-2); color: var(--maroon);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; border: 1px solid rgba(201,162,39,0.3);
}
.collection-tile::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, var(--surface), var(--surface-2) 75%); }
.collection-tile .pb-media { position: absolute; inset: 0; transition: transform var(--dur-slow) var(--ease); opacity: 0.9; }
.collection-tile:hover .pb-media { transform: scale(1.05); }
.collection-tile .inner { position: relative; z-index: 1; }

/* ---- Product visuals: real photo or typographic placeholder ---- */
.pb-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-placeholder {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 16%; text-align: center; box-sizing: border-box;
}
.pb-placeholder-rule { width: 30px; height: 1px; background: var(--gold); opacity: 0.7; }
.pb-placeholder-word {
  font-family: 'Montserrat', sans-serif; font-style: italic; font-weight: 400;
  font-size: clamp(20px, 4vw, 30px); line-height: 1.2; letter-spacing: 0.01em;
}
.pb-placeholder-sub {
  font-family: 'Montserrat', sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; opacity: 0.65;
}
.pb-placeholder--maroon { color: var(--maroon); }
.pb-placeholder--maroon .pb-placeholder-rule { background: var(--gold-dark); }
/* Both tones now sit on off-white, so the former light-on-dark variant
   is remapped to a readable gold-dark rather than invisible champagne. */
.pb-placeholder--ivory { color: var(--gold-dark); }

/* ---- PDP packaging accordion ---- */
.pdp-accordion summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.pdp-accordion summary::-webkit-details-marker { display: none; }
.pdp-accordion-toggle { font-family: 'Montserrat', sans-serif; font-size: 20px; color: var(--gold-dark); transition: transform var(--dur-fast) var(--ease); }
.pdp-accordion[open] .pdp-accordion-toggle { transform: rotate(45deg); }

/* ---- Editorial split (featured product) ---- */
.editorial-split { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.editorial-split .media { position: relative; aspect-ratio: 4/5; background: linear-gradient(160deg, var(--surface-2), var(--surface-3)); overflow: hidden; }
.editorial-split .media .pb-media { position: absolute; inset: 0; }
@media (min-width: 900px) { .editorial-split { grid-template-columns: 1fr 1fr; gap: 72px; } }

/* ---- Notes pyramid (signature element) ---- */
.notes-pyramid { max-width: 460px; margin: 0 auto; }
.notes-tier { display: flex; flex-direction: column; align-items: center; padding: 24px 0; }
.notes-tier .label { margin-bottom: 4px; }
.notes-tier .sub { font-size: 12px; color: rgba(26,17,19,0.5); margin-bottom: 16px; }
.notes-tier .box {
  border: 1px solid rgba(201,162,39,0.5); background: var(--surface-2);
  padding: 16px 24px; text-align: center; margin: 0 auto;
}
.notes-tier .box p { font-family: 'Montserrat', sans-serif; font-size: 17px; color: var(--maroon); margin: 0; }
.notes-connector { width: 1px; height: 24px; background: rgba(201,162,39,0.4); margin: 24px auto 0; }

/* ---- Trust strip ---- */
.trust-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
@media (min-width: 768px) { .trust-strip { grid-template-columns: repeat(4, 1fr); } }
.house-values-strip { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 640px) { .house-values-strip { grid-template-columns: repeat(3, 1fr); } }
.trust-item { text-align: center; }
.trust-item .ico { width: 40px; height: 40px; margin: 0 auto 14px; color: var(--gold-dark); }
.trust-item h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; }
.trust-item p { font-size: 13px; color: rgba(26,17,19,0.55); margin-top: 6px; }

/* ---- Reviews ---- */
.review-card { padding: 24px 0; border-bottom: 1px solid rgba(26,17,19,0.08); }

/* ---- Cards / tables (admin + storefront shared) ---- */
.card { border: 1px solid rgba(26,17,19,0.1); background: var(--surface-2); padding: 24px; }
table.data-table { width: 100%; border-collapse: collapse; text-align: left; }
table.data-table thead { background: var(--surface-3); }
table.data-table th { font-family: 'Montserrat', sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(26,17,19,0.5); padding: 12px 20px; }
table.data-table td { padding: 12px 20px; font-family: 'Montserrat', sans-serif; font-size: 13px; border-top: 1px solid rgba(26,17,19,0.05); }

/* ---- AI Chat widget ---- */
.chat-widget { position: fixed; bottom: 24px; right: 24px; z-index: 50; font-family: 'Montserrat', sans-serif; }
.chat-window { width: min(320px, calc(100vw - 48px)); height: min(440px, calc(100vh - 140px)); background: var(--surface); border: 1px solid rgba(201,162,39,0.4); box-shadow: 0 20px 60px rgba(0,0,0,0.25); display: flex; flex-direction: column; margin-bottom: 16px; }
.chat-header { background: var(--maroon); color: var(--champagne); padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; }
.chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { max-width: 85%; padding: 8px 12px; font-size: 13px; line-height: 1.4; }
.chat-msg.bot { background: var(--surface-3); align-self: flex-start; }
.chat-msg.user { background: var(--maroon); color: var(--ivory); align-self: flex-end; }
.chat-input { display: flex; gap: 8px; border-top: 1px solid rgba(201,162,39,0.2); padding: 10px; }
.chat-input input { flex: 1; border: none; background: transparent; font-size: 13px; }
.chat-input input:focus { outline: none; }
.chat-toggle {
  width: 56px; height: 56px; border-radius: 50%; background: var(--maroon); color: var(--champagne);
  display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; box-shadow: 0 0 24px rgba(201,162,39,0.25);
}

/* ---- Admin layout ---- */
.admin-shell { display: flex; min-height: 100vh; font-family: 'Montserrat', sans-serif; }
.admin-sidebar {
  width: 240px; flex-shrink: 0; background: var(--surface-2); color: var(--ink);
  border-right: 1px solid rgba(26,17,19,0.1); display: flex; flex-direction: column; min-height: 100vh;
}
.admin-sidebar .brand { padding: 24px; border-bottom: 1px solid rgba(201,162,39,0.35); }
.admin-sidebar nav { flex: 1; padding: 16px 12px; overflow-y: auto; }
.admin-sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13px; color: rgba(26,17,19,0.7); border-radius: var(--radius-sm); }
.admin-sidebar nav a:hover, .admin-sidebar nav a.active { background: rgba(201,162,39,0.16); color: var(--maroon); }
.admin-sidebar .foot { padding: 16px 24px; border-top: 1px solid rgba(201,162,39,0.35); font-size: 12px; color: rgba(26,17,19,0.5); }
.admin-content { flex: 1; min-width: 0; padding: 32px; max-width: 1400px; }
.admin-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (min-width: 900px) { .admin-stat-grid { grid-template-columns: repeat(4, 1fr); } }
/* The admin shell had no breakpoint at all — a fixed 240px sidebar plus
   content meant permanent horizontal scroll on any narrow screen. */
@media (max-width: 899px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar { width: 100%; min-height: 0; }
  .admin-sidebar nav { display: flex; flex-wrap: wrap; gap: 2px; }
  .admin-sidebar nav a { padding: 8px 10px; }
  .admin-content { padding: 20px var(--gutter); }
}
.admin-stat-card { border: 1px solid rgba(26,17,19,0.1); background: var(--surface-2); padding: 20px; }
.admin-stat-card .value { font-family: 'Montserrat', sans-serif; font-size: 28px; margin-top: 12px; }
.admin-stat-card .label { font-size: 12px; color: rgba(26,17,19,0.5); }

/* ---- Alerts / flash ---- */
.alert { padding: 14px 18px; font-family: 'Montserrat', sans-serif; font-size: 13px; margin-bottom: 24px; border-radius: var(--radius-sm); }
.alert-success { background: rgba(46,125,50,0.1); color: #2e7d32; }
.alert-error { background: rgba(74,14,31,0.1); color: var(--maroon); }
.alert-info { background: var(--surface-3); color: var(--ink); border-left: 2px solid var(--gold); }

/* ---- Checkout step indicator ---- */
.step-indicator {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.14em; color: rgba(26,17,19,0.4);
}
.step-indicator .num {
  width: 26px; height: 26px; border-radius: 50%; background: rgba(26,17,19,0.1);
  color: rgba(26,17,19,0.4); display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.step-rule { width: 32px; height: 1px; background: rgba(26,17,19,0.15); }
/* !important is gone now that the base styles live here rather than inline. */
.step-indicator.active { color: var(--maroon); }
.step-indicator.active .num { background: var(--maroon); color: var(--ivory); }

/* ---- Utilities ---- */
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; } .mt-64 { margin-top: 64px; }
.text-center { text-align: center; }
.py-80 { padding-top: 80px; padding-bottom: 80px; }
.py-64 { padding-top: 64px; padding-bottom: 64px; }
/* .bg-champagne kept as an alias for any template not yet renamed. */
.bg-alt, .bg-champagne { background: var(--surface-2); }
.muted { color: rgba(26,17,19,0.55); }
.stars { color: var(--gold); letter-spacing: 2px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

/* ---- Scroll reveal (calm, subtle) ---- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================
   v3 additions — branding, support chat, policies, admin integrations
   ========================================================== */
.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; }

/* Uploaded logo — the text wordmark remains the fallback */
.brand-logo { display: inline-flex; align-items: center; line-height: 0; }
.brand-logo .pb84-wordmark { line-height: 1.2; }
.brand-logo-img { display: block; max-width: 220px; object-fit: contain; }
.brand-logo--small .brand-logo-img { max-width: 140px; }
.brand-logo--footer .pb84-wordmark { font-size: 30px; }
@media (max-width: 380px) { .site-header .brand-logo-img { max-width: 120px; height: auto !important; max-height: 34px; } }

/* Support chat */
.chat-window[hidden] { display: none; }
.chat-window { width: min(360px, calc(100vw - 32px)); height: min(520px, calc(100vh - 120px)); }
.chat-title { font-weight: 700; font-size: 13px; letter-spacing: 0.08em; }
.chat-header-actions { display: flex; align-items: center; gap: 12px; }
.chat-wa { color: var(--champagne); display: inline-flex; }
.chat-wa:hover { color: #fff; }
.chat-close { background: none; border: none; color: var(--champagne); cursor: pointer; font-size: 20px; line-height: 1; padding: 0 2px; }
.chat-msg { white-space: pre-line; }
.chat-msg.typing { color: rgba(26,17,19,0.45); letter-spacing: 0.2em; }
.chat-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-chip { border: 1px solid rgba(74,14,31,0.35); background: var(--surface); color: var(--maroon); font-size: 12px; padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.chat-chip:hover, .chat-chip:focus-visible { background: var(--maroon); color: var(--ivory); }
.chat-links { display: flex; flex-direction: column; gap: 6px; align-self: flex-start; max-width: 85%; }
.chat-links a { font-size: 13px; color: var(--maroon); text-decoration: underline; text-underline-offset: 3px; }
.chat-send { background: none; border: none; color: var(--maroon); cursor: pointer; font-weight: 600; font-size: 13px; }
@media (max-width: 480px) { .chat-widget { right: 16px; bottom: 16px; } }

/* Policy pages */
.policy { max-width: 760px; }
.policy h2 { font-size: 19px; margin-top: 40px; }
.policy h3 { font-size: 15px; margin-top: 24px; }
.policy p, .policy li { font-size: 15px; color: rgba(26,17,19,0.8); }
.policy ul { padding-left: 20px; }
.policy li { margin-bottom: 6px; }
.policy .policy-meta { font-size: 12px; color: rgba(26,17,19,0.5); }
.policy .policy-box { border: 1px solid rgba(201,162,39,0.45); background: var(--surface-2); padding: 20px 24px; margin-top: 24px; }
.policy-toc { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; margin-top: 16px; }
.policy-toc a { color: var(--maroon); text-decoration: underline; text-underline-offset: 3px; }

/* Admin — tabs, status and logs */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 4px 24px; border-bottom: 1px solid rgba(26,17,19,0.1); margin-top: 16px; font-size: 13px; }
.admin-tabs a { padding: 0 0 12px; color: rgba(26,17,19,0.55); border-bottom: 2px solid transparent; }
.admin-tabs a.active { color: var(--maroon); border-bottom-color: var(--maroon); }
.status-pill { display: inline-block; font-size: 11px; padding: 3px 10px; border-radius: 999px; font-weight: 600; }
.status-pill.on { background: rgba(46,125,50,0.12); color: #2E6B31; }
.status-pill.off { background: rgba(26,17,19,0.07); color: rgba(26,17,19,0.55); }
.status-pill.warn { background: rgba(201,162,39,0.18); color: var(--gold-dark); }
.admin-help { font-size: 12px; color: rgba(26,17,19,0.6); margin-top: -8px; margin-bottom: 16px; }
.admin-help code, .admin-copy { font-size: 12px; background: var(--surface-3); padding: 2px 6px; word-break: break-all; }
.switch-row { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 16px; cursor: pointer; }
.log-row { display: grid; grid-template-columns: 130px 90px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(26,17,19,0.06); font-size: 12px; }
.log-row .bad { color: #9B1C1C; }
@media (max-width: 700px) { .log-row { grid-template-columns: 1fr; gap: 2px; } }
.brand-preview { display: flex; align-items: center; justify-content: center; min-height: 96px; background: var(--surface); border: 1px dashed rgba(26,17,19,0.2); padding: 16px; }
.policy a { color: var(--maroon); text-decoration: underline; text-underline-offset: 3px; }

/* Category tabs (client brief): one anchored dropdown per category */
.mega-menu-list { min-width: 220px; }
.mega-menu-list li { margin-bottom: 8px; white-space: nowrap; }
.mega-menu-list .mega-menu-all { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(201,162,39,0.3); }
.mega-menu-list .mega-menu-all a { font-size: 12px; letter-spacing: 0.08em; color: var(--maroon); }

/* Desktop header: the hamburger is display:none at ≥1024px, which removed it
   from the 3-column grid and slid the logo into column 1 and the icons into
   the centre column. Pin both to their intended columns. */
@media (min-width: 1024px) {
  .site-header .logo { grid-column: 2; }
  .header-icons { grid-column: 3; }
}
@media (max-width: 640px) { .site-header .brand-logo-img { max-width: 150px; height: auto !important; max-height: 40px; } }