/* ==========================================================================
   FASHION IT BY AALIYAH, Design System
   ========================================================================== */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Inter:wght@300;400;500;600;700&family=Great+Vibes&display=swap');

/* =====================================================
   PAGE TRANSITIONS, View Transitions API (Chrome/Safari)
   ===================================================== */
@view-transition {
  navigation: auto;
}
/* Root full-page fade + subtle upward slide */
::view-transition-old(root) {
  animation: 380ms cubic-bezier(0.32, 0, 0.67, 0) both pageOut;
}
::view-transition-new(root) {
  animation: 520ms cubic-bezier(0.22, 1, 0.36, 1) 60ms both pageIn;
}
@keyframes pageOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(20px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* Header persists across pages, no fade */
::view-transition-old(header),
::view-transition-new(header) {
  animation-duration: 0ms;
}
::view-transition-old(tabbar),
::view-transition-new(tabbar) {
  animation-duration: 0ms;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* Design tokens */
:root {
  --cream: #F5F0E8;
  --cream-2: #EDE6D9;
  --cream-3: #E4DBCA;
  --ink: #1A1614;
  --ink-2: #2B2723;
  --muted: #6B6259;
  --bronze: #B8946A;
  --gold: #C9A87B;
  --wine: #7A2E2E;
  --white: #FFFFFF;
  --border: rgba(26, 22, 20, 0.12);
  --shadow-sm: 0 4px 20px rgba(26, 22, 20, 0.06);
  --shadow-md: 0 12px 40px rgba(26, 22, 20, 0.10);
  --shadow-lg: 0 24px 60px rgba(26, 22, 20, 0.14);

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-script: 'Great Vibes', cursive;

  --container: 1440px;
  --content: 1280px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--cream);
  /* clip stops sideways scrolling the same way hidden does, but without making
     this element a scroll container. hidden here was silently breaking every
     position: sticky on the site, because a sticky element sticks to its
     nearest scrolling ancestor and that had become the body rather than the
     viewport. hidden stays first as the fallback for browsers without clip. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* Typography */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
}
.h-display {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.h1 { font-size: clamp(48px, 7vw, 96px); }
.h2 { font-size: clamp(36px, 5vw, 64px); }
.h3 { font-size: clamp(28px, 3.5vw, 44px); }
.italic-accent { font-style: italic; color: var(--bronze); }
.script { font-family: var(--font-script); font-weight: 400; }

/* Layout */
.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.content { max-width: var(--content); margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) {
  .container, .content { padding: 0 20px; }
}

.section { padding: clamp(60px, 10vw, 120px) 0; }
.section-tight { padding: clamp(40px, 6vw, 72px) 0; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  transition: all 0.35s var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--cream); color: var(--ink); }
.btn-outline { background: transparent; color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--cream); }
.btn-outline-light { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn-outline-light:hover { background: var(--cream); color: var(--ink); }
.btn-lg { padding: 20px 44px; font-size: 12px; }
.btn-sm { padding: 12px 24px; font-size: 11px; letter-spacing: 0.2em; }
.btn-block { width: 100%; }

/* Link */
.link-underline {
  display: inline-block;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--ink), var(--ink));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  transition: background-size 0.4s var(--ease);
}
.link-underline:hover { background-size: 0 1px; }

/* =====================================================
   Announcement bar
   ===================================================== */
.announcement {
  background: var(--ink);
  color: var(--cream);
  padding: 12px 24px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.14em;
  font-weight: 500;
  overflow: hidden;
  position: relative;
}
.announcement__track {
  display: flex;
  gap: 60px;
  animation: marquee 30s linear infinite;
  white-space: nowrap;
  justify-content: center;
}
.announcement__item { display: inline-flex; align-items: center; gap: 12px; }
.announcement__item::before { content: '✦'; color: var(--bronze); }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* =====================================================
   Header
   ===================================================== */
.header {
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: transform 0.3s ease;
  height: 72px;
  view-transition-name: header;
}
.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 40px;
  gap: 24px;
  height: 100%;
  position: relative;
}
.header__nav {
  display: flex;
  align-items: center;
  gap: 36px;
}
.header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
}
.nav-link {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  padding: 6px 0;
  transition: opacity 0.25s ease;
}
.nav-link:hover { opacity: 0.7; }
.nav-link.has-dropdown { display: inline-flex; align-items: center; gap: 6px; }
.nav-link.has-dropdown::after {
  content: '';
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.25s ease;
}
.nav-item { position: relative; }
.nav-item:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-item:hover .nav-link.has-dropdown::after { transform: rotate(-135deg) translateX(-2px); }

.dropdown {
  position: absolute;
  top: 100%;
  left: -20px;
  background: var(--cream);
  border: 1px solid var(--border);
  min-width: 220px;
  padding: 16px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.25s var(--ease);
  box-shadow: var(--shadow-md);
}
.dropdown a {
  display: block;
  padding: 10px 24px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: all 0.2s ease;
}
.dropdown a:hover { background: var(--cream-2); padding-left: 28px; }
/* Shop All is the primary entry, set apart from the category list under it. */
.dropdown__all {
  font-weight: 600;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.logo {
  display: block;
  height: 180px;
  width: auto;
  justify-self: center;
  align-self: center;
  margin: -40px 0 -68px 0;
  position: relative;
  z-index: 2;
  transition: transform 0.3s var(--ease);
  line-height: 0;
}
.logo:hover { transform: scale(1.02); }
.logo img { height: 100%; width: auto; display: block; object-fit: contain; object-position: center; }

.icon-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background 0.25s ease;
  position: relative;
}
.icon-btn:hover { background: var(--cream-2); }
.icon-btn svg { width: 20px; height: 20px; stroke: var(--ink); stroke-width: 1.5; fill: none; }
.cart-count {
  position: absolute;
  top: 4px; right: 4px;
  background: var(--ink);
  color: var(--cream);
  font-size: 10px;
  font-weight: 600;
  min-width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
}

/* Account dropdown */
.account-wrap { position: relative; }
.account-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  min-width: 280px;
  background: var(--cream);
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(26, 22, 20, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.25s var(--ease);
  z-index: 200;
}
.account-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.account-menu__head {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.account-menu__hello {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 4px;
}
.account-menu__sub {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.account-menu__body { padding: 8px 0; }
.account-menu a, .account-menu button {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 12px 24px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  text-align: left;
  transition: background 0.2s ease;
  border: none; background: transparent; cursor: pointer;
  text-transform: uppercase;
  font-weight: 500;
}
.account-menu a:hover, .account-menu button:hover { background: var(--cream-2); }
.account-menu a svg, .account-menu button svg {
  width: 16px; height: 16px;
  stroke: var(--bronze); stroke-width: 1.5; fill: none;
  flex-shrink: 0;
}
.account-menu__cta {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
}
/* Buttons inside the account dropdown need higher specificity than the generic
   .account-menu a rule (which forces background:transparent + color:ink-2 for
   the plain menu links). Without these overrides, .btn's ink background and
   cream text lose out and the "Sign In" / "Create Account" buttons render as
   flat text that goes invisible on hover. */
.account-menu__cta .btn { padding: 14px 24px; font-size: 11px; justify-content: center; text-align: center; border: 1px solid var(--ink); background: var(--ink); color: var(--cream); }
.account-menu__cta .btn:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.account-menu__cta .btn.btn-outline { background: transparent; color: var(--ink); }
.account-menu__cta .btn.btn-outline:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.account-menu__foot {
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.account-menu__foot a { color: var(--bronze); font-weight: 500; }

/* Signed-in icon variant */
.icon-btn--signed-in { background: var(--ink); color: var(--cream); }
.icon-btn--signed-in:hover { background: var(--ink-2); }
.icon-btn--signed-in svg { stroke: var(--cream); }
.icon-btn__initial {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
/* Uploaded avatar photo fills the icon-btn circle. */
.icon-btn--signed-in { overflow: hidden; padding: 0; }
.icon-btn__photo {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

/* Mobile menu button */
.menu-btn { display: none; }
.header__mobile-left { display: none; }
@media (min-width: 1025px) {
  .hide-mobile { display: inline-flex; }
}
@media (max-width: 1024px) {
  .hide-mobile { display: none; }
}

@media (max-width: 1024px) {
  .header {
    height: 84px;
    overflow: visible;
    background: var(--cream);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(26, 22, 20, 0.04);
  }
  .header__inner {
    padding: 0 14px;
    grid-template-columns: 88px 1fr 88px;
    gap: 8px;
    align-items: center;
    height: 100%;
    position: relative;
  }
  .header__nav { display: none; }
  .menu-btn { display: inline-flex; }
  .header__mobile-left {
    display: inline-flex;
    align-items: center;
    justify-self: start;
  }
  .header__actions {
    justify-self: end;
    gap: 6px;
    display: flex;
    align-items: center;
  }
  .header__actions .hide-mobile { display: none; }
  .logo {
    height: 130px;
    margin: -12px 0 -34px 0;
    justify-self: center;
    align-self: center;
    position: relative;
    top: auto; left: auto;
    transform: none;
    z-index: 3;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    pointer-events: auto;
  }
  .logo img {
    height: 100%; width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
  }
  .logo:hover { transform: scale(1.02); }
  .icon-btn {
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .icon-btn svg { width: 22px; height: 22px; }
  .cart-count {
    top: 0; right: 0;
    min-width: 18px; height: 18px;
    font-size: 10px;
    border: 2px solid var(--cream);
  }
}
@media (max-width: 480px) {
  .header { height: 76px; }
  .header__inner { padding: 0 10px; grid-template-columns: 86px 1fr 86px; }
  .logo { height: 120px; margin: -10px 0 -34px 0; max-width: 100%; }
  .icon-btn { width: 38px; height: 38px; }
  .icon-btn svg { width: 20px; height: 20px; }
}
@media (max-width: 360px) {
  .header { height: 68px; }
  .logo { height: 108px; margin: -8px 0 -32px 0; }
  .icon-btn { width: 34px; height: 34px; }
  .icon-btn svg { width: 18px; height: 18px; }
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(400px, 90vw);
  background: var(--cream);
  z-index: 400;
  transform: translateX(100%);
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: -20px 0 60px -20px rgba(26, 22, 20, 0.3);
  display: flex;
  flex-direction: column;
}
.mobile-menu.open { transform: translateX(0); }

/* Fixed header and footer with a flexible middle: the menu fits one screen at
   normal sizes and only the category area scrolls if it ever cannot. */
.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.mobile-menu__top {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 22px 22px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--cream-2);
  flex-shrink: 0;
}
.mobile-menu__top .logo { height: 46px; display: flex; align-items: center; }
.mobile-menu__top .logo img { height: 100%; width: auto; display: block; }
.mobile-menu__top .icon-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--border);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.mobile-menu__top .icon-btn:active { background: var(--ink); border-color: var(--ink); color: var(--cream); }

.mobile-menu__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: space-between;
}

.mobile-menu__label {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: -6px;
}

/* Primary action */
.mobile-menu__hero {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px;
  background: var(--ink); color: var(--cream);
  border-radius: 4px;
  transition: transform 0.18s ease;
}
.mobile-menu__hero:active { transform: scale(0.985); }
.mobile-menu__hero__label {
  display: block;
  font-size: 15px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.mobile-menu__hero__sub {
  display: block;
  font-size: 11.5px; color: rgba(245, 240, 232, 0.6);
  letter-spacing: 0.04em; margin-top: 3px;
  font-variant-numeric: tabular-nums lining-nums;
}
.mobile-menu__hero svg { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; }

/* Two highlight pills */
.mobile-menu__pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mobile-menu__pills a {
  padding: 12px 10px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  color: var(--ink);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.mobile-menu__pills a:active { border-color: var(--ink); background: var(--cream-2); }

/* Categories, two per row with a stock count */
.mobile-menu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mobile-menu__grid a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 14px;
  background: var(--cream-2);
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--ink);
  transition: border-color 0.18s ease, background 0.18s ease;
  min-height: 52px;
}
.mobile-menu__grid a:active { border-color: var(--ink); background: var(--cream); }
.mobile-menu__grid__name {
  font-family: var(--font-serif);
  font-size: 17px; font-weight: 500; line-height: 1.15;
}
.mobile-menu__grid__count {
  font-size: 11px; color: var(--muted); font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  flex-shrink: 0;
}

/* Secondary links on one line, so four items cost one row instead of four */
.mobile-menu__minor {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.mobile-menu__minor a {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 4px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  text-align: center;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.mobile-menu__minor a:active {
  background: var(--cream-2);
  border-color: var(--border);
  color: var(--ink);
  transform: scale(0.97);
}
.mobile-menu__minor__icon {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--ink);
  transition: background 0.18s ease, color 0.18s ease;
}
.mobile-menu__minor a:active .mobile-menu__minor__icon { background: var(--ink); color: var(--cream); }
.mobile-menu__minor__icon svg {
  width: 16px; height: 16px;
  stroke: currentColor; stroke-width: 1.5; fill: none;
}

/* Footer pinned to the bottom */
.mobile-menu__foot {
  flex-shrink: 0;
  padding: 14px 22px calc(16px + env(safe-area-inset-bottom, 0));
  border-top: 1px solid var(--border);
  background: var(--cream);
  display: flex; flex-direction: column; gap: 10px;
}
.mobile-menu__wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  color: var(--ink);
  transition: background 0.25s ease, color 0.25s ease;
}
.mobile-menu__wa:active { background: var(--ink); color: var(--cream); }
.mobile-menu__wa svg { width: 18px; height: 18px; fill: #25D366; transition: fill 0.25s ease; }
.mobile-menu__wa:active svg { fill: #fff; }
.mobile-menu__socials { display: flex; justify-content: center; gap: 10px; }
.mobile-menu__socials a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--cream-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.mobile-menu__socials svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.mobile-menu__note {
  text-align: center; font-size: 10px; color: var(--muted);
  letter-spacing: 0.16em; text-transform: uppercase;
}

/* Short phones: trim the softer spacing before anything has to scroll. */
@media (max-height: 700px) {
  .mobile-menu__body { gap: 11px; padding: 14px 20px 16px; }
  .mobile-menu__hero { padding: 13px 16px; }
  .mobile-menu__grid a { min-height: 46px; padding: 11px 13px; }
  .mobile-menu__grid__name { font-size: 15.5px; }
  .mobile-menu__foot { padding-top: 12px; gap: 8px; }
  .mobile-menu__note { display: none; }
}

/* =====================================================
   Hero carousel, full-bleed image with text overlay
   ===================================================== */
.hero {
  position: relative;
  height: calc(100vh - 72px);
  min-height: 640px;
  max-height: 900px;
  overflow: hidden;
  background: var(--cream-2);
}
.hero__slides { position: relative; height: 100%; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 1.6s;
  will-change: opacity;
}
.hero__slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
}

.hero__image {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero__image img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  transition: transform 8s ease-out;
}
.hero__slide.active .hero__image img { transform: scale(1); }

/* Per-slide focal points so key subject (face, top of image) stays in view */
.hero__slide[data-focus="right-top"] .hero__image img { object-position: 68% 18%; }
.hero__slide[data-focus="right-center"] .hero__image img { object-position: 68% 32%; }
.hero__slide[data-focus="center-top"] .hero__image img { object-position: 55% 15%; }

/* Content anchored with gradient scrim for legibility */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.35) 32%, rgba(0,0,0,0.08) 55%, rgba(0,0,0,0) 72%);
  pointer-events: none;
}
.hero__slide[data-scrim="right"] .hero__scrim {
  background: linear-gradient(255deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.35) 32%, rgba(0,0,0,0.08) 55%, rgba(0,0,0,0) 72%);
}
.hero__slide[data-scrim="bottom"] .hero__scrim {
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.05) 75%);
}

.hero__content {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  padding: 40px clamp(32px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  color: var(--cream);
  max-width: 620px;
  z-index: 2;
}
.hero__slide[data-align="right"] .hero__content {
  left: auto; right: 0;
}
.hero__slide[data-align="center"] .hero__content {
  left: 50%; transform: translateX(-50%);
  align-items: center;
  text-align: center;
  padding-bottom: 120px;
  justify-content: flex-end;
}

/* Content stays invisible on non-active slides so it can't peek during crossfade */
.hero__eyebrow, .hero__title, .hero__text, .hero__cta {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.hero__slide.active .hero__eyebrow { opacity: 1; transform: translateY(0); transition-delay: 0.35s; }
.hero__slide.active .hero__title { opacity: 1; transform: translateY(0); transition-delay: 0.5s; transition-duration: 1.1s; }
.hero__slide.active .hero__text { opacity: 1; transform: translateY(0); transition-delay: 0.75s; }
.hero__slide.active .hero__cta { opacity: 1; transform: translateY(0); transition-delay: 0.9s; }

.hero__eyebrow {
  font-size: 12px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  font-weight: 500;
}
.hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(48px, 6.4vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-shadow: 0 4px 32px rgba(0,0,0,0.4);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.hero__title .italic-accent { font-style: italic; color: var(--gold); }
.hero__text {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  max-width: 460px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}
.hero__cta { margin-top: 8px; }

.hero__arrows {
  position: absolute;
  top: 50%; left: 0; right: 0;
  display: flex; justify-content: space-between;
  padding: 0 32px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 5;
}
.hero__arrow {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(245, 240, 232, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(245, 240, 232, 0.35);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cream);
  pointer-events: auto;
  transition: all 0.3s ease;
}
.hero__arrow:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.hero__arrow svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; fill: none; }

.hero__dots {
  position: absolute;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 10px;
  z-index: 5;
}
.hero__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(245, 240, 232, 0.4);
  transition: all 0.3s ease;
  border: 1px solid rgba(245, 240, 232, 0.7);
  cursor: pointer;
}
.hero__dot.active {
  background: var(--cream);
  width: 28px;
  border-radius: 4px;
}

@media (max-width: 900px) {
  .hero { height: calc(100vh - 64px); min-height: 560px; max-height: 780px; }
  .hero__content {
    padding: 32px 24px 180px;
    max-width: 100%;
    justify-content: flex-end;
    gap: 16px;
  }
  .hero__title { font-size: clamp(44px, 12vw, 72px); }
  .hero__text { font-size: 15px; max-width: 92%; }
  .hero__eyebrow { font-size: 11px; letter-spacing: 0.28em; }
  .hero__scrim,
  .hero__slide[data-scrim] .hero__scrim {
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.4) 45%, rgba(0,0,0,0.08) 85%);
  }
  .hero__slide[data-align="right"] .hero__content,
  .hero__slide[data-align="center"] .hero__content {
    left: 0; right: 0; transform: none;
    align-items: flex-start; text-align: left;
    justify-content: flex-end;
  }
  .hero__arrows { display: none; }
  .hero__dots { bottom: 40px; }
}
@media (max-width: 480px) {
  .hero__title { font-size: 46px; line-height: 1; }
  .hero__content { padding-bottom: 170px; gap: 14px; }
  .hero__dots { bottom: 32px; }
}

/* =====================================================
   Section headers
   ===================================================== */
.section-head {
  text-align: center;
  margin-bottom: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.section-head__eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bronze);
  font-weight: 500;
}
.section-head__title { font-family: var(--font-serif); font-size: clamp(36px, 5vw, 60px); font-weight: 400; line-height: 1.05; color: var(--ink); max-width: 720px; }
.section-head__text { max-width: 560px; color: var(--muted); font-size: 15px; }
.section-head__title .italic-accent { font-style: italic; color: var(--bronze); }

/* =====================================================
   Category tiles
   ===================================================== */
.categories { padding: clamp(80px, 10vw, 120px) 0; }
.categories__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.category-card {
  display: block;
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--cream-2);
  cursor: pointer;
  isolation: isolate;
}
.category-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.category-card:hover .category-card__img { transform: scale(1.06); }
.category-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26, 22, 20, 0.55), transparent 55%);
  z-index: 1;
}
.category-card__label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 28px;
  color: var(--cream);
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.category-card__name {
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 400;
  line-height: 1.1;
}
.category-card__arrow {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(245, 240, 232, 0.15);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(245, 240, 232, 0.3);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.3s ease;
}
.category-card:hover .category-card__arrow { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.category-card__arrow svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; }

@media (max-width: 900px) { .categories__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .categories__grid { grid-template-columns: 1fr; } }

/* =====================================================
   Product cards
   ===================================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 24px;
}
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; } }

.product-card { position: relative; }
.product-card__media {
  display: block;
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: transparent;
  margin-bottom: 16px;
  isolation: isolate;
}
.product-card__media::after {
  content: '';
  position: absolute;
  left: 8%; right: 8%; bottom: -4px;
  height: 14px;
  background: radial-gradient(ellipse at center, rgba(26,22,20,0.10), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.product-card:hover .product-card__media::after { opacity: 1; }
.product-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-card__img--hover {
  opacity: 0;
}
.product-card:hover .product-card__img--main { opacity: 0; }
.product-card:hover .product-card__img--hover { opacity: 1; }
.product-card:hover .product-card__img { transform: scale(1.02); }
.product-card__badges {
  position: absolute;
  top: 14px; left: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.badge {
  display: inline-block;
  padding: 5px 10px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  background: var(--cream);
  color: var(--ink);
}
.badge--new { background: var(--ink); color: var(--cream); }
.badge--sale { background: var(--wine); color: var(--cream); }
.badge--bestseller { background: var(--bronze); color: var(--cream); }
.badge--low {
  background: var(--wine); color: var(--cream);
  animation: pulseGlow 2.2s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.product-card__stock {
  font-size: 11px;
  color: var(--wine);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-top: 2px;
  display: flex; align-items: center; gap: 6px;
}
.product-card__stock::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--wine);
  animation: pulseGlow 2s ease-in-out infinite;
}

.product-card__wishlist {
  position: absolute;
  top: 12px; right: 12px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(245, 240, 232, 0.85);
  backdrop-filter: blur(8px);
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: translateY(-6px);
  transition: all 0.3s ease;
  z-index: 2;
}
.product-card:hover .product-card__wishlist { opacity: 1; transform: translateY(0); }
.product-card__wishlist svg { width: 18px; height: 18px; stroke: var(--ink); stroke-width: 1.5; fill: none; }
.product-card__wishlist.active svg { fill: var(--wine); stroke: var(--wine); }

.product-card__quickadd {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 12px;
  background: var(--ink);
  color: var(--cream);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  transform: translateY(100%);
  transition: all 0.35s var(--ease);
  z-index: 2;
  cursor: pointer;
}
.product-card:hover .product-card__quickadd { opacity: 1; transform: translateY(0); }

/* ---------------------------------------------------------------------------
   Sold out
   A sold out piece still shows, she restocks and it keeps the collection
   looking full, but it reads as unavailable rather than quietly failing when
   someone tries to buy it.
   --------------------------------------------------------------------------- */
.product-card--out .product-card__img { filter: grayscale(0.55); opacity: 0.62; }
.product-card--out .product-card__name,
.product-card--out .product-card__price { opacity: 0.7; }
.product-card--out .product-card__stock { color: var(--muted); }
/* The pulsing dot reads as urgency, which is wrong once it is gone. */
.product-card--out .product-card__stock::before { background: var(--muted); animation: none; }
.product-card__quickadd--out {
  background: var(--muted);
  cursor: default;
  opacity: 1;
  transform: translateY(0);
}

/* The piece is gone, not just this size */
.product-soldout {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
  background: rgba(0, 0, 0, 0.02);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.btn[disabled],
.mobile-buy-bar__btn[disabled] {
  background: var(--muted);
  border-color: var(--muted);
  cursor: not-allowed;
  opacity: 0.75;
  pointer-events: none;
}

/* A bag line that can no longer be filled */
.cart-item__stock,
.cart-line__stock {
  font-size: 12px;
  font-weight: 500;
  margin-top: 6px;
  letter-spacing: 0.01em;
}
.cart-item__stock--out,
.cart-line__stock--out { color: var(--wine); }
.cart-item__stock--low,
.cart-line__stock--low { color: var(--bronze); }
.cart-line--issue { background: rgba(0, 0, 0, 0.015); }
.cart-blocked {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--wine);
  background: rgba(0, 0, 0, 0.02);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink);
}

.product-card__info { display: flex; flex-direction: column; gap: 6px; }
.product-card__name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}
.product-card__meta {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px;
  color: var(--muted);
}
.product-card__price {
  display: flex; align-items: center; gap: 10px;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.product-card__price--old { text-decoration: line-through; color: var(--muted); font-weight: 400; }
.product-card__price--sale { color: var(--wine); }
.product-card__colors {
  display: flex; gap: 6px;
  margin-top: 6px;
}
.color-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(26, 22, 20, 0.2);
  cursor: pointer;
}

/* =====================================================
   Featured strip (marquee brand phrase)
   ===================================================== */
.strip {
  background: var(--ink);
  color: var(--cream);
  padding: 20px 0;
  overflow: hidden;
}
.strip__track {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 300;
}
.strip__item { display: inline-flex; align-items: center; gap: 40px; }
.strip__item::after { content: '✦'; color: var(--bronze); font-size: 20px; }

/* =====================================================
   Editorial split
   ===================================================== */
.editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
}
.editorial__media { aspect-ratio: 4/5; overflow: hidden; }
.editorial__media img { width: 100%; height: 100%; object-fit: cover; }
.editorial__content {
  padding: clamp(48px, 8vw, 120px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.editorial__title { font-family: var(--font-serif); font-size: clamp(36px, 4.5vw, 60px); font-weight: 400; line-height: 1.05; color: var(--ink); }
.editorial__title .italic-accent { font-style: italic; color: var(--bronze); }
.editorial__text { color: var(--muted); font-size: 16px; line-height: 1.75; max-width: 500px; }
.editorial__signature { font-family: var(--font-script); font-size: 48px; color: var(--bronze); line-height: 1; margin-top: 12px; }

@media (max-width: 900px) {
  .editorial { grid-template-columns: 1fr; }
  .editorial__media { aspect-ratio: 4/3; }
}

/* =====================================================
   Value props
   ===================================================== */
.values {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--cream-2);
}
.values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.value {
  padding: 48px 24px;
  text-align: center;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.value:last-child { border-right: none; }
.value__icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--bronze);
}
.value__icon svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.25; fill: none; }
.value__title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
}
.value__text { font-size: 13px; color: var(--muted); max-width: 240px; }

@media (max-width: 900px) {
  .values__grid { grid-template-columns: repeat(2, 1fr); }
  .value:nth-child(2) { border-right: none; }
  .value:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 560px) {
  .values__grid { grid-template-columns: 1fr; }
  .value { border-right: none; border-bottom: 1px solid var(--border); }
  .value:last-child { border-bottom: none; }
}

/* =====================================================
   Newsletter
   ===================================================== */
.newsletter {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(80px, 10vw, 140px) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.newsletter__inner { max-width: 640px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.newsletter__eyebrow { font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--bronze); font-weight: 500; }
.newsletter__title { font-family: var(--font-serif); font-size: clamp(36px, 5vw, 56px); font-weight: 400; line-height: 1.05; }
.newsletter__title .italic-accent { font-style: italic; color: var(--bronze); }
.newsletter__text { color: rgba(245, 240, 232, 0.7); max-width: 480px; }
.newsletter__form {
  display: flex;
  width: 100%;
  max-width: 500px;
  margin-top: 12px;
  border-bottom: 1px solid rgba(245, 240, 232, 0.3);
}
.newsletter__input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 16px 0;
  color: var(--cream);
  font-size: 14px;
  outline: none;
}
.newsletter__input::placeholder { color: rgba(245, 240, 232, 0.5); letter-spacing: 0.08em; }
.newsletter__btn {
  padding: 16px 24px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--cream);
  transition: color 0.3s ease;
}
.newsletter__btn:hover { color: var(--bronze); }

/* =====================================================
   Instagram feed
   ===================================================== */
.instagram__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.instagram__item {
  display: block;
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  cursor: pointer;
}
.instagram__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.instagram__item:hover img { transform: scale(1.08); }
.instagram__item::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(26, 22, 20, 0);
  transition: background 0.3s ease;
}
.instagram__item:hover::after { background: rgba(26, 22, 20, 0.25); }
.instagram__handle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; color: var(--cream); z-index: 2; transition: opacity 0.3s ease; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
.instagram__item:hover .instagram__handle { opacity: 1; }

@media (max-width: 900px) { .instagram__grid { grid-template-columns: repeat(3, 1fr); } }

/* =====================================================
   Footer
   ===================================================== */
.footer {
  background: var(--ink);
  color: var(--cream);
  padding: 96px 0 36px;
  position: relative;
}
/* A hairline of light across the seam, so the footer reads as a deliberate
   close rather than the page simply running out. */
.footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(201, 168, 123, 0.45) 30%, rgba(201, 168, 123, 0.45) 70%, transparent);
}
.footer__inner {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
}

/* Brand ------------------------------------------------------------ */
.footer__brand { display: flex; flex-direction: column; align-items: center; }
.footer__logo {
  font-family: var(--font-serif);
  font-size: 38px;
  letter-spacing: 0.14em;
  font-weight: 400;
  color: var(--cream);
  line-height: 1;
}
.footer__logo-sub {
  font-family: var(--font-script);
  font-size: 24px;
  color: var(--bronze);
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.footer__tagline {
  color: rgba(245, 240, 232, 0.62);
  font-size: 14px;
  line-height: 1.85;
  max-width: 430px;
  margin: 20px auto 0;
}

/* Centered nav ----------------------------------------------------- */
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 34px;
  margin-top: 40px;
}
.footer__nav a {
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.7);
  position: relative;
  padding-bottom: 4px;
  transition: color 0.25s ease;
}
/* Underline grows from the centre out, which keeps the row visually still. */
.footer__nav a::after {
  content: '';
  position: absolute; left: 50%; bottom: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transform: translateX(-50%);
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer__nav a:hover { color: var(--cream); }
.footer__nav a:hover::after { width: 100%; }

.footer__rule {
  height: 1px;
  background: rgba(245, 240, 232, 0.12);
  margin: 44px 0;
}

/* Information blocks ----------------------------------------------- */
.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: center;
}
.footer__block__title {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 14px;
}
.footer__block__line {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(245, 240, 232, 0.82);
  font-variant-numeric: tabular-nums lining-nums;
}
.footer__block__line + .footer__block__line { margin-top: 4px; }
.footer__block__line--muted { color: rgba(245, 240, 232, 0.5); font-size: 13px; }

/* Socials ---------------------------------------------------------- */
.footer__socials {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 44px;
}
.footer__social {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(245, 240, 232, 0.07);
  border: 1px solid rgba(245, 240, 232, 0.16);
  color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.25s ease, color 0.25s ease,
              border-color 0.25s ease, transform 0.25s ease;
}
.footer__social:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  transform: translateY(-2px);
}
.footer__social svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.5; fill: none; }
/* WhatsApp and the pin are drawn as solid shapes, not strokes. */
.footer__social svg.is-solid,
.footer__contact__icon svg.is-solid { fill: currentColor; stroke: none; }

/* Brand colours ------------------------------------------------------
   The marks are the real logos, so they carry the real colours. The ring
   stays quiet until hover, when it fills with the brand colour and the mark
   flips to cream. Instagram is a gradient rather than a flat colour, which is
   what its mark actually is. */
.footer__social--ig   { --brand: #E1306C; }
.footer__social--tt   { --brand: #25F4EE; }
.footer__social--fb   { --brand: #1877F2; }
.footer__social--wa   { --brand: #25D366; }
.footer__social--mail { --brand: var(--bronze); }

.footer__social--ig svg path { fill: url(#igGrad); }

/* TikTok: the note plus its cyan and red offsets, which is what makes the mark
   read as TikTok rather than as a generic music note. */
.tt-mark__cy { fill: #25F4EE; transform: translate(-0.7px, -0.7px); }
.tt-mark__rd { fill: #FE2C55; transform: translate(0.7px, 0.7px); }
.tt-mark__fg { fill: currentColor; }
.footer__social--tt svg, .mm-social--tt svg { color: var(--cream); }
.footer__social--fb svg,
.footer__social--wa svg,
.footer__social--mail svg { color: var(--brand); }

.footer__social--ig:hover,
.footer__social--tt:hover,
.footer__social--fb:hover,
.footer__social--wa:hover,
.footer__social--mail:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--cream);
  transform: translateY(-2px);
}
.footer__social--ig:hover {
  background: linear-gradient(45deg, #FFDC80, #FCAF45, #F77737, #E1306C, #C13584, #833AB4);
  border-color: transparent;
}
.footer__social--ig:hover svg path { fill: var(--cream); }
.footer__social--fb:hover svg,
.footer__social--wa:hover svg,
.footer__social--mail:hover svg { color: var(--cream); }

/* TikTok's cyan is too light to sit on cream, so the hover ring goes to the
   mark's black and the glyph keeps the cyan. */
.footer__social--tt:hover { background: #010101; border-color: #010101; }

/* Same marks in the mobile menu, which sits on the dark panel. */
.mm-social--ig svg path { fill: url(#igGrad); }
.mm-social--fb svg { color: #1877F2; }
.mobile-menu__socials svg.is-solid { fill: currentColor; stroke: none; }

@media (prefers-reduced-motion: reduce) {
  .footer__social { transition: none; }
  .footer__social:hover { transform: none; }
}

/* Contact rows ----------------------------------------------------- */
.footer__contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
  margin-top: 32px;
}
.footer__contact__row {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: rgba(245, 240, 232, 0.72);
  transition: color 0.2s ease;
  font-variant-numeric: tabular-nums lining-nums;
}
.footer__contact__row:hover { color: var(--cream); }
.footer__contact__row--static { cursor: default; }
.footer__contact__icon {
  display: inline-flex;
  color: var(--gold);
  flex-shrink: 0;
}
.footer__contact__icon svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* Bottom ----------------------------------------------------------- */
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: rgba(245, 240, 232, 0.45);
  letter-spacing: 0.06em;
}
.footer__legal { display: flex; gap: 18px; align-items: center; }
.footer__legal a {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.5);
  transition: color 0.2s ease;
}
.footer__legal a:hover { color: var(--gold); }
.footer__owner {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.3);
  transition: color 0.2s ease;
}
.footer__owner:hover { color: var(--gold); }

@media (max-width: 720px) {
  .footer__cols { grid-template-columns: 1fr; gap: 30px; }
  .footer__bottom { flex-direction: column; gap: 14px; text-align: center; }
}

/* =====================================================
   Page banner (interior pages)
   ===================================================== */
/* Minimal breadcrumbs strip. The oversized page title + subtitle were
   removed by request, they crowded every page and read big-brand-y. */
.page-banner {
  background: transparent;
  padding: 22px 32px 10px;
  text-align: left;
  border-bottom: none;
  max-width: var(--container);
  margin: 0 auto;
}
.page-banner--tight { padding: 18px 32px 6px; }
@media (max-width: 640px) {
  .page-banner, .page-banner--tight { padding-left: 20px; padding-right: 20px; }
}
.page-banner__crumbs {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0;
}
.page-banner__crumbs a { color: var(--muted); transition: color 0.2s ease; }
.page-banner__crumbs a:hover { color: var(--ink); }
.page-banner__crumbs .sep { margin: 0 8px; opacity: 0.45; }
/* Hide the oversized page title + subtitle everywhere; kept in the DOM
   for a11y / SEO but not shown. */
.page-banner__title,
.page-banner__sub {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================
   Shop layout
   ===================================================== */
.shop-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  padding: 48px 32px 100px;
  max-width: var(--container);
  margin: 0 auto;
}
@media (max-width: 1000px) {
  .shop-layout { grid-template-columns: 1fr; padding: 24px 20px 60px; }
}

.filters {
  /* Stays put and scrolls away with the page. It is not pinned: the CSS said
     sticky for a long time but never worked, because overflow-x: hidden on the
     body made it stick to the body rather than the viewport. Fixing that
     elsewhere brought this to life, capped and scrolling internally, which is
     not the behaviour wanted here. align-self keeps it from stretching to the
     height of the product grid beside it. */
  align-self: start;
}
.filter-group {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}
.filter-group:first-child { padding-top: 0; }
.filter-group__title {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
.filter-group__title::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.25s ease;
}
.filter-group.collapsed .filter-group__title::after { transform: rotate(-45deg) translateY(0); }
.filter-group.collapsed .filter-group__body { display: none; }
.filter-group__body { display: flex; flex-direction: column; gap: 10px; }
.filter-option {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}
.filter-option input {
  width: 16px; height: 16px;
  accent-color: var(--ink);
}
.filter-option__count { margin-left: auto; color: var(--muted); font-size: 12px; }

.size-pills, .color-pills { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.size-pill {
  padding: 8px 14px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.size-pill:hover { border-color: var(--ink); }
.size-pill.active { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* Size sold-out, subtle diagonal strikethrough */
.size-pill--out {
  position: relative;
  color: var(--muted);
  opacity: 0.55;
  cursor: not-allowed;
  background: transparent !important;
  border-color: var(--border) !important;
}
.size-pill--out:hover { border-color: var(--border) !important; transform: none; }
.size-pill--out::after {
  content: '';
  position: absolute;
  top: 50%; left: 8%; right: 8%;
  height: 1px;
  background: currentColor;
  transform: rotate(-24deg);
  transform-origin: center;
  pointer-events: none;
}

/* Size stock micro-badge under the pill */
.size-pill__wrap {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.size-pill__stock {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wine);
  font-weight: 600;
}
.size-pill__stock--out { color: var(--muted); font-weight: 500; }
.color-pill {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}
.color-pill.active::after {
  content: '';
  position: absolute; inset: -4px;
  border: 1px solid var(--ink);
  border-radius: 50%;
}

.filter-group--mobile-only { display: none; }
@media (max-width: 1000px) {
  .filter-group--mobile-only { display: block; }
  .shop-toolbar__sort { display: none; }
}

/* Applied filter chips row, sits above the product grid */
.applied-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 0 0 20px;
  min-height: 0;
}
.applied-filters:empty { display: none; padding: 0; }
.applied-filter {
  display: inline-flex; align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  background: var(--cream-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  font-weight: 500;
  transition: all 0.2s ease;
}
.applied-filter:hover { border-color: var(--ink); }
.applied-filter__label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 2px;
}
.applied-filter__swatch {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
}
.applied-filter__x {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.applied-filter__x:hover { background: var(--ink); color: var(--cream); }
.applied-filter__x svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; }
.applied-filter--clear {
  background: transparent;
  color: var(--muted);
  text-decoration: underline;
  padding: 8px 14px;
  border: none;
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.applied-filter--clear:hover { color: var(--ink); }

/* Grid density toggle */
.shop-density {
  display: none;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
}
.shop-density button {
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--muted);
  border-radius: 3px;
  transition: all 0.2s ease;
}
.shop-density button:hover { color: var(--ink); border-color: var(--ink); }
.shop-density button.active {
  background: var(--ink); color: var(--cream); border-color: var(--ink);
}
.shop-density button svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.5; fill: none; }
@media (min-width: 901px) {
  .shop-density { display: flex; }
}

/* Product grid density variants */
.product-grid[data-density="2"] { grid-template-columns: repeat(2, 1fr); gap: 48px 32px; }
.product-grid[data-density="3"] { grid-template-columns: repeat(3, 1fr); gap: 44px 28px; }
.product-grid[data-density="4"] { grid-template-columns: repeat(4, 1fr); gap: 40px 24px; }
@media (max-width: 900px) {
  .product-grid[data-density] { grid-template-columns: repeat(2, 1fr); gap: 26px 12px; }
  .product-grid[data-density="1"] { grid-template-columns: 1fr; gap: 20px; }
}

/* Sticky sort dropdown polish */
.shop-toolbar__sort select {
  background: transparent;
  border: 1px solid var(--border);
  padding: 10px 34px 10px 16px;
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231A1614' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border-radius: 2px;
}

/* Filter group polish */
.filter-group__title {
  display: flex; align-items: center; justify-content: space-between;
}
.filter-group__title__count {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 500;
  margin-right: 8px;
  text-transform: none;
  min-width: 20px;
  text-align: right;
}

.filter-option {
  padding: 5px 0;
  min-height: 32px;
}
.filter-option:hover { color: var(--ink); }
.filter-option input[type="checkbox"],
.filter-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border: 1.5px solid var(--border);
  border-radius: 3px;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}
.filter-option input[type="radio"] { border-radius: 50%; }
.filter-option input[type="checkbox"]:checked,
.filter-option input[type="radio"]:checked {
  background: var(--ink);
  border-color: var(--ink);
}
.filter-option input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 3px; left: 5px;
  width: 5px; height: 8px;
  border-right: 1.5px solid var(--cream);
  border-bottom: 1.5px solid var(--cream);
  transform: rotate(45deg);
}
.filter-option input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 4px; left: 4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cream);
}

.filter-option__count {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.filter-option.disabled {
  color: var(--muted);
  opacity: 0.5;
  cursor: not-allowed;
}
.filter-option.disabled input { opacity: 0.4; cursor: not-allowed; }

/* Occasion & style pills */
.pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-option {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  cursor: pointer;
  background: transparent;
  transition: all 0.2s ease;
  user-select: none;
}
.pill-option:hover { border-color: var(--ink); }
.pill-option.active {
  background: var(--ink); color: var(--cream); border-color: var(--ink);
}
.pill-option__count {
  margin-left: 4px;
  font-size: 11px;
  opacity: 0.65;
}
.pill-option.disabled { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }

/* Color swatch with active ring */
.color-pill {
  position: relative;
  cursor: pointer;
}
.color-pill.active::before {
  content: '';
  position: absolute;
  top: -4px; left: -4px; right: -4px; bottom: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  pointer-events: none;
}
.color-pill.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  position: relative;
}
.color-pill.disabled::after {
  content: '';
  position: absolute;
  top: 50%; left: -2px; right: -2px;
  height: 1px;
  background: var(--muted);
  transform: rotate(-40deg);
}

/* Price range slider */
.price-range {
  padding: 16px 6px 4px;
}
.price-range__track {
  position: relative;
  height: 4px;
  background: var(--cream-2);
  border-radius: 4px;
  margin: 20px 0 24px;
}
.price-range__fill {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--ink);
  border-radius: 4px;
}
.price-range__handle {
  position: absolute;
  top: 50%;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--ink);
  transform: translate(-50%, -50%);
  cursor: grab;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.15s ease;
  z-index: 2;
}
.price-range__handle:active { cursor: grabbing; transform: translate(-50%, -50%) scale(1.15); }
.price-range__values {
  display: flex; justify-content: space-between;
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.price-range__values span { font-variant-numeric: tabular-nums; }

/* Skeleton loading */
.product-card.skeleton .product-card__media {
  background: linear-gradient(90deg, var(--cream-2), var(--cream-3), var(--cream-2));
  background-size: 200% 100%;
  animation: skel 1.4s infinite;
}
@keyframes skel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.shop-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 900px) {
  .shop-toolbar {
    position: static;
    margin: 0 -16px 20px;
    padding: 12px 16px;
    background: transparent;
    border-bottom: 1px solid var(--border);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .shop-toolbar > div { flex: 1; min-width: 0; }
  .shop-toolbar__count { font-size: 12px; letter-spacing: 0.06em; }
  .shop-toolbar__sort {
    gap: 6px;
  }
  .shop-toolbar__sort label { display: none; }
  .shop-toolbar__sort select {
    background: var(--cream);
    border: 1px solid var(--border);
    padding: 10px 30px 10px 14px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    border-radius: 999px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231A1614' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
  }
  .filter-toggle {
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 12px;
    gap: 6px;
    background: var(--ink);
    color: var(--cream);
    border-color: var(--ink);
  }
}
.shop-toolbar__count { font-size: 13px; color: var(--muted); }
.shop-toolbar__sort {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px;
}
.shop-toolbar__sort select {
  background: transparent;
  border: 1px solid var(--border);
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
}
.filter-toggle { display: none; padding: 10px 18px; border: 1px solid var(--border); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; }

/* Header + footer inside the mobile filter drawer (hidden on desktop) */
.filters__mobile-head, .filters__mobile-foot { display: none; }
.filters__overlay { display: none; }

@media (max-width: 1000px) {
  /* Mobile filters are a bottom sheet. The panel keeps its markup whether open
     or closed and animates on transform, so it slides out as well as in; the
     old display:none/flex swap meant closing was an instant cut. */
  .filters {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 88dvh;
    max-height: 88dvh;
    z-index: 300;
    background: var(--cream);
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    box-shadow: 0 -20px 60px -16px rgba(26, 22, 20, 0.35);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.42s;
    padding: 0;
  }
  .filters.open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
  }

  .filters__overlay {
    display: block;
    position: fixed; inset: 0;
    z-index: 299;
    background: rgba(26, 22, 20, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.32s ease, visibility 0s linear 0.32s;
  }
  .filters__overlay.open { opacity: 1; visibility: visible; transition: opacity 0.32s ease, visibility 0s; }

  .filter-toggle { display: inline-flex; align-items: center; gap: 8px; }

  /* Header: grab handle, title, close */
  .filters .filters__mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 22px 20px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--cream);
    flex-shrink: 0;
  }
  .filters__grip {
    position: absolute; top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 999px;
    background: var(--cream-3);
  }
  .filters__mobile-title {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1;
  }
  .filters__mobile-close {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--cream-2);
    display: inline-flex; align-items: center; justify-content: center;
    border: none; cursor: pointer;
    transition: background 0.2s ease;
  }
  .filters__mobile-close:active { background: var(--cream-3); }
  .filters__mobile-close svg {
    width: 20px; height: 20px;
    stroke: var(--ink); stroke-width: 1.75; fill: none;
  }

  /* Scrollable body */
  .filters .filter-toolbar-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 20px 20px;
    -webkit-overflow-scrolling: touch;
  }
  .filters .filter-group { padding: 4px 0 14px; border-bottom: 1px solid var(--border); }
  .filters .filter-group:last-child { border-bottom: 0; }
  .filters .filter-group__title {
    padding: 16px 0 10px;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
  }
  /* Options become full-width tap rows rather than dense checkbox lines. */
  .filters .filter-option {
    display: flex; align-items: center; gap: 12px;
    min-height: 46px;
    padding: 4px 0;
    font-size: 15px;
    cursor: pointer;
  }
  .filters .filter-option input { width: 20px; height: 20px; flex-shrink: 0; }

  /* Sticky footer */
  .filters .filters__mobile-foot {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0));
    border-top: 1px solid var(--border);
    background: var(--cream);
    flex-shrink: 0;
    box-shadow: 0 -8px 24px rgba(26, 22, 20, 0.06);
  }
  .filters__mobile-clear {
    padding: 15px 18px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--ink-2);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    border-radius: 2px;
    transition: opacity 0.2s ease, border-color 0.2s ease;
  }
  .filters__mobile-clear:disabled { opacity: 0.4; cursor: default; }
  .filters__mobile-clear:not(:disabled):active { border-color: var(--ink); }
  .filters__mobile-apply {
    padding: 15px 18px;
    background: var(--ink);
    border: 1px solid var(--ink);
    color: var(--cream);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    border-radius: 2px;
    transition: transform 0.15s ease, opacity 0.2s ease;
  }
  .filters__mobile-apply:disabled { opacity: 0.45; cursor: default; }
  .filters__mobile-apply:not(:disabled):active { transform: scale(0.985); }

  .filters .filters__inline-head { display: none; }
  #applyFiltersMobile { display: none !important; }

  /* Scroll lock. position:fixed rather than overflow:hidden, which iOS
     Safari ignores; the offset is restored in closeMobileFilters(). */
  body.filters-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .filters, .filters__overlay { transition: none !important; }
}

/* Filter trigger badge */
.filter-toggle__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--cream); color: var(--ink);
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
}
.filter-toggle__badge[hidden] { display: none; }
.filter-toggle.has-filters { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* =====================================================
   Product detail
   ===================================================== */
.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 48px;
  padding: 20px 32px 80px;
  max-width: 1240px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 1000px) {
  .product-detail { grid-template-columns: 1fr; padding: 24px 20px 60px; gap: 40px; }
}
.product-detail__gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  /* Not sticky. It pinned at 96px and never moved, so on a phone, where the
     info stacks under it, the photo sat over the title, the price and the size
     picker for the whole scroll. align-self stops it stretching to the height
     of the info column on desktop. */
  align-self: start;
  min-width: 0;
}
.product-detail__gallery .gallery-main {
  aspect-ratio: 3/4;
  background: var(--cream-2);
  overflow: hidden;
  cursor: zoom-in;
}
.product-detail__gallery .gallery-main img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  background: var(--cream-2);
}
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.gallery-thumb {
  aspect-ratio: 3/4;
  overflow: hidden;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: border-color 0.2s ease;
  background: var(--cream-2);
}
.gallery-thumb.active { border-color: var(--ink); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center; }

/* Mobile, swipeable full-width image gallery */
.gallery-swipe {
  display: none;
  position: relative;
  margin: 0 -16px;
}
.gallery-swipe__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.gallery-swipe__track::-webkit-scrollbar { display: none; }
.gallery-swipe__slide {
  flex: 0 0 100%;
  aspect-ratio: 3/4;
  scroll-snap-align: start;
  background: var(--cream-2);
  position: relative;
}
.gallery-swipe__slide img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
}
.gallery-swipe__counter {
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(26, 22, 20, 0.55);
  backdrop-filter: blur(8px);
  color: var(--cream);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 500;
  z-index: 3;
  pointer-events: none;
}
.gallery-swipe__wishlist {
  position: absolute;
  top: 12px; left: 12px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(245, 240, 232, 0.85);
  backdrop-filter: blur(8px);
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 3;
  border: none;
}
.gallery-swipe__wishlist svg { width: 20px; height: 20px; stroke: var(--ink); stroke-width: 1.5; fill: none; }
.gallery-swipe__wishlist.active svg { fill: var(--wine); stroke: var(--wine); }
.gallery-swipe__dots {
  position: absolute;
  bottom: 12px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 6px;
  z-index: 3;
  pointer-events: none;
}
.gallery-swipe__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(245, 240, 232, 0.5);
  border: 1px solid rgba(245, 240, 232, 0.7);
  transition: all 0.3s ease;
}
.gallery-swipe__dot.active {
  background: var(--cream);
  width: 20px;
  border-radius: 3px;
}

@media (max-width: 900px) {
  .product-detail__gallery .gallery-main,
  .gallery-thumbs { display: none; }
  .gallery-swipe { display: block; }
  .product-detail { padding-top: 8px; }
}

.product-detail__info { display: flex; flex-direction: column; gap: 14px; align-self: start; min-width: 0; }
.product-detail__brand { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--bronze); font-weight: 500; }
.product-detail__title { font-family: var(--font-serif); font-size: clamp(28px, 3vw, 38px); font-weight: 400; color: var(--ink); line-height: 1.08; margin: 0; }
.product-detail__price { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 500; color: var(--ink); }
.product-detail__price .old { text-decoration: line-through; color: var(--muted); font-weight: 400; font-size: 16px; }
.product-detail__rating { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.stars { color: var(--bronze); letter-spacing: 2px; font-size: 13px; }

/* Description sits tighter than a paragraph in an article, this is a spec, not a story. */
.product-detail__info > p { margin: 0; font-size: 14px !important; line-height: 1.6 !important; }

.product-option { border-top: 1px solid var(--border); padding: 14px 0 0; }
.option-title {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: center;
}
.option-title .helper { font-size: 12px; color: var(--muted); text-transform: none; letter-spacing: 0.02em; text-decoration: underline; cursor: pointer; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--ink); }
.qty button { padding: 10px 14px; font-size: 15px; color: var(--ink); }
.qty input {
  width: 36px;
  text-align: center;
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
}

.product-detail__actions {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}
.product-detail__actions .btn { flex: 1; }
.wishlist-btn {
  width: 56px; height: 56px;
  border: 1px solid var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.25s ease;
}
.wishlist-btn:hover { background: var(--ink); color: var(--cream); }
.wishlist-btn svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; fill: none; }

.product-meta {
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 20px;
  margin-top: 12px;
  border-top: 1px solid var(--border);
}
.product-meta__item { display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--muted); }
.product-meta__item svg { width: 18px; height: 18px; stroke: var(--bronze); stroke-width: 1.5; fill: none; flex-shrink: 0; }

.accordion { border-top: 1px solid var(--border); }
.accordion__item { border-bottom: 1px solid var(--border); }
.accordion__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 0;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.accordion__head::after {
  content: '+';
  font-size: 22px;
  font-weight: 300;
  transition: transform 0.3s ease;
}
.accordion__item.open .accordion__head::after { content: '−'; }
.accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.accordion__item.open .accordion__body { max-height: 400px; }
.accordion__body-inner { padding: 0 0 20px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.accordion__body ul { padding: 0 0 20px 20px; }
.accordion__body li { color: var(--muted); font-size: 14px; line-height: 1.9; list-style-type: '✦ '; padding-left: 6px; }
.accordion__body li::marker { color: var(--bronze); font-size: 9px; }

/* =====================================================
   Cart drawer, refined
   ===================================================== */
.cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%; max-width: 480px;
  background: var(--cream);
  transform: translateX(100%);
  transition: transform 0.5s var(--ease);
  z-index: 250;
  display: flex; flex-direction: column;
  box-shadow: -30px 0 80px rgba(26, 22, 20, 0.2);
}
@media (max-width: 900px) {
  /* Bottom sheet cart on mobile */
  .cart-drawer {
    top: auto;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    max-width: 100%;
    height: 88vh;
    max-height: 88vh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -20px 60px rgba(26, 22, 20, 0.25);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .cart-drawer.open { transform: translateY(0); }
  .cart-drawer__head {
    padding: 24px 20px 16px;
    position: relative;
    text-align: left;
  }
  .cart-drawer__head::before {
    content: '';
    position: absolute;
    top: 10px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px;
    background: var(--cream-3);
    border-radius: 2px;
  }
  .cart-drawer__body { padding: 4px 20px calc(16px + env(safe-area-inset-bottom, 0)); }
  .cart-drawer__foot { padding: 18px 20px calc(22px + env(safe-area-inset-bottom, 0)); border-radius: 0; }
  .cart-item { grid-template-columns: 88px 1fr; gap: 14px; padding: 18px 0; }
  .cart-item__name { font-size: 16px; }
}
@media (max-width: 640px) {
  .cart-drawer__title { font-size: 22px; }
}
.cart-drawer.open { transform: translateX(0); }
.cart-drawer__overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 20, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: all 0.35s ease;
  z-index: 240;
}
.cart-drawer__overlay.open { opacity: 1; visibility: visible; }
.cart-drawer__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cart-drawer__title {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  display: flex; align-items: baseline; gap: 10px;
}
.cart-drawer__count {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 28px;
}
.cart-drawer__body::-webkit-scrollbar { width: 6px; }
.cart-drawer__body::-webkit-scrollbar-thumb { background: var(--cream-3); border-radius: 3px; }
.cart-drawer__empty {
  text-align: center;
  padding: 80px 24px 40px;
  color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.cart-drawer__empty svg {
  width: 56px; height: 56px;
  stroke: var(--bronze); stroke-width: 1; fill: none;
  margin-bottom: 8px;
}
.cart-drawer__empty h3 {
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.1;
}
.cart-drawer__empty p { font-size: 14px; max-width: 280px; }
.cart-item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
.cart-item:last-child { border-bottom: none; }
.cart-item__img {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--cream-2);
  border-radius: 2px;
}
.cart-item__img img {
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  transition: transform 0.5s var(--ease);
}
.cart-item__img:hover img { transform: scale(1.04); }
.cart-item__info {
  display: flex; flex-direction: column;
  min-width: 0;
}
.cart-item__head {
  display: flex; justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.cart-item__name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
  transition: color 0.2s ease;
}
.cart-item__name:hover { color: var(--bronze); }
.cart-item__price {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.cart-item__meta {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-bottom: auto;
}
.cart-item__actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px;
}
.cart-item__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
}
.cart-item__qty button {
  padding: 6px 12px;
  font-size: 14px;
  color: var(--ink);
  transition: background 0.2s ease;
}
.cart-item__qty button:hover { background: var(--cream-2); }
.cart-item__qty input {
  width: 32px;
  text-align: center;
  background: transparent;
  border: none;
  font-size: 13px;
  font-weight: 500;
}
.cart-item__remove {
  color: var(--muted);
  font-size: 12px;
  text-decoration: underline;
  transition: color 0.2s ease;
}
.cart-item__remove:hover { color: var(--wine); }
.cart-drawer__foot {
  padding: 20px 28px 24px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 14px;
  background: var(--cream);
  flex-shrink: 0;
}
.cart-total {
  display: flex; justify-content: space-between; align-items: baseline;
}
.cart-total__label {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
}
.cart-total__value {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
}
.cart-total__note {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-align: right;
  margin-top: 2px;
}
.cart-note {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.02em;
}
.cart-note strong { color: var(--ink); font-weight: 600; }
.cart-progress {
  background: var(--cream-2);
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
}
.cart-progress__bar {
  height: 100%;
  background: linear-gradient(to right, var(--bronze), var(--gold));
  transition: width 0.5s var(--ease);
}
.cart-drawer__foot .btn { padding: 18px 24px; letter-spacing: 0.22em; }
.cart-drawer__foot .btn-outline {
  padding: 14px 24px;
  border-color: var(--border);
  color: var(--muted);
  font-size: 11px;
}
.cart-drawer__foot .btn-outline:hover {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.cart-drawer__pay {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 4px;
}
.cart-drawer__pay .pay-chip {
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* =====================================================
   Cart & Checkout pages
   ===================================================== */
.cart-page {
  padding: 48px 32px 100px;
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
}
@media (max-width: 900px) {
  .cart-page { grid-template-columns: 1fr; padding: 24px 20px 60px; }
}
.cart-list { border-top: 1px solid var(--border); }
.cart-line {
  display: grid;
  grid-template-columns: 120px 1fr 120px auto;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
@media (max-width: 700px) {
  .cart-line { grid-template-columns: 90px 1fr; }
  .cart-line__qty, .cart-line__price { grid-column: 2; }
}
.cart-line__img { display: block; aspect-ratio: 3/4; overflow: hidden; background: var(--cream-2); }
.cart-line__img img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.cart-line__info { display: flex; flex-direction: column; gap: 6px; }
.cart-line__name { font-family: var(--font-serif); font-size: 20px; font-weight: 500; color: var(--ink); }
.cart-line__meta { font-size: 13px; color: var(--muted); }
.cart-line__actions { display: flex; gap: 14px; margin-top: 8px; }
.cart-line__actions button { font-size: 12px; letter-spacing: 0.06em; color: var(--muted); text-decoration: underline; }
.cart-line__price { font-size: 16px; font-weight: 500; text-align: right; }
.cart-line__qty { display: inline-flex; }

.cart-summary {
  background: var(--cream-2);
  padding: 32px;
  align-self: start;
}
.cart-summary__title { font-family: var(--font-serif); font-size: 24px; font-weight: 500; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.cart-summary__row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; color: var(--ink-2); }
.cart-summary__row--total { font-size: 20px; font-weight: 500; padding-top: 16px; margin-top: 12px; border-top: 1px solid var(--border); font-family: var(--font-serif); }
.cart-summary__promo { display: flex; margin: 16px 0; border: 1px solid var(--border); }
.cart-summary__promo input { flex: 1; padding: 12px 14px; background: transparent; border: none; outline: none; font-size: 13px; }
.cart-summary__promo button { padding: 12px 18px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; }

/* Checkout */
.checkout-page {
  padding: 48px 32px 100px;
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
}
@media (max-width: 900px) { .checkout-page { grid-template-columns: 1fr; padding: 24px 20px 60px; gap: 40px; } }
.checkout-section { margin-bottom: 40px; }
.checkout-section__title { font-family: var(--font-serif); font-size: 24px; font-weight: 500; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
.checkout-section__num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); font-weight: 500; }
.form-field input, .form-field select, .form-field textarea {
  padding: 14px 16px;
  border: 1px solid var(--border);
  background: var(--cream);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
  font-family: var(--font-sans);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--ink); }
.form-field textarea { resize: vertical; min-height: 100px; }

.radio-group { display: flex; flex-direction: column; gap: 10px; }
.radio-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.radio-card:hover { border-color: var(--ink); }
.radio-card.active { border-color: var(--ink); background: var(--cream-2); }
.radio-card input { accent-color: var(--ink); }
.radio-card__label { font-size: 14px; font-weight: 500; }
.radio-card__meta { font-size: 12px; color: var(--muted); margin-left: auto; }
.radio-card__price { font-size: 14px; font-weight: 500; }

/* Order summary in checkout */
.order-summary { background: var(--cream-2); padding: 28px; }

/* ---- Sticky order summary (desktop) --------------------------------------
   It was already position: sticky, but the card runs 1621px against a 900px
   viewport, and an element taller than the screen has almost nothing to stick
   with: you scroll past nearly all of it before the top edge reaches the
   threshold. So it never appeared to follow at all.

   The card is now capped to the viewport and the order lines scroll inside it,
   which keeps the totals, the promo control and Place Order on screen the
   whole way down the form. */
@media (min-width: 901px) {
  .order-summary {
    position: sticky;
    /* Clears the 72px sticky header with room to breathe. */
    top: 96px;
    /* Grid items stretch to the row by default, and a stretched item has no
       travel. This is what lets it move independently of the form column. */
    align-self: start;
    max-height: calc(100vh - 96px - 40px);
    display: flex;
    flex-direction: column;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.45s ease,
                transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Lifts once it detaches and starts following, so the change of state is
     felt rather than announced. */
  .order-summary.is-pinned {
    box-shadow: 0 26px 50px -28px rgba(26, 22, 20, 0.28);
    border-color: rgba(26, 22, 20, 0.09);
    transform: translateY(-2px);
  }

  .order-summary__title { flex-shrink: 0; }

  .order-summary__items {
    overflow-y: auto;
    /* Without this a flex child refuses to shrink below its content. */
    min-height: 0;
    /* Reaching the end of the list must not start scrolling the page behind it. */
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(26, 22, 20, 0.22) transparent;
    /* Room for the scrollbar so the prices do not sit under it. */
    padding-right: 4px;
    margin-right: -4px;
  }
  .order-summary__items::-webkit-scrollbar { width: 4px; }
  .order-summary__items::-webkit-scrollbar-track { background: transparent; }
  .order-summary__items::-webkit-scrollbar-thumb {
    background: rgba(26, 22, 20, 0.18);
    border-radius: 2px;
  }
  .order-summary__items:hover::-webkit-scrollbar-thumb { background: rgba(26, 22, 20, 0.3); }

  /* Everything below the list holds its place. */
  #summaryRows, .checkout-promo, .checkout-place, .checkout-terms { flex-shrink: 0; }

  /* Soft edges telling you the list carries on, faded in only when it does.
     A hard cut just looks like a bug. */
  .order-summary__scroller {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
  }
  .order-summary__scroller::before,
  .order-summary__scroller::after {
    content: '';
    position: absolute; left: 0; right: 0;
    height: 34px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
  }
  .order-summary__scroller::before {
    top: 0;
    background: linear-gradient(180deg, var(--cream-2), rgba(237, 230, 217, 0));
  }
  .order-summary__scroller::after {
    bottom: 0;
    background: linear-gradient(0deg, var(--cream-2), rgba(237, 230, 217, 0));
  }
  .order-summary__scroller.has-above::before { opacity: 1; }
  .order-summary__scroller.has-below::after  { opacity: 1; }
}

@media (max-width: 900px) { .order-summary { padding: 22px; position: static; } }
.order-summary__title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.order-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
  animation: orderItemIn 0.5s var(--ease) both;
}
@keyframes orderItemIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.order-item:nth-child(1) { animation-delay: 0.05s; }
.order-item:nth-child(2) { animation-delay: 0.15s; }
.order-item:nth-child(3) { animation-delay: 0.25s; }
.order-item:nth-child(4) { animation-delay: 0.35s; }
.order-item:nth-child(5) { animation-delay: 0.45s; }
.order-item:nth-child(6) { animation-delay: 0.55s; }
.order-item:nth-child(n+7) { animation-delay: 0.65s; }
@media (prefers-reduced-motion: reduce) { .order-item { animation: none; } }

.order-item__img {
  position: relative;
  width: 56px; height: 74px; /* 3:4 thumbnail, locked so long names never squeeze it */
  overflow: hidden;
  background: var(--cream);
  border-radius: 2px;
  flex-shrink: 0;
}
.order-item__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.order-item__qty {
  position: absolute; top: -6px; right: -6px;
  background: var(--ink); color: var(--cream);
  border: 2px solid var(--cream-2);
  border-radius: 50%;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 500;
}
.order-item__name {
  font-size: 13px; font-weight: 500;
  line-height: 1.35;
  overflow-wrap: break-word;
  color: var(--ink);
}
.order-item__meta { font-size: 11px; color: var(--muted); margin-top: 4px; letter-spacing: 0.02em; }
.order-item__price {
  font-family: var(--font-serif);
  font-size: 14px; font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  padding-left: 8px;
}

/* =====================================================
   About page
   ===================================================== */
.about-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 640px;
}
.about-hero__content {
  padding: clamp(48px, 8vw, 120px);
  background: var(--cream-2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}
.about-hero__eyebrow { font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--bronze); font-weight: 500; }
.about-hero__title { font-family: var(--font-serif); font-size: clamp(48px, 6vw, 84px); font-weight: 400; line-height: 1; color: var(--ink); }
.about-hero__title .italic-accent { font-style: italic; color: var(--bronze); }
.about-hero__text { color: var(--muted); font-size: 16px; line-height: 1.75; max-width: 480px; }
.about-hero__media { overflow: hidden; }
.about-hero__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .about-hero { grid-template-columns: 1fr; }
  .about-hero__media { height: 60vh; }
}

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 100px 32px;
  max-width: var(--container);
  margin: 0 auto;
}
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; padding: 60px 20px; } }
.pillar {
  padding: 32px;
  border: 1px solid var(--border);
  background: var(--cream);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.4s var(--ease), border-color 0.4s ease;
}
.pillar:hover { transform: translateY(-4px); border-color: var(--bronze); }
.pillar__num { font-family: var(--font-serif); font-style: italic; font-size: 40px; color: var(--bronze); line-height: 1; }
.pillar__title { font-family: var(--font-serif); font-size: 26px; color: var(--ink); font-weight: 500; }
.pillar__text { color: var(--muted); font-size: 14px; line-height: 1.75; }

/* =====================================================
   STAGGER REVEAL SYSTEM
   ===================================================== */
/* Baseline reveal (no-op if JS doesn't run) */
.reveal { opacity: 1; transform: none; }

/* When enhancer is on the document, everything starts hidden */
html.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
html.reveal-ready [data-reveal="fade"] {
  transform: none;
}
html.reveal-ready [data-reveal="up"] {
  transform: translateY(36px);
}
html.reveal-ready [data-reveal="scale"] {
  transform: translateY(16px) scale(0.97);
  filter: blur(4px);
}
html.reveal-ready [data-reveal="left"] {
  transform: translateX(-32px);
}
html.reveal-ready [data-reveal="right"] {
  transform: translateX(32px);
}
html.reveal-ready [data-reveal].in {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  filter: none;
}

/* Stagger children: apply data-reveal-stagger on parent, add data-reveal on kids */
html.reveal-ready [data-reveal-stagger] > [data-reveal]:nth-child(1) { transition-delay: 0.03s; }
html.reveal-ready [data-reveal-stagger] > [data-reveal]:nth-child(2) { transition-delay: 0.10s; }
html.reveal-ready [data-reveal-stagger] > [data-reveal]:nth-child(3) { transition-delay: 0.17s; }
html.reveal-ready [data-reveal-stagger] > [data-reveal]:nth-child(4) { transition-delay: 0.24s; }
html.reveal-ready [data-reveal-stagger] > [data-reveal]:nth-child(5) { transition-delay: 0.31s; }
html.reveal-ready [data-reveal-stagger] > [data-reveal]:nth-child(6) { transition-delay: 0.38s; }
html.reveal-ready [data-reveal-stagger] > [data-reveal]:nth-child(7) { transition-delay: 0.45s; }
html.reveal-ready [data-reveal-stagger] > [data-reveal]:nth-child(8) { transition-delay: 0.52s; }
html.reveal-ready [data-reveal-stagger] > [data-reveal]:nth-child(n+9) { transition-delay: 0.55s; }

/* Auto-target common pieces so we don't have to sprinkle data-reveal everywhere */
html.reveal-ready .product-grid > .product-card,
html.reveal-ready .bento__grid > .bento__tile,
html.reveal-ready .occasion__grid > .occasion__card,
html.reveal-ready .lookbook__grid > .lookbook__card,
html.reveal-ready .ig-feed__grid > .ig-feed__tile,
html.reveal-ready .categories__grid > .category-card,
html.reveal-ready .spotlight__cards > .spotlight__mini,
html.reveal-ready .loved__scroll > .product-card,
html.reveal-ready .section-head,
html.reveal-ready .bento__intro,
html.reveal-ready .spotlight__intro,
html.reveal-ready .spotlight__hero,
html.reveal-ready .occasion__head,
html.reveal-ready .aaliyah__media,
html.reveal-ready .aaliyah__content,
html.reveal-ready .loved__head,
html.reveal-ready .lookbook__intro,
html.reveal-ready .news-hero__inner,
html.reveal-ready .ig-feed__intro,
html.reveal-ready .editorial__media,
html.reveal-ready .editorial__content,
html.reveal-ready .about-hero__content,
html.reveal-ready .about-hero__media,
html.reveal-ready .pillar {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
html.reveal-ready .product-grid > .product-card.in,
html.reveal-ready .bento__grid > .bento__tile.in,
html.reveal-ready .occasion__grid > .occasion__card.in,
html.reveal-ready .lookbook__grid > .lookbook__card.in,
html.reveal-ready .ig-feed__grid > .ig-feed__tile.in,
html.reveal-ready .categories__grid > .category-card.in,
html.reveal-ready .spotlight__cards > .spotlight__mini.in,
html.reveal-ready .loved__scroll > .product-card.in,
html.reveal-ready .section-head.in,
html.reveal-ready .bento__intro.in,
html.reveal-ready .spotlight__intro.in,
html.reveal-ready .spotlight__hero.in,
html.reveal-ready .occasion__head.in,
html.reveal-ready .aaliyah__media.in,
html.reveal-ready .aaliyah__content.in,
html.reveal-ready .loved__head.in,
html.reveal-ready .lookbook__intro.in,
html.reveal-ready .news-hero__inner.in,
html.reveal-ready .ig-feed__intro.in,
html.reveal-ready .editorial__media.in,
html.reveal-ready .editorial__content.in,
html.reveal-ready .about-hero__content.in,
html.reveal-ready .about-hero__media.in,
html.reveal-ready .pillar.in {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children of grids */
html.reveal-ready .product-grid > .product-card:nth-child(1),
html.reveal-ready .bento__grid > .bento__tile:nth-child(1),
html.reveal-ready .occasion__grid > .occasion__card:nth-child(1),
html.reveal-ready .lookbook__grid > .lookbook__card:nth-child(1),
html.reveal-ready .categories__grid > .category-card:nth-child(1),
html.reveal-ready .spotlight__cards > .spotlight__mini:nth-child(1) { transition-delay: 0.05s; }
html.reveal-ready .product-grid > .product-card:nth-child(2),
html.reveal-ready .bento__grid > .bento__tile:nth-child(2),
html.reveal-ready .occasion__grid > .occasion__card:nth-child(2),
html.reveal-ready .lookbook__grid > .lookbook__card:nth-child(2),
html.reveal-ready .categories__grid > .category-card:nth-child(2),
html.reveal-ready .spotlight__cards > .spotlight__mini:nth-child(2) { transition-delay: 0.14s; }
html.reveal-ready .product-grid > .product-card:nth-child(3),
html.reveal-ready .bento__grid > .bento__tile:nth-child(3),
html.reveal-ready .occasion__grid > .occasion__card:nth-child(3),
html.reveal-ready .lookbook__grid > .lookbook__card:nth-child(3),
html.reveal-ready .categories__grid > .category-card:nth-child(3),
html.reveal-ready .spotlight__cards > .spotlight__mini:nth-child(3) { transition-delay: 0.22s; }
html.reveal-ready .product-grid > .product-card:nth-child(4),
html.reveal-ready .bento__grid > .bento__tile:nth-child(4),
html.reveal-ready .occasion__grid > .occasion__card:nth-child(4),
html.reveal-ready .categories__grid > .category-card:nth-child(4),
html.reveal-ready .spotlight__cards > .spotlight__mini:nth-child(4) { transition-delay: 0.30s; }
html.reveal-ready .product-grid > .product-card:nth-child(n+5) { transition-delay: 0.35s; }

/* Ig grid, quick cascade */
html.reveal-ready .ig-feed__grid > .ig-feed__tile:nth-child(1) { transition-delay: 0.05s; }
html.reveal-ready .ig-feed__grid > .ig-feed__tile:nth-child(2) { transition-delay: 0.10s; }
html.reveal-ready .ig-feed__grid > .ig-feed__tile:nth-child(3) { transition-delay: 0.15s; }
html.reveal-ready .ig-feed__grid > .ig-feed__tile:nth-child(4) { transition-delay: 0.20s; }
html.reveal-ready .ig-feed__grid > .ig-feed__tile:nth-child(5) { transition-delay: 0.25s; }
html.reveal-ready .ig-feed__grid > .ig-feed__tile:nth-child(6) { transition-delay: 0.30s; }

/* Pillar stagger */
html.reveal-ready .pillar:nth-child(1) { transition-delay: 0.05s; }
html.reveal-ready .pillar:nth-child(2) { transition-delay: 0.15s; }
html.reveal-ready .pillar:nth-child(3) { transition-delay: 0.25s; }

/* Editorial split, media left, content right slight offset */
html.reveal-ready .editorial__content { transition-delay: 0.15s; }
html.reveal-ready .aaliyah__content { transition-delay: 0.15s; }

/* No-op when reduced motion */
@media (prefers-reduced-motion: reduce) {
  html.reveal-ready [data-reveal],
  html.reveal-ready .product-card,
  html.reveal-ready .bento__tile,
  html.reveal-ready .occasion__card,
  html.reveal-ready .lookbook__card,
  html.reveal-ready .ig-feed__tile,
  html.reveal-ready .category-card,
  html.reveal-ready .spotlight__mini {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--ink);
  color: var(--cream);
  padding: 16px 28px;
  border-radius: 4px;
  font-size: 13px;
  letter-spacing: 0.06em;
  z-index: 400;
  opacity: 0;
  transition: all 0.4s var(--ease);
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-lg);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast svg { width: 18px; height: 18px; stroke: var(--bronze); stroke-width: 2; fill: none; }

/* ============================================================================
   Branded confirm / alert modal, replaces the native browser dialogs.
   ============================================================================ */
#fitModalRoot {
  position: fixed; inset: 0;
  display: none; align-items: center; justify-content: center;
  z-index: 9999;
  padding: 20px;
}
#fitModalRoot.is-open { display: flex; }
.fit-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(26, 22, 20, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fitModalFade 0.2s ease-out both;
}
.fit-modal__panel {
  position: relative;
  width: 100%; max-width: 440px;
  background: var(--cream);
  border-radius: 4px;
  padding: 32px 34px 26px;
  box-shadow: 0 30px 80px -20px rgba(26, 22, 20, 0.4);
  animation: fitModalIn 0.28s var(--ease) both;
  text-align: center;
}
@media (max-width: 480px) { .fit-modal__panel { padding: 26px 22px 20px; } }
.fit-modal__panel--danger { border-top: 3px solid var(--wine); }

@keyframes fitModalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fitModalIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.fit-modal__eyebrow {
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 10px;
}
.fit-modal__panel--danger .fit-modal__eyebrow { color: var(--wine); }

.fit-modal__title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.fit-modal__message {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0 0 24px;
}

.fit-modal__actions {
  display: flex; justify-content: center; gap: 10px;
  padding-top: 4px;
}
.fit-modal__btn {
  padding: 12px 22px;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
}
.fit-modal__btn:hover { border-color: var(--ink); }
.fit-modal__btn:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }

.fit-modal__btn--primary {
  background: var(--ink); color: var(--cream); border-color: var(--ink);
}
.fit-modal__btn--primary:hover { background: transparent; color: var(--ink); }

.fit-modal__btn--danger {
  background: var(--wine); color: var(--cream); border-color: var(--wine);
}
.fit-modal__btn--danger:hover { background: transparent; color: var(--wine); }

.fit-modal__btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--ink-2);
}
.fit-modal__btn--ghost:hover { border-color: var(--ink); color: var(--ink); }

@media (max-width: 420px) {
  .fit-modal__actions { flex-direction: column-reverse; }
  .fit-modal__btn { width: 100%; }
}

/* Empty states */
.empty-state {
  text-align: center;
  padding: 80px 24px;
}
.empty-state h2 { font-family: var(--font-serif); font-size: 32px; margin-bottom: 8px; }
.empty-state p { color: var(--muted); margin-bottom: 24px; }

/* Loading skeleton */
.skeleton { background: linear-gradient(90deg, var(--cream-2), var(--cream-3), var(--cream-2)); background-size: 200% 100%; animation: skeleton 1.4s ease infinite; }
@keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Prevent horizontal scroll, belt and suspenders.
   clip rather than hidden, so these do not become scroll containers and take
   position: sticky down with them. See the note on the body rule above. */
html { overflow-x: hidden; overflow-x: clip; }
body { max-width: 100vw; overflow-x: hidden; overflow-x: clip; }
* { max-width: 100%; }
img, video { max-width: 100%; }
.hero__image, .hero__image img { width: 100%; max-width: 100vw; }

/* =====================================================
   MICRO-INTERACTIONS, press feedback, snappy taps
   ===================================================== */
@media (max-width: 900px) {
  .btn { transition: transform 0.12s ease, background 0.2s ease, color 0.2s ease; }
  .btn:active { transform: scale(0.97); }
  .icon-btn { transition: transform 0.12s ease, background 0.2s ease; }
  .icon-btn:active { transform: scale(0.9); background: var(--cream-2); }
  .size-pill { transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
  .size-pill:active { transform: scale(0.94); }
  .color-pill { transition: transform 0.14s ease; }
  .color-pill:active { transform: scale(0.9); }
  .product-card__media { transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); }
  .product-card:active .product-card__media { transform: scale(0.98); }
  .mobile-buy-bar__btn { transition: transform 0.12s ease, background 0.2s ease; }
  .mobile-buy-bar__btn:active { transform: scale(0.97); }
  .bento__tile:active img { transform: scale(1.02); }
  .occasion__card:active img { transform: scale(1.02); }
  .lookbook__card:active img { transform: scale(1.02); }
  a:active, button:active { -webkit-tap-highlight-color: transparent; }
}

/* Wishlist heart bounce on tap */
@keyframes heartPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  70% { transform: scale(0.92); }
  100% { transform: scale(1); }
}
.product-card__wishlist,
.gallery-swipe__wishlist,
.wishlist-btn {
  transition: background 0.2s ease, transform 0.15s ease;
}
.product-card__wishlist.active,
.gallery-swipe__wishlist.active,
.wishlist-btn.active {
  animation: heartPop 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Smoother momentum scroll on iOS */
* { -webkit-tap-highlight-color: transparent; }

/* Card entering viewport, subtle fade on mobile */
@media (max-width: 900px) {
  .product-card { animation: cardIn 0.5s var(--ease) both; }
  @keyframes cardIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* =====================================================
   SEARCH OVERLAY, slides down from top, live-filters products
   ===================================================== */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--cream);
  transform: translateY(-100%);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
.search-overlay.open { transform: translateY(0); }
.search-overlay__head {
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  background: var(--cream);
  position: sticky; top: 0;
  z-index: 2;
}
.search-overlay__input-wrap {
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--cream-2);
  border-radius: 999px;
}
.search-overlay__input-wrap svg {
  width: 20px; height: 20px;
  stroke: var(--muted); stroke-width: 1.5; fill: none;
  flex-shrink: 0;
}
.search-overlay__input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 16px;
  font-family: var(--font-sans);
  color: var(--ink);
  min-width: 0;
}
.search-overlay__input::placeholder {
  color: var(--muted);
  letter-spacing: 0.02em;
}
.search-overlay__close {
  padding: 8px 14px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  background: none; border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.search-overlay__body {
  padding: 20px 24px 40px;
  flex: 1;
}
.search-overlay__section-label {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 14px;
  display: block;
}
.search-overlay__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}
.search-overlay__quick a {
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  transition: all 0.2s ease;
}
.search-overlay__quick a:hover { border-color: var(--ink); background: var(--cream-2); }
.search-overlay__results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px 16px;
}
.search-overlay__result {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 10px;
  border-radius: 4px;
  transition: background 0.2s ease;
}
.search-overlay__result:hover { background: var(--cream-2); }
.search-overlay__result__img {
  width: 78px; height: 100px;
  overflow: hidden;
  background: var(--cream-2);
  flex-shrink: 0;
  border-radius: 2px;
}
.search-overlay__result__img img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
}
.search-overlay__result__info { min-width: 0; flex: 1; }
.search-overlay__result__name {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 4px;
}
.search-overlay__result__meta {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.search-overlay__result__price {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.search-overlay__empty {
  text-align: center;
  padding: 60px 24px;
  color: var(--muted);
}
.search-overlay__empty svg {
  width: 40px; height: 40px;
  stroke: var(--muted); stroke-width: 1; fill: none;
  margin-bottom: 12px;
  opacity: 0.5;
}
.search-overlay__empty h4 {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 6px;
}
.search-overlay__empty p {
  font-size: 14px;
  max-width: 280px;
  margin: 0 auto 20px;
  line-height: 1.6;
}
@media (max-width: 640px) {
  .search-overlay__head { padding: 16px 16px 14px; }
  .search-overlay__body { padding: 20px 16px 40px; }
  .search-overlay__results { grid-template-columns: 1fr; gap: 4px; }
}

body.search-open { overflow: hidden; }

/* =====================================================
   MOBILE BOTTOM TAB BAR, like a native shopping app
   ===================================================== */
.tab-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 190;
  background: rgba(245, 240, 232, 0.92);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-top: 1px solid rgba(26, 22, 20, 0.08);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0));
  view-transition-name: tabbar;
}
.tab-bar__inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  position: relative;
}
/* Sliding bronze indicator that moves between tabs */
.tab-bar__indicator {
  position: absolute;
  top: 4px;
  left: 0;
  width: 26px;
  height: 2.5px;
  background: var(--bronze);
  border-radius: 2px;
  transform: translateX(0);
  transition: transform 0.42s cubic-bezier(0.34, 1.24, 0.64, 1), width 0.32s ease;
  pointer-events: none;
  opacity: 1;
}
/* Hide the old per-tab underline in favour of the sliding one */
.tab-bar__item.active::before { display: none; }
.tab-bar__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 8px 4px 6px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  transition: color 0.2s ease, transform 0.15s ease;
  text-decoration: none;
  position: relative;
  border-radius: 8px;
}
.tab-bar__item:active { transform: scale(0.94); background: rgba(26,22,20,0.04); }
.tab-bar__item.active { color: var(--ink); }
.tab-bar__item.active::before {
  content: '';
  position: absolute;
  top: 4px; left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 2px;
  background: var(--bronze);
  border-radius: 2px;
}
.tab-bar__icon {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
}
.tab-bar__icon svg {
  width: 24px; height: 24px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  transition: stroke-width 0.2s ease;
}
.tab-bar__item.active .tab-bar__icon svg { stroke-width: 1.8; }
.tab-bar__item.active .tab-bar__icon .fill-on-active { fill: var(--ink); stroke: none; }
/* Bag indicator, bare number, no pill */
.tab-bar__badge {
  position: absolute;
  top: -4px; right: -6px;
  background: transparent;
  color: var(--ink);
  min-width: 12px;
  height: 12px;
  padding: 0 2px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  box-sizing: content-box;
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}
/* Bag icon fills bronze when items present */
.tab-bar__item.has-items .tab-bar__icon svg { transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.tab-bar__item.has-items .tab-bar__icon svg path { fill: var(--bronze); stroke: var(--ink); stroke-width: 1.3; }
.tab-bar__item.has-items { color: var(--ink); }
/* Attention pop when count changes */
.tab-bar__item.bag-pop .tab-bar__icon { animation: bagPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.tab-bar__item.bag-pop .tab-bar__badge { animation: badgePop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes bagPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.22); }
  70% { transform: scale(0.94); }
  100% { transform: scale(1); }
}
@keyframes badgePop {
  0% { transform: scale(1); }
  30% { transform: scale(1.35); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
/* Wine red once you have 5+, creates urgency */
.tab-bar__item[data-count-large="1"] .tab-bar__badge { color: var(--wine); }
.tab-bar__item:not(.has-items) .tab-bar__badge { display: none !important; }
@media (max-width: 900px) {
  .tab-bar { display: block; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)); }
  body.has-buy-bar { padding-bottom: calc(64px + 82px + env(safe-area-inset-bottom, 0)); }
  body.has-buy-bar .mobile-buy-bar { bottom: calc(64px + env(safe-area-inset-bottom, 0)); padding-bottom: 12px; }
  .wa-fab { bottom: calc(74px + env(safe-area-inset-bottom, 0)); }
  body.has-buy-bar .wa-fab { bottom: calc(64px + 82px + env(safe-area-inset-bottom, 0) + 8px); }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom, 0)); }
  body.has-buy-bar .toast { bottom: calc(64px + 82px + env(safe-area-inset-bottom, 0) + 12px); }
  .footer { padding-bottom: 24px; }
}

/* =====================================================
   TRUST BAR, right after hero
   ===================================================== */
.trust-bar {
  background: var(--ink);
  color: var(--cream);
  padding: 18px 0;
  overflow: hidden;
}
.trust-bar__track {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 500;
}
.trust-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.trust-bar__item svg { width: 16px; height: 16px; stroke: var(--bronze); stroke-width: 1.5; fill: none; flex-shrink: 0; }
.trust-bar__item::after {
  content: '✦';
  color: var(--bronze);
  margin-left: 60px;
  font-size: 10px;
}

/* =====================================================
   BENTO CATEGORIES, asymmetric editorial grid
   ===================================================== */
.bento {
  padding: clamp(72px, 10vw, 120px) 0;
  background: var(--cream);
}
.bento__intro {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 32px 60px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 40px;
}
.bento__intro h2 {
  font-family: var(--font-serif);
  font-size: clamp(38px, 5.5vw, 68px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 720px;
}
.bento__intro h2 .italic-accent { font-style: italic; color: var(--bronze); }
.bento__intro__side {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 320px;
}
.bento__intro__side p { font-size: 15px; color: var(--muted); line-height: 1.65; }
.bento__intro__side a { align-self: flex-start; }

.bento__grid {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 300px;
  gap: 14px;
}
.bento__tile {
  position: relative;
  overflow: hidden;
  background: var(--cream-2);
  display: block;
  color: var(--cream);
  isolation: isolate;
  border-radius: 4px;
}
.bento__tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Hard top anchor. These are full-body studio shots where the model's head
     sits within the first ~5% of the frame, so any downward offset risks
     clipping it: on the hero photo the head starts at 5.5% and a 12% offset cut
     exactly that much. Anchoring at 0 means the crop always takes from the hem,
     never the head, and it stays correct if the owner swaps the photo later. */
  object-position: 50% 0%;
  transform-origin: 50% 0%;   /* hover zoom must grow from the top, not re-centre */
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.bento__tile:hover img { transform: scale(1.06); }
.bento__tile::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0) 70%);
  z-index: 1;
  pointer-events: none;
}
.bento__label {
  position: absolute; z-index: 2;
  bottom: 0; left: 0; right: 0;
  padding: 28px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px;
}
.bento__eyebrow {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  display: block;
  margin-bottom: 6px;
}
.bento__name {
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.bento__arrow {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(245, 240, 232, 0.18);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(245, 240, 232, 0.35);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cream);
  transition: all 0.35s var(--ease);
  flex-shrink: 0;
}
.bento__tile:hover .bento__arrow { background: var(--cream); color: var(--ink); border-color: var(--cream); transform: rotate(-45deg); }
.bento__arrow svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; }

.bento__tile--hero { grid-column: span 4; grid-row: span 2; }
.bento__tile--tall { grid-column: span 2; grid-row: span 2; }
.bento__tile--wide { grid-column: span 3; grid-row: span 1; }
.bento__tile--sq   { grid-column: span 3; grid-row: span 1; }

@media (max-width: 900px) {
  .bento__intro { grid-template-columns: 1fr; padding: 0 20px 40px; gap: 20px; align-items: start; }
  .bento__intro__side { max-width: 100%; }
  .bento__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; padding: 0 16px; gap: 10px; }
  .bento__tile--hero { grid-column: span 2; grid-row: span 2; }
  .bento__tile--tall { grid-column: span 1; grid-row: span 2; }
  .bento__tile--wide { grid-column: span 1; grid-row: span 1; }
  .bento__tile--sq { grid-column: span 1; grid-row: span 1; }
  .bento__label { padding: 18px; }
  .bento__arrow { width: 34px; height: 34px; }
}

/* =====================================================
   SPOTLIGHT SECTION, hero product + supporting grid
   ===================================================== */
.spotlight {
  padding: clamp(72px, 10vw, 120px) 0;
  background: var(--cream-2);
}
.spotlight__inner {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: stretch;
}
.spotlight__hero {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--cream-3);
}
.spotlight__hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.spotlight__hero:hover img { transform: scale(1.04); }
.spotlight__hero__badge {
  position: absolute; top: 20px; left: 20px;
  background: var(--ink); color: var(--gold);
  padding: 8px 14px;
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 600;
  z-index: 2;
}
.spotlight__hero__caption {
  position: absolute; bottom: 20px; left: 20px; right: 20px;
  z-index: 2; color: var(--cream);
  background: rgba(26, 22, 20, 0.65);
  backdrop-filter: blur(12px);
  padding: 18px 22px;
  display: flex; flex-direction: column; gap: 4px;
}
.spotlight__hero__caption .name { font-family: var(--font-serif); font-size: 22px; font-weight: 500; }
.spotlight__hero__caption .price { font-size: 14px; color: var(--gold); letter-spacing: 0.06em; }
.spotlight__right {
  display: flex; flex-direction: column;
  gap: 32px;
  justify-content: space-between;
}
.spotlight__intro {
  display: flex; flex-direction: column; gap: 14px;
}
.spotlight__intro .eyebrow {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--bronze); font-weight: 500;
}
.spotlight__intro h2 {
  font-family: var(--font-serif);
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 400;
  line-height: 1.02;
  color: var(--ink);
}
.spotlight__intro h2 .italic-accent { font-style: italic; color: var(--bronze); }
.spotlight__intro p { color: var(--muted); font-size: 15px; line-height: 1.7; max-width: 440px; }
.spotlight__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 14px;
}
.spotlight__mini {
  display: flex;
  flex-direction: column;
  background: transparent;
}
.spotlight__mini img {
  width: 100%;
  aspect-ratio: 3/4;
  height: auto;
  object-fit: contain;
  object-position: center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.spotlight__mini:hover img { transform: scale(1.02); }
.spotlight__mini__info {
  padding: 12px 2px 0;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.spotlight__mini__info .name { font-family: var(--font-serif); font-size: 15px; color: var(--ink); line-height: 1.25; }
.spotlight__mini__info .price { color: var(--bronze); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }

@media (max-width: 900px) {
  .spotlight__inner { grid-template-columns: 1fr; padding: 0 20px; gap: 32px; }
  .spotlight__hero { aspect-ratio: 4/5; }
}

/* =====================================================
   OCCASION EDIT, 4 columns, click through to filtered shop
   ===================================================== */
.occasion {
  padding: clamp(72px, 10vw, 120px) 0;
  background: var(--cream);
}
.occasion__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
  padding: 0 24px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.occasion__head h2 {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.02;
  color: var(--ink);
}
.occasion__head h2 .italic-accent { font-style: italic; color: var(--bronze); }
.occasion__head .eyebrow {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--bronze); font-weight: 500;
}
.occasion__head p { color: var(--muted); font-size: 15px; line-height: 1.6; }
.occasion__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.occasion__card {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  color: var(--cream);
  isolation: isolate;
  display: block;
  background: var(--cream-3);
}
.occasion__card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Same reasoning as the bento tiles: 15% was enough to clip a head that
     starts around 2% of the way down the frame. */
  object-position: 50% 0%;
  transform-origin: 50% 0%;
  transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}
.occasion__card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0) 85%);
  z-index: 1;
}
.occasion__card:hover img { transform: scale(1.05); }
.occasion__card__label {
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: 0;
  padding: 24px;
  display: flex; flex-direction: column; gap: 4px;
}
.occasion__card__eyebrow {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 4px;
}
.occasion__card__name {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 400;
  line-height: 1;
}
.occasion__card__cta {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  transition: gap 0.3s ease;
}
.occasion__card:hover .occasion__card__cta { gap: 12px; }

@media (max-width: 900px) {
  .occasion__grid { grid-template-columns: repeat(2, 1fr); padding: 0 16px; gap: 10px; }
  .occasion__card__label { padding: 18px; }
}

/* =====================================================
   AALIYAH FEATURE, deeper editorial
   ===================================================== */
.aaliyah {
  padding: clamp(80px, 12vw, 140px) 0;
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
}
.aaliyah__inner {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.aaliyah__media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.aaliyah__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aaliyah__media__badge {
  position: absolute; top: 24px; left: 24px;
  background: var(--gold);
  color: var(--ink);
  padding: 8px 16px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  z-index: 2;
}
.aaliyah__content { display: flex; flex-direction: column; gap: 24px; }
.aaliyah__content .eyebrow {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); font-weight: 500;
}
.aaliyah__quote {
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.5vw, 48px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--cream);
}
.aaliyah__quote .italic-accent { font-style: italic; color: var(--gold); }
.aaliyah__body { color: rgba(245, 240, 232, 0.72); font-size: 16px; line-height: 1.75; max-width: 540px; }
.aaliyah__body em { font-style: italic; color: var(--gold); font-weight: 400; }

/* ============================================================================
   STATEMENT BAND — dark editorial marquee between the hero and shop-the-edit.
   Reads like a boutique's tagline swipe, all caps, gold accent dots.
   ============================================================================ */
.statement-band {
  background: var(--ink);
  color: var(--cream);
  padding: 22px 0;
  overflow: hidden;
  position: relative;
}
.statement-band::before,
.statement-band::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.statement-band::before { left: 0;  background: linear-gradient(90deg, var(--ink), transparent); }
.statement-band::after  { right: 0; background: linear-gradient(270deg, var(--ink), transparent); }
.statement-band__track {
  display: flex;
  width: max-content;
  /* The global `* { max-width: 100% }` was capping the track at the viewport,
     so both groups were squeezed below their natural width and the words
     inside them overlapped: "CONFIDENT" landed on top of "SEXY". The track has
     to be free to be twice the viewport wide for the loop to work. */
  max-width: none;
  animation: statementSlide 34s linear infinite;
  will-change: transform;
}
.statement-band__group {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
  flex-shrink: 0;
  max-width: none;
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: 0.32em;
  /* At 0.32em tracking the letters sit further apart than the default word
     space, so a multi-word phrase like CURATED IN TRINIDAD collapsed into one
     dense run while the single words around it read as airy. Widening the word
     space restores the hierarchy: letters, then words, then phrases. */
  word-spacing: 0.45em;
  white-space: nowrap;
  color: var(--cream);
}
@media (max-width: 640px) {
  .statement-band { padding: 16px 0; }
  /* Separator widened alongside the new word spacing so the three levels stay
     clearly distinct: letters 4.8, words 15, phrases 34. */
  .statement-band__group { font-size: 15px; gap: 34px; padding-right: 34px; }
  .statement-band::before, .statement-band::after { width: 48px; }
}
.statement-band__dot {
  color: var(--gold);
  font-size: 14px;
  transform: translateY(-1px);
}
/* Two identical groups sit in the track, so translating -50% lands exactly
   one full sequence over — the second group is now where the first was,
   the loop is invisible. */
@keyframes statementSlide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .statement-band__track { animation: none; }
}
.aaliyah__signature {
  font-family: var(--font-script);
  font-size: 56px;
  color: var(--gold);
  line-height: 1;
  margin-top: 4px;
}
.aaliyah__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px;
  border: 1px solid rgba(245, 240, 232, 0.4);
  color: var(--cream);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  align-self: flex-start;
  transition: all 0.3s ease;
  text-decoration: none;
}
.aaliyah__cta:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.aaliyah__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 24px;
  margin-top: 8px;
  border-top: 1px solid rgba(245, 240, 232, 0.14);
}
.aaliyah__stat__value {
  font-family: var(--font-serif);
  font-size: 32px;
  color: var(--gold);
  font-weight: 400;
  line-height: 1;
}
.aaliyah__stat__label {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245, 240, 232, 0.55);
  margin-top: 6px;
}

@media (max-width: 900px) {
  .aaliyah__inner { grid-template-columns: 1fr; padding: 0 20px; gap: 32px; }
  .aaliyah__stats { gap: 12px; }
  .aaliyah__stat__value { font-size: 26px; }
}

/* =====================================================
   BEST-LOVED, product carousel section
   ===================================================== */
.loved {
  padding: clamp(72px, 10vw, 120px) 0;
  background: var(--cream);
}
.loved__head {
  max-width: var(--content);
  margin: 0 auto 48px;
  padding: 0 32px;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px;
}
.loved__head h2 {
  font-family: var(--font-serif);
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1;
  color: var(--ink);
  font-weight: 400;
}
.loved__head h2 .italic-accent { font-style: italic; color: var(--bronze); }
.loved__head .eyebrow {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--bronze); font-weight: 500;
  display: block; margin-bottom: 12px;
}
.loved__head a { flex-shrink: 0; }
.loved__scroll {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .loved__head { flex-direction: column; align-items: flex-start; padding: 0 20px; }
  .loved__scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 16px 20px;
    gap: 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .loved__scroll::-webkit-scrollbar { display: none; }
  .loved__scroll > * {
    flex: 0 0 68vw;
    scroll-snap-align: start;
  }
}

/* =====================================================
   LOOKBOOK, 3-up big lifestyle images
   ===================================================== */
.lookbook {
  padding: clamp(72px, 10vw, 120px) 0;
  background: var(--cream-2);
}
.lookbook__intro {
  max-width: 720px;
  margin: 0 auto 60px;
  padding: 0 32px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.lookbook__intro h2 {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  color: var(--ink);
  font-weight: 400;
}
.lookbook__intro h2 .italic-accent { font-style: italic; color: var(--bronze); }
.lookbook__intro .eyebrow {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--bronze); font-weight: 500;
}
.lookbook__intro p { color: var(--muted); font-size: 15px; line-height: 1.65; }
.lookbook__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.lookbook__card {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--cream-3);
  color: var(--cream);
  display: block;
}
.lookbook__card--tall { aspect-ratio: 3/5; }
.lookbook__card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.lookbook__card:hover img { transform: scale(1.05); }
.lookbook__card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0) 60%);
  z-index: 1;
}
.lookbook__caption {
  position: absolute; bottom: 24px; left: 24px; right: 24px;
  z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 12px;
}
.lookbook__caption .eyebrow {
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold);
  font-weight: 500; margin-bottom: 6px;
}
.lookbook__caption .name {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 400;
  line-height: 1;
}

@media (max-width: 900px) {
  .lookbook__grid { grid-template-columns: 1fr; padding: 0 20px; gap: 14px; }
  .lookbook__card { aspect-ratio: 4/5; }
}

/* =====================================================
   NEWSLETTER, refined
   ===================================================== */
.news-hero {
  padding: clamp(80px, 12vw, 140px) 0;
  background: var(--ink);
  color: var(--cream);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.news-hero__inner {
  max-width: 620px; margin: 0 auto; padding: 0 24px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  position: relative; z-index: 2;
}
.news-hero .eyebrow {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); font-weight: 500;
}
.news-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5.5vw, 64px);
  line-height: 1;
  font-weight: 400;
}
.news-hero__title .italic-accent { font-style: italic; color: var(--gold); }
.news-hero__perks {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 24px;
  color: rgba(245, 240, 232, 0.7);
  font-size: 13px;
  margin-top: 4px;
}
.news-hero__perks span { display: inline-flex; align-items: center; gap: 8px; }
.news-hero__perks span::before {
  content: '✦'; color: var(--gold); font-size: 10px;
}
.news-hero__form {
  display: flex;
  width: 100%;
  max-width: 520px;
  margin-top: 20px;
  border: 1px solid rgba(245, 240, 232, 0.25);
  border-radius: 999px;
  padding: 6px 6px 6px 22px;
  background: rgba(245, 240, 232, 0.04);
}
.news-hero__input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 14px 0;
  color: var(--cream);
  font-size: 14px;
  outline: none;
  min-width: 0;
}
.news-hero__input::placeholder { color: rgba(245, 240, 232, 0.5); letter-spacing: 0.08em; }
.news-hero__btn {
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  border: none; cursor: pointer;
  transition: background 0.25s ease;
  white-space: nowrap;
}
.news-hero__btn:hover { background: var(--bronze); color: var(--cream); }
.news-hero__note {
  font-size: 11px;
  color: rgba(245, 240, 232, 0.5);
  letter-spacing: 0.08em;
}
.news-hero__reveal {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 40px;
  margin: 0 auto 8px;
  border: 1px solid rgba(200, 162, 74, 0.5);
  border-radius: 4px;
  background: rgba(200, 162, 74, 0.08);
  animation: revealCode 0.5s var(--ease) both;
}
@keyframes revealCode {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.news-hero__reveal__eyebrow {
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold);
}
.news-hero__reveal__code {
  font-family: var(--font-serif);
  font-size: 34px; letter-spacing: 0.28em;
  color: var(--cream);
  padding: 6px 20px;
  border: 1px dashed rgba(245, 240, 232, 0.3);
  border-radius: 2px;
  user-select: all;
  cursor: text;
}
.news-hero__reveal__note {
  font-size: 11px; color: rgba(245, 240, 232, 0.6);
  letter-spacing: 0.06em;
}

@media (max-width: 480px) {
  .news-hero__form { flex-direction: column; border-radius: 12px; padding: 12px; gap: 8px; }
  .news-hero__input { text-align: center; padding: 12px 8px; }
  .news-hero__btn { border-radius: 8px; padding: 14px 22px; width: 100%; }
  .news-hero__reveal { padding: 18px 24px; }
  .news-hero__reveal__code { font-size: 26px; letter-spacing: 0.22em; }
}

/* =====================================================
   INSTAGRAM refined
   ===================================================== */
.ig-feed {
  padding: 80px 0 60px;
  background: var(--cream);
}
.ig-feed__intro {
  max-width: 640px;
  margin: 0 auto 48px;
  padding: 0 24px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ig-feed__intro h2 {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  color: var(--ink);
  font-weight: 400;
}
.ig-feed__intro h2 .italic-accent { font-style: italic; color: var(--bronze); }
.ig-feed__intro .handle {
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--bronze); font-weight: 500;
}
.ig-feed__intro p { color: var(--muted); font-size: 14px; line-height: 1.65; }
.ig-feed__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 6px;
  transition: all 0.25s ease;
  text-decoration: none;
}
.ig-feed__cta:hover { background: var(--ink); color: var(--cream); }
.ig-feed__cta svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.ig-feed__grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.ig-feed__tile {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  display: block;
}
.ig-feed__tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.ig-feed__tile:hover img { transform: scale(1.08); }
.ig-feed__tile::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(26, 22, 20, 0);
  transition: background 0.3s ease;
}
.ig-feed__tile:hover::after { background: rgba(26, 22, 20, 0.35); }
.ig-feed__tile__overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--cream);
  z-index: 2; opacity: 0;
  transition: opacity 0.3s ease;
}
.ig-feed__tile:hover .ig-feed__tile__overlay { opacity: 1; }
.ig-feed__tile__overlay svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 1.5; fill: none; }

@media (max-width: 900px) {
  .ig-feed__grid { grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 0 8px; }
}

/* =====================================================
   Mobile sticky product bar
   ===================================================== */
.mobile-buy-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0));
  background: var(--cream);
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 30px rgba(26, 22, 20, 0.08);
  z-index: 210;
  gap: 10px;
  align-items: center;
}
.mobile-buy-bar__price {
  display: flex; flex-direction: column;
  min-width: 82px;
}
.mobile-buy-bar__price-label { font-size: 10px; color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; }
.mobile-buy-bar__price-value { font-family: var(--font-serif); font-size: 22px; color: var(--ink); font-weight: 500; line-height: 1; }
.mobile-buy-bar__btn {
  flex: 1;
  padding: 15px 14px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  border: none;
  background: var(--ink);
  color: var(--cream);
  border-radius: 2px;
  min-height: 50px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
}
.mobile-buy-bar__btn--wa {
  flex: 0 0 auto;
  width: 50px;
  padding: 0;
  background: #25D366;
}
.mobile-buy-bar__btn--wa svg { width: 22px; height: 22px; fill: #fff; }

@media (max-width: 900px) {
  body.has-buy-bar .mobile-buy-bar { display: flex; }
  body.has-buy-bar { padding-bottom: 82px; }
  body.has-buy-bar .wa-fab { bottom: calc(82px + env(safe-area-inset-bottom, 0) + 12px); }
  body.has-buy-bar .toast { bottom: calc(82px + env(safe-area-inset-bottom, 0) + 20px); }
}

/* =====================================================
   Mobile optimization tuning
   ===================================================== */
@media (max-width: 640px) {
  body { font-size: 14px; -webkit-tap-highlight-color: rgba(184, 148, 106, 0.15); }

  /* Buttons touch-friendly */
  .btn { padding: 16px 24px; font-size: 12px; min-height: 50px; }
  .btn-lg { padding: 18px 28px; font-size: 12px; }
  .btn-sm { padding: 12px 18px; }
  a, button { touch-action: manipulation; }

  /* Larger product cards on mobile, one at a time is easier to shop */
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .product-card__media { border-radius: 4px; }
  .product-card__name { font-size: 14.5px; line-height: 1.25; }
  .product-card__price { font-size: 14px; margin-top: 2px; }
  .product-card__colors { margin-top: 4px; }

  /* Announcement bar smaller */
  .announcement { padding: 10px 16px; font-size: 10.5px; letter-spacing: 0.1em; }
  .announcement__item { gap: 8px; }

  /* Section spacing tighter */
  .section { padding: 56px 0; }
  .section-tight { padding: 36px 0; }
  .section-head { margin-bottom: 32px; gap: 12px; }
  .section-head__title { font-size: 34px; padding: 0 12px; }
  .section-head__text { font-size: 14px; padding: 0 12px; }
  .section-head__eyebrow { font-size: 10px; }

  /* Category tiles */
  .categories { padding: 56px 0; }
  .categories__grid { gap: 12px; }
  .category-card__name { font-size: 22px; }
  .category-card__label { padding: 20px; }
  .category-card__arrow { width: 34px; height: 34px; }

  /* Product cards */
  .product-grid { gap: 26px 12px; }
  .product-card__name { font-size: 15px; }
  .product-card__price { font-size: 14px; }
  .product-card__quickadd { display: none; }
  .product-card__wishlist { opacity: 1; width: 34px; height: 34px; }
  .product-card__badges {
    top: auto; bottom: 10px; left: 10px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    max-width: calc(100% - 20px);
  }
  .badge {
    font-size: 9px;
    padding: 3px 7px;
    letter-spacing: 0.14em;
    line-height: 1.4;
  }
  /* Cap visible badges to 2 on mobile, priority: new/sale first, then bestseller/low */
  .product-card__badges .badge:nth-child(n+3) { display: none; }

  /* Product detail */
  .product-detail { gap: 28px; padding: 20px 16px 48px; }
  .product-detail__info { gap: 16px; position: static; }
  .product-detail__title { font-size: 30px; }
  .gallery-thumbs { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .product-detail__actions { flex-direction: column; }
  .product-detail__actions .btn { min-height: 52px; }
  .wishlist-btn { width: 100%; height: 52px; }

  /* Editorial */
  .editorial__content { padding: 48px 24px; gap: 18px; }
  .editorial__title { font-size: 34px; }
  .editorial__text { font-size: 15px; }
  .editorial__signature { font-size: 40px; }

  /* Values */
  .value { padding: 32px 20px; }
  .value__title { font-size: 18px; }
  .value__text { font-size: 12px; }

  /* Newsletter */
  .newsletter { padding: 64px 0; }
  .newsletter__title { font-size: 32px; }
  .newsletter__text { font-size: 14px; }
  .newsletter__form { flex-direction: column; border: none; gap: 12px; }
  .newsletter__input { border: 1px solid rgba(245, 240, 232, 0.35); padding: 14px 16px; text-align: center; }
  .newsletter__btn { border: 1px solid var(--cream); padding: 14px 24px; }

  /* Strip marquee smaller */
  .strip { padding: 14px 0; }
  .strip__track { font-size: 24px; gap: 40px; }

  /* Page banner */
  .page-banner { padding: 48px 20px 36px; }
  .page-banner__title { font-size: 40px; }
  .page-banner__sub { font-size: 13px; }
  .page-banner__crumbs { font-size: 10px; letter-spacing: 0.16em; }

  /* Footer */
  .footer { padding: 64px 0 24px; }
  .footer__inner { padding: 0 22px; }
  .footer__logo { font-size: 29px; letter-spacing: 0.11em; }
  .footer__logo-sub { font-size: 20px; }
  .footer__tagline { font-size: 13.5px; margin-top: 16px; }
  .footer__nav { gap: 12px 22px; margin-top: 32px; }
  .footer__nav a { font-size: 10.5px; letter-spacing: 0.2em; }
  .footer__rule { margin: 34px 0; }
  .footer__socials { margin-top: 34px; gap: 12px; }
  .footer__social { width: 44px; height: 44px; }   /* stays a comfortable tap target */
  /* Stacked on a narrow screen so numbers and addresses never wrap mid-token. */
  .footer__contact { flex-direction: column; align-items: center; gap: 12px; margin-top: 26px; }
  .footer__legal { gap: 14px; }

  /* Cart page */
  .cart-page { padding: 20px 16px 48px; gap: 28px; }
  .cart-line { grid-template-columns: 84px 1fr; gap: 14px; padding: 20px 0; }
  .cart-line__name { font-size: 17px; }
  .cart-line__qty { grid-column: 2; margin-top: 6px; }
  .cart-line__price { grid-column: 2; text-align: left; font-size: 15px; margin-top: 4px; }
  .cart-summary { padding: 24px 20px; position: static; }
  .cart-summary__title { font-size: 22px; }

  /* Checkout */
  .checkout-page { padding: 20px 16px 48px; gap: 28px; }
  .form-grid { grid-template-columns: 1fr; gap: 12px; }
  .form-field input, .form-field select, .form-field textarea { padding: 15px 14px; font-size: 15px; }
  .form-field label { font-size: 11px; }
  .checkout-section__title { font-size: 20px; }
  .radio-card { padding: 14px 16px; flex-wrap: wrap; gap: 10px; }
  .radio-card__label { font-size: 13px; }
  .order-summary { padding: 24px 20px; position: static; }
  .order-summary__title { font-size: 20px; }

  /* Shop layout */
  .shop-layout { padding: 20px 16px 48px; gap: 24px; }
  .shop-toolbar { flex-direction: column; align-items: stretch; gap: 12px; padding-bottom: 18px; margin-bottom: 22px; }
  .shop-toolbar__sort { justify-content: space-between; }
  .filter-toggle { justify-content: center; }

  /* Filters drawer */
  .filters.open { padding: 20px 20px 100px; }

  /* Product accordion */
  .accordion__head { padding: 18px 0; font-size: 12px; }
  .accordion__body-inner { font-size: 13px; }

  /* Hero arrows hidden on mobile already; dots larger touch */
  .hero__dot { width: 10px; height: 10px; }
  .hero__dot.active { width: 30px; }

  /* Toast reposition (WA button occupies bottom right) */
  .toast { bottom: 84px; padding: 14px 22px; font-size: 12px; max-width: 90vw; }

  /* About page */
  .about-hero { grid-template-columns: 1fr; }
  .about-hero__content { padding: 48px 24px; gap: 16px; }
  .about-hero__title { font-size: 46px; }
  .about-hero__text { font-size: 15px; }
  .about-hero__media { height: 55vh; }
  .pillars { padding: 56px 20px; gap: 20px; }
  .pillar { padding: 24px; }
  .pillar__title { font-size: 22px; }
  .pillar__text { font-size: 13px; }
  .pillar__num { font-size: 34px; }

  /* Instagram grid mobile: 3 columns */
  .instagram__grid { grid-template-columns: repeat(3, 1fr); gap: 3px; }
  .instagram__handle { font-size: 10px; letter-spacing: 0.12em; }
}

/* iOS safe area for FAB */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 640px) {
    .wa-fab { bottom: calc(16px + env(safe-area-inset-bottom, 0)); }
  }
}

/* =====================================================
   Floating WhatsApp button, icon-only, expands on hover
   ===================================================== */
.wa-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 220;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  background: #25D366;
  color: #fff;
  height: 56px;
  width: 56px;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.35), 0 3px 10px rgba(0, 0, 0, 0.14);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease,
              transform 0.35s var(--ease),
              background 0.25s ease;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: none;
  text-decoration: none;
  padding: 0;
}
.wa-fab:hover {
  width: 184px;
  background: #1EBE5C;
  box-shadow: 0 14px 34px rgba(37, 211, 102, 0.45), 0 5px 14px rgba(0, 0, 0, 0.18);
  transform: translateY(-2px);
}
.wa-fab__icon {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wa-fab__icon svg { width: 28px; height: 28px; fill: #fff; transition: transform 0.5s var(--ease); }
.wa-fab:hover .wa-fab__icon svg { transform: rotate(-8deg) scale(1.05); }
.wa-fab__label {
  white-space: nowrap;
  padding-right: 20px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.35s ease 0.1s, transform 0.4s var(--ease) 0.1s;
}
.wa-fab:hover .wa-fab__label {
  opacity: 1;
  transform: translateX(0);
}
.wa-fab::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(37, 211, 102, 0.4);
  animation: waPulse 2.8s ease-out infinite;
  pointer-events: none;
  z-index: -1;
}
.wa-fab:hover::before { animation: none; }
@keyframes waPulse {
  0% { transform: scale(1); opacity: 0.6; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}
@media (max-width: 900px) {
  .wa-fab { display: none !important; }
}

/* ============================================================================
   CUSTOMER DASHBOARD ,  /account (signed-in view)
   ============================================================================ */
.acct {
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 32px 96px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 44px;
  align-items: start;
}
@media (max-width: 900px) {
  .acct { grid-template-columns: 1fr; padding: 20px 18px 60px; gap: 20px; }
}

.acct__aside {
  position: sticky;
  top: 96px;
  align-self: start;          /* a stretched grid item has no travel */
  max-height: calc(100vh - 96px - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(26, 22, 20, 0.22) transparent;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (max-width: 900px) { .acct__aside { position: static; } }

.acct__id {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 20px;
  border: 1px solid var(--border);
  background: var(--cream);
  border-radius: 2px;
}
/* Avatar is a button (click-to-upload). Camera pip hovers bottom-right;
   when a photo is set the initial is hidden and the <img> fills the circle. */
.acct__avatar {
  position: relative;
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bronze), var(--wine));
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 22px; font-weight: 500;
  letter-spacing: 0.02em;
  border: none;
  cursor: pointer;
  overflow: visible;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.acct__avatar:hover { transform: scale(1.03); box-shadow: 0 6px 20px -6px rgba(26, 22, 20, 0.35); }
.acct__avatar img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.acct__avatar__cam {
  position: absolute;
  right: -4px; bottom: -4px;
  width: 22px; height: 22px;
  background: var(--ink);
  color: var(--cream);
  border: 2px solid var(--cream);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.9;
  transition: opacity 0.2s ease, background 0.2s ease;
  pointer-events: none;
}
.acct__avatar:hover .acct__avatar__cam { opacity: 1; background: var(--bronze); }

.acct__id__name  { font-family: var(--font-serif); font-size: 18px; line-height: 1.15; margin-bottom: 3px; }
.acct__id__email { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; word-break: break-all; }

.acct__nav {
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  background: var(--cream);
  border-radius: 2px;
  overflow: hidden;
}
.acct__nav__item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease, color 0.2s ease;
  border-bottom: 1px solid var(--border);
  font-family: inherit;
  width: 100%;
}
.acct__nav__item:last-child { border-bottom: 0; }
.acct__nav__item:hover { background: var(--cream-2); color: var(--ink); }
.acct__nav__item.is-active {
  background: var(--ink);
  color: var(--cream);
}
.acct__nav__item.is-active .acct__nav__count { color: var(--cream); background: rgba(245, 240, 232, 0.15); }
.acct__nav__item svg { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.acct__nav__count {
  margin-left: auto;
  min-width: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-align: center;
}
.acct__nav__item--danger { color: var(--wine); }
.acct__nav__item--danger:hover { background: rgba(122, 46, 46, 0.06); color: var(--wine); }

/* -------- MOBILE APP FEEL --------
   On phones, the account dashboard behaves like a native app:
   - tight edge-to-edge cards
   - sticky top identity bar
   - horizontal scrolling segmented control for tabs, no scrollbars
   - larger tap targets on nav pills
   - bottom safe-area padding so the last action clears the bar bar. */
@media (max-width: 900px) {
  .acct { padding: 12px 14px 40px; gap: 16px; }
  .acct__aside {
    position: sticky; top: 0; z-index: 20;
    background: linear-gradient(180deg, var(--cream) 82%, rgba(245, 240, 232, 0));
    padding-top: 8px; padding-bottom: 4px; margin: 0 -14px;
    padding-left: 14px; padding-right: 14px;
  }
  .acct__id {
    padding: 14px 16px;
    border-radius: 16px;
    margin-bottom: 10px;
  }
  .acct__id__name  { font-size: 16px; }
  .acct__id__email { font-size: 10px; }
  .acct__avatar    { width: 48px; height: 48px; font-size: 19px; }

  .acct__nav {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: transparent;
    border: none;
    gap: 6px;
    padding: 2px 0;
  }
  .acct__nav::-webkit-scrollbar { display: none; }
  .acct__nav__item {
    border: 1px solid var(--border);
    border-radius: 999px;
    flex-shrink: 0;
    padding: 10px 16px;
    font-size: 11px;
    letter-spacing: 0.14em;
    background: var(--cream);
    min-height: 40px;
  }
  .acct__nav__item svg { width: 15px; height: 15px; }
  .acct__nav__item.is-active {
    background: var(--ink); color: var(--cream); border-color: var(--ink);
  }
  .acct__nav__count { display: none; }
  .acct__nav__item--danger { margin-left: auto; }
}

/* --- MAIN COLUMN --- */
/* min-height stops the page from collapsing (and the footer from jumping up)
   when switching to a short tab like an empty Addresses / Wishlist. */
.acct__main { display: flex; flex-direction: column; gap: 28px; min-width: 0; min-height: 640px; }
@media (max-width: 900px) { .acct__main { min-height: auto; } }

.acct-panel {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.acct-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--border);
  gap: 16px;
  flex-wrap: wrap;
}
.acct-panel__head h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.005em;
}
.acct-panel__head p { font-size: 12px; color: var(--muted); margin: 3px 0 0; }
.acct-panel__body { padding: 22px 26px 26px; }
@media (max-width: 640px) {
  .acct-panel__head, .acct-panel__body { padding-left: 18px; padding-right: 18px; }
}

/* Welcome hero */
.acct-hello {
  padding: 34px 30px;
  background: linear-gradient(135deg, var(--ink) 0%, #2a2422 100%);
  color: var(--cream);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.acct-hello::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 162, 74, 0.25), transparent 70%);
}
.acct-hello__eyebrow {
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.acct-hello__title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 500;
  margin-bottom: 8px;
}
.acct-hello__title em { font-style: italic; color: var(--gold); font-weight: 500; }
.acct-hello__sub { font-size: 13px; color: rgba(245, 240, 232, 0.7); max-width: 480px; }

/* Stat tiles */
.acct-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 780px) { .acct-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.acct-stat {
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 20px 22px;
  border-radius: 2px;
}
@media (max-width: 640px) {
  .acct-stat { padding: 16px 18px; border-radius: 14px; }
}
.acct-stat__label {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.acct-stat__value {
  font-family: var(--font-serif); font-size: 30px; font-weight: 500;
  line-height: 1; margin-bottom: 6px;
}
@media (max-width: 640px) {
  .acct-stat__value { font-size: 26px; }
}
.acct-stat__foot { font-size: 11px; color: var(--muted); }

/* Softer edges + smaller hero on mobile so it feels like a native card. */
@media (max-width: 640px) {
  .acct-panel { border-radius: 14px; }
  .acct-panel__head { padding: 18px 18px 14px; }
  .acct-panel__body { padding: 16px 18px 20px; }
  .acct-hello { padding: 24px 22px; border-radius: 16px; }
  .acct-hello__title { font-size: 24px; }
}

/* Order rows on account page */
.acct-order {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s ease;
}
.acct-order:hover { background: var(--cream-2); margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.acct-order:last-child { border-bottom: 0; }
.acct-order__thumbs {
  display: flex; gap: -6px;
  min-width: 78px;
}
.acct-order__thumb {
  width: 44px; height: 58px;
  object-fit: cover;
  background: var(--cream-2);
  border: 2px solid var(--cream);
  border-radius: 2px;
  margin-left: -12px;
}
.acct-order__thumb:first-child { margin-left: 0; }
.acct-order__id { font-size: 11px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
.acct-order__title { font-size: 14px; font-weight: 500; margin-top: 3px; }
.acct-order__meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.acct-order__price { font-family: var(--font-serif); font-size: 18px; font-weight: 500; }
.acct-order__status {
  display: inline-block; padding: 4px 12px;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  border-radius: 999px;
  background: var(--cream-2); color: var(--ink-2);
}
.acct-order__status--pending   { background: rgba(200, 162, 74, 0.16); color: #8a6f2f; }
.acct-order__status--packing   { background: rgba(139, 106, 53, 0.14); color: #6a5228; }
.acct-order__status--shipped   { background: rgba(95, 138, 111, 0.16); color: #3d5a48; }
.acct-order__status--delivered { background: rgba(26, 22, 20, 0.08); color: var(--ink); }
.acct-order__status--cancelled { background: rgba(122, 46, 46, 0.1); color: var(--wine); }
.acct-order__status--refunded  { background: rgba(122, 46, 46, 0.1); color: var(--wine); }

/* Order detail, inline expand */
.acct-order-detail {
  padding: 24px 26px;
  background: var(--cream-2);
  border: 1px solid var(--border);
  margin: 12px 0 24px;
}
.acct-order-detail__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
}
@media (max-width: 640px) { .acct-order-detail__grid { grid-template-columns: 1fr; } }
.acct-order-detail__items > div {
  display: grid; grid-template-columns: 60px 1fr auto;
  gap: 14px; align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.acct-order-detail__items > div:last-child { border-bottom: 0; }
.acct-order-detail__items img { width: 60px; height: 78px; object-fit: cover; background: var(--cream); }
.acct-order-detail__summary {
  padding: 20px; background: var(--cream); border: 1px solid var(--border);
  font-size: 13px;
}
.acct-order-detail__summary > div { display: flex; justify-content: space-between; padding: 5px 0; }
.acct-order-detail__summary > div.total { font-family: var(--font-serif); font-size: 18px; padding-top: 12px; border-top: 1px solid var(--border); margin-top: 6px; }

.acct-timeline { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; }
.acct-timeline__item {
  display: grid; grid-template-columns: 24px 1fr;
  gap: 14px; align-items: flex-start;
  padding: 8px 0;
  font-size: 12px;
}
.acct-timeline__dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bronze); margin: 4px auto;
  box-shadow: 0 0 0 4px var(--cream);
}
.acct-timeline__step { text-transform: capitalize; font-weight: 500; color: var(--ink); }
.acct-timeline__when { color: var(--muted); font-size: 11px; }

/* Address cards */
.acct-addr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.acct-addr {
  padding: 22px;
  border: 1px solid var(--border);
  background: var(--cream);
  border-radius: 2px;
  display: flex; flex-direction: column;
  gap: 10px;
  min-height: 190px;
  position: relative;
}
.acct-addr--default { border: 1px solid var(--ink); box-shadow: 0 6px 22px rgba(26, 22, 20, 0.06); }
.acct-addr__default-badge {
  position: absolute; top: 14px; right: 14px;
  font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}
.acct-addr__label {
  font-family: var(--font-serif); font-size: 18px; font-weight: 500;
  margin-bottom: 4px;
}
.acct-addr__lines { font-size: 13px; color: var(--ink-2); line-height: 1.6; flex: 1; }
.acct-addr__lines strong { color: var(--ink); display: block; margin-bottom: 4px; font-weight: 500; }
.acct-addr__actions {
  display: flex; gap: 8px; margin-top: auto;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.acct-addr__btn {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2); background: none; border: none;
  cursor: pointer; padding: 4px 0;
  transition: color 0.2s ease;
}
.acct-addr__btn:hover { color: var(--ink); }
.acct-addr__btn--danger { color: var(--wine); margin-left: auto; }

.acct-addr--add {
  border: 1px dashed var(--border);
  background: transparent;
  align-items: center; justify-content: center;
  text-align: center;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
}
.acct-addr--add:hover { border-color: var(--ink); color: var(--ink); background: var(--cream); }
.acct-addr--add svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.5; fill: none; margin-bottom: 8px; }

/* Wishlist grid on account page */
.acct-wish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
}
.acct-wish {
  display: flex; flex-direction: column;
  background: var(--cream);
}
.acct-wish__media {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--cream-2);
}
.acct-wish__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease); }
.acct-wish:hover .acct-wish__media img { transform: scale(1.03); }
.acct-wish__remove {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--cream); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease;
  z-index: 2;
}
.acct-wish__remove:hover { background: var(--wine); color: var(--cream); }
.acct-wish__info { padding: 12px 4px; }
.acct-wish__name { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.acct-wish__price { font-family: var(--font-serif); font-size: 16px; color: var(--ink); margin-bottom: 10px; }
.acct-wish__cta {
  display: block; width: 100%;
  padding: 10px; text-align: center;
  background: var(--ink); color: var(--cream);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  border: none; cursor: pointer;
  transition: background 0.2s ease;
}
.acct-wish__cta:hover { background: var(--wine); }

/* Profile form */
.acct-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (max-width: 640px) { .acct-form { grid-template-columns: 1fr; } }
.acct-form__field { display: flex; flex-direction: column; gap: 6px; }
.acct-form__field--full { grid-column: 1 / -1; }
.acct-form__field label {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
.acct-form__field input,
.acct-form__field select,
.acct-form__field textarea {
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: var(--cream);
  color: var(--ink);
  font-family: inherit; font-size: 14px;
  border-radius: 2px;
  transition: border-color 0.2s ease;
}
.acct-form__field input:focus,
.acct-form__field select:focus,
.acct-form__field textarea:focus { outline: none; border-color: var(--ink); }
.acct-form__field textarea { resize: vertical; min-height: 90px; }
.acct-form__checkbox {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: var(--ink-2); cursor: pointer; line-height: 1.5;
}
.acct-form__checkbox input { width: auto; margin-top: 3px; }
.acct-form__size-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.acct-form__size-chip {
  padding: 8px 14px;
  border: 1px solid var(--border);
  background: var(--cream);
  font-size: 12px; letter-spacing: 0.14em;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 2px;
}
.acct-form__size-chip.is-on {
  background: var(--ink); color: var(--cream); border-color: var(--ink);
}

.acct-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--muted);
}
.acct-empty__eyebrow {
  display: block;
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--bronze); margin-bottom: 10px;
}
.acct-empty h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 500; margin-bottom: 8px; color: var(--ink); }
.acct-empty p { font-size: 14px; margin-bottom: 22px; }

/* Modal for adding/editing addresses */
.acct-modal {
  position: fixed; inset: 0;
  background: rgba(26, 22, 20, 0.55);
  display: none; align-items: center; justify-content: center;
  z-index: 200;
  padding: 20px;
}
.acct-modal.is-open { display: flex; }
.acct-modal__panel {
  background: var(--cream);
  max-width: 560px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  border-radius: 4px;
  animation: acctModalIn 0.25s var(--ease);
}
@keyframes acctModalIn { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.acct-modal__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 26px; border-bottom: 1px solid var(--border);
}
.acct-modal__head h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 500; margin: 0; }
.acct-modal__close {
  background: none; border: none; font-size: 24px; color: var(--muted); cursor: pointer; line-height: 1;
}
.acct-modal__body { padding: 24px 26px; }
.acct-modal__foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 18px 26px; border-top: 1px solid var(--border);
}

/* Signed-out state, polished sign-in card with editorial background scene. */
.acct-signin-wrap {
  position: relative;
  max-width: 460px; margin: 40px auto 100px;
  padding: 0 24px;
  z-index: 1;
}

/* Soft radial washes behind the card, warm bronze + wine hints in the corners. */
.acct-signin-wrap::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 15% 20%,  rgba(200, 162, 74, 0.10), transparent 65%),
    radial-gradient(ellipse 55% 45% at 85% 82%,  rgba(139, 106, 53, 0.08), transparent 65%),
    radial-gradient(ellipse 40% 60% at 50% 100%, rgba(122, 46, 46, 0.05), transparent 70%);
}

/* Huge, ultra-faint serif mantra floating behind everything. */
.acct-signin-wrap::after {
  content: 'SEXY · CLASSY · CONFIDENT';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-size: clamp(60px, 12vw, 180px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(26, 22, 20, 0.07);
  text-stroke: 1px rgba(26, 22, 20, 0.07);
  white-space: nowrap;
  transform: rotate(-4deg);
  user-select: none;
}
@media (max-width: 640px) {
  .acct-signin-wrap::after { font-size: 76px; -webkit-text-stroke-width: 0.75px; text-stroke-width: 0.75px; }
}

/* Small bronze ornaments drifting quietly in the corners for texture. */
.acct-signin__ornaments {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.acct-signin__ornament {
  position: absolute;
  font-family: var(--font-serif);
  color: var(--bronze);
  opacity: 0.22;
  user-select: none;
  animation: ornamentDrift 8s ease-in-out infinite;
}
.acct-signin__ornament:nth-child(1) { top: 12%;  left: 8%;  font-size: 14px; animation-delay: 0s; }
.acct-signin__ornament:nth-child(2) { top: 22%;  right: 12%; font-size: 10px; animation-delay: 1.5s; }
.acct-signin__ornament:nth-child(3) { top: 62%;  left: 15%; font-size: 18px; animation-delay: 3s; }
.acct-signin__ornament:nth-child(4) { bottom: 18%; right: 8%; font-size: 12px; animation-delay: 4.5s; }
.acct-signin__ornament:nth-child(5) { bottom: 35%; left: 20%; font-size: 9px; animation-delay: 2s; }
.acct-signin__ornament:nth-child(6) { top: 40%;  right: 22%; font-size: 16px; animation-delay: 6s; }

@keyframes ornamentDrift {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.15; }
  50%      { transform: translateY(-8px) rotate(8deg); opacity: 0.32; }
}
@media (prefers-reduced-motion: reduce) {
  .acct-signin__ornament { animation: none; }
}
.acct-signin {
  background: var(--cream);
  border: 1px solid var(--border);
  padding: 40px 40px 32px;
  border-radius: 2px;
}
@media (max-width: 640px) { .acct-signin { padding: 30px 22px 26px; } }
.acct-signin__eyebrow {
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--bronze); margin-bottom: 12px; text-align: center;
}
.acct-signin__title {
  font-family: var(--font-serif);
  font-size: 32px; font-weight: 500;
  text-align: center; letter-spacing: -0.01em;
  margin-bottom: 26px;
}
.acct-signin__toggle {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  margin-bottom: 24px;
  border-radius: 2px;
  overflow: hidden;
}
.acct-signin__toggle button {
  padding: 12px 10px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  background: transparent; color: var(--muted);
  border: none; cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
}
.acct-signin__toggle button.is-on {
  background: var(--ink); color: var(--cream);
}
.acct-signin__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.acct-signin__field label {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
.acct-signin__field input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: var(--cream);
  color: var(--ink);
  font-family: inherit; font-size: 14px;
  border-radius: 2px;
  transition: border-color 0.2s ease;
}
.acct-signin__field input:focus { outline: none; border-color: var(--ink); }
.acct-signin__row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--ink-2);
  margin: 4px 0 18px;
}
.acct-signin__row label {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
}
.acct-signin__row label input { width: auto; }
.acct-signin__row a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border); }
.acct-signin__row a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.acct-signin__submit {
  width: 100%;
  padding: 14px 20px;
  background: var(--ink); color: var(--cream);
  border: 1px solid var(--ink); border-radius: 2px;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  font-family: inherit; cursor: pointer;
  transition: all 0.2s ease;
}
.acct-signin__submit:hover { background: transparent; color: var(--ink); }
.acct-signin__submit:disabled { opacity: 0.5; cursor: not-allowed; }
.acct-signin__divider {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 16px;
  color: var(--muted);
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
}
.acct-signin__divider::before, .acct-signin__divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.acct-signin__google {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 13px 20px;
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--border); border-radius: 2px;
  font-size: 13px; letter-spacing: 0.06em;
  font-family: inherit; cursor: pointer;
  transition: all 0.2s ease;
}
.acct-signin__google:hover { border-color: var(--ink); background: var(--cream-2); }
.acct-signin__perks {
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 12px;
}
.acct-signin__perk {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 13px; color: var(--ink-2);
}
.acct-signin__perk svg { width: 18px; height: 18px; stroke: var(--bronze); stroke-width: 1.5; fill: none; flex-shrink: 0; margin-top: 2px; }
.acct-signin__foot { font-size: 11px; color: var(--muted); margin-top: 18px; text-align: center; letter-spacing: 0.04em; }
.acct-signin__error {
  font-size: 12px; color: var(--wine);
  padding: 10px 14px;
  background: rgba(122, 46, 46, 0.06);
  border: 1px solid rgba(122, 46, 46, 0.2);
  border-radius: 2px;
  margin-bottom: 14px;
  text-align: center;
  display: none;
}
.acct-signin__error.is-shown { display: block; }
.acct-signin__hint {
  font-size: 12px; color: var(--muted);
  padding: 10px 14px;
  background: rgba(200, 162, 74, 0.08);
  border: 1px solid rgba(200, 162, 74, 0.25);
  border-radius: 2px;
  margin-bottom: 14px;
  text-align: center;
  display: none;
}
.acct-signin__hint.is-shown { display: block; }

/* Custom brand-styled checkboxes, replaces default browser blue */
.acct-signin input[type="checkbox"],
.acct-form__checkbox input[type="checkbox"],
.acct-signin__row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
  background: var(--cream);
  border-radius: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.15s ease;
  margin: 0;
  vertical-align: middle;
}
.acct-signin input[type="checkbox"]:hover,
.acct-form__checkbox input[type="checkbox"]:hover,
.acct-signin__row input[type="checkbox"]:hover {
  border-color: var(--ink-2);
}
.acct-signin input[type="checkbox"]:checked,
.acct-form__checkbox input[type="checkbox"]:checked,
.acct-signin__row input[type="checkbox"]:checked {
  background: var(--ink);
  border-color: var(--ink);
}
.acct-signin input[type="checkbox"]:checked::after,
.acct-form__checkbox input[type="checkbox"]:checked::after,
.acct-signin__row input[type="checkbox"]:checked::after {
  content: '';
  width: 4px; height: 8px;
  border: solid var(--cream);
  border-width: 0 1.75px 1.75px 0;
  transform: translateY(-1px) rotate(45deg);
}
.acct-signin input[type="checkbox"]:focus-visible,
.acct-form__checkbox input[type="checkbox"]:focus-visible,
.acct-signin__row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}

/* Tighter register-form marketing consent row */
.acct-signin__consent {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--cream-2);
  border: 1px solid var(--border);
  border-radius: 2px;
  margin: 4px 0 18px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.55;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.acct-signin__consent:hover { border-color: var(--muted); }
.acct-signin__consent input { margin-top: 2px; }
.acct-signin__consent span { display: block; }
.acct-signin__consent strong { color: var(--ink); font-weight: 500; }

/* Fade + slide entrance, only fires on the initial page load
   (the .is-entering / [data-first-load] flag is set once by JS, then never again). */
@keyframes acctEnter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes acctStagger {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.acct-signin-wrap.is-entering,
.acct[data-first-load] { animation: acctEnter 0.6s var(--ease) both; animation-delay: 0.35s; }
.acct[data-first-load] .acct__aside  { animation: acctStagger 0.55s var(--ease) both; animation-delay: 0.5s; }
.acct[data-first-load] .acct__main   { animation: acctStagger 0.55s var(--ease) both; animation-delay: 0.65s; }
.acct-signin-wrap.is-entering .acct-signin__eyebrow { animation: acctStagger 0.55s var(--ease) both; animation-delay: 0.45s; }
.acct-signin-wrap.is-entering .acct-signin__title   { animation: acctStagger 0.55s var(--ease) both; animation-delay: 0.55s; }
.acct-signin-wrap.is-entering .acct-signin__toggle  { animation: acctStagger 0.55s var(--ease) both; animation-delay: 0.65s; }
.acct-signin-wrap.is-entering form,
.acct-signin-wrap.is-entering .acct-signin__error,
.acct-signin-wrap.is-entering .acct-signin__hint    { animation: acctStagger 0.55s var(--ease) both; animation-delay: 0.75s; }
.acct-signin-wrap.is-entering .acct-signin__divider,
.acct-signin-wrap.is-entering .acct-signin__google  { animation: acctStagger 0.55s var(--ease) both; animation-delay: 0.85s; }
.acct-signin-wrap.is-entering .acct-signin__perks   { animation: acctStagger 0.55s var(--ease) both; animation-delay: 0.95s; }
.acct-signin-wrap.is-entering .acct-signin__foot    { animation: acctStagger 0.55s var(--ease) both; animation-delay: 1.05s; }

@media (prefers-reduced-motion: reduce) {
  .acct-signin-wrap.is-entering, .acct[data-first-load],
  .acct[data-first-load] .acct__aside, .acct[data-first-load] .acct__main,
  .acct-signin-wrap.is-entering * {
    animation: none;
  }
}

.acct-loading {
  padding: 100px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase;
}

/* =========================================================================
   Auth Modal — sign in / create account without leaving the page.
   Backdrop covers the viewport, panel drops in from just above center,
   sequenced entrance so it lands with the same weight as the /account card.
   ========================================================================= */
#authModalRoot {
  position: fixed; inset: 0;
  z-index: 2400;
  display: none;
  pointer-events: none;
}
#authModalRoot.is-open { display: block; pointer-events: auto; }

.auth-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(28, 26, 24, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  animation: authBackdropIn 0.28s var(--ease) forwards;
}
#authModalRoot.is-open .auth-modal__backdrop { opacity: 1; }

.auth-modal__panel {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -48%);
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 38px 38px 30px;
  box-shadow: 0 40px 80px -20px rgba(28, 26, 24, 0.45), 0 12px 28px -8px rgba(28, 26, 24, 0.25);
  opacity: 0;
  animation: authPanelIn 0.42s var(--ease) 0.08s forwards;
}
@media (max-width: 520px) {
  .auth-modal__panel {
    padding: 30px 22px 24px;
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }
}

.auth-modal__x {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
}
.auth-modal__x:hover { color: var(--ink); border-color: var(--border); }

.auth-modal__eyebrow {
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 10px;
  text-align: center;
}
.auth-modal__title {
  font-family: var(--font-serif);
  font-size: 28px; font-weight: 500;
  text-align: center; letter-spacing: -0.01em;
  margin-bottom: 22px;
}

.auth-modal__body { min-width: 0; }

.auth-modal__toggle {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  margin-bottom: 22px;
  border-radius: 2px;
  overflow: hidden;
}
.auth-modal__toggle button {
  padding: 12px 10px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  background: transparent; color: var(--muted);
  border: none; cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
}
.auth-modal__toggle button.is-on { background: var(--ink); color: var(--cream); }
.auth-modal__toggle button:not(.is-on):hover { color: var(--ink); }

.auth-modal__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; min-width: 0; }
.auth-modal__field label {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
.auth-modal__field input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: var(--cream);
  color: var(--ink);
  font-family: inherit; font-size: 14px;
  border-radius: 2px;
  transition: border-color 0.2s ease;
}
.auth-modal__field input:focus { outline: none; border-color: var(--ink); }

.auth-modal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.auth-modal__row .auth-modal__field { margin-bottom: 14px; }
.auth-modal__row--between {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--ink-2);
  margin: 2px 0 18px;
}
.auth-modal__remember { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.auth-modal__remember input { width: auto; }

.auth-modal__link {
  background: transparent; border: none; padding: 0;
  color: var(--ink-2); cursor: pointer;
  font-family: inherit; font-size: 12px;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--border);
  transition: color 0.2s ease;
}
.auth-modal__link:hover { color: var(--ink); text-decoration-color: var(--ink); }
.auth-modal__aside { margin-top: 18px; text-align: center; }

.auth-modal__submit {
  width: 100%;
  padding: 14px 20px;
  background: var(--ink); color: var(--cream);
  border: 1px solid var(--ink); border-radius: 2px;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  font-family: inherit; cursor: pointer;
  transition: all 0.2s ease;
}
.auth-modal__submit:hover { background: transparent; color: var(--ink); }
.auth-modal__submit:disabled { opacity: 0.5; cursor: not-allowed; }

.auth-modal__divider {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 16px;
  color: var(--muted);
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
}
.auth-modal__divider::before, .auth-modal__divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.auth-modal__google {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 13px 20px;
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--border); border-radius: 2px;
  font-size: 13px; letter-spacing: 0.06em;
  font-family: inherit; cursor: pointer;
  transition: all 0.2s ease;
}
.auth-modal__google:hover { border-color: var(--ink); background: var(--cream-2); }

.auth-modal__consent {
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--cream-2);
  border: 1px solid var(--border);
  border-radius: 2px;
  margin: 4px 0 18px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.55;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.auth-modal__consent:hover { border-color: var(--muted); }
.auth-modal__consent input { margin-top: 2px; }
.auth-modal__consent span { display: block; }
.auth-modal__consent strong { color: var(--ink); font-weight: 500; }

/* Reuse the same custom-checkbox skin used on the /account form */
.auth-modal input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
  background: var(--cream);
  border-radius: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.15s ease;
  margin: 0;
  vertical-align: middle;
}
.auth-modal input[type="checkbox"]:hover { border-color: var(--ink-2); }
.auth-modal input[type="checkbox"]:checked { background: var(--ink); border-color: var(--ink); }
.auth-modal input[type="checkbox"]:checked::after {
  content: '';
  width: 4px; height: 8px;
  border: solid var(--cream);
  border-width: 0 1.75px 1.75px 0;
  transform: translateY(-1px) rotate(45deg);
}
.auth-modal input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}

.auth-modal__foot {
  font-size: 11px; color: var(--muted);
  margin-top: 16px; text-align: center;
  letter-spacing: 0.04em;
}
.auth-modal__foot a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border); }
.auth-modal__foot a:hover { color: var(--ink); text-decoration-color: var(--ink); }

.auth-modal__error {
  font-size: 12px; color: var(--wine);
  padding: 10px 14px;
  background: rgba(122, 46, 46, 0.06);
  border: 1px solid rgba(122, 46, 46, 0.2);
  border-radius: 2px;
  margin-bottom: 14px;
  text-align: center;
  display: none;
}
.auth-modal__error.is-shown { display: block; }
.auth-modal__hint {
  font-size: 12px; color: var(--muted);
  padding: 10px 14px;
  background: rgba(200, 162, 74, 0.08);
  border: 1px solid rgba(200, 162, 74, 0.25);
  border-radius: 2px;
  margin-bottom: 14px;
  text-align: center;
  display: none;
}
.auth-modal__hint.is-shown { display: block; }

@keyframes authBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes authPanelIn {
  from { opacity: 0; transform: translate(-50%, -42%) scale(0.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-modal__backdrop, .auth-modal__panel { animation: none; opacity: 1; }
  .auth-modal__panel { transform: translate(-50%, -50%); }
}

/* =====================================================================
   AccountSheet, the signed-in account experience as a popup drawer.
   Right-side slide-in on desktop (max 560px), full-screen sheet on mobile.
   Replaces the retired /account page entirely.
   ===================================================================== */
#accountSheetRoot {
  position: fixed; inset: 0;
  z-index: 2350;
  display: none;
  pointer-events: none;
}
#accountSheetRoot.is-open { display: block; pointer-events: auto; }

.acct-sheet__backdrop {
  position: absolute; inset: 0;
  background: rgba(26, 22, 20, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  animation: acctSheetBackdropIn 0.24s var(--ease) forwards;
}

.acct-sheet__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(560px, 100vw);
  background: var(--cream);
  box-shadow: -40px 0 90px -20px rgba(26,22,20,0.45);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  animation: acctSheetSlideIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) 0.06s forwards;
  overflow: hidden;
}

.acct-sheet__head {
  padding: 28px 28px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--cream-2);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.acct-sheet__id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.acct-sheet__avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--bronze), var(--wine));
  color: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 24px; font-weight: 500;
  overflow: hidden; flex-shrink: 0;
}
.acct-sheet__avatar img { width: 100%; height: 100%; object-fit: cover; }
.acct-sheet__id__meta { min-width: 0; }
.acct-sheet__id__eyebrow { font-size: 10px; letter-spacing: 0.32em; color: var(--bronze); text-transform: uppercase; }
.acct-sheet__id__name { font-family: var(--font-serif); font-size: 22px; font-weight: 500; margin-top: 2px; letter-spacing: -0.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-sheet__id__email { font-size: 12px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-sheet__close {
  width: 38px; height: 38px; border-radius: 50%;
  background: transparent; border: 1px solid transparent;
  color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.2s ease; flex-shrink: 0;
}
.acct-sheet__close:hover { color: var(--ink); border-color: var(--border); background: var(--cream); }

.acct-sheet__tabs {
  display: flex; gap: 2px;
  padding: 8px 12px;
  background: var(--cream-2);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.acct-sheet__tabs::-webkit-scrollbar { display: none; }
.acct-sheet__tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: transparent; border: none;
  color: var(--muted);
  font-family: inherit; font-size: 12px; letter-spacing: 0.06em; font-weight: 500;
  cursor: pointer;
  border-radius: 999px;
  transition: all 0.18s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.acct-sheet__tab:hover { color: var(--ink); background: var(--cream); }
.acct-sheet__tab.is-on { background: var(--ink); color: var(--cream); }
.acct-sheet__tab__icon { display: inline-flex; }
.acct-sheet__tab__badge {
  background: var(--bronze); color: var(--ink);
  padding: 1px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
}
.acct-sheet__tab.is-on .acct-sheet__tab__badge { background: var(--cream); color: var(--ink); }

.acct-sheet__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px 32px;
  background: var(--cream);
}
.acct-sheet__loading { padding: 80px 20px; text-align: center; color: var(--muted); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; }

.acct-sheet__foot {
  padding: 14px 28px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--cream-2);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.acct-sheet__foot__link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px;
  background: var(--ink); color: var(--gold);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}
.acct-sheet__foot__link:hover { background: var(--bronze); color: var(--ink); }
.acct-sheet__foot__signout {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: transparent; border: none;
  color: var(--wine); cursor: pointer;
  font-family: inherit; font-size: 12px; letter-spacing: 0.06em; font-weight: 500;
  transition: color 0.2s;
  margin-left: auto;
}
.acct-sheet__foot__signout:hover { color: #a04040; }

/* Hello card */
.acct-sheet__hello {
  padding: 20px 22px;
  background: linear-gradient(135deg, var(--cream-2), var(--cream));
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.acct-sheet__hello::after {
  content: '✦';
  position: absolute; top: 12px; right: 16px;
  color: var(--bronze); opacity: 0.4;
  font-size: 26px;
}
.acct-sheet__hello__eyebrow { font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--bronze); }
.acct-sheet__hello__title { font-family: var(--font-serif); font-size: 28px; font-weight: 500; margin: 6px 0 2px; letter-spacing: -0.01em; }
.acct-sheet__hello__sub { font-size: 12px; color: var(--muted); margin: 0; }

/* Stats grid */
.acct-sheet__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.acct-sheet__stat {
  padding: 16px 18px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.acct-sheet__stat:hover { border-color: var(--bronze); transform: translateY(-1px); }
.acct-sheet__stat__label { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.acct-sheet__stat__value { font-family: var(--font-serif); font-size: 26px; font-weight: 500; margin-top: 6px; letter-spacing: -0.01em; }
.acct-sheet__stat__foot { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* Panel block */
.acct-sheet__panel-block {
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--cream);
  margin-bottom: 20px;
}
.acct-sheet__panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.acct-sheet__panel-title { font-family: var(--font-serif); font-size: 18px; font-weight: 500; }
.acct-sheet__panel-sub { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.acct-sheet__panel-body { padding: 4px 0; }
.acct-sheet__link { background: none; border: none; color: var(--ink); font-family: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border); cursor: pointer; padding: 0; }
.acct-sheet__link:hover { text-decoration-color: var(--ink); }

/* Order row */
.acct-sheet__order {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.acct-sheet__order:last-child { border-bottom: 0; }
.acct-sheet__order.is-clickable { cursor: pointer; transition: background 0.15s ease; }
.acct-sheet__order.is-clickable:hover { background: var(--cream-2); }
.acct-sheet__order__thumbs { display: flex; gap: 3px; }
.acct-sheet__order__thumb { width: 30px; height: 40px; object-fit: cover; background: var(--cream-2); border-radius: 2px; }
.acct-sheet__order__info { min-width: 0; }
.acct-sheet__order__id { font-family: var(--font-serif); font-size: 14px; font-weight: 500; }
.acct-sheet__order__title { font-size: 13px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-sheet__order__meta { font-size: 11px; color: var(--muted); margin-top: 2px; letter-spacing: 0.02em; }
.acct-sheet__order__right { text-align: right; }
.acct-sheet__order__price { font-weight: 600; font-size: 14px; }
.acct-sheet__order__status {
  display: inline-block; margin-top: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
}
.acct-sheet__order__status--pending   { background: #f3ebd7; color: #8a6a2a; }
.acct-sheet__order__status--packing   { background: #e6d9c3; color: #6a4a20; }
.acct-sheet__order__status--shipped   { background: #cfe0d3; color: #2f5a3f; }
.acct-sheet__order__status--delivered { background: var(--ink); color: var(--gold); }
.acct-sheet__order__status--cancelled,
.acct-sheet__order__status--refunded  { background: #efd6d6; color: var(--wine); }

/* Order detail (inline expand) */
.acct-sheet__order-detail {
  padding: 18px 20px 22px;
  background: var(--cream-2);
  border-bottom: 1px solid var(--border);
}
.acct-sheet__order-detail__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.acct-sheet__order-line { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); align-items: center; }
.acct-sheet__order-line:last-child { border-bottom: 0; }
.acct-sheet__order-line img { width: 44px; height: 58px; object-fit: cover; background: var(--cream); border-radius: 2px; }
.acct-sheet__order-line__name { font-size: 12.5px; font-weight: 500; }
.acct-sheet__order-line__meta { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.acct-sheet__order-line__price { font-size: 13px; font-weight: 600; }
.acct-sheet__timeline { margin-top: 14px; }
.acct-sheet__timeline__label { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.acct-sheet__timeline__row { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; font-size: 12px; }
.acct-sheet__timeline__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bronze); }
.acct-sheet__timeline__step { text-transform: capitalize; }
.acct-sheet__timeline__when { font-size: 10.5px; color: var(--muted); }
.acct-sheet__summary { background: var(--cream); border: 1px solid var(--border); border-radius: 4px; padding: 14px; }
.acct-sheet__summary__title { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.acct-sheet__summary__row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 4px 0; }
.acct-sheet__summary__row--total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; font-weight: 600; font-size: 14px; }
.acct-sheet__ship { margin-top: 14px; background: var(--cream); border: 1px solid var(--border); border-radius: 4px; padding: 14px; font-size: 12px; line-height: 1.5; }
.acct-sheet__ship__title { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.acct-sheet__ship__cta { margin-top: 12px; padding: 12px 18px; font-size: 11px; }

/* Wishlist */
.acct-sheet__wish-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.acct-sheet__wish {
  position: relative; background: var(--cream); border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.acct-sheet__wish:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -14px rgba(26,22,20,0.2); }
.acct-sheet__wish__x {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.9); color: var(--ink); border: none;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s ease;
}
.acct-sheet__wish__x:hover { background: var(--wine); color: var(--cream); }
.acct-sheet__wish__media { display: block; aspect-ratio: 3/4; background: var(--cream-2); }
.acct-sheet__wish__media img { width: 100%; height: 100%; object-fit: cover; }
.acct-sheet__wish__info { padding: 12px 14px 14px; }
.acct-sheet__wish__name { font-size: 13px; font-weight: 500; }
.acct-sheet__wish__price { font-size: 12px; color: var(--muted); margin-top: 3px; }
.acct-sheet__wish__cta {
  display: inline-block; margin-top: 8px;
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border);
}
.acct-sheet__wish__cta:hover { text-decoration-color: var(--ink); }

/* Addresses */
.acct-sheet__addr-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 6px; }
.acct-sheet__addr {
  position: relative; background: var(--cream); border: 1px solid var(--border); border-radius: 4px;
  padding: 16px 18px;
  transition: border-color 0.2s ease;
}
.acct-sheet__addr:hover { border-color: var(--muted); }
.acct-sheet__addr--default { border-color: var(--bronze); }
.acct-sheet__addr__badge { position: absolute; top: 10px; right: 12px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bronze); font-weight: 600; }
.acct-sheet__addr__label { font-family: var(--font-serif); font-size: 16px; font-weight: 500; margin-bottom: 8px; }
.acct-sheet__addr__lines { font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.acct-sheet__addr__actions { display: flex; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.acct-sheet__addr__btn {
  background: none; border: none; padding: 0;
  font-family: inherit; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-2); cursor: pointer;
  transition: color 0.15s;
}
.acct-sheet__addr__btn:hover { color: var(--ink); }
.acct-sheet__addr__btn--danger { color: var(--wine); }
.acct-sheet__addr__btn--danger:hover { color: #a04040; }
.acct-sheet__addr--add {
  border: 1px dashed var(--border);
  background: transparent;
  padding: 22px 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--muted);
  font-family: inherit; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}
.acct-sheet__addr--add:hover { border-color: var(--ink); color: var(--ink); background: var(--cream); }

/* Nested address modal (sits on top of the sheet) */
.acct-sheet-addr__modal {
  position: fixed; inset: 0; z-index: 2500;
  display: none;
}
.acct-sheet-addr__modal.is-open { display: block; }
.acct-sheet-addr__backdrop { position: absolute; inset: 0; background: rgba(26,22,20,0.6); backdrop-filter: blur(4px); animation: acctSheetBackdropIn 0.2s ease forwards; }
.acct-sheet-addr__panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.98);
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow: hidden;
  background: var(--cream); border-radius: 4px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.4);
  display: flex; flex-direction: column;
  animation: acctSheetPopIn 0.28s var(--ease) forwards;
}
.acct-sheet-addr__head { padding: 20px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.acct-sheet-addr__title { font-family: var(--font-serif); font-size: 22px; font-weight: 500; }
.acct-sheet-addr__x { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--cream); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s; }
.acct-sheet-addr__x:hover { border-color: var(--ink); color: var(--ink); }
.acct-sheet-addr__body { padding: 20px 22px; overflow-y: auto; flex: 1; }
.acct-sheet-addr__foot { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; background: var(--cream-2); }
.acct-sheet-addr__foot .btn { padding: 12px 22px; font-size: 11px; }
.acct-sheet-addr__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acct-sheet-addr__field { margin-bottom: 14px; }
.acct-sheet-addr__field--full { grid-column: 1 / -1; }
.acct-sheet-addr__field label { display: block; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.acct-sheet-addr__field input,
.acct-sheet-addr__field select { width: 100%; padding: 11px 14px; border: 1px solid var(--border); background: var(--cream); font-family: inherit; font-size: 14px; box-sizing: border-box; transition: border-color 0.15s; border-radius: 2px; }
.acct-sheet-addr__field input:focus,
.acct-sheet-addr__field select:focus { outline: none; border-color: var(--bronze); background: #fff; }
.acct-sheet-addr__checkbox { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--cream-2); border: 1px solid var(--border); border-radius: 2px; font-size: 13px; cursor: pointer; }
.acct-sheet-addr__checkbox input { width: 16px; height: 16px; }

/* Profile form */
.acct-sheet__profile { display: flex; flex-direction: column; gap: 14px; }
.acct-sheet__field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acct-sheet__field { display: flex; flex-direction: column; gap: 6px; }
.acct-sheet__field__label { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.acct-sheet__field input,
.acct-sheet__field textarea,
.acct-sheet__field select { padding: 11px 14px; border: 1px solid var(--border); background: var(--cream); font-family: inherit; font-size: 14px; transition: border-color 0.15s; border-radius: 2px; box-sizing: border-box; width: 100%; }
.acct-sheet__field input:focus,
.acct-sheet__field textarea:focus,
.acct-sheet__field select:focus { outline: none; border-color: var(--bronze); background: #fff; }
.acct-sheet__field input:disabled { background: var(--cream-2); color: var(--muted); }
.acct-sheet__size-picker { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.acct-sheet__size-chip {
  padding: 8px 16px; border-radius: 999px;
  background: var(--cream-2); border: 1px solid var(--border);
  color: var(--ink-2);
  font-family: inherit; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  cursor: pointer; transition: all 0.15s ease;
}
.acct-sheet__size-chip:hover { border-color: var(--ink); }
.acct-sheet__size-chip.is-on { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.acct-sheet__checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink-2); cursor: pointer; padding: 6px 0; }
.acct-sheet__checkbox input { margin-top: 3px; width: 16px; height: 16px; }

.acct-sheet__danger {
  margin-top: 26px; padding: 18px 20px;
  border: 1px solid rgba(122, 46, 46, 0.25);
  border-left: 3px solid var(--wine);
  border-radius: 4px;
  background: rgba(122, 46, 46, 0.03);
}
.acct-sheet__danger__title { font-family: var(--font-serif); font-size: 16px; font-weight: 500; color: var(--wine); margin-bottom: 6px; }
.acct-sheet__danger p { font-size: 12.5px; color: var(--ink-2); margin: 0 0 12px; line-height: 1.5; }

/* Empty state */
.acct-sheet__empty {
  padding: 50px 20px 40px; text-align: center; color: var(--muted); font-size: 13px;
}
.acct-sheet__empty__eyebrow {
  font-family: var(--font-script); color: var(--bronze);
  font-size: 30px; margin-bottom: 8px;
}
.acct-sheet__empty h4 { font-family: var(--font-serif); font-size: 22px; font-weight: 500; color: var(--ink); margin: 6px 0 8px; }
.acct-sheet__empty p { margin: 0 0 18px; }

/* Animations */
@keyframes acctSheetBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes acctSheetSlideIn    { to { transform: translateX(0); } }
@keyframes acctSheetPopIn      { to { transform: translate(-50%, -50%) scale(1); } }

/* Mobile: full-screen sheet */
@media (max-width: 640px) {
  .acct-sheet__panel {
    width: 100vw;
    top: 0; right: 0; bottom: 0; left: 0;
    max-width: 100%;
  }
  .acct-sheet__head { padding: calc(20px + env(safe-area-inset-top)) 20px 16px; }
  .acct-sheet__id__name { font-size: 20px; }
  .acct-sheet__avatar { width: 48px; height: 48px; font-size: 20px; }
  .acct-sheet__tabs { padding: 6px 8px; }
  .acct-sheet__body { padding: 20px 18px 24px; }
  .acct-sheet__hello { padding: 18px; }
  .acct-sheet__hello__title { font-size: 24px; }
  .acct-sheet__stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .acct-sheet__stat { padding: 14px; }
  .acct-sheet__stat__value { font-size: 22px; }
  .acct-sheet__wish-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .acct-sheet__order-detail__grid { grid-template-columns: 1fr; gap: 14px; }
  .acct-sheet__foot { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .acct-sheet-addr__panel {
    top: auto; bottom: 0; left: 0; transform: translateY(100%);
    width: 100vw; max-width: 100vw;
    border-radius: 18px 18px 0 0;
    animation: acctSheetUp 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    padding-bottom: env(safe-area-inset-bottom);
  }
  @keyframes acctSheetUp { to { transform: translateY(0); } }
  .acct-sheet-addr__row { grid-template-columns: 1fr; }
  .acct-sheet__field-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .acct-sheet__backdrop, .acct-sheet__panel, .acct-sheet-addr__panel { animation: none; opacity: 1; transform: none; }
  .acct-sheet-addr__panel { transform: translate(-50%, -50%); }
}

/* ==========================================================================
   NUMERICS
   Same rule as the console: money and counts use the sans stack with tabular
   lining figures. Cormorant's old-style figures ride at different heights and
   drop descenders, which looks like handwriting next to a price.
   ========================================================================== */
.cart-summary__row--total,
.mobile-buy-bar__price-value,
.acct-sheet__stat__value,
.acct-sheet__order__id,
.acct-sheet__order__amt,
.acct-sheet__order__price,
.acct-sheet__order-line__price,
.acct-sheet__summary__row,
.acct-sheet__summary__row--total,
.acct-sheet__best-row__num,
.acct-order__price,
.acct-order-detail__summary > div.total,
.acct-wish__price {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.cart-summary__row--total { font-weight: 600; letter-spacing: -0.01em; }
.mobile-buy-bar__price-value { font-weight: 600; letter-spacing: -0.01em; }
.acct-sheet__stat__value { font-weight: 600; letter-spacing: -0.02em; }
.acct-sheet__order__id { font-weight: 600; letter-spacing: 0; }
.acct-sheet__summary__row--total { font-weight: 700; }

/* Product prices already use the sans stack, but not tabular figures, so a
   grid of cards had prices that failed to align column to column. */
.product-card__price,
.product-detail__price,
.cart-item__price,
.cart-line__price,
.order-item__price,
.search-overlay__result__price,
.radio-card__price {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* IG band without the tile grid: the intro is the whole section now, so it
   loses the 48px gap that used to separate it from the photos. */
.ig-feed--bare { padding: 72px 0; }
.ig-feed--bare .ig-feed__intro { margin-bottom: 0; }

/* ==========================================================================
   AccountSheet: centered popup
   Was a right-side drawer. Now it opens in the middle of the screen and
   animates both directions off a single .is-open class, so closing is as
   smooth as opening. Only transform and opacity animate, so the whole thing
   stays on the compositor.
   ========================================================================== */
#accountSheetRoot { display: block; visibility: hidden; }
#accountSheetRoot.is-open,
#accountSheetRoot.is-closing { visibility: visible; }
#accountSheetRoot.is-open { pointer-events: auto; }
#accountSheetRoot.is-closing { pointer-events: none; }

/* Backdrop fades independently of the panel. */
.acct-sheet__backdrop {
  animation: none;
  opacity: 0;
  transition: opacity 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
#accountSheetRoot.is-open .acct-sheet__backdrop { opacity: 1; }

/* Panel: centered, scales and lifts in. */
.acct-sheet__panel {
  --acct-pop-w: 560px;
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: var(--acct-pop-w);
  max-width: calc(100vw - 40px);
  height: auto;
  max-height: calc(100vh - 48px);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 32px 90px -24px rgba(26, 22, 20, 0.45),
              0 8px 24px -12px rgba(26, 22, 20, 0.25);
  animation: none;
  transform: translate(-50%, -50%) scale(0.965) translateY(10px);
  opacity: 0;
  transition:
    transform 0.42s cubic-bezier(0.32, 0.72, 0, 1),
    opacity   0.26s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform, opacity;
}
#accountSheetRoot.is-open .acct-sheet__panel {
  transform: translate(-50%, -50%) scale(1) translateY(0);
  opacity: 1;
}
/* Exit is a touch quicker than entry, which is what makes a dialog feel
   responsive rather than sluggish on the way out. */
#accountSheetRoot.is-closing .acct-sheet__panel {
  transition:
    transform 0.24s cubic-bezier(0.4, 0, 1, 1),
    opacity   0.2s  cubic-bezier(0.4, 0, 1, 1);
  transform: translate(-50%, -50%) scale(0.97) translateY(6px);
  opacity: 0;
}
#accountSheetRoot.is-closing .acct-sheet__backdrop { opacity: 0; }

/* Rounded corners mean the head and foot need their own radius clipping. */
.acct-sheet__head { border-radius: 16px 16px 0 0; }
.acct-sheet__foot { border-radius: 0 0 16px 16px; }

/* Tab cross-fade */
.acct-sheet__body {
  transition: opacity 0.16s ease;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.acct-sheet__body.is-swapping { opacity: 0; }

/* Tabs get a springier active state now that the panel is a dialog. */
.acct-sheet__tab {
  transition: background 0.22s cubic-bezier(0.32, 0.72, 0, 1),
              color 0.22s cubic-bezier(0.32, 0.72, 0, 1),
              transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
.acct-sheet__tab:active { transform: scale(0.97); }

/* Nested address modal sits above the popup and matches its motion. */
.acct-sheet-addr__panel {
  border-radius: 16px;
  box-shadow: 0 32px 90px -24px rgba(26, 22, 20, 0.5);
}

@media (max-width: 720px) {
  /* Phone: full-bleed sheet that rises from the bottom. Same class, same
     state machine, different geometry. */
  .acct-sheet__panel {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 92dvh;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
    transform: translate(0, 100%);
    transition: transform 0.44s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.2s linear;
    opacity: 1;
    padding-bottom: 0;
  }
  #accountSheetRoot.is-open .acct-sheet__panel { transform: translate(0, 0); }
  #accountSheetRoot.is-closing .acct-sheet__panel {
    transition: transform 0.26s cubic-bezier(0.4, 0, 1, 1), opacity 0.26s linear;
    transform: translate(0, 100%);
    opacity: 1;
  }
  .acct-sheet__head {
    border-radius: 20px 20px 0 0;
    padding-top: 20px;
    position: relative;
  }
  /* Grab handle, the affordance people expect on a bottom sheet. */
  .acct-sheet__head::before {
    content: '';
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    width: 40px; height: 4px;
    border-radius: 999px;
    background: var(--cream-3);
  }
  .acct-sheet__foot {
    border-radius: 0;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  /* Bigger touch targets throughout the sheet. */
  .acct-sheet__tab { padding: 11px 15px; }
  .acct-sheet__close { width: 42px; height: 42px; }
  .acct-sheet__addr__btn { padding: 6px 0; min-height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .acct-sheet__panel,
  .acct-sheet__backdrop,
  .acct-sheet__body,
  #accountSheetRoot.is-closing .acct-sheet__panel {
    transition: none !important;
    animation: none !important;
  }
  #accountSheetRoot.is-open .acct-sheet__panel { transform: translate(-50%, -50%); opacity: 1; }
}
/* Cap the popup height without min()+calc(), which this engine drops. */
@media (min-height: 860px) {
  .acct-sheet__panel { max-height: 760px; }
}

/* Above-the-fold elements are revealed synchronously on load; this kills their
   transition for that one frame so they appear settled rather than sliding up
   from nothing the instant the page paints. */
html.reveal-ready .reveal-instant {
  transition: none !important;
  animation: none !important;
}

/* Desktop sidebar header for the filter rail. Hidden inside the mobile sheet,
   which has its own titled header, so this used to double up. */
.filters__inline-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.filters__inline-head__title {
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
}
.filters__inline-head__clear {
  font-size: 12px; color: var(--muted); cursor: pointer;
  background: none; border: 0; padding: 0; font-family: inherit;
  text-decoration: underline; text-underline-offset: 3px;
}
.filters__inline-head__clear:hover { color: var(--ink); }
@media (max-width: 1000px) {
  .filters__inline-head { display: none; }
}

/* ==========================================================================
   "Pick a size" prompt
   Fires when Add to Bag is pressed with no size chosen. A toast alone was easy
   to miss, since on mobile the button sits well below the size row.
   ========================================================================== */
.size-pills--asking .size-pill:not(.size-pill--out) {
  animation: sizeNudge 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) 2;
  border-color: var(--ink);
  box-shadow: 0 0 0 0 rgba(26, 22, 20, 0.5);
}
/* Stagger so the row reads as a sweep across the sizes, not one block twitch. */
.size-pills--asking .size-pill__wrap:nth-child(1) .size-pill { animation-delay: 0s; }
.size-pills--asking .size-pill__wrap:nth-child(2) .size-pill { animation-delay: 0.06s; }
.size-pills--asking .size-pill__wrap:nth-child(3) .size-pill { animation-delay: 0.12s; }
.size-pills--asking .size-pill__wrap:nth-child(4) .size-pill { animation-delay: 0.18s; }
.size-pills--asking .size-pill__wrap:nth-child(n+5) .size-pill { animation-delay: 0.24s; }

@keyframes sizeNudge {
  0%        { transform: translateX(0);     box-shadow: 0 0 0 0 rgba(26, 22, 20, 0.45); }
  20%       { transform: translateX(-3px); }
  40%       { transform: translateX(3px);  }
  60%       { transform: translateX(-2px); }
  80%       { transform: translateX(2px);  }
  100%      { transform: translateX(0);     box-shadow: 0 0 0 9px rgba(26, 22, 20, 0); }
}

/* The "Select" label turns to the wine tone so the instruction is legible even
   if the motion is missed or reduced. */
#chosenSize.is-asking {
  color: var(--wine);
  font-weight: 600;
  animation: sizeLabelPulse 0.5s ease 2;
}
@keyframes sizeLabelPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .size-pills--asking .size-pill:not(.size-pill--out) {
    animation: none;
    border-color: var(--wine);
    box-shadow: 0 0 0 3px rgba(122, 46, 46, 0.16);
  }
  #chosenSize.is-asking { animation: none; }
}

/* ==========================================================================
   COLOUR FILTER
   Was a bare grid of 24 unlabelled dots, several of which were the same hex
   under different names. Now one labelled row per colour family, with a count.
   ========================================================================== */
.color-pills {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.color-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 8px;
  margin-left: -8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
  text-align: left;
  transition: background 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}
.color-chip:hover { background: var(--cream-2); }
.color-chip.active { border-color: var(--ink); background: var(--cream-2); color: var(--ink); font-weight: 600; }
.color-chip.disabled { opacity: 0.32; cursor: default; }
.color-chip.disabled:hover { background: transparent; }

.color-chip__dot {
  width: 20px; height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--c);
  /* Inset ring rather than a border, so pale colours still read as a disc
     without the outline changing the swatch's apparent size. */
  box-shadow: inset 0 0 0 1px rgba(26, 22, 20, 0.18);
  position: relative;
}
.color-chip.active .color-chip__dot {
  box-shadow: inset 0 0 0 1px rgba(26, 22, 20, 0.18), 0 0 0 2px var(--cream), 0 0 0 3.5px var(--ink);
}
.color-chip__label { flex: 1; min-width: 0; }
.color-chip__count {
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums lining-nums;
  flex-shrink: 0;
}
.color-chip.active .color-chip__count { color: var(--ink); }

/* Inside the mobile filter sheet the rows get the same 46px target as the
   other options. */
@media (max-width: 1000px) {
  .filters .color-chip { min-height: 46px; font-size: 15px; padding: 8px 10px; }
  .filters .color-chip__dot { width: 22px; height: 22px; }
}

/* ==========================================================================
   PRODUCT PHOTO CROPPING
   Every garment photo is roughly 2:3 (1024x1536). Most containers on the site
   are wider than that: 3/4 cards, 4/5 spotlight heroes. object-fit: cover then
   scales to width and throws the surplus height away from both ends, so a
   centred crop takes the model's head off the top. Anchoring at the top means
   the crop always comes off the hem instead.

   The two square-bracket cases below were explicitly set to `center`, which is
   the same as the default and was the direct cause on the shop grid and the
   spotlight hero.
   ========================================================================== */
.spotlight__hero img,
.spotlight__mini img,
.lookbook__card img,
.product-card__img,
.category-card__img,
.editorial__media img,
.aaliyah__media img,
.loved__scroll .product-card__img,
.search-overlay__result__img img,
.acct-sheet__wish__media img {
  object-position: 50% 0%;
  /* Hover zoom has to grow downward, or it re-centres and undoes the anchor. */
  transform-origin: 50% 0%;
}

/* ==========================================================================
   CURRENCY PICKER
   ========================================================================== */
.cur-wrap { position: relative; }
.cur-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: inherit;
  font-size: 11px; letter-spacing: 0.12em; font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cur-toggle:hover { border-color: var(--ink); background: var(--cream-2); }
.cur-toggle__code { letter-spacing: 0.1em; white-space: nowrap; }
.cur-toggle__caret { color: var(--muted); transition: transform 0.28s var(--ease); }
.cur-wrap:has(.cur-menu.open) .cur-toggle__caret { transform: rotate(180deg); }
.cur-wrap:has(.cur-menu.open) .cur-toggle { border-color: var(--ink); background: var(--cream-2); }

.cur-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 288px;
  /* The global `* { max-width: 100% }` resolves against the containing block,
     which for this absolutely positioned menu is the 88px toggle wrapper. That
     clamped a 288px menu down to 88px, so the override is required here. The
     narrow-screen cap lives in the media query below. */
  max-width: none;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 26px 60px -18px rgba(26,22,20,0.34), 0 4px 12px -6px rgba(26,22,20,0.16);
  z-index: 210;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top right;
  transition: opacity 0.24s var(--ease), transform 0.32s var(--ease), visibility 0s linear 0.32s;
}
.cur-menu.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition: opacity 0.24s var(--ease), transform 0.32s var(--ease), visibility 0s; }
.cur-menu__head { padding: 14px 16px 10px; border-bottom: 1px solid var(--border); }
.cur-menu__title { display: block; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--bronze); font-weight: 600; }
.cur-menu__sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.cur-menu__list { padding: 6px; max-height: 320px; overflow-y: auto; }

.cur-opt {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 9px 10px;
  background: transparent; border: 0; border-radius: 7px;
  font-family: inherit; text-align: left;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
  /* Each row eases in behind the one above it when the menu opens. */
  opacity: 0;
  transform: translateY(-6px);
}
.cur-menu.open .cur-opt {
  animation: curRowIn 0.34s var(--ease) forwards;
  animation-delay: calc(var(--i) * 32ms + 60ms);
}
@keyframes curRowIn { to { opacity: 1; transform: none; } }
.cur-opt:hover { background: var(--cream-2); color: var(--ink); }
.cur-opt.is-on { background: var(--cream-2); color: var(--ink); }
.cur-opt__sym {
  width: 30px; height: 30px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--cream-2);
  border: 1px solid var(--border);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em;
  color: var(--ink-2);
}
.cur-opt.is-on .cur-opt__sym { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.cur-opt__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cur-opt__code { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; }
.cur-opt__label { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cur-opt.is-on .cur-opt__label { color: var(--ink-2); }
.cur-opt__tick { color: var(--ink); flex-shrink: 0; }
.cur-menu__foot {
  padding: 10px 16px 12px;
  border-top: 1px solid var(--border);
  font-size: 10.5px; color: var(--muted); letter-spacing: 0.02em;
}

/* Price flip when the currency changes. */
.price-amt { display: inline-block; }
.price-amt.is-flipping {
  animation: priceFlip 0.42s var(--ease);
  animation-delay: var(--d, 0ms);
}
@keyframes priceFlip {
  0%   { opacity: 1; transform: translateY(0)    rotateX(0); }
  45%  { opacity: 0; transform: translateY(-7px) rotateX(45deg); }
  55%  { opacity: 0; transform: translateY(7px)  rotateX(-45deg); }
  100% { opacity: 1; transform: translateY(0)    rotateX(0); }
}

@media (max-width: 900px) {
  /* The header is tight on phones, so the picker keeps the flag and code but
     loses the caret, and the menu anchors to the screen edge. */
  /* Currency stays in the header on phones. The right group is currency plus
     account, so both outer columns are pinned to the same width and the
     wordmark centres in what is left. Sized deliberately: a compact 40px pill
     plus an 8px gap plus the 38px account icon is 86, so 88 per side leaves
     179 for the wordmark at 375 wide. */
  .cur-toggle {
    padding: 6px 7px;
    gap: 2px;
    font-size: 10px;
    border-radius: 999px;
    flex-shrink: 0;
  }
  .cur-toggle__code { letter-spacing: 0.06em; }
  .cur-toggle__caret { width: 9px; height: 9px; margin-left: -1px; }
  .header__actions { gap: 8px; }
  .header__actions > * { flex-shrink: 0; }
  .cur-menu { width: calc(100vw - 24px); right: -8px; max-width: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .cur-menu, .cur-opt, .price-amt.is-flipping { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   WELCOME MODAL
   ========================================================================== */
#welcomeModal { position: fixed; inset: 0; z-index: 2300; }
.wm__backdrop {
  position: absolute; inset: 0;
  background: rgba(26,22,20,0.6);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity 0.42s var(--ease);
}
#welcomeModal.is-open .wm__backdrop { opacity: 1; }
#welcomeModal.is-closing .wm__backdrop { opacity: 0; transition-duration: 0.26s; }

.wm__card {
  position: absolute; left: 50%; top: 50%;
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--cream);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 40px 100px -26px rgba(26,22,20,0.5);
  transform: translate(-50%, -50%) scale(0.94) translateY(16px);
  opacity: 0;
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s var(--ease);
}
#welcomeModal.is-open .wm__card { transform: translate(-50%, -50%) scale(1) translateY(0); opacity: 1; }
#welcomeModal.is-closing .wm__card {
  transform: translate(-50%, -50%) scale(0.97) translateY(8px); opacity: 0;
  transition-duration: 0.26s, 0.22s;
}

.wm__media { position: relative; background: var(--cream-2); overflow: hidden; }
.wm__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%;
  transform: scale(1.06);
  transition: transform 1.4s var(--ease);
}
#welcomeModal.is-open .wm__media img { transform: scale(1); }

.wm__body { padding: 40px 36px; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; }
/* The copy lifts in behind the card, one line at a time. */
#welcomeModal.is-open .wm__body > * {
  animation: wmRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
#welcomeModal.is-open .wm__body > *:nth-child(1) { animation-delay: 0.16s; }
#welcomeModal.is-open .wm__body > *:nth-child(2) { animation-delay: 0.24s; }
#welcomeModal.is-open .wm__body > *:nth-child(3) { animation-delay: 0.32s; }
#welcomeModal.is-open .wm__body > *:nth-child(4) { animation-delay: 0.40s; }
#welcomeModal.is-open .wm__body > *:nth-child(5) { animation-delay: 0.46s; }
#welcomeModal.is-open .wm__body > *:nth-child(6) { animation-delay: 0.52s; }
@keyframes wmRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.wm__eyebrow { font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--bronze); font-weight: 600; }
.wm__title { font-family: var(--font-serif); font-size: clamp(32px, 4vw, 42px); font-weight: 400; line-height: 1.05; margin: 10px 0 12px; }
.wm__title .italic-accent { font-style: italic; color: var(--bronze); }
.wm__copy { font-size: 14px; color: var(--ink-2); line-height: 1.65; margin: 0 0 22px; }
.wm__form { display: flex; flex-direction: column; gap: 10px; }
.wm__form input {
  width: 100%; box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 2px;
  background: var(--cream); font-family: inherit; font-size: 14px;
  transition: border-color 0.2s ease;
}
.wm__form input:focus { outline: none; border-color: var(--ink); }
.wm__submit {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 22px;
  background: var(--ink); color: var(--cream);
  border: 1px solid var(--ink); border-radius: 2px;
  font-family: inherit; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
  cursor: pointer; transition: background 0.25s ease, color 0.25s ease;
}
.wm__submit:hover { background: transparent; color: var(--ink); }
.wm__submit:disabled { opacity: 0.6; cursor: default; }
.wm__submit--go { text-decoration: none; margin-top: 4px; }
.wm__err { font-size: 12px; color: var(--wine); margin-top: 10px; display: none; }
.wm__err.is-shown { display: block; }
.wm__skip {
  margin-top: 14px; padding: 6px 0;
  background: none; border: 0;
  font-family: inherit; font-size: 12px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border);
  cursor: pointer;
}
.wm__skip:hover { color: var(--ink); }

/* Two ways out, weighted differently. "Not right now" is the ordinary one and
   keeps its underline. "Don't show this again" is deliberately quieter, it is
   a permanent choice and should not be the easy accidental tap, but it is
   plainly there for anyone who has had enough of being asked. */
.wm__outs {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; margin-top: 12px;
}
.wm__outs .wm__skip { margin-top: 0; }
.wm__never {
  padding: 6px 8px;
  background: none; border: 0;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  opacity: 0.62;
  cursor: pointer;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.wm__never:hover, .wm__never:focus-visible { opacity: 1; color: var(--ink); }
.wm__never:focus-visible { outline: 1px solid var(--border); outline-offset: 2px; border-radius: 3px; }
.wm__x {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(245,240,232,0.9); color: var(--ink);
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s ease;
}
.wm__x:hover { background: var(--cream); }

/* Revealed code */
.wm__code {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px dashed var(--bronze); border-radius: 4px;
  background: var(--cream-2);
  cursor: pointer; font-family: inherit;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.wm__code:hover { background: var(--cream); border-color: var(--ink); }
.wm__code.is-copied { border-color: var(--ink); border-style: solid; }
.wm__code__value {
  font-size: 24px; font-weight: 700; letter-spacing: 0.22em; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.wm__code__hint { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 720px) {
  /* One column on phones, with the photo as a shallow banner so the form and
     its button both stay above the fold. */
  .wm__card { grid-template-columns: 1fr; width: calc(100vw - 24px); max-height: calc(100dvh - 32px); }
  .wm__media { height: 168px; }
  .wm__body { padding: 26px 22px 28px; }
  .wm__title { font-size: 30px; }
  .wm__copy { font-size: 13.5px; margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .wm__card, .wm__backdrop, .wm__media img, #welcomeModal.is-open .wm__body > * {
    transition: none !important; animation: none !important;
  }
  #welcomeModal.is-open .wm__card { transform: translate(-50%, -50%); opacity: 1; }
}

/* ==========================================================================
   SCROLL CONTAINMENT
   Without this, reaching the end of a scrollable popover hands the remaining
   scroll to the page behind it, so the page creeps away underneath an open
   menu or sheet. `contain` stops the chain at the element's own boundary.
   ========================================================================== */
.cur-menu__list,
.wm__body,
.cart-drawer__body,
.auth-modal__panel,
.acct-modal__panel,
.acct-sheet__body,
.acct-sheet-addr__body,
.search-overlay__body,
.account-menu {
  overscroll-behavior: contain;
}

/* ==========================================================================
   CHECKOUT
   ========================================================================== */
/* A fact the shopper has already given us, stated rather than re-asked. */
.checkout-known {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--cream-2);
  padding: 14px 16px;
  margin-bottom: 8px;
}
.checkout-known__row { display: flex; align-items: center; gap: 12px; }
.checkout-known__row > svg { color: var(--bronze); flex-shrink: 0; }
.checkout-known__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.checkout-known__label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.checkout-known__value { font-size: 14.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checkout-known__edit {
  flex-shrink: 0; background: none; border: 0; padding: 6px 2px;
  font-family: inherit; font-size: 12.5px; color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border);
  cursor: pointer; min-height: 32px;
}
.checkout-known__edit:hover { color: var(--ink); text-decoration-color: var(--ink); }

.checkout-pickup {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--border); border-left: 3px solid var(--bronze);
  border-radius: 4px;
  background: var(--cream-2);
}
.checkout-pickup > svg { color: var(--bronze); flex-shrink: 0; margin-top: 2px; }
.checkout-pickup__title { font-size: 15px; font-weight: 600; }
.checkout-pickup__sub { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin-top: 4px; }

.form-field__help { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.checkout-optin {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; letter-spacing: 0.02em; text-transform: none; font-weight: 400;
  cursor: pointer; min-height: 40px;
}
.checkout-optin input { width: 18px; height: 18px; flex-shrink: 0; }

/* Delivery rate table used by the product page accordion */
.delivery-rates { list-style: none; padding: 0; margin: 12px 0; }
.delivery-rates li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.delivery-rates li:last-child { border-bottom: 0; }
.delivery-rates li > span:last-child { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.delivery-final { font-size: 12.5px; color: var(--muted); margin-top: 10px; }

@media (max-width: 900px) {
  /* Checkout on a phone: full-width controls, bigger targets, and the summary
     moved above the form so the total is visible before committing to typing. */
  .checkout-page { display: flex; flex-direction: column; gap: 0; padding: 0 16px 40px; }
  .checkout-section { padding: 22px 0; }
  .checkout-section__title { font-size: 15px; }
  .form-grid { grid-template-columns: 1fr; gap: 14px; }
  .form-field--half, .form-field { grid-column: 1 / -1; }
  .checkout-page input,
  .checkout-page select {
    /* 16px keeps iOS Safari from zooming the viewport on focus. */
    font-size: 16px;
    padding: 14px 15px;
    min-height: 50px;
  }
  .radio-group { grid-template-columns: 1fr !important; gap: 8px !important; }
  .radio-card { min-height: 62px; padding: 14px 16px; }
  .checkout-known { padding: 13px 14px; }
  .checkout-known__value { font-size: 14px; }
  .checkout-pickup { padding: 15px 16px; }
  .checkout-summary { position: static; margin-bottom: 20px; }
  .checkout-page .btn-block,
  .checkout-page button[type=submit] { min-height: 54px; font-size: 12px; }
}

/* Currency row inside the mobile menu, replacing the header pill on phones. */
.mobile-menu__currency {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.mobile-menu__currency__label {
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.mobile-menu__currency__opts { display: flex; gap: 5px; }
.mobile-menu__cur {
  padding: 8px 11px;
  border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--ink-2);
  font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  cursor: pointer; min-height: 36px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.mobile-menu__cur.is-on { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* Payment method explainer. Was three copies of the same inline style.
   The reserved height stops the page reflowing when the copy is swapped: the
   transfer note runs a line longer than the other two, and without this the
   content below shifted every time the method changed. */
#paymentDetail { min-height: 126px; }
.checkout-paynote {
  min-height: 126px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 18px 20px;
  background: var(--cream-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-2);
}
/* Exactly one flex item, so the copy flows as normal inline text and <strong>
   stays inline instead of becoming its own column. */
.checkout-paynote > p { margin: 0; }

/* Featured piece in the mobile menu, filling the space the nav used to leave
   empty between the links and the footer. */
.mobile-menu__feature {
  display: flex; align-items: center; gap: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--cream-2);
  color: var(--ink);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.mobile-menu__feature:active { transform: scale(0.99); border-color: var(--ink); }
.mobile-menu__feature__media {
  width: 62px; height: 78px; flex-shrink: 0;
  border-radius: 4px; overflow: hidden; background: var(--cream-3);
}
.mobile-menu__feature__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; display: block;
}
.mobile-menu__feature__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mobile-menu__feature__eyebrow {
  font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--bronze); font-weight: 600;
}
.mobile-menu__feature__name {
  font-family: var(--font-serif); font-size: 17px; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mobile-menu__feature__price {
  font-size: 13px; color: var(--ink-2); font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}
.mobile-menu__feature__go { color: var(--muted); flex-shrink: 0; }

/* Editable name fields revealed behind the Change affordance. */
.checkout-known__fields[hidden] { display: none; }
.checkout-known__fields { padding-top: 4px; }

/* Scrim behind the mobile menu. The exposed page used to be inert, so the one
   instinct people have with a side panel, tapping the page to dismiss it, did
   nothing. It also dims the page so the panel reads as the active layer. */
.mobile-menu__scrim {
  position: fixed;
  inset: 0;
  z-index: 399;                       /* directly under .mobile-menu at 400 */
  background: rgba(26, 22, 20, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.42s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.42s;
}
.mobile-menu__scrim.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.42s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
}
/* The panel is dragged directly during a swipe, so it must not animate then;
   toggleMobileMenu clears the inline transition on release. */
.mobile-menu { touch-action: pan-y; }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .mobile-menu__scrim { transition: none !important; }
}

/* Signed-in variant of the welcome offer: the address is already known, so it
   is stated rather than asked for. */
.wm__known {
  padding: 13px 16px;
  background: var(--cream-2);
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 13.5px;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.wm__known strong { color: var(--ink); font-weight: 600; }

/* =====================================================
   Promo codes, bag + checkout
   The welcome popup has offered 10% off since launch with nowhere to
   redeem it. These are the controls that finally cash it in.
   ===================================================== */
.checkout-promo { margin-top: 18px; }

.promo-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 0 8px 0 14px;
  height: 50px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.promo-toggle:hover { border-color: var(--ink); background: var(--cream-2); }
.promo-toggle:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(184,148,106,0.28); }
.promo-toggle.is-open { border-color: var(--ink); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.promo-toggle__label { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.promo-toggle__label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.promo-toggle__tag { width: 16px; height: 16px; color: var(--bronze); flex-shrink: 0; }

/* The chevron sits in its own tinted well, the visual shorthand for a menu
   that opens, so it reads as pressable rather than as a label. */
.promo-toggle__chev {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 3px;
  background: rgba(26, 22, 20, 0.06);
  color: var(--ink);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease;
}
.promo-toggle:hover .promo-toggle__chev { background: rgba(26, 22, 20, 0.11); }
.promo-toggle.is-open .promo-toggle__chev { transform: rotate(180deg); }

/* Reads as one control with the panel it opens. */
.promo-toggle.is-open + .promo-body {
  margin-top: 0;
  border: 1px solid var(--ink);
  border-top: none;
  border-radius: 0 0 4px 4px;
  padding: 14px;
}

.promo-body { margin-top: 12px; }

/* The shopper's own codes, offered rather than left to be remembered. */
.promo-mine {
  padding: 14px;
  border: 1px solid var(--border);
  border-left: 2px solid var(--bronze);
  border-radius: 4px;
  background: var(--cream-2);
  margin-bottom: 12px;
}
.promo-mine__label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bronze);
  font-weight: 500;
  margin-bottom: 9px;
}
.promo-mine__row { display: flex; gap: 8px; }
.promo-select {
  flex: 1; min-width: 0;
  height: 42px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--cream);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.04em;
  /* Native arrow is inconsistent across platforms, so draw our own. */
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6259' stroke-width='1.6'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px;
}
.promo-select:focus { outline: none; border-color: var(--ink); }
.promo-mine__row button,
.promo-entry button {
  flex-shrink: 0;
  height: 42px;
  padding: 0 18px;
  background: var(--ink);
  color: var(--cream);
  border: none;
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.promo-mine__row button:hover,
.promo-entry button:hover { opacity: 0.85; }
.promo-mine__hint { margin-top: 8px; font-size: 11.5px; color: var(--muted); }

.promo-entry { display: flex; gap: 8px; }
.promo-entry input {
  flex: 1; min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--cream);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.promo-entry input::placeholder { letter-spacing: 0.04em; text-transform: none; color: var(--muted); }
.promo-entry input:focus { outline: none; border-color: var(--ink); }

.promo-msg { margin-top: 9px; font-size: 12.5px; color: var(--wine); }
.promo-msg.is-ok { color: var(--bronze); }

/* Applied state, shown in place of the entry controls. */
.promo-applied {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--bronze);
  border-radius: 4px;
  background: rgba(184, 148, 106, 0.09);
}
.promo-applied__code {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.promo-applied__save {
  font-size: 12px;
  color: var(--bronze);
  margin-top: 2px;
  font-variant-numeric: tabular-nums lining-nums;
}
.promo-applied__remove {
  flex-shrink: 0;
  background: none; border: none;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  padding: 6px 2px;
  transition: color 0.2s ease;
}
.promo-applied__remove:hover { color: var(--wine); }

/* Bag page offers the codes as chips, there is no panel to open there. */
.promo-mine__chip {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 10px;
  margin-top: 7px;
  padding: 10px 12px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.promo-mine__chip:hover { border-color: var(--ink); background: var(--cream-2); }
.promo-mine__use { font-size: 10px; letter-spacing: 0.2em; color: var(--bronze); }

@media (max-width: 560px) {
  /* Full-width targets, and 16px inputs so iOS does not zoom the page on focus. */
  .promo-entry, .promo-mine__row { flex-wrap: wrap; }
  .promo-entry input, .promo-select { flex: 1 1 100%; font-size: 16px; }
  .promo-entry button, .promo-mine__row button { flex: 1 1 100%; }
}

/* The promo panel swaps its contents when a code goes on or comes off. A short
   fade makes that read as a change rather than a flicker. Scroll position is
   pinned in JS, so nothing moves under the tap. */
.promo-applied,
.checkout-promo .promo-toggle { animation: promoIn 0.22s ease both; }
@keyframes promoIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-applied,
  .checkout-promo .promo-toggle { animation: none; }
}

/* Place Order now lives under the order summary, so the total being agreed to
   is on screen beside the button that commits to it. */
.checkout-place { margin-top: 20px; }
.checkout-terms {
  font-size: 12px;
  color: var(--muted);
  margin-top: 16px;
  text-align: center;
  line-height: 1.6;
}

/* Count of codes the shopper holds. A badge fits where the words did not. */
.promo-toggle__count {
  flex-shrink: 0;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--bronze);
  color: var(--cream);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
}

/* =====================================================
   Order confirmation, WhatsApp handoff
   Every payment method needs Aaliyah to follow up, so sending the receipt
   is the real last step of the order, not an afterthought. It is styled
   as the primary action on the page.
   ===================================================== */
.ty-wa {
  max-width: 420px;
  margin: 0 auto;
  animation: tyWaIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes tyWaIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.ty-wa__status {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
  display: inline-flex; align-items: baseline; gap: 2px;
}
.ty-wa__dots { display: inline-flex; gap: 3px; margin-left: 3px; }
.ty-wa__dots i {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--bronze);
  animation: tyDot 1.2s ease-in-out infinite;
}
.ty-wa__dots i:nth-child(2) { animation-delay: 0.16s; }
.ty-wa__dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes tyDot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-2px); }
}

.ty-wa__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  /* WhatsApp's own green, so the button is recognised before it is read. */
  background: #25D366;
  color: #0b2e18;
  border: none;
}
.ty-wa__btn:hover { background: #1eb856; color: #0b2e18; }
.ty-wa__btn svg { width: 19px; height: 19px; fill: currentColor; flex-shrink: 0; }
.ty-wa__note { font-size: 12.5px; color: var(--muted); margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .ty-wa { animation: none; }
  .ty-wa__dots i { animation: none; opacity: 0.5; }
}

/* =====================================================
   Currency, storefront additions
   ===================================================== */

/* On a receipt the money is settled, so the control states the currency
   instead of offering to change it. */
.cur-toggle--locked {
  cursor: default;
  opacity: 0.75;
  gap: 5px;
}
.cur-toggle--locked svg { opacity: 0.7; }

/* Each option carries what TT$100 comes to, so picking an unfamiliar code is
   an informed choice rather than a guess. */
.cur-opt__rate {
  margin-left: auto;
  padding-left: 10px;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
}
.cur-opt__rate span { display: block; font-size: 9.5px; opacity: 0.7; letter-spacing: 0.04em; }
.cur-opt.is-on .cur-opt__rate { color: var(--bronze); }

/* Stated at checkout only while a converted price is showing, so it is out of
   the way the rest of the time. */
.checkout-fx {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  padding: 11px 13px;
  border-left: 2px solid var(--bronze);
  background: rgba(184, 148, 106, 0.09);
  border-radius: 3px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
  animation: fxIn 0.3s ease both;
}
.checkout-fx svg { flex-shrink: 0; margin-top: 2px; color: var(--bronze); }
.checkout-fx strong { font-variant-numeric: tabular-nums lining-nums; }
@keyframes fxIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .checkout-fx { animation: none; } }

/* =====================================================
   Order tracking
   Checkout takes guest orders, so most customers have no account to
   look this up from. Centred modal, same as the other account flows.
   ===================================================== */
.track {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s ease;
}
.track.is-open { opacity: 1; pointer-events: auto; }
.track__backdrop { position: absolute; inset: 0; background: rgba(26, 22, 20, 0.55); backdrop-filter: blur(3px); }
.track__card {
  position: relative;
  width: 100%; max-width: 430px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--cream);
  border-radius: 6px;
  padding: 36px 30px 30px;
  box-shadow: 0 40px 90px -30px rgba(26, 22, 20, 0.5);
  transform: translateY(10px) scale(0.985);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.track.is-open .track__card { transform: none; }
.track__x {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: none; border: 0; color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.track__x:hover { background: var(--cream-2); color: var(--ink); }

.track__eyebrow {
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--bronze); font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
}
.track__title { font-family: var(--font-serif); font-size: 30px; font-weight: 400; margin: 8px 0 10px; line-height: 1.15; }
.track__copy { font-size: 13.5px; color: var(--muted); line-height: 1.65; margin-bottom: 20px; }
.track__copy--soft { font-size: 12px; opacity: 0.8; margin-bottom: 14px; }

.track__form { display: flex; flex-direction: column; gap: 14px; }
.track__field { display: flex; flex-direction: column; gap: 6px; }
.track__field span { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.track__field input {
  height: 46px; padding: 0 13px;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--cream-2);
  font-family: var(--font-sans); font-size: 14px; color: var(--ink);
}
.track__field input:focus { outline: none; border-color: var(--ink); }
.track__submit {
  height: 48px; margin-top: 4px;
  background: var(--ink); color: var(--cream);
  border: 0; border-radius: 3px; cursor: pointer;
  font-family: var(--font-sans); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  transition: opacity 0.2s ease;
}
.track__submit:hover { opacity: 0.88; }
.track__submit:disabled { opacity: 0.6; cursor: default; }
.track__err { margin-top: 12px; font-size: 12.5px; color: var(--wine); display: none; line-height: 1.55; }
.track__err.is-shown { display: block; }

/* The steps the shop actually moves an order through. A step only carries its
   note once reached, so nothing describes something that has not happened. */
.track__steps { list-style: none; margin: 22px 0 4px; padding: 0; }
.track__step {
  position: relative;
  display: flex; gap: 14px;
  padding: 0 0 22px 0;
}
.track__step:last-child { padding-bottom: 4px; }
/* The line joining one step to the next. */
.track__step:not(:last-child)::before {
  content: ''; position: absolute;
  left: 6px; top: 16px; bottom: 2px;
  width: 1px; background: var(--border);
}
.track__step.is-done:not(:last-child)::before { background: var(--bronze); }
.track__dot {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 13px; height: 13px; margin-top: 3px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--border);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.track__step.is-done .track__dot { background: var(--bronze); border-color: var(--bronze); }
.track__step.is-now .track__dot {
  border-color: var(--bronze);
  background: var(--bronze);
  box-shadow: 0 0 0 4px rgba(184, 148, 106, 0.22);
}
.track__step__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.track__step__label { font-size: 14px; color: var(--muted); }
.track__step.is-done .track__step__label,
.track__step.is-now .track__step__label { color: var(--ink); font-weight: 500; }
.track__step__note { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.track__step__when { font-size: 11px; color: var(--bronze); font-variant-numeric: tabular-nums lining-nums; }

.track__facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin: 20px 0 18px;
  padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.track__facts span { display: block; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.track__facts strong { display: block; margin-top: 3px; font-size: 14px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }

.track__wa {
  display: block; text-align: center;
  padding: 13px; border-radius: 3px;
  background: #25D366; color: #0b2e18;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  transition: background 0.2s ease;
}
.track__wa:hover { background: #1eb856; color: #0b2e18; }
.track__again {
  display: block; width: 100%; margin-top: 12px; padding: 8px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 12px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border);
}
.track__again:hover { color: var(--ink); }

@media (max-width: 480px) {
  .track { padding: 12px; align-items: flex-end; }
  .track__card { padding: 30px 20px 24px; border-radius: 6px 6px 0 0; max-height: calc(100vh - 24px); }
  .track__title { font-size: 26px; }
  /* 16px so iOS does not zoom the page when a field takes focus. */
  .track__field input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .track, .track__card { transition: none; }
}

/* =====================================================
   International checkout
   Anywhere outside Trinidad and Tobago goes by DHL or FedEx and is
   priced per parcel, so the delivery cost is not known at checkout.
   These say so rather than leaving a blank or a misleading zero.
   ===================================================== */
.radio-card__price--quote {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze);
  font-weight: 600;
}
.checkout-quote {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 2px solid var(--bronze);
  background: rgba(184, 148, 106, 0.09);
  border-radius: 3px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
  animation: quoteIn 0.3s ease both;
}
.checkout-quote svg { flex-shrink: 0; margin-top: 2px; color: var(--bronze); }
@keyframes quoteIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

.cart-summary__quote {
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--bronze);
}
.cart-summary__note {
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted);
}
@media (prefers-reduced-motion: reduce) { .checkout-quote { animation: none; } }


/* Google's own sign in button, used when the token flow is available so the
   account chooser runs on this domain. Centred to match our own button, which
   sits underneath and is hidden once this one is up. */
.auth-modal__gmount {
  display: flex;
  justify-content: center;
  margin-top: 4px;
  min-height: 0;
}
.auth-modal__gmount:empty { display: none; }
.auth-modal__gmount { flex-direction: column; align-items: center; gap: 8px; }
.auth-modal__google[hidden] { display: none; }

/* The quiet way back to the redirect flow if Google's button will not sign
   anyone in, so no one is ever left staring at a button that does nothing. */
.gsi-escape {
  background: none; border: 0; padding: 2px 4px;
  font-size: 11.5px; color: var(--muted); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.gsi-escape:hover { color: var(--ink); }