@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Montserrat:ital,wght@0,300..800;1,300..800&family=Tenor+Sans&display=swap');

:root {
  /* Brand Palette (Charlotte Tilbury / VittoriaX Standards) */
  --vx-ivory: #FAF8F5;
  --vx-fig: #5A2A3A;
  --vx-lilac: #D6C6E7;
  --vx-black: #111111;
  --vx-gold: #D8B98B;

  --vx-berry-950: #3a1522;
  --vx-berry-900: #5A2A3A;
  --vx-berry-800: #6d2f44;
  --vx-berry-700: #5A2A3A;
  --vx-berry-600: #7d3b51;
  --vx-rose-100: #fde8e0;
  --vx-rose-50: #FAF8F5;
  --vx-sand-100: #FAF8F5;
  --vx-sand-50: #FAF8F5;
  --vx-plum: #5A2A3A;
  --vx-ink: #111111;
  --vx-muted: #666666;
  --vx-line: rgba(216, 185, 139, 0.4);
  --vx-line-dark: #5A2A3A;
  --vx-white: #FAF8F5;
  --vx-success: #2e6a4d;
  --vx-warning: #a46120;
  --vx-danger: #c81f3e;
  --vx-sale: #5A2A3A;
  --vx-info: #2f5e78;

  /* Champagne / Luxury gold accent */
  --vx-champagne-100: #fbf0df;
  --vx-champagne: #D8B98B;
  --vx-champagne-600: #b98a4c;

  /* Typography */
  --font-display: 'Bodoni Moda', 'Playfair Display', 'Didot', 'Times New Roman', serif;
  --font-editorial: 'Tenor Sans', 'Bodoni Moda', Georgia, serif;
  --font-body: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-condensed: 'Montserrat', 'Roboto Condensed', Arial, sans-serif;
  /* Size scale copied from the reference's heading scale (h6 -> h1 large),
     with its mobile steps as the lower bound of each clamp. */
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: clamp(1.125rem, 1.6vw, 1.25rem);
  --text-xl: clamp(1.25rem, 2.2vw, 1.5rem);
  --text-2xl: clamp(1.75rem, 3vw, 2rem);
  --text-3xl: clamp(2rem, 3.6vw, 2.625rem);
  --text-hero: clamp(2.6rem, 4.4vw, 4.4rem);
  --leading-tight: 1;
  --leading-body: 1.4;
  /* The reference runs UI text far tighter than prose (1.125em on body). */
  --leading-ui: 1.125;
  --tracking: .03125rem;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --container: 1440px;
  --container-narrow: 960px;
  --gutter: clamp(1rem, 2.5vw, 2.25rem);
  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;
  --radius-pill: 999px;
  --shadow-sm: 0 4px 16px rgb(33 23 25 / 8%);
  --shadow-md: 0 16px 50px rgb(33 23 25 / 16%);
  --shadow-panel: 0 24px 70px rgb(33 23 25 / 22%);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --duration-fast: 160ms;
  --duration: 300ms;
  --duration-slow: 520ms;
  --z-header: 30;
  --z-sticky: 35;
  --z-backdrop: 80;
  --z-drawer: 90;
  --z-toast: 110;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--vx-ink);
  background: var(--vx-white);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  letter-spacing: .5px;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }
button, input, select, textarea { color: inherit; font: inherit; }
button { cursor: pointer; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; }
button { border: 0; background: none; padding: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
summary { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #1673a1; outline-offset: 3px; }
::selection { color: var(--vx-white); background: var(--vx-berry-700); }

.skip-link {
  position: fixed;
  z-index: 999;
  top: 10px;
  left: 10px;
  transform: translateY(-150%);
  padding: .75rem 1rem;
  color: var(--vx-white);
  background: var(--vx-berry-900);
}
.skip-link:focus { transform: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.container { width: min(100%, var(--container)); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { width: min(100%, var(--container-narrow)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-12); }
.section--compact { padding-block: var(--space-8); }
.section--tint { background: var(--vx-sand-50); }
.section--rose { background: var(--vx-rose-50); }
.section--dark { color: var(--vx-white); background: var(--vx-berry-950); }
.section-heading { margin-bottom: var(--space-6); text-align: center; }
/* Intro copy was running the full 1200px container as a single line. Hold it
   to a readable measure and centre it. */
.section-heading > p { max-width: 60ch; margin-inline: auto; }
.section-heading--split { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; text-align: center; }
.section-heading--split > :first-child { grid-column: 2; }
.section-heading--split .rail-controls { grid-column: 3; justify-self: end; }
.eyebrow:empty { display: none; }
.eyebrow {
  margin-bottom: .65rem;
  color: var(--vx-berry-700);
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* The reference sets its display serif light (300/400), never heavy, and tracks
   every heading at .03125rem with a 1em line box. */
.display-title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 400; line-height: var(--leading-tight); letter-spacing: var(--tracking); }
.section-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 400; line-height: 1.05; letter-spacing: var(--tracking); }
.condensed-title { font-family: var(--font-condensed); font-size: var(--text-lg); font-weight: 500; line-height: var(--leading-ui); letter-spacing: var(--tracking); text-transform: uppercase; }
/* Champagne is decorative only -- it fails small-text contrast on white, so it
   is used for rules, ribbons and washes, never for body or label colour. */
.accent-rule { width: 56px; height: 2px; border: 0; margin: .9rem 0 0; background: var(--vx-champagne-600); }
.section-title + .accent-rule, .display-title + .accent-rule { margin-inline: auto; }
/* Uppercase editorial headings, as the reference uses Tenor Sans for. */
.editorial-title { font-family: var(--font-editorial); font-size: var(--text-xl); font-weight: 400; line-height: var(--leading-ui); letter-spacing: 0; text-transform: uppercase; }
.muted { color: var(--vx-muted); }
.text-link { border-bottom: 1px solid currentColor; font-weight: 500; }
.text-link:hover { color: var(--vx-berry-700); }
.icon { width: 24px; height: 24px; }

.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .75rem 1.75rem;
  border: 1px solid var(--vx-fig);
  border-radius: 0;
  color: var(--vx-white);
  background: var(--vx-fig);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  transition: all var(--duration-fast) var(--ease);
}
.button:hover {
  border-color: var(--vx-gold);
  background: var(--vx-berry-800);
  color: var(--vx-white);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(90, 42, 58, 0.25);
}
.button--secondary { color: var(--vx-fig); border-color: var(--vx-fig); background: transparent; }
.button--secondary:hover { color: var(--vx-white); border-color: var(--vx-gold); background: var(--vx-fig); }
.button--light { color: var(--vx-fig); border-color: var(--vx-white); background: var(--vx-white); }
.button--light:hover { color: var(--vx-white); border-color: var(--vx-gold); background: var(--vx-fig); }
.button--ghost { color: inherit; border-color: var(--vx-line); background: transparent; }
.button--ghost:hover { color: var(--vx-fig); border-color: var(--vx-fig); background: transparent; }
.button--wide { width: 100%; }
.button[disabled], .button.is-disabled { opacity: .45; cursor: not-allowed; transform: none; }
.icon-button {
  width: 44px;
  height: 44px;
  display: inline-grid;
  position: relative;
  place-items: center;
  color: inherit;
  border-radius: 50%;
  transition: color var(--duration-fast), background var(--duration-fast);
}
.icon-button:hover { color: var(--vx-berry-700); background: transparent; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 26px;
  padding: .3rem .65rem;
  border-radius: var(--radius-pill);
  color: var(--vx-berry-900);
  background: var(--vx-rose-100);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.pill--success { color: var(--vx-success); background: #e6f3eb; }
.pill--warning { color: #744111; background: #fff0d8; }
.pill--neutral { color: var(--vx-muted); background: var(--vx-sand-100); }
.pill--danger { color: var(--vx-danger); background: #fbe5e8; }

.field-wrap { display: grid; gap: .45rem; }
.field-wrap label, .field-label { font-size: var(--text-sm); font-weight: 500; }
.field, .select, .textarea {
  width: 100%;
  min-height: 46px;
  padding: .7rem .85rem;
  border: 1px solid var(--vx-line-dark);
  border-radius: var(--radius-sm);
  color: var(--vx-ink);
  background: var(--vx-white);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.textarea { min-height: 126px; resize: vertical; }
.field:hover, .select:hover, .textarea:hover { border-color: var(--vx-berry-700); }
.field:focus, .select:focus, .textarea:focus { border-color: var(--vx-berry-700); outline: 0; box-shadow: 0 0 0 3px rgb(117 25 44 / 14%); }
.field[aria-invalid='true'], .textarea[aria-invalid='true'] { border-color: var(--vx-danger); }
.field-help { color: var(--vx-muted); font-size: var(--text-xs); }
.field-error { color: var(--vx-danger); font-size: var(--text-xs); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.form-grid .span-2 { grid-column: 1 / -1; }
.check-row { display: flex; align-items: flex-start; gap: .65rem; font-size: var(--text-sm); }
.check-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--vx-berry-800); }

/* Site chrome */
.announcement {
  height: 40px;
  display: grid;
  position: relative;
  z-index: calc(var(--z-header) + 1);
  grid-template-columns: 34px minmax(0, 1fr) 70px;
  align-items: center;
  padding-inline: .35rem;
  color: var(--vx-ink);
  /* Champagne wash, warmed toward the reference's packaging tones. */
  background: linear-gradient(90deg, var(--vx-rose-100), var(--vx-champagne-100), var(--vx-rose-100));
  border-bottom: 1px solid var(--vx-champagne);
  font-size: .8rem;
  letter-spacing: .2px;
}
.announcement__message { overflow: hidden; font-weight: 500; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.announcement__controls { display: flex; align-items: center; justify-content: end; }
.announcement__control { width: 30px; height: 30px; display: grid; place-items: center; }
.announcement__control .icon { width: 15px; height: 15px; }
.site-header { position: relative; z-index: var(--z-header); background: var(--vx-white); }
.site-header__utility {
  height: 88px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
}
.region-trigger {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  font-size: .78rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.region-trigger__chevron { width: 7px; height: 7px; flex: 0 0 auto; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--duration-fast) var(--ease); }
.region-trigger[aria-expanded='true'] .region-trigger__chevron { transform: translateY(2px) rotate(225deg); }
/* Detection still sets the opening state; this panel only lets it be overridden.
   Layout follows the reference: a "Shipping to*" label, one country select and a
   Continue button that stays inert until a country is chosen. */
.region-chooser { position: relative; }
.region-chooser__panel { width: 290px; max-height: min(70vh, 460px); position: absolute; z-index: calc(var(--z-header) + 2); top: calc(100% + .5rem); left: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.15rem 1.15rem 1.35rem; background: var(--vx-white); box-shadow: var(--shadow-md); text-align: left; }
/* Long market lists must scroll inside the field, not push the panel off screen. */
.region-chooser__field select { max-height: 300px; }
.region-chooser--footer .region-chooser__panel { top: auto; bottom: calc(100% + .5rem); }
.region-chooser__field { display: block; margin-bottom: 1.1rem; }
.region-chooser__field span { display: block; margin-bottom: .45rem; font-size: var(--text-sm); }
.region-chooser__field select { width: 100%; min-height: 44px; padding: .5rem .7rem; border: 1px solid var(--vx-line); background: var(--vx-white); font-size: var(--text-sm); }
.region-chooser__submit.button { color: var(--vx-white); background: var(--vx-berry-900); }
.region-chooser__submit.button:hover, .region-chooser__submit.button:focus-visible { color: var(--vx-white); background: var(--vx-berry-800); }
.region-chooser__submit[disabled] { border-color: var(--vx-line); color: var(--vx-muted); background: var(--vx-sand-100); cursor: not-allowed; }
.region-trigger .icon { width: 17px; height: 17px; }
.site-header__branding {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .4rem 0;
  background: transparent;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: transparent;
  max-height: 52px;
  transition: opacity var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.site-header .wordmark__image,
.site-header a.wordmark img,
.site-header .custom-logo,
.woocommerce .site-header .wordmark img,
.woocommerce-page .site-header .wordmark img,
.single-product .site-header .wordmark img,
.wordmark__image,
.wordmark img {
  height: 48px !important;
  max-height: 48px !important;
  width: auto !important;
  max-width: 260px !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.wordmark--scroll {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem;
  background: transparent;
  flex: 0 0 auto;
  max-height: 48px;
}
.sticky-header .wordmark__scroll-image,
.sticky-header .wordmark--scroll img,
.wordmark__scroll-image {
  height: 40px !important;
  max-height: 40px !important;
  width: 40px !important;
  max-width: 40px !important;
  object-fit: contain !important;
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: transform 300ms cubic-bezier(.22, 1, .36, 1);
}
.sticky-header.is-visible .wordmark__scroll-image {
  transform: scale(1.12);
}
.wordmark:hover {
  opacity: .88;
}
.mobile-header .wordmark__image,
.mobile-header .wordmark img {
  height: 36px !important;
  max-height: 36px !important;
  width: auto !important;
  max-width: 170px !important;
}
.site-header__actions { display: flex; align-items: center; justify-content: end; gap: .1rem; }
.site-header__loyalty { margin-right: .6rem; font-size: .78rem; }
.site-header__loyalty:hover { color: var(--vx-berry-700); }
.search-panel { border-top: 1px solid var(--vx-line); border-bottom: 1px solid var(--vx-line); background: var(--vx-sand-50); }
.search-panel__header { padding: var(--space-5) var(--gutter) var(--space-3); }
.search-panel__form {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--vx-line-dark);
}
.search-panel__icon { display: inline-flex; flex-shrink: 0; color: var(--vx-muted); }
.search-panel__icon svg { width: 18px; height: 18px; }
.search-panel__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: var(--space-2) 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--vx-ink);
  outline: none;
}
.search-panel__input::placeholder { color: var(--vx-muted); }
.ac-search-close { flex-shrink: 0; margin-left: auto; }
.search-panel__suggestions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: var(--space-3) var(--gutter) var(--space-5);
  font-family: var(--font-condensed);
  font-size: var(--text-sm);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.search-panel__suggestions a { color: var(--vx-muted); }
.search-panel__suggestions a:hover { color: var(--vx-berry-700); }
.cart-form-note { margin-top: .5rem; color: var(--vx-danger); font-size: var(--text-sm); font-weight: 500; }
.bag-count {
  min-width: 19px;
  height: 19px;
  display: grid;
  position: absolute;
  top: 2px;
  right: 0;
  place-items: center;
  border-radius: 50%;
  color: var(--vx-white);
  background: var(--vx-berry-900);
  font-size: 10px;
  font-weight: 700;
}
.desktop-nav {
  height: 52px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-width: 0;
  padding-inline: .75rem;
  flex-wrap: nowrap;
}
.desktop-nav__item { display: flex; flex-shrink: 0; }
.desktop-nav__trigger {
  display: flex;
  align-items: center;
  padding: 0 clamp(8px, 1.1vw, 16px);
  border-bottom: 3px solid transparent;
  font-family: var(--font-condensed);
  font-size: clamp(.75rem, .92vw, .875rem);
  font-weight: 400;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.desktop-nav__trigger--coming-soon { gap: .35rem; color: var(--vx-muted); cursor: default; }
.desktop-nav__soon {
  display: inline-block;
  padding: 2px 5px;
  background: var(--vx-champagne-200, #edd9bf);
  color: var(--vx-berry-900, #350509);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .5px;
  line-height: 1;
  border-radius: 2px;
  text-transform: uppercase;
  vertical-align: middle;
}
.desktop-nav__trigger:hover, .desktop-nav__trigger[aria-expanded='true'] { color: var(--vx-berry-700); border-bottom-color: var(--vx-berry-700); }
.desktop-nav__trigger--accent { color: var(--vx-berry-700); font-weight: 700; }
.mega-menu {
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 1.6rem max(var(--gutter), calc((100vw - 1040px) / 2));
  visibility: hidden;
  border-top: 1px solid var(--vx-line);
  background: var(--vx-white);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--duration-fast), transform var(--duration-fast), visibility var(--duration-fast);
}
.desktop-nav__item:hover .mega-menu, .desktop-nav__trigger[aria-expanded='true'] + .mega-menu { visibility: visible; opacity: 1; transform: none; }
.mega-menu__inner { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 2.5rem; }
.mega-menu__group h2 { margin-bottom: .85rem; font-family: var(--font-condensed); font-size: .95rem; text-transform: uppercase; }
.mega-menu__group ul { display: grid; gap: .45rem; list-style: none; }
.mega-menu__group a { color: var(--vx-muted); font-size: var(--text-sm); display: inline-flex; align-items: center; gap: 0.35rem; }
.mega-menu__group a:hover:not(.is-coming-soon) { color: var(--vx-berry-700); text-decoration: underline; text-underline-offset: 3px; }
.mega-menu__group a.is-coming-soon { color: var(--vx-muted); cursor: default; opacity: 0.75; }
.sticky-header {
  display: grid;
  position: fixed;
  z-index: var(--z-sticky);
  top: 0;
  right: 0;
  left: 0;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  padding-top: 16px;
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  visibility: hidden;
  border-bottom: 1px solid var(--vx-line);
  background: var(--vx-white);
  box-shadow: 0 2px 10px rgb(27 13 17 / 7%);
  opacity: 0;
  transform: translateY(-100%);
  transition: transform 280ms cubic-bezier(.22,.61,.36,1), opacity 180ms ease, visibility 280ms;
}
.sticky-header::before { position: absolute; z-index: -1; top: 0; right: 0; left: 0; height: 16px; background: var(--vx-berry-950, #350509); content: ''; }
.sticky-header.is-visible { visibility: visible; opacity: 1; transform: none; }
.sticky-header__cluster { display: flex; align-items: stretch; min-width: 0; }
.sticky-header__cluster .desktop-nav { flex: 1; height: 45px; padding-inline: 0; }
.sticky-header__cluster:first-child .desktop-nav { justify-content: flex-end; }
.sticky-header .wordmark {
  z-index: 2;
  align-self: center;
  padding-inline: 1.5rem;
  font-size: 1.85rem;
  color: var(--vx-fig);
  text-decoration: none;
  transform: scale(1.04);
  transition: transform var(--duration) var(--ease);
}
.sticky-header .wordmark:hover {
  color: var(--vx-fig);
}
.sticky-header__bag { align-self: center; margin-left: auto; }
.sticky-header .mega-menu { display: block; top: 100%; }
.mobile-header { display: none; }

/* The compact header deliberately keeps navigation, wish list, account and
   bag within one predictable 56px row, with search promoted into its own
   full-width tap target below it. This is the same information order used by
   the reference mobile storefront and avoids a horizontally crowded toolbar. */
.mobile-header__search {
  width: calc(100% - 1.6rem);
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 0 .8rem .7rem;
  padding: .4rem 1rem;
  /* The reference outlines this field in a light hairline, not the darker
     berry rule used elsewhere in the chrome. */
  border: 1px solid var(--vx-line);
  border-radius: var(--radius-pill);
  color: var(--vx-muted);
  background: var(--vx-white);
  font-size: .78rem;
  line-height: 1;
  transition: height var(--duration-fast) var(--ease), opacity var(--duration-fast) var(--ease), margin var(--duration-fast) var(--ease), padding var(--duration-fast) var(--ease);
}
.mobile-header__search .icon { width: 17px; height: 17px; }

/* Overlays, drawers, search and region */
.backdrop {
  position: fixed;
  z-index: var(--z-backdrop);
  inset: 0;
  visibility: hidden;
  background: rgb(27 13 17 / 55%);
  opacity: 0;
  transition: opacity var(--duration), visibility var(--duration);
}
.backdrop.is-open { visibility: visible; opacity: 1; }
.drawer {
  width: min(430px, 94vw);
  display: flex;
  position: fixed;
  z-index: var(--z-drawer);
  top: 0;
  right: 0;
  bottom: 0;
  flex-direction: column;
  visibility: hidden;
  background: var(--vx-white);
  box-shadow: var(--shadow-panel);
  transform: translateX(105%);
  transition: transform var(--duration) var(--ease), visibility var(--duration);
}
.drawer--left { right: auto; left: 0; transform: translateX(-105%); }
.drawer--minibag { width: min(436px, 94vw); }
.minibag__body { display: grid; align-content: start; gap: 0; }
.minibag__empty { padding: 1rem 0; color: var(--vx-muted); }
.minibag__line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 1rem; padding-block: 1.1rem; border-bottom: 1px solid var(--vx-line); }
.minibag__image { width: 96px; height: 112px; object-fit: cover; background: var(--vx-sand-50); }
.minibag__details h3 { font-size: .875rem; font-weight: 700; letter-spacing: .5px; line-height: 1.3; text-transform: uppercase; }
.minibag__meta { margin-top: .2rem; color: var(--vx-muted); font-size: var(--text-xs); }
.minibag__controls { display: flex; align-items: center; gap: 1rem; margin-top: .7rem; }
.quantity--minibag { width: 96px; height: 34px; display: grid; grid-template-columns: 30px 1fr 30px; border: 1px solid var(--vx-line-dark); }
.quantity--minibag button { display: grid; place-items: center; }
.quantity--minibag output { display: grid; place-items: center; font-size: var(--text-sm); font-weight: 500; }
.minibag__price { font-size: var(--text-sm); font-weight: 700; }
.minibag__footer { display: grid; gap: .6rem; }
.minibag__subtotal { display: flex; justify-content: space-between; margin-bottom: .3rem; font-size: var(--text-base); }
.minibag__subtotal strong { font-weight: 700; }
.drawer.is-open { visibility: visible; transform: none; }
.drawer[aria-hidden='false'] { visibility: visible; transform: none; }
.drawer__header { min-height: 66px; display: flex; align-items: center; justify-content: space-between; padding: .65rem 1rem .65rem 1.25rem; border-bottom: 1px solid var(--vx-line); }
.drawer__title { font-family: var(--font-condensed); font-size: 1.25rem; font-weight: 500; text-transform: uppercase; }
.drawer__body { flex: 1; overflow: auto; padding: 1.25rem; overscroll-behavior: contain; }
.drawer__footer { padding: 1rem 1.25rem; border-top: 1px solid var(--vx-line); background: var(--vx-white); }
.drawer--menu .drawer__body { position: relative; padding: 0; }
.mobile-menu__account { display: flex; justify-content: space-between; padding: .8rem 1rem; background: var(--vx-rose-50); font-size: .78rem; }
.mobile-menu__list { list-style: none; }
.mobile-menu__row { width: 100%; min-height: 58px; display: flex; align-items: center; gap: .8rem; padding: .4rem 1rem; border-bottom: 1px solid var(--vx-line); text-align: left; }
.mobile-menu__thumb { width: 46px; height: 46px; flex: 0 0 auto; object-fit: cover; background: var(--vx-sand-100); }
.mobile-menu__row span:nth-child(2) { flex: 1; font-family: var(--font-condensed); font-size: .95rem; font-weight: 500; text-transform: uppercase; }
.mobile-menu__row .icon { width: 18px; height: 18px; transform: rotate(-90deg); }
.mobile-submenu { position: absolute; z-index: 2; inset: 0; overflow: auto; visibility: hidden; background: var(--vx-white); transform: translateX(100%); transition: transform var(--duration) var(--ease), visibility var(--duration); }
.mobile-submenu.is-open { visibility: visible; transform: none; }
.mobile-submenu__header { min-height: 66px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; border-bottom: 1px solid var(--vx-line); text-align: center; }
.mobile-submenu__groups { padding: 1rem 1.25rem 2rem; }
.mobile-submenu__group { padding-block: 1rem; border-bottom: 1px solid var(--vx-line); }
.mobile-submenu__group h3 { margin-bottom: .75rem; font-family: var(--font-condensed); text-transform: uppercase; }
.mobile-submenu__group a { display: block; padding: .45rem 0; color: var(--vx-muted); }
.mobile-menu__region { margin: 1.5rem 1rem; }
.search-overlay { position: fixed; z-index: var(--z-drawer); inset: 0; visibility: hidden; overflow: auto; background: var(--vx-white); opacity: 0; transition: opacity var(--duration), visibility var(--duration); }
.search-overlay.is-open { visibility: visible; opacity: 1; }
.search-overlay__top { min-height: 112px; display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: .75rem; padding: 1.5rem max(var(--gutter), calc((100vw - 1120px) / 2)); border-bottom: 1px solid var(--vx-line); }
.search-overlay__field { position: relative; }
.search-overlay__field .icon { position: absolute; top: 12px; left: 14px; }
.search-overlay__field input { height: 52px; padding-left: 3.2rem; border-color: var(--vx-berry-900); border-radius: var(--radius-pill); }
.search-overlay__content { padding-block: 2rem 4rem; }
.search-overlay__popular { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.search-overlay__results { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.modal-shell { width: min(560px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); position: fixed; z-index: var(--z-drawer); top: 50%; left: 50%; visibility: hidden; overflow: auto; border-radius: var(--radius); background: var(--vx-white); box-shadow: var(--shadow-panel); opacity: 0; transform: translate(-50%, -46%); transition: opacity var(--duration), transform var(--duration), visibility var(--duration); }
.modal-shell.is-open { visibility: visible; opacity: 1; transform: translate(-50%, -50%); }
.modal-shell__header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--vx-line); }
.modal-shell__body { padding: 1.5rem; }
.region-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.region-option { min-height: 76px; padding: .8rem; border: 1px solid var(--vx-line); border-radius: var(--radius); text-align: left; }
.region-option:hover, .region-option[aria-pressed='true'] { border-color: var(--vx-berry-800); background: var(--vx-rose-50); }
.region-option strong, .region-option span { display: block; }
.region-option span { margin-top: .15rem; color: var(--vx-muted); font-size: var(--text-xs); }
.toast-root { display: grid; position: fixed; z-index: var(--z-toast); right: 1rem; bottom: 1rem; gap: .6rem; pointer-events: none; }
.toast { max-width: 360px; padding: .85rem 1rem; color: var(--vx-white); border-radius: var(--radius); background: var(--vx-berry-950); box-shadow: var(--shadow-md); animation: toast-in var(--duration) var(--ease); }
.toast--success { background: var(--vx-success); }
.toast--error { background: var(--vx-danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }

/* Hero and homepage */
.hero { position: relative; overflow: hidden; color: var(--vx-white); background: var(--vx-berry-950); }
.hero__viewport { position: relative; min-height: max(550px, 38.55vw); }
.hero__slide { display: grid; position: absolute; inset: 0; grid-template-columns: 1fr; visibility: hidden; opacity: 0; transition: opacity var(--duration-slow), visibility var(--duration-slow); }
.hero__slide.is-active { position: relative; visibility: visible; opacity: 1; }
.hero__slide[data-tone='berry'] { background: #430812; }
.hero__slide[data-tone='rose'] { color: var(--vx-ink); background: #f2d9d7; }
.hero__slide[data-tone='sand'] { color: var(--vx-ink); background: #eee5dc; }
.hero__slide[data-tone='plum'] { background: #2d1a2b; }
.hero__slide[data-tone='ink'] { background: #21191a; }
.hero__copy { display: flex; position: absolute; z-index: 2; inset: 0 55% 0 0; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(2rem, 4.5vw, 4.5rem); }
.hero__slide.is-active .hero__copy > * { animation: hero-copy-in .7s var(--ease) both; }
.hero__slide.is-active .hero__copy > *:nth-child(2) { animation-delay: .08s; }
.hero__slide.is-active .hero__copy > *:nth-child(3) { animation-delay: .16s; }
.hero__slide.is-active .hero__copy > *:nth-child(4) { animation-delay: .24s; }
@keyframes hero-copy-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.hero__title { max-width: 560px; font-family: var(--font-display); font-size: var(--text-hero); font-weight: 800; letter-spacing: .5px; line-height: .95; }
.hero__text { max-width: 480px; margin: 1.1rem 0 1.6rem; font-size: clamp(.95rem, 1.2vw, 1.1rem); }
.hero__copy .button { color: var(--vx-berry-950); border-color: var(--vx-white); background: var(--vx-white); min-width: 160px; }
.hero__copy .button:hover { color: var(--vx-white); background: transparent; }
.hero__media { min-height: max(550px, 38.55vw); position: relative; grid-area: 1 / 1; overflow: hidden; }
.hero__media::before { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgb(42 5 7 / 22%), transparent 48%); pointer-events: none; }
.hero__image { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center; transform: scale(1.01); }
.hero__slide.is-active .hero__image { animation: hero-image 8s var(--ease) both; }
@keyframes hero-image { from { transform: scale(1.045) translate3d(1.2%, -0.5%, 0); } to { transform: scale(1.01) translate3d(0, 0, 0); } }
.hero__controls { display: flex; position: absolute; z-index: 4; right: var(--gutter); bottom: 1.5rem; align-items: center; gap: .35rem; }
.hero__control { width: 44px; height: 44px; display: grid; place-items: center; color: var(--vx-white); border: 1px solid rgb(255 255 255 / 65%); border-radius: 50%; background: rgb(42 7 13 / 52%); }
.hero__control .icon { width: 19px; height: 19px; }
.hero__prev .icon { transform: rotate(180deg); }
.hero__dots { display: flex; gap: .45rem; margin-inline: .6rem; }
.category-grid-layout {
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.category-grid--top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.category-grid--bottom {
  display: block;
  width: 100%;
}
.category-card {
  grid-column: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--vx-ink);
  background: var(--vx-white);
  border: 1px solid var(--vx-line);
  transition: transform var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.category-card:hover {
  border-color: var(--vx-gold);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}
.category-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--vx-sand-50);
}
.category-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease);
}
.category-card:hover .category-card__image {
  transform: scale(1.04);
}
.category-card--featured {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  min-height: 240px;
}
.category-card--featured .category-card__media {
  aspect-ratio: auto;
  height: 100%;
  min-height: 240px;
}
.category-card__copy {
  padding: 1.1rem 1rem;
  text-align: center;
}
.category-card__copy h3 {
  margin-bottom: 0.35rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--vx-fig);
  text-transform: uppercase;
}
.category-card__copy p {
  display: block;
  color: var(--vx-muted);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}
.category-card .text-link {
  display: inline-block;
  font-family: var(--font-condensed);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vx-fig);
  border-bottom: 1px solid var(--vx-gold);
  padding-bottom: 2px;
  transition: color var(--duration-fast);
}
.category-card:hover .text-link {
  color: var(--vx-gold);
}
@media (max-width: 768px) {
  .category-grid--top {
    grid-template-columns: 1fr;
  }
  .category-card--featured {
    grid-template-columns: 1fr;
  }
  .category-card--featured .category-card__media {
    aspect-ratio: 16 / 9;
    min-height: auto;
  }
}
.rail-shell { position: relative; }
.product-rail { display: grid; grid-auto-columns: 250px; grid-auto-flow: column; gap: 8px; overflow-x: auto; padding: .25rem var(--gutter) 1rem; scroll-padding-inline: var(--gutter); scroll-snap-type: x mandatory; scrollbar-width: none; }
.product-rail::-webkit-scrollbar { display: none; }
.product-rail .product-card { scroll-snap-align: start; }
.rail-progress { width: 230px; height: 3px; margin: .35rem auto 0; overflow: hidden; border-radius: 2px; background: var(--vx-line); }
.rail-progress__thumb { height: 100%; display: block; border-radius: 2px; background: var(--vx-berry-900); transition: transform .15s linear; will-change: transform; }
.rail-controls { display: flex; gap: 1rem; }
.rail-control { width: 32px; height: 32px; display: grid; place-items: center; }
.rail-control .icon { width: 16px; height: 16px; }
.rail-control:hover { opacity: .6; }
.rail-control:first-child .icon { transform: rotate(180deg); }
.product-card {
  min-width: 0;
  display: flex;
  position: relative;
  flex-direction: column;
  background: var(--vx-white);
  border: 1px solid var(--vx-line);
  transition: transform var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.product-card:hover {
  transform: translateY(-3px);
  border-color: var(--vx-gold);
  box-shadow: 0 8px 24px rgba(90, 42, 58, 0.08);
}
.product-card__link { display: block; flex: 1; }
.product-card__media { aspect-ratio: 1 / 1; position: relative; overflow: hidden; background: #f5f3f3; }
.product-card__image { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: opacity var(--duration), transform var(--duration-slow) var(--ease); }
.product-card__image--hover { opacity: 0; }
.product-card:hover .product-card__image:first-child { opacity: 0; }
.product-card:hover .product-card__image--hover { opacity: 1; transform: scale(1.02); }
.product-card__badge { position: absolute; z-index: 2; top: .7rem; left: .7rem; }
/* Reference runs its SAVE %/NEW! flag as a vertical champagne band down the
   left edge of the tile rather than a pill floating over the image. */
.product-card__ribbon {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .4rem .7rem;
  background: var(--vx-champagne-100);
  color: var(--vx-berry-900);
  font-family: var(--font-condensed);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: var(--tracking);
  line-height: 1;
  text-transform: uppercase;
}
/* Optional vertical band, selectable in Customizer > Beauty Product Cards. */
.product-card__ribbon--vertical {
  bottom: 0;
  width: 26px;
  padding: .6rem 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.product-card__ribbon--sale {
  top: auto;
  right: 0;
  bottom: 0;
  width: 100%;
  min-height: 28px;
  justify-content: flex-start;
  padding: .45rem .55rem;
  background: var(--vx-champagne-100);
  color: var(--vx-berry-700);
  font-weight: 500;
  text-align: left;
}
/* A global vertical-ribbon preference must never move discount messaging away
   from the reference's horizontal bottom strip. */
.product-card__ribbon--sale.product-card__ribbon--vertical {
  width: 100%;
  writing-mode: horizontal-tb;
  transform: none;
}
.product-card__ribbon--new, .product-card__ribbon--bestseller, .product-card__ribbon--limited { background: var(--vx-champagne-100); }
.product-card__ribbon--oos { background: var(--vx-sand-100); color: var(--vx-muted); }
.product-card__wish { position: absolute; z-index: 3; top: .55rem; right: .55rem; width: 30px; height: 30px; border-radius: 30px; background: rgb(255 255 255 / 75%); }
.product-card__wish .icon { width: 17px; height: 17px; }
.product-card__wish:hover { background: var(--vx-white); }
.product-card__wish[aria-pressed='true'] { color: var(--vx-white); background: var(--vx-berry-700); }
.product-card__wish[aria-pressed='true'] svg { fill: currentColor; }
/* Even vertical rhythm rather than a stack of 2-4px margins, which read as
   cramped next to the imagery. */
.product-card__info { min-height: 150px; display: flex; flex-direction: column; gap: .3rem; padding: 1.15rem .1rem 1rem; text-align: left; }
.product-card__info > * { margin: 0; }
/* Stock status is checkout detail; the reference keeps listing cards to image,
   name, descriptor, rating and price. It stays on the product page. */
.product-card .stock-copy { display: none; }
.product-card__category { color: var(--vx-muted); font-size: var(--text-xs); font-weight: 400; letter-spacing: .5px; text-transform: uppercase; }
.product-card__name { margin: 0; font-family: var(--font-body); font-size: .875rem; font-weight: 700; letter-spacing: .5px; line-height: 1.3; text-transform: uppercase; }
.product-card__variant { min-height: 20px; color: var(--vx-ink); font-size: var(--text-sm); }
.rating { display: flex; align-items: center; gap: .35rem; margin-top: .4rem; color: var(--vx-berry-800); font-size: 10px; letter-spacing: .05em; }
.rating span { color: var(--vx-muted); font-size: var(--text-xs); letter-spacing: 0; }
.price { display: flex; align-items: baseline; gap: .55rem; margin-top: .45rem; font-size: var(--text-sm); font-weight: 700; }
/* Reference strikes the original in muted ink and sets the discounted price bold. */
.price del { color: var(--vx-muted); font-weight: 400; text-decoration: line-through; }
.price ins { color: var(--vx-sale); font-weight: 700; text-decoration: none; }
.product-card__bundle { width: calc(100% - .2rem); min-height: 38px; margin: 0 .1rem .5rem; padding: .35rem .5rem; border: 1px solid var(--vx-line); background: var(--vx-white); font-size: var(--text-xs); }
.product-card__action { width: calc(100% - .2rem); margin-inline: .1rem; color: var(--vx-berry-900); background: transparent; }
.product-card__action:hover { color: var(--vx-white); border-color: var(--vx-berry-900); background: var(--vx-berry-900); }
.stock-copy { margin-top: .4rem; color: var(--vx-success); font-size: var(--text-xs); font-weight: 500; }
.stock-copy--low { color: var(--vx-warning); }
/* Exclusives: image tile with a caption underneath, as per the reference. */
.campaign-board { max-width: 1200px; margin-inline: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 294px)); justify-content: center; gap: 8px; }
.campaign-tile { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 0; background: var(--vx-white); text-align: center; }
.campaign-tile__image { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--vx-sand-50); transition: transform var(--duration-slow) var(--ease); }
.campaign-tile__caption { flex: 1; padding: .9rem .5rem 1.2rem; font-size: var(--text-sm); line-height: 1.4; }
.campaign-tile:hover .campaign-tile__caption { text-decoration: underline; text-underline-offset: 3px; }
.campaign-tile:hover .campaign-tile__image { transform: scale(1.03); }
.split-feature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 580px; }
.split-feature__media { min-height: 460px; position: relative; overflow: hidden; }
.split-feature__media img { width: 100%; height: 100%; position: absolute; object-fit: cover; }
.split-feature__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(2rem, 6vw, 6rem); background: var(--vx-rose-50); }
.split-feature__copy p:not(.eyebrow) { max-width: 560px; margin: 1.2rem 0 1.7rem; }
.split-feature--reverse .split-feature__media { order: 2; }
.split-feature--dark .split-feature__copy { color: var(--vx-white); background: var(--vx-berry-950); }
.preference-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin: .25rem 0 1.6rem; }
.preference-chip { min-height: 38px; padding: .45rem .8rem; border: 1px solid currentColor; border-radius: var(--radius-pill); font-size: var(--text-xs); }
.loyalty-panel { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.loyalty-panel__copy { margin: 1rem 0 1.5rem; }
.tier-track { display: grid; gap: 1.2rem; }
.tier-progress { padding: 1.4rem; border: 1px solid rgb(255 255 255 / 30%); border-radius: var(--radius); background: rgb(255 255 255 / 6%); }
.tier-progress__summary { display: flex; justify-content: space-between; margin-bottom: .6rem; }
.progress-bar { height: 8px; overflow: hidden; border-radius: var(--radius-pill); background: rgb(255 255 255 / 22%); }
.progress-bar span { height: 100%; display: block; width: var(--progress, 60%); border-radius: inherit; background: #d8b485; }
.tier-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; list-style: none; }
.tier-list li { padding: 1.1rem; border-top: 1px solid rgb(255 255 255 / 35%); }
.tier-list strong { display: block; font-family: var(--font-display); font-size: 1.4rem; }
/* Reference clusters the incentives in a centred 160px-per-item row rather
   than stretching them across the full viewport. */
.value-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  gap: 1.5rem 1rem;
  padding: 2.75rem max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  background: var(--vx-sand-50);
}
/* Rows are shared across every card so the icons and titles line up. */
.value-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; justify-items: center; gap: .55rem; text-align: center; }
.value-card .icon { width: 30px; height: 30px; color: var(--vx-berry-900); }
.value-card h3 { max-width: 190px; font-family: var(--font-body); font-size: .875rem; font-weight: 700; letter-spacing: .2px; line-height: 1.25; text-transform: none; }
.value-card p { max-width: 190px; color: var(--vx-ink); font-size: var(--text-xs); line-height: 1.45; }

@supports not (grid-template-rows: subgrid) {
  .value-card { grid-row: auto; grid-template-rows: 34px auto auto; align-content: start; }
}

/* Hosted video embeds (YouTube/Vimeo) share the file-video framing. */
.video-embed { width: 100%; display: block; aspect-ratio: 16 / 9; border: 0; }
.video-shell { position: relative; }
.video-shell video { width: 100%; display: block; }
.video-shell__controls { display: flex; position: absolute; right: .75rem; bottom: .75rem; gap: .5rem; }
.video-shell__control {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--vx-ink);
  background: var(--vx-white);
  box-shadow: var(--shadow-sm);
}
.video-shell__control .icon { width: 16px; height: 16px; }
.video-shell__control .icon + .icon { display: none; }
.video-shell.is-paused [data-video-toggle] .icon:first-of-type { display: none; }
.video-shell.is-paused [data-video-toggle] .icon + .icon { display: block; }
.video-shell:not(.is-muted) [data-video-mute] .icon:first-of-type { display: none; }
.video-shell:not(.is-muted) [data-video-mute] .icon + .icon { display: block; }

/* Full-bleed promotional banner */
.promo-banner { position: relative; display: block; overflow: hidden; }
.promo-banner__image { width: 100%; height: auto; display: block; aspect-ratio: 1440 / 420; object-fit: cover; }
.promo-banner__copy { position: absolute; z-index: 2; top: 50%; left: clamp(1.5rem, 6vw, 6rem); max-width: 460px; transform: translateY(-50%); color: var(--vx-white); }
.promo-banner__copy { display: grid; justify-items: start; gap: .8rem; }
.promo-banner__title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 400; letter-spacing: var(--tracking); line-height: 1.05; }
.promo-banner__text { font-size: clamp(.9rem, 1.15vw, 1.05rem); }
.promo-banner--light .promo-banner__copy { color: var(--vx-ink); }

/* Footer */
.site-footer { background: var(--vx-white); }
.footer-newsletter { padding: 2.5rem var(--gutter) 0; color: var(--vx-ink); background: var(--vx-white); }
.footer-newsletter__inner { max-width: 1368px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; margin-inline: auto; }
.footer-newsletter h2 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.footer-newsletter p { margin-top: .4rem; color: var(--vx-ink); font-size: var(--text-sm); }
.newsletter-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; }
.newsletter-form .field { height: 44px; border: 1px solid var(--vx-berry-900); color: var(--vx-ink); background: var(--vx-white); }
.newsletter-form .field::placeholder { color: var(--vx-muted); }
.newsletter-consent { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: .5rem; margin-top: .9rem; color: var(--vx-muted); font-size: var(--text-xs); font-weight: 400; line-height: 1.5; }
.newsletter-consent input { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--vx-berry-800); }
.newsletter-status { min-height: 0; grid-column: 1 / -1; font-size: var(--text-xs); }
.footer-region__detected { margin-top: .2rem; color: var(--vx-muted); font-size: var(--text-xs); }
.newsletter-unsubscribe { color: var(--vx-ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-main { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(300px, 1.7fr); gap: 2.5rem; padding: 3rem max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); }
.footer-group__title { margin-bottom: 1.1rem; font-family: var(--font-body); font-size: .875rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.footer-group__toggle { display: none; }
.footer-group__links { display: grid; gap: .8rem; }
.footer-group__links a { color: var(--vx-ink); font-size: var(--text-sm); }
.footer-group__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-region { display: flex; flex-direction: column; gap: 1.35rem; padding-left: clamp(1.5rem, 3vw, 3rem); border-left: 1px solid var(--vx-line); }
.footer-region__intro { font-size: var(--text-sm); line-height: 1.55; }
.footer-region .newsletter-form { grid-template-columns: minmax(0, 1fr) auto; }
.footer-region .newsletter-form .field { border-right: 0; }
.footer-region .newsletter-form .field { min-height: 48px; padding-inline: 1rem; }
.footer-social { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.footer-social a {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--vx-gold);
  color: var(--vx-fig);
  background: var(--vx-ivory);
  transition: all var(--duration-fast) var(--ease);
}
.footer-social a:hover {
  background: var(--vx-fig);
  color: var(--vx-white);
  border-color: var(--vx-fig);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(90, 42, 58, 0.2);
}
.footer-social .icon, .footer-social .social-mark { width: 18px; height: 18px; }
.social-mark { display: block; }
/* Full-bleed founder quote band sitting between the footer links and legal. */
.footer-quote { position: relative; min-height: 380px; display: grid; place-items: center; overflow: hidden; color: var(--vx-white); background: var(--vx-berry-950); text-align: center; }
.footer-quote__media { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
/* Scrim keeps the live quote legible over any admin-chosen background. */
.footer-quote::after { content: ''; position: absolute; inset: 0; background: rgb(26 4 6 / 62%); }
.footer-quote__copy { text-shadow: 0 1px 14px rgb(20 4 6 / 45%); }
.footer-quote__copy { position: relative; z-index: 2; max-width: 900px; padding: 3rem var(--gutter); }
.footer-quote blockquote { font-family: var(--font-display); font-size: clamp(1.75rem, 3.2vw, 3rem); font-weight: 500; line-height: 1.2; }
.footer-quote__signature { margin-top: 1.5rem; font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2rem); font-style: italic; font-weight: 500; }
.footer-quote__role { margin-top: .6rem; font-size: var(--text-base); letter-spacing: .5px; }

.footer-legal { padding: 1.5rem var(--gutter) 2rem; background: var(--vx-sand-50); text-align: center; }
.payment-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-bottom: 1.2rem; }
.payment-mark { width: 42px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
.payment-mark__svg { width: 42px; height: 26px; display: block; }
.footer-legal p { color: var(--vx-ink); font-size: 10px; }
.footer-legal__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem .75rem; margin-top: .65rem; font-size: 10px; text-decoration: underline; text-underline-offset: 2px; }

/* The offers page was authored against class names no stylesheet defines, so it
   rendered unstyled and edge-to-edge. Map them onto the existing listing system
   rather than restyling the template. */
/* Specificity has to clear the `padding: 0` list reset on .plp-grid below. */
.collection-page > *,
.collection-page > ul.plp-grid { width: min(100%, var(--container)); margin-inline: auto; padding-inline: var(--gutter); }
.plp-header { padding-block: 2rem 1.4rem; text-align: center; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; padding-block: .5rem 1.4rem; color: var(--vx-ink); font-size: var(--text-sm); }
.breadcrumbs a:hover { color: var(--vx-berry-700); text-decoration: underline; }
.plp-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500; line-height: 1.1; }
.plp-copy { max-width: 60ch; margin: .8rem auto 0; color: var(--vx-ink); font-size: var(--text-sm); }
.collection-page .plp-grid { padding-bottom: var(--space-20); }
.collection-page .category-group { padding-block: 1rem 2.5rem; }

/* Listing, search and breadcrumb */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-height: 54px; padding-block: 1.1rem; color: var(--vx-ink); font-size: var(--text-sm); }
.breadcrumb a:hover { color: var(--vx-berry-700); text-decoration: underline; }
.page-hero { padding: 2rem var(--gutter) 1.4rem; color: var(--vx-ink); background: var(--vx-white); text-align: center; }
.page-hero p { max-width: 680px; margin: .8rem auto 0; color: var(--vx-ink); font-size: var(--text-sm); }
.category-chips { display: flex; justify-content: center; gap: 1.35rem; overflow-x: auto; padding: 1.3rem var(--gutter); border-bottom: 1px solid var(--vx-line); scrollbar-width: thin; }
.category-chip { min-width: 136px; display: grid; gap: .55rem; text-align: center; scroll-snap-align: start; }
.category-chip img { width: 92px; height: 92px; margin-inline: auto; border-radius: 50%; object-fit: cover; background: var(--vx-sand-100); }
.category-chip span { font-family: var(--font-condensed); font-size: .78rem; text-transform: uppercase; }
.listing-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2rem; padding-block: 2rem 5rem; }
.listing-toolbar { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--vx-line); }
.listing-toolbar__mobile { display: none; }
.listing-count { color: var(--vx-muted); font-size: var(--text-sm); }
.filter-panel { align-self: start; position: sticky; top: 72px; }
.filter-panel__header { display: none; }
.filter-panel__body { display: contents; }
.filter-panel__footer { margin-top: 1rem; }
.filter-group { border-bottom: 1px solid var(--vx-line); }
.filter-group summary { padding: 1rem 0; font-family: var(--font-condensed); font-weight: 500; text-transform: uppercase; list-style: none; }
.filter-group summary::after { content: '+'; float: right; }
.filter-group[open] summary::after { content: '−'; }
.filter-options { display: grid; gap: .7rem; padding: 0 0 1rem; }
.filter-options label { display: flex; align-items: center; gap: .6rem; color: var(--vx-muted); font-size: var(--text-sm); }
.filter-options input { width: 17px; height: 17px; accent-color: var(--vx-berry-800); }
/* .plp-grid rides along: style.css gives it display:grid but no columns, so
   on its own it collapsed to one full-width column (/offers/ was 32,000px tall). */
.product-grid, .plp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1rem; margin: 0; padding: 0; list-style: none; }
/* style.css declares `ul.products { display: inherit }` (0,1,1), which outranks
   its own `.plp-grid { display: grid }` (0,1,0) and collapsed this listing to a
   single full-width column. Restate it above both. */
ul.products.plp-grid { display: grid; }
.listing-pagination { display: flex; grid-column: 1 / -1; justify-content: center; gap: .4rem; padding-top: 2rem; }
.pagination-button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--vx-line); }
.pagination-button[aria-current='page'] { color: var(--vx-white); border-color: var(--vx-berry-900); background: var(--vx-berry-900); }
.search-intro { padding-block: 3rem 1.5rem; text-align: center; }
.search-page-form { max-width: 720px; display: grid; grid-template-columns: 1fr auto; gap: .6rem; margin: 1.2rem auto 0; }

/* Product detail */
.pdp { padding-bottom: var(--space-20); }
.pdp.container,
.single-product .breadcrumb.container { width: min(100%, calc(1208px + var(--gutter) * 2)); }
.pdp__layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
@media (max-width: 960px) {
  .pdp__layout { grid-template-columns: 1fr; gap: 24px; }
}
.gallery { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; position: sticky; top: 90px; align-items: start; }
@media (max-width: 960px) {
  .gallery { position: static; grid-template-columns: 1fr; gap: 10px; }
}
.gallery.gallery--single-media { display: block; }
.gallery.gallery--single-media .gallery__thumbs { display: none !important; }
.gallery.gallery--single-media .gallery__stage { width: 100%; max-width: 100%; aspect-ratio: 1; }
.gallery__thumbs { min-height: 0; max-height: 560px; display: grid; align-content: start; gap: 10px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumb { aspect-ratio: 1; overflow: hidden; border: 1.5px solid transparent; background: var(--vx-sand-50); border-radius: 4px; position: relative; cursor: pointer; padding: 0; transition: border-color 150ms ease, transform 150ms ease; }
.gallery__thumb:hover { border-color: var(--vx-gold, #c4a77d); transform: scale(1.02); }
.gallery__thumb[aria-current='true'], .gallery__thumb.is-active { border-color: var(--vx-berry-900); box-shadow: 0 0 0 1px var(--vx-berry-900); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__thumb--video { position: relative; }
.gallery__thumb-video-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(90, 42, 58, 0.85);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  padding-left: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  pointer-events: none;
  z-index: 2;
}
.gallery__stage { aspect-ratio: 1; position: relative; overflow: hidden; background: #f6f5f4; cursor: zoom-in; border-radius: 6px; }
.gallery__stage img { width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity .14s var(--ease), transform var(--duration-slow) var(--ease); }
.gallery__stage img.is-changing { opacity: 0; transform: scale(1.012); }
.gallery__stage:hover img { transform: scale(1.035); }
.gallery__video-player { width: 100%; height: 100%; object-fit: cover; background: #000; border-radius: 6px; }
.gallery__zoom { position: absolute; right: 1rem; bottom: 1rem; background: rgb(255 255 255 / 88%); }
.pdp__info { padding-top: 1rem; }
.pdp__category { color: var(--vx-muted); font-family: var(--font-condensed); font-size: .78rem; letter-spacing: .5px; text-transform: uppercase; }
.pdp__title { margin: .45rem 0 .3rem; font-family: var(--font-condensed); font-size: var(--text-2xl); font-weight: 400; letter-spacing: var(--tracking); line-height: var(--leading-tight); text-transform: uppercase; }
.pdp__title + .muted { font-family: var(--font-condensed); font-size: 1.25rem; letter-spacing: .5px; text-transform: uppercase; }
.pdp__price { margin-block: 1rem; font-size: 1.5rem; font-weight: 400; line-height: 1.33; }
.pdp__region { padding: .65rem .8rem; border: 1px solid var(--vx-line); background: var(--vx-sand-50); font-size: var(--text-xs); }
.option-group { margin-top: 1.4rem; }
.option-group__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.option-group__head legend, .option-group__head strong { font-family: var(--font-condensed); font-size: .85rem; font-weight: 500; text-transform: uppercase; }
/* Shade picker: reference shows a row of 47px colour chips, with the selected
   chip ringed, above a bar naming the active shade. */
.shade-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.shade-option {
  width: 44px;
  height: 44px;
  display: block;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  background: none;
  line-height: 0;
  cursor: pointer;
  position: relative;
  transition: transform 180ms cubic-bezier(.22, 1, .36, 1), border-color 180ms ease, box-shadow 180ms ease;
}
.shade-option::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: var(--shade);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 15%);
}
.shade-option:hover {
  transform: translateY(-2px);
  border-color: var(--vx-gold, #c4a77d);
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}
.shade-option[aria-pressed='true'] {
  padding: 2px;
  border-color: var(--vx-berry-900);
  box-shadow: 0 0 0 1px var(--vx-berry-900);
  transform: none;
}
.shade-option[disabled] { opacity: .35; cursor: not-allowed; transform: none; }

/* Once a variation resolves, WooCommerce prints an exact count ("12 in stock")
   inside the form, which duplicates the theme's generic line right below it.
   Defer to the specific one; falls back to showing both where :has() is
   unsupported. */
.pdp__info form.variations_form:has(.woocommerce-variation-availability p) + .stock-copy { display: none; }

/* Quantity and add-to-cart share one row; WooCommerce's variation wrapper
   otherwise strands the 88px quantity box above a full-width button. */
.pdp form.cart .woocommerce-variation-add-to-cart { display: flex; align-items: stretch; gap: .7rem; }
.pdp form.cart .woocommerce-variation-add-to-cart .quantity { width: 88px; height: 48px; flex: 0 0 88px; margin: 0; }
.pdp form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button { width: auto; min-height: 48px; flex: 1 1 auto; margin: 0; }

.shade-readout { min-height: 66px; display: flex; align-items: center; gap: 12px; margin-top: 1rem; padding: 12px; border: 1px solid #ae9e9e; }
/* Chips replace WooCommerce's select, which also removed its "choose an option"
   prompt. Keep the slot filled so a greyed button is never unexplained. */
.shade-readout.is-empty { color: var(--vx-muted); border-style: dashed; }
.shade-readout.is-empty .shade-readout__name { font-weight: 400; }
.shade-readout__swatch { width: 40px; height: 40px; flex: 0 0 auto; background: var(--shade); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 15%); }
.shade-readout__swatch.is-unset { background: repeating-linear-gradient(45deg, var(--vx-sand-100) 0 6px, var(--vx-white) 6px 12px); }
.shade-readout__name { font-size: 1rem; font-weight: 700; }
.pdp-loyalty-badge {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: rgba(214, 198, 231, 0.22);
  border: 1px solid var(--vx-lilac);
  border-radius: 4px;
  padding: .65rem .95rem;
  font-size: var(--text-sm);
  color: var(--vx-fig);
  font-weight: 500;
  margin-block: .85rem 1.25rem;
}
.pdp-loyalty-badge__icon { font-size: 1.1rem; }
.pdp-loyalty-badge__link {
  color: var(--vx-fig);
  text-decoration: underline;
  margin-left: .35rem;
  font-weight: 600;
}
/* auto-fit so two tiers fill the column instead of leaving three empty tracks. */
.bundle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: .6rem; margin-top: .5rem; }
/* Single Product Volume Tiers */
.pdp-volume-tiers { margin-top: 1.2rem; }
.pdp-volume-saving-badge { font-size: 11px; font-weight: 700; color: #5a2a3a; text-transform: uppercase; background: rgba(216, 185, 139, 0.35); padding: 2px 8px; border-radius: 20px; letter-spacing: 0.5px; }
.pdp-volume-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: .5rem; }
.pdp-volume-card {
  min-height: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .5rem .25rem;
  border: 1.5px solid var(--vx-line);
  background: var(--vx-ivory);
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: all var(--duration-fast) var(--ease);
}
.pdp-volume-card__tag {
  position: absolute;
  top: -7px;
  background: #d8b98b;
  color: #111;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.4px;
  line-height: 1.1;
  text-transform: uppercase;
}
.pdp-volume-card__tag--popular { background: #5a2a3a; color: #fff; }
.pdp-volume-card__tag--best { background: #7a1f2d; color: #fff; }
.pdp-volume-card__qty { font-family: var(--font-condensed); font-size: 1.05rem; font-weight: 700; color: var(--vx-fig); line-height: 1.1; }
.pdp-volume-card__title { color: #111; font-size: 11px; font-weight: 600; text-transform: uppercase; margin-top: 2px; }
.pdp-volume-card__sub { color: var(--vx-muted); font-size: 10px; font-weight: 500; }
.pdp-volume-card:hover { border-color: var(--vx-gold); transform: translateY(-1px); }
.pdp-volume-card[aria-pressed='true'], .pdp-volume-card.is-active {
  color: var(--vx-fig);
  border-color: var(--vx-fig);
  background: rgba(90, 42, 58, 0.06);
  box-shadow: 0 0 0 1.5px var(--vx-fig);
}
.pdp-volume-card[aria-pressed='true'] .pdp-volume-card__qty { color: var(--vx-fig); }
.pdp-volume-card[aria-pressed='true'] .pdp-volume-card__sub { color: var(--vx-fig); font-weight: 700; }
@media (max-width: 480px) {
  .pdp-volume-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
}
.bundle-option {
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  padding: .6rem .45rem;
  border: 1.5px solid var(--vx-line);
  background: var(--vx-ivory);
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease);
}
.bundle-option strong, .bundle-option span { display: block; }
.bundle-option strong { font-family: var(--font-condensed); font-size: .95rem; font-weight: 700; color: var(--vx-fig); text-transform: uppercase; }
.bundle-option span { color: var(--vx-muted); font-size: 11px; font-weight: 500; }
.bundle-option:hover { border-color: var(--vx-gold); transform: translateY(-1px); }
.bundle-option[aria-pressed='true'], .bundle-option.is-active {
  color: var(--vx-fig);
  border-color: var(--vx-fig);
  background: rgba(90, 42, 58, 0.08);
  box-shadow: 0 0 0 1px var(--vx-fig);
}
.bundle-option[aria-pressed='true'] span { color: var(--vx-fig); font-weight: 600; }
.bundle-shade-picker { margin: 1rem 0; padding: .9rem; border: 1px solid var(--vx-champagne-600); background: var(--vx-champagne-100); }
.bundle-shade-picker__prompt { margin: 0 0 .65rem; font-family: var(--font-condensed); font-size: .9rem; font-weight: 700; text-transform: uppercase; }
.bundle-shade-picker__choices { display: flex; flex-wrap: wrap; gap: .45rem; }
.bundle-shade-picker__choice { min-height: 40px; display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .55rem; border: 1px solid var(--vx-line-dark); background: var(--vx-white); font-size: var(--text-xs); }
.bundle-shade-picker__choice > span { width: 24px; height: 24px; background: var(--shade); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 12%); }
.bundle-shade-picker__choice .bundle-shade-picker__remove { min-width: 24px; min-height: 24px; display: inline-grid; place-items: center; margin-left: .1rem; border-left: 1px solid var(--vx-line); color: var(--vx-berry-900); font-size: 1.2rem; font-weight: 400; line-height: 1; }
.bundle-shade-picker__choice:hover .bundle-shade-picker__remove, .bundle-shade-picker__choice:focus-visible .bundle-shade-picker__remove { color: var(--vx-berry-700); }
.purchase-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: .7rem; margin-top: 1.2rem; }
.pdp form.cart .single_add_to_cart_button {
  width: 100%;
  flex: 1;
  min-height: 50px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vx-white);
  background: var(--vx-fig);
  border: 1px solid var(--vx-fig);
  transition: all var(--duration-fast) var(--ease);
}
.pdp form.cart .single_add_to_cart_button:hover {
  background: var(--vx-berry-800);
  border-color: var(--vx-gold);
  box-shadow: 0 4px 16px rgba(90, 42, 58, 0.25);
}
.pdp form.cart { display: grid; gap: .8rem; }
.pdp form.cart .quantity { width: 88px; }
.quantity { height: 46px; display: grid; grid-template-columns: 38px 1fr 38px; border: 1px solid var(--vx-line-dark); }
.quantity button { display: grid; place-items: center; }
.quantity button:hover { background: var(--vx-rose-50); }
.quantity output { display: grid; place-items: center; font-weight: 500; }
.pdp__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .7rem; }
.pdp__actions .button:first-child { grid-column: 1 / -1; }
/* Reassurance perks */
.pdp__perks {
  display: grid;
  gap: .65rem;
  margin: 1.5rem 0;
  padding: 1.1rem 0;
  border-top: 1px solid var(--vx-line);
  border-bottom: 1px solid var(--vx-line);
  background: none;
}
.pdp__perk { display: flex; align-items: center; gap: .65rem; font-size: var(--text-sm); font-weight: 500; color: var(--vx-ink); }
.pdp__perk .icon { width: 20px; height: 20px; flex: 0 0 auto; color: var(--vx-gold); stroke-width: 1.75; }
.pdp-accordion { border-top: 1px solid var(--vx-line); margin-top: 1rem; }
.pdp-accordion details { border-bottom: 1px solid var(--vx-line); padding-block: .25rem; }
.pdp-accordion summary {
  padding: 1rem 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--vx-fig);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.pdp-accordion summary::-webkit-details-marker { display: none; }
.pdp-accordion summary::after { content: '+'; font-size: 1.25rem; font-weight: 400; color: var(--vx-gold); }
.pdp-accordion details[open] summary::after { content: '−'; color: var(--vx-fig); }
.pdp-accordion__content { padding: 0 0 1.2rem; color: #333; font-size: var(--text-sm); line-height: 1.65; }
.pdp-accordion__content p { margin: 0 0 0.85rem; }
.pdp-accordion__content p:last-child { margin-bottom: 0; }
.review-summary { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 3rem; padding: 2rem; background: var(--vx-sand-50); }
.review-score { text-align: center; }
.review-score strong { display: block; font-family: var(--font-display); font-size: 4rem; font-weight: 500; line-height: 1; }
.rating-bars { display: grid; gap: .45rem; }
.rating-bar { display: grid; grid-template-columns: 50px 1fr 36px; gap: .7rem; align-items: center; font-size: var(--text-xs); }
.rating-bar div { height: 7px; background: var(--vx-white); }
.rating-bar span { height: 100%; display: block; background: var(--vx-berry-800); }
.review-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.review-card { padding: 1.3rem; border: 1px solid var(--vx-line); }
.review-card h3 { margin: .5rem 0; font-family: var(--font-condensed); text-transform: uppercase; }
.review-card p { color: var(--vx-muted); font-size: var(--text-sm); }
.zoom-dialog { width: min(950px, calc(100vw - 2rem)); height: min(92vh, 900px); position: fixed; z-index: var(--z-drawer); inset: 50% auto auto 50%; margin: 0; padding: 0; border: 0; visibility: hidden; background: var(--vx-white); box-shadow: var(--shadow-panel); opacity: 0; transform: translate(-50%, -48%); transition: opacity var(--duration), transform var(--duration), visibility var(--duration); }
.zoom-dialog[open], .zoom-dialog.is-open { visibility: visible; opacity: 1; transform: translate(-50%, -50%); }
.zoom-dialog::backdrop { background: rgb(20 4 6 / 72%); backdrop-filter: blur(2px); }
.zoom-dialog img { width: 100%; height: 100%; object-fit: contain; }
.zoom-dialog .icon-button { position: absolute; z-index: 2; top: .75rem; right: .75rem; background: var(--vx-white); box-shadow: var(--shadow-sm); }

/* PDP sticky purchase bar (reference pins one once the form scrolls away) */
.pdp-sticky-bar { position: fixed; z-index: var(--z-sticky); right: 0; bottom: 0; left: 0; border-top: 1px solid var(--vx-line); background: var(--vx-white); box-shadow: 0 -4px 18px rgb(33 23 25 / 10%); transform: translateY(100%); transition: transform var(--duration) var(--ease); }
.pdp-sticky-bar.is-visible { transform: none; }
.pdp-sticky-bar__inner { max-width: 1208px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-inline: auto; padding: .7rem var(--gutter); }
.pdp-sticky-bar__product { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.pdp-sticky-bar__product img { width: 48px; height: 56px; object-fit: cover; background: var(--vx-sand-50); }
.pdp-sticky-bar__product strong { display: block; font-size: .875rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.pdp-sticky-bar__price { font-size: var(--text-sm); }
.pdp-sticky-bar__price del { color: var(--vx-muted); }
.pdp-sticky-bar__price ins { color: var(--vx-sale); text-decoration: none; }
.pdp-sticky-bar__action { min-width: 220px; }
@media (max-width: 599px) {
  .pdp-sticky-bar__product span { display: none; }
  .pdp-sticky-bar__action { min-width: 0; flex: 1; }
}

/* Cart, checkout, auth and documents */
.cart-layout, .checkout-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 2rem; align-items: start; }
.cart-panel, .summary-card, .form-card { padding: 1.5rem; border: 1px solid var(--vx-line); background: var(--vx-white); }
.cart-line { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; gap: 1rem; padding-block: 1.25rem; border-bottom: 1px solid var(--vx-line); }
.cart-line:first-child { padding-top: 0; }
.cart-line__image { width: 116px; height: 132px; object-fit: cover; background: var(--vx-sand-50); }
.cart-line h3 { font-family: var(--font-condensed); font-size: 1rem; text-transform: uppercase; }
.cart-line__meta { color: var(--vx-muted); font-size: var(--text-xs); }
.cart-line__controls { display: flex; align-items: center; gap: 1rem; margin-top: .8rem; }
.cart-line__controls .quantity { width: 106px; height: 38px; grid-template-columns: 32px 1fr 32px; }
.remove-link { color: var(--vx-muted); font-size: var(--text-xs); text-decoration: underline; text-underline-offset: 3px; }
.summary-card { position: sticky; top: 72px; }
.summary-card h2, .form-card h2 { margin-bottom: 1rem; font-family: var(--font-condensed); text-transform: uppercase; }
.summary-row { display: flex; justify-content: space-between; gap: 1rem; padding-block: .55rem; font-size: var(--text-sm); }
.summary-row--total { margin-top: .6rem; padding-top: 1rem; border-top: 1px solid var(--vx-line); font-size: 1rem; font-weight: 700; }
.promo-form { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin: 1rem 0; }
.prototype-note { display: flex; align-items: flex-start; gap: .65rem; padding: .85rem; border-left: 3px solid var(--vx-info); background: #eef7fa; color: #294a5c; font-size: var(--text-xs); }
.prototype-note .icon { width: 19px; height: 19px; flex: 0 0 auto; }
.empty-state { max-width: 720px; margin: 2rem auto; padding: clamp(2rem, 7vw, 5rem); border: 1px solid var(--vx-line); background: var(--vx-sand-50); text-align: center; }
.empty-state .icon { width: 42px; height: 42px; margin: 0 auto 1rem; color: var(--vx-berry-700); }
.empty-state p { margin: .8rem auto 1.4rem; color: var(--vx-muted); }
.checkout-steps { display: flex; gap: 1rem; margin: 1rem 0 2rem; }
.checkout-step { display: flex; flex: 1; align-items: center; gap: .5rem; padding-bottom: .7rem; border-bottom: 2px solid var(--vx-line); color: var(--vx-muted); font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; }
.checkout-step.is-active { color: var(--vx-berry-800); border-color: var(--vx-berry-800); }
.checkout-step span { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; }
.payment-option { display: flex; gap: .8rem; padding: 1rem; border: 1px solid var(--vx-line); }
.payment-option + .payment-option { margin-top: .6rem; }
.payment-option input { width: 18px; height: 18px; accent-color: var(--vx-berry-800); }
.payment-option strong, .payment-option small { display: block; }
.payment-option small { margin-top: .2rem; color: var(--vx-muted); }
.auth-wrap { min-height: 650px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 540px); }
.auth-visual { position: relative; overflow: hidden; background: var(--vx-rose-100); }
.auth-visual img { width: 100%; height: 100%; position: absolute; object-fit: cover; }
.auth-visual::after { content: ''; position: absolute; inset: 0; border-right: 1px solid rgb(42 7 13 / 10%); pointer-events: none; }
.auth-form { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 5rem); }
.auth-form form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.auth-divider { display: flex; align-items: center; gap: 1rem; color: var(--vx-muted); font-size: var(--text-xs); }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: var(--vx-line); }
.document-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 3rem; padding-block: 3rem 6rem; }
.document-nav { align-self: start; display: grid; position: sticky; top: 72px; border: 1px solid var(--vx-line); }
.document-nav a { padding: .7rem .85rem; border-bottom: 1px solid var(--vx-line); font-size: var(--text-sm); }
.document-nav a:last-child { border-bottom: 0; }
.document-nav a[aria-current='page'] { color: var(--vx-white); background: var(--vx-berry-900); }
.document-content { max-width: 820px; }
.document-content h2 { margin: 2rem 0 .7rem; font-family: var(--font-display); font-size: 1.8rem; font-weight: 500; }
.document-content h2:first-child { margin-top: 0; }
.document-content h3 { margin: 1.4rem 0 .45rem; font-family: var(--font-condensed); text-transform: uppercase; }
.document-content p, .document-content li { color: #51474a; }
.document-content p + p { margin-top: .8rem; }
.document-content ul, .document-content ol { display: grid; gap: .45rem; padding-left: 1.2rem; }
.faq-list { border-top: 1px solid var(--vx-line); }
.faq-list details { border-bottom: 1px solid var(--vx-line); }
.faq-list summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; font-family: var(--font-condensed); font-size: 1rem; font-weight: 500; text-transform: uppercase; list-style: none; }
.faq-list summary::after { content: '+'; }
.faq-list details[open] summary::after { content: '−'; }
.faq-list p { padding: 0 0 1.2rem; color: var(--vx-muted); }
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2rem; }
.contact-methods { display: grid; gap: .8rem; }
.contact-method { display: flex; gap: .8rem; padding: 1rem; border: 1px solid var(--vx-line); }
.contact-method .icon { color: var(--vx-berry-700); }
.contact-method strong, .contact-method span { display: block; }
.contact-method span { color: var(--vx-muted); font-size: var(--text-xs); }
.tracking-card { max-width: 760px; margin: 0 auto; padding: clamp(1.3rem, 4vw, 2.5rem); border: 1px solid var(--vx-line); background: var(--vx-white); }
.tracking-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: .7rem; }
.timeline { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 2.5rem; }
.timeline::before { content: ''; height: 2px; position: absolute; top: 12px; right: 8%; left: 8%; background: var(--vx-line); }
.timeline-step { position: relative; z-index: 1; text-align: center; }
.timeline-step::before { content: ''; width: 24px; height: 24px; display: block; margin: 0 auto .6rem; border: 4px solid var(--vx-white); border-radius: 50%; background: var(--vx-line-dark); box-shadow: 0 0 0 1px var(--vx-line); }
.timeline-step.is-complete::before, .timeline-step.is-current::before { background: var(--vx-success); }
.timeline-step.is-current::before { box-shadow: 0 0 0 4px rgb(46 106 77 / 18%); }
.timeline-step strong { display: block; font-family: var(--font-condensed); font-size: .75rem; text-transform: uppercase; }
.timeline-step span { color: var(--vx-muted); font-size: 10px; }
.tier-cards, .reward-grid, .programme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tier-card, .reward-card, .programme-card { padding: 1.5rem; border: 1px solid var(--vx-line); background: var(--vx-white); }
.tier-card h3, .reward-card h3, .programme-card h3 { margin: .5rem 0; font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; }
.tier-card ul, .programme-card ul { display: grid; gap: .5rem; margin-top: 1rem; padding-left: 1rem; color: var(--vx-muted); font-size: var(--text-sm); }
.preference-wizard { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 2rem; }
.wizard-progress { align-self: start; position: sticky; top: 72px; padding: 1.5rem; color: var(--vx-white); background: var(--vx-berry-950); }
.wizard-progress ol { display: grid; gap: .8rem; margin-top: 1rem; padding-left: 1.4rem; }
.wizard-progress li { color: rgb(255 255 255 / 62%); }
.wizard-progress li.is-active { color: var(--vx-white); font-weight: 700; }
.wizard-panel { min-height: 460px; padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid var(--vx-line); }
.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1.5rem; }
.choice-card { min-height: 130px; display: grid; place-items: center; align-content: center; gap: .4rem; padding: 1rem; border: 1px solid var(--vx-line-dark); text-align: center; }
.choice-card[aria-pressed='true'] { color: var(--vx-white); border-color: var(--vx-berry-900); background: var(--vx-berry-900); }

/* Shared portal system */
.portal-body { min-height: 100vh; background: #f6f3f1; }
.portal-shell { min-height: 100vh; display: grid; grid-template-columns: 264px minmax(0, 1fr); }
.portal-sidebar { display: flex; position: sticky; top: 0; height: 100vh; flex-direction: column; overflow: auto; color: var(--vx-white); background: var(--vx-berry-950); }
.portal-brand { min-height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid rgb(255 255 255 / 12%); }
.portal-brand .wordmark { color: var(--vx-white); font-size: 1.45rem; }
.portal-badge { padding: .25rem .45rem; border: 1px solid rgb(255 255 255 / 25%); border-radius: var(--radius-pill); font-size: 9px; text-transform: uppercase; }
.portal-nav { display: grid; gap: .2rem; padding: 1rem .75rem; }
.portal-nav__group { margin: .9rem .65rem .35rem; color: rgb(255 255 255 / 45%); font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.portal-nav__item { min-height: 43px; display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; border-radius: var(--radius); color: rgb(255 255 255 / 72%); font-size: var(--text-sm); text-align: left; }
.portal-nav__item .icon { width: 19px; height: 19px; }
.portal-nav__item:hover, .portal-nav__item[aria-current='page'] { color: var(--vx-white); background: rgb(255 255 255 / 11%); }
.portal-nav__item[aria-current='page'] { box-shadow: inset 3px 0 0 #d8b485; }
.portal-sidebar__footer { margin-top: auto; padding: 1rem; border-top: 1px solid rgb(255 255 255 / 12%); }
.portal-user { display: flex; align-items: center; gap: .7rem; }
.avatar { width: 38px; height: 38px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--vx-berry-950); background: #d8b485; font-size: .75rem; font-weight: 700; }
.portal-user strong, .portal-user span { display: block; }
.portal-user strong { font-size: .77rem; }
.portal-user span { color: rgb(255 255 255 / 52%); font-size: 10px; }
.portal-main { min-width: 0; }
.portal-topbar { min-height: 76px; display: flex; position: sticky; z-index: 10; top: 0; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem clamp(1rem, 3vw, 2rem); border-bottom: 1px solid var(--vx-line); background: var(--vx-white); }
.portal-topbar__title h1 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 500; line-height: 1.05; }
.portal-topbar__title p { color: var(--vx-muted); font-size: var(--text-xs); }
.portal-topbar__actions { display: flex; align-items: center; gap: .5rem; }
.portal-menu-toggle { display: none; }
.portal-content { padding: clamp(1rem, 3vw, 2rem); }
.portal-view { display: none; }
.portal-view.is-active { display: block; animation: view-in var(--duration) var(--ease); }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--vx-line); background: var(--vx-white); }
.metric-card { min-height: 122px; padding: 1.15rem; border-right: 1px solid var(--vx-line); background: transparent; }
.metric-card:last-child { border-right: 0; }
.metric-card__head { display: flex; justify-content: space-between; color: var(--vx-muted); font-size: var(--text-xs); }
.metric-card__head .icon { display: none; }
.metric-card strong { display: block; margin-top: .55rem; font-family: var(--font-display); font-size: 2rem; font-weight: 500; line-height: 1; }
.metric-card__trend { margin-top: .6rem; color: var(--vx-success); font-size: 10px; }
.portal-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.portal-card { grid-column: span 6; padding: 1.2rem; border: 1px solid var(--vx-line); border-radius: var(--radius-sm); background: var(--vx-white); }
.portal-card--wide { grid-column: 1 / -1; }
.portal-card--third { grid-column: span 4; }
.portal-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.portal-card__head h2 { font-family: var(--font-condensed); font-size: 1rem; text-transform: uppercase; }
.chart-bars { height: 220px; display: flex; align-items: end; gap: .7rem; padding-top: 1.5rem; border-bottom: 1px solid var(--vx-line); }
.chart-bar { min-width: 18px; flex: 1; position: relative; background: var(--vx-berry-800); }
.chart-bar span { position: absolute; right: 0; bottom: -24px; left: 0; color: var(--vx-muted); font-size: 9px; text-align: center; }
.donut-wrap { display: grid; grid-template-columns: 150px 1fr; gap: 1.5rem; align-items: center; }
.donut { width: 140px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--vx-berry-800) 0 52%, #c18b94 52% 77%, #d8b485 77% 91%, var(--vx-line) 91%); }
.donut::after { content: 'PKR 2.4M'; width: 88px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--vx-white); font-size: 11px; font-weight: 700; text-align: center; }
.legend { display: grid; gap: .5rem; list-style: none; }
.legend li { display: flex; justify-content: space-between; gap: .7rem; color: var(--vx-muted); font-size: var(--text-xs); }
.portal-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: 1rem; }
.portal-toolbar__filters { display: flex; flex-wrap: wrap; gap: .55rem; }
.portal-toolbar .field, .portal-toolbar .select { width: auto; min-width: 160px; min-height: 40px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--vx-line); border-radius: var(--radius-sm); background: var(--vx-white); }
.data-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.data-table th, .data-table td { padding: .8rem .9rem; border-bottom: 1px solid var(--vx-line); text-align: left; vertical-align: middle; }
.data-table th { color: var(--vx-muted); background: var(--vx-sand-50); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.data-table td { font-size: .75rem; }
.data-table tbody tr:hover { background: var(--vx-rose-50); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.table-product { display: flex; align-items: center; gap: .7rem; }
.table-product img { width: 42px; height: 42px; object-fit: cover; background: var(--vx-sand-100); }
.table-product strong, .table-product span { display: block; }
.table-product span { color: var(--vx-muted); font-size: 10px; }
.row-actions { display: flex; gap: .2rem; }
.row-actions .icon-button { width: 34px; height: 34px; }
.tabs { display: flex; gap: .25rem; overflow-x: auto; margin-bottom: 1rem; border-bottom: 1px solid var(--vx-line); }
.tab { min-height: 42px; flex: 0 0 auto; padding: .65rem .9rem; border-bottom: 2px solid transparent; color: var(--vx-muted); font-size: var(--text-sm); }
.tab[aria-selected='true'] { color: var(--vx-berry-800); border-bottom-color: var(--vx-berry-800); font-weight: 700; }
.config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.config-card { padding: 1.2rem; border: 1px solid var(--vx-line); border-radius: var(--radius-sm); background: var(--vx-white); }
.config-card h2 { margin-bottom: .8rem; font-family: var(--font-condensed); font-size: 1rem; text-transform: uppercase; }
.switch-row { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .55rem; border-bottom: 1px solid var(--vx-line); }
.switch-row:last-child { border-bottom: 0; }
.switch-row strong, .switch-row span { display: block; }
.switch-row span { color: var(--vx-muted); font-size: 10px; }
.switch { width: 42px; height: 24px; position: relative; border-radius: var(--radius-pill); background: var(--vx-line-dark); }
.switch::after { content: ''; width: 18px; height: 18px; position: absolute; top: 3px; left: 3px; border-radius: 50%; background: var(--vx-white); transition: transform var(--duration-fast); }
.switch[aria-pressed='true'] { background: var(--vx-success); }
.switch[aria-pressed='true']::after { transform: translateX(18px); }
.drawer-form { width: min(620px, 96vw); }
.drawer-form .drawer__body { display: grid; align-content: start; gap: 1rem; }
.loading-state { min-height: 260px; display: grid; place-items: center; }
.spinner { width: 32px; height: 32px; border: 3px solid var(--vx-line); border-top-color: var(--vx-berry-800); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.copy-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.copy-field .field { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.copy-field .button { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.commission-hero { display: grid; grid-template-columns: 1.1fr .9fr; overflow: hidden; color: var(--vx-white); border-radius: var(--radius-sm); background: var(--vx-berry-900); }
.commission-hero__copy { padding: clamp(1.5rem, 4vw, 3rem); }
.commission-hero__copy strong { display: block; margin: .5rem 0; font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 500; line-height: 1; }
.commission-hero__art { display: grid; place-items: center; min-height: 280px; border-left: 1px solid rgb(255 255 255 / 18%); background: rgb(255 255 255 / 4%); }
.commission-hero__art img { width: 78%; max-height: 280px; object-fit: contain; }

/* WooCommerce native elements mapped to the reference system */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-button,
button.single_add_to_cart_button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .7rem 1.5rem;
  border: 1px solid var(--vx-berry-900);
  border-radius: 0;
  color: var(--vx-white);
  background: var(--vx-berry-900);
  font-family: var(--font-condensed);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1.125;
  text-transform: uppercase;
  transition: color var(--duration-fast), background var(--duration-fast), border-color var(--duration-fast);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
button.single_add_to_cart_button:hover { color: var(--vx-white); border-color: var(--vx-berry-700); background: var(--vx-berry-700); }
.woocommerce a.added_to_cart { margin-left: .6rem; font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px; }
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button,
.woocommerce button.button.alt.single_add_to_cart_button,
body .single_add_to_cart_button,
body .wp-element-button,
.woocommerce a.button.alt.disabled, .woocommerce button.button.alt.disabled,
body .single_add_to_cart_button.disabled {
  color: var(--vx-white);
  border-radius: 0;
  background: var(--vx-berry-900);
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
body .single_add_to_cart_button:hover { background: var(--vx-berry-700); }
.woocommerce a.button.disabled, .woocommerce button.button.disabled, .woocommerce input.button.disabled,
body .single_add_to_cart_button.disabled, body .single_add_to_cart_button.wc-variation-selection-needed { opacity: .45; }
.pdp form.cart button.single_add_to_cart_button { width: 100%; font-size: 1rem; line-height: 1.125; }
.woocommerce span.onsale {
  min-width: 0;
  min-height: 0;
  padding: .3rem .65rem;
  border-radius: 0;
  color: var(--vx-white);
  background: var(--vx-danger);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1;
  text-transform: uppercase;
}
.woocommerce ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 8px; margin: 0 0 2rem; padding: 0; list-style: none; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product { width: auto; float: none; margin: 0; text-align: left; }
.woocommerce ul.products li.product a img { margin: 0 0 .8rem; background: var(--vx-sand-50); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 0; color: var(--vx-ink); font-size: .875rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.woocommerce ul.products li.product .price { color: var(--vx-ink); font-size: var(--text-base); }
.woocommerce ul.products li.product .price del { color: var(--vx-muted); }
.woocommerce ul.products li.product .price ins { color: var(--vx-sale); font-weight: 700; text-decoration: none; }
.woocommerce ul.products li.product .button { width: 100%; margin-top: .6rem; color: var(--vx-berry-900); background: transparent; }
.woocommerce ul.products li.product .button:hover { color: var(--vx-white); background: var(--vx-berry-900); }
.woocommerce .star-rating span::before, .woocommerce .star-rating::before { color: var(--vx-berry-900); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text {
  min-height: 44px;
  padding: .7rem .85rem;
  border: 1px solid var(--vx-line-dark);
  border-radius: 0;
  background: var(--vx-white);
}
.woocommerce .quantity .qty { min-height: 44px; border: 1px solid var(--vx-line-dark); border-radius: 0; background: var(--vx-white); text-align: center; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top: none;
  border-left: 3px solid var(--vx-berry-900);
  background: var(--vx-sand-50);
  color: var(--vx-ink);
  padding: .85rem 1.25rem !important;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before {
  content: none !important;
  display: none !important;
}
.woocommerce table.shop_table { border: 1px solid var(--vx-line); border-radius: 0; border-collapse: collapse; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--vx-line); }

/* Cart/checkout blocks mapped to the reference system */

/* WooCommerce sizes the main/sidebar columns as percentages that assume the
   flex row has no gap. The editor's block-gap injects 24px, which pushes the
   pair past 100% and wraps the totals column onto its own line, leaving the
   right half of the page empty. Keep the row intact and let WooCommerce's own
   padding do the spacing. */
.wc-block-components-sidebar-layout {
  flex-wrap: nowrap;
  gap: 0;
}
@media (max-width: 1000px) {
  .wc-block-components-sidebar-layout { flex-wrap: wrap; }
}

.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-block-components-select .wc-block-components-select__container,
.wc-block-components-textarea {
  border-radius: 0;
  border-color: var(--vx-berry-900);
  color: var(--vx-ink);
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus { border-color: var(--vx-berry-700); box-shadow: 0 0 0 1px var(--vx-berry-700); }
.wc-block-components-checkout-step__heading .wc-block-components-title,
.wp-block-woocommerce-checkout h2,
.wc-block-components-title { font-family: var(--font-condensed); font-size: 1.25rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.wc-block-components-radio-control__option {
  border: 1px solid var(--vx-line);
  border-radius: 0;
  margin-bottom: .6rem;
  padding: 1rem 1rem 1rem 3rem;
}
.wc-block-components-radio-control__input { accent-color: var(--vx-berry-900); }
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  height: 48px;
  border-radius: 0;
  color: var(--vx-white);
  background: var(--vx-berry-900);
  font-family: var(--font-condensed);
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.wc-block-components-button:not(.is-link):hover { background: var(--vx-berry-700); }
.wc-block-components-product-name { color: var(--vx-ink); font-size: .875rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.wc-block-components-order-summary-item__image img,
.wc-block-cart-item__image img { border-radius: 0; background: var(--vx-sand-50); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-weight: 700; }
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-sidebar-layout .wc-block-components-sidebar { border-radius: 0; }
.wc-block-components-form .wc-block-components-checkout-step { border-color: var(--vx-line); }

/* --- Checkout polish -------------------------------------------------- */

/* Typography and rhythm, matched to the rest of the storefront. */
.wc-block-checkout__main { padding-right: clamp(1rem, 3vw, 3rem); }
.wc-block-components-checkout-step__title { font-family: var(--font-condensed); letter-spacing: var(--tracking); text-transform: uppercase; }
.wc-block-components-checkout-step__description,
.wc-block-components-checkout-step__heading-content { color: var(--vx-muted); font-size: var(--text-sm); line-height: 1.4; }
.wc-block-components-text-input input,
.wc-block-components-select .wc-block-components-select__container,
.wc-block-components-textarea { min-height: 48px; }
.wc-block-components-checkout-step { padding-block: 1.35rem; }

/* Summary column: card-like, and it follows the customer down the page while
   the form (which is much taller) scrolls. */
.wc-block-checkout__sidebar {
  position: sticky;
  top: 1.5rem;
  align-self: start;
  padding: 1.25rem;
  border: 1px solid var(--vx-line);
  border-top: 2px solid var(--vx-champagne-600);
  background: var(--vx-white);
}
.wc-block-components-order-summary-item__image img,
.wc-block-cart-item__image img { border: 1px solid var(--vx-line); }
.wc-block-components-order-summary-item__quantity { border-color: var(--vx-line); background: var(--vx-white); }

/* Discounted lines read like the product cards: struck original, bold sale. */
.wc-block-components-product-price del,
.wc-block-components-product-price__regular { color: var(--vx-muted); font-weight: 400; text-decoration: line-through; }
.wc-block-components-product-price ins,
.wc-block-components-product-price__value.is-discounted { color: var(--vx-sale); font-weight: 700; text-decoration: none; }
.wc-block-components-totals-discount .wc-block-components-totals-item__value { color: var(--vx-sale); font-weight: 700; }

@media (max-width: 1000px) {
  .wc-block-checkout__sidebar { position: static; padding: 1rem; }
  .wc-block-checkout__main { padding-right: 0; }
  /* Pay button stays reachable without scrolling back down the form. */
  .wc-block-checkout__actions {
    position: sticky;
    z-index: 5;
    bottom: 0;
    margin-inline: calc(var(--gutter) * -1);
    padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--vx-line);
    background: var(--vx-white);
  }
  .wc-block-components-checkout-place-order-button { width: 100%; }
}

/* Reassurance band appended after the checkout block. */
.checkout-assurance { margin-top: 2.5rem; padding: 1.75rem var(--gutter); border-top: 1px solid var(--vx-line); background: var(--vx-sand-50); }
.checkout-assurance__inner { max-width: var(--container); margin-inline: auto; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.checkout-assurance__item { display: flex; align-items: flex-start; gap: .75rem; }
.checkout-assurance__item svg { flex: none; width: 24px; height: 24px; color: var(--vx-berry-900); }
.checkout-assurance__item h3 { margin-bottom: .2rem; font-family: var(--font-condensed); font-size: var(--text-sm); font-weight: 700; letter-spacing: var(--tracking); text-transform: uppercase; }
.checkout-assurance__item p { color: var(--vx-muted); font-size: var(--text-sm); line-height: 1.35; }
.checkout-assurance__payments { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; justify-content: center; margin-top: 1.5rem; }
.checkout-assurance__secure { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .9rem; color: var(--vx-muted); font-size: var(--text-xs); }
.checkout-assurance__secure svg { width: 16px; height: 16px; }

/* Order confirmation */
.woocommerce-order .woocommerce-thankyou-order-received,
.wc-block-order-confirmation-status p,
.wp-block-woocommerce-order-confirmation-status h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  letter-spacing: .5px;
  text-align: center;
}
.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 1.5rem 0 2rem;
  padding: 1.25rem;
  border: 1px solid var(--vx-line);
  background: var(--vx-sand-50);
  list-style: none;
}
.woocommerce-order-overview li { border: 0; margin: 0; padding: 0; font-size: var(--text-sm); }
.woocommerce-order-overview li strong { display: block; }

@media (max-width: 1199px) {
  .desktop-nav__trigger { padding-inline: .5rem; font-size: .72rem; }
  .sticky-header .wordmark { padding-inline: .7rem; font-size: 1.3rem; }
  .sticky-header .wordmark__monogram { width: 34px; height: 34px; font-size: 12px; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-card, .category-card:nth-child(-n + 2) { grid-column: auto; min-height: 420px; }
  .product-grid, .plp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Flex wrapping handles the column count; no grid override needed. */
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card:nth-child(2n) { border-right: 0; }
  .metric-card:nth-child(n + 3) { border-top: 1px solid var(--vx-line); }
  .portal-card--third { grid-column: span 6; }
}

@media (max-width: 899px) {
  :root { --gutter: 1rem; --space-20: 4rem; --space-24: 4.5rem; }
  /* Mobile announcement matches the reference: a single centred message that
     is allowed to wrap onto a second line, with no manual prev/next chrome —
     the rail still auto-rotates. */
  .announcement { height: auto; min-height: 44px; display: block; padding: .55rem .9rem; font-size: .72rem; line-height: 1.35; }
  .announcement__control, .announcement__controls { display: none; }
  .announcement__message { overflow: visible; text-overflow: clip; white-space: normal; }
  .site-header__desktop, .sticky-header { display: none; }
  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--vx-white);
    border-bottom: 1px solid transparent;
    transition: box-shadow 240ms ease, border-color 240ms ease;
  }
  .site-header.is-scrolled-header {
    border-bottom-color: var(--vx-line);
    box-shadow: 0 2px 14px rgba(27, 13, 17, 0.07);
  }
  /* Once the page has scrolled the pinned bar keeps the icon row only, smoothly collapsing the search input */
  .mobile-header__search {
    transition: max-height 260ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease, margin 260ms ease, padding 260ms ease;
    max-height: 52px;
    overflow: hidden;
  }
  .site-header.is-mobile-compact .mobile-header__search {
    max-height: 0;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-color: transparent;
    opacity: 0;
    pointer-events: none;
  }
  .mobile-header { display: block; }
  .mobile-header__main { height: 56px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: .6rem; }
  .mobile-header__side { display: flex; align-items: center; }
  .mobile-header__side:last-child { justify-content: end; }
  /* The reference sets its wordmark at roughly a third of the row height and
     lets the icons carry the visual weight, so the mobile lockup is much
     lighter than the desktop one. */
  .mobile-header .wordmark { font-size: 1.2rem; font-weight: 500; letter-spacing: .015em; }
  .mobile-header .wordmark--monogram { justify-self: center; }
  .mobile-header .wordmark--monogram img { height: 34px; }
  .mobile-header__side .icon-button { width: 40px; height: 40px; }
  /* Reference badge: a filled disc hanging off the bag's right shoulder. */
  .mobile-header .bag-count { min-width: 17px; height: 17px; top: 6px; right: -1px; font-size: 9px; }
  .ac-mobile-menu { width: min(360px, 92vw); }
  .ac-mobile-menu .drawer__header { min-height: 48px; padding: .25rem .75rem; }
  .ac-mobile-menu .drawer__body { position: relative; padding: 0; }
  .mobile-menu__auth { min-height: 46px; display: flex; align-items: center; gap: .55rem; padding: .65rem 1rem; color: var(--vx-white); background: var(--vx-berry-800); font-family: var(--font-condensed); font-size: .78rem; letter-spacing: .02em; text-transform: uppercase; }
  .mobile-menu__auth a:hover { color: var(--vx-champagne-100); }
  .mobile-menu__language { margin-left: auto; white-space: nowrap; }
  .mobile-menu__list { list-style: none; }
  .mobile-menu__row { width: 100%; min-height: 60px; display: flex; align-items: center; gap: .75rem; padding: .35rem 1rem; border-bottom: 1px solid var(--vx-line); text-align: left; }
  .mobile-menu__row.is-coming-soon { opacity: .56; cursor: not-allowed; }
  .mobile-menu__thumb { width: 48px; height: 48px; flex: 0 0 auto; object-fit: cover; background: var(--vx-sand-100); }
  .mobile-menu__row span { flex: 1; font-family: var(--font-condensed); font-size: .96rem; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; }
  .mobile-menu__row .icon { width: 17px; height: 17px; transform: rotate(-90deg); }
  .ac-mobile-menu .mobile-submenu { width: min(360px, 92vw); min-height: 100dvh; position: fixed; inset: 0 auto 0 0; z-index: calc(var(--z-drawer) + 1); }
  .mobile-submenu__header { min-height: 58px; position: sticky; top: 0; z-index: 2; background: var(--vx-white); }
  .mobile-submenu__header h2 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; }
  .mobile-submenu__header .icon { width: 20px; height: 20px; }
  .mobile-submenu__groups { padding: .75rem 1.25rem 2rem; }
  .mobile-submenu__all { display: block; padding: 1rem 0; border-bottom: 1px solid var(--vx-line); font-family: var(--font-condensed); font-size: .92rem; font-weight: 700; text-transform: uppercase; }
  .mobile-submenu__groups ul { margin: 0; padding: .6rem 0 0; list-style: none; }
  .mobile-submenu__groups li { border-bottom: 1px solid var(--vx-line); }
  .mobile-submenu__groups li a { min-height: 52px; display: flex; align-items: center; font-size: .9rem; }
  html.has-mobile-menu-open .ac-mobile-overlay { visibility: visible; opacity: 1; }
  .search-panel { position: fixed; z-index: var(--z-drawer); inset: 0; overflow: auto; border: 0; background: var(--vx-white); }
  .search-panel__header { position: sticky; top: 0; padding: 1rem; background: var(--vx-white); }
  .search-panel__form { max-width: none; padding: .15rem .7rem; border: 1px solid var(--vx-line-dark); border-radius: var(--radius-pill); }
  .search-panel__input { min-height: 40px; font-size: .9rem; }
  .search-panel__suggestions { flex-wrap: wrap; gap: .6rem 1rem; padding: 1rem; }
  .hero__viewport { min-height: clamp(560px, 78vw, 660px); }
  .hero__slide { display: block; }
  /* Slide tones set dark ink text for readability on light desktop panels;
     on mobile the copy sits directly over the photo instead, so force white
     text and a solid scrim behind it regardless of tone. */
  .hero__copy, .hero__slide[data-tone='rose'] .hero__copy, .hero__slide[data-tone='sand'] .hero__copy { color: var(--vx-white); }
  .hero__copy { inset: auto 0 0; justify-content: flex-end; width: min(100%, 430px); max-width: none; min-height: 48%; padding: 2rem 1.3rem 4.8rem; }
  .hero__media { min-height: clamp(560px, 78vw, 660px); }
  .hero__media::before { background: linear-gradient(180deg, rgb(20 4 6 / 0%) 0%, rgb(20 4 6 / 20%) 32%, rgb(20 4 6 / 68%) 52%, rgb(20 4 6 / 93%) 100%); }
  .hero__image { object-position: center top; }
  .hero__title { max-width: 11ch; font-size: clamp(2.35rem, 8vw, 3.45rem); line-height: .9; }
  .hero__controls { right: 1rem; bottom: 1.15rem; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .category-card, .category-card:nth-child(-n + 2) { grid-column: auto; min-height: 0; }
  .category-card__image { aspect-ratio: 1 / 1; }
  .category-card__copy { padding: .7rem .35rem .9rem; }
  .category-card__copy h3 { font-size: .86rem; line-height: 1.2; }
  .product-rail { grid-auto-columns: 42vw; padding-left: 1rem; }
  .campaign-board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .split-feature, .loyalty-panel { grid-template-columns: 1fr; }
  .split-feature--reverse .split-feature__media { order: initial; }
  .tier-list { grid-template-columns: 1fr; }
  .footer-newsletter__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-main { grid-template-columns: 1fr; gap: 0; padding: 1rem; }
  .footer-group { border-bottom: 1px solid var(--vx-line); }
  .footer-group__title { display: none; }
  .footer-group__toggle { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-condensed); font-weight: 500; text-transform: uppercase; }
  .footer-group__toggle::after { content: '+'; }
  .footer-group__toggle[aria-expanded='true']::after { content: '−'; }
  .footer-group__links { padding: 0 0 1rem; }
  .footer-region { padding: 1.3rem 0; }
  .category-chips { justify-content: flex-start; gap: .9rem; }
  .listing-layout { grid-template-columns: 1fr; }
  .listing-toolbar { grid-column: auto; flex-wrap: wrap; row-gap: .75rem; }
  .listing-toolbar > div:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
  .listing-toolbar__mobile { display: inline-flex; }
  .filter-panel {
    width: min(360px, 90vw);
    display: flex;
    position: fixed;
    z-index: var(--z-drawer);
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    height: 100dvh;
    max-height: 100dvh;
    flex-direction: column;
    visibility: hidden;
    background: var(--vx-white);
    box-shadow: var(--shadow-panel);
    transform: translateX(-105%);
    transition: transform var(--duration) var(--ease), visibility var(--duration);
  }
  /* The legacy compatibility layer hides this panel by default. Keep the
     drawer in the layout once the storefront controller has opened it. */
  .filter-panel.is-mobile-open { display: flex; }
  .filter-panel.is-mobile-open { visibility: visible; transform: none; }
  .filter-panel__header { display: flex; align-items: center; justify-content: space-between; min-height: 66px; padding: .65rem 1rem .65rem 1.25rem; border-bottom: 1px solid var(--vx-line); }
  .filter-panel__body { display: block; flex: 1; overflow: auto; padding: 1.25rem; }
  .filter-panel__footer { padding: 1rem 1.25rem; border-top: 1px solid var(--vx-line); }
  .product-grid, .plp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem .65rem; }
  .pdp__layout { grid-template-columns: 1fr; }
  .gallery { position: static; grid-template-columns: 1fr; }
  .gallery__thumbs { grid-row: 2; grid-template-columns: repeat(4, 62px); overflow-x: auto; }
  .pdp__info { padding-top: 0; }
  .review-list { grid-template-columns: 1fr; }
  .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .summary-card { position: static; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-visual { min-height: 280px; }
  .document-layout { grid-template-columns: 1fr; }
  .document-nav { display: flex; position: static; overflow-x: auto; }
  .document-nav a { flex: 0 0 auto; border-right: 1px solid var(--vx-line); border-bottom: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .preference-wizard { grid-template-columns: 1fr; }
  .wizard-progress { position: static; }
  .tier-cards, .reward-grid, .programme-grid { grid-template-columns: 1fr; }
  .portal-shell { grid-template-columns: 1fr; }
  .portal-sidebar { width: min(300px, 86vw); position: fixed; z-index: var(--z-drawer); inset: 0 auto 0 0; visibility: hidden; box-shadow: var(--shadow-panel); transform: translateX(-105%); transition: transform var(--duration) var(--ease), visibility var(--duration); }
  .portal-shell.is-sidebar-open .portal-sidebar { visibility: visible; transform: none; }
  .portal-menu-toggle { display: inline-grid; }
  .portal-topbar__title p { display: none; }
  .portal-topbar__actions .button span { display: none; }
  .portal-card, .portal-card--third { grid-column: 1 / -1; }
  .config-grid { grid-template-columns: 1fr; }
  .commission-hero { grid-template-columns: 1fr; }
  .commission-hero__art { border-top: 1px solid rgb(255 255 255 / 18%); border-left: 0; }
}

@media (max-width: 599px) {
	/* Keep fixed mobile UI above device home indicators and make frequently
	   used controls comfortably tappable on narrow screens. */
	.site-header {
		padding-top: env(safe-area-inset-top);
	}

	.ac-mobile-menu,
	.search-overlay,
	.filter-panel,
	.drawer {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.toast-root {
		right: .75rem;
		bottom: calc(.75rem + env(safe-area-inset-bottom));
		left: .75rem;
	}

	.toast {
		max-width: none;
	}

	.quantity--minibag {
		width: 116px;
		height: 44px;
		grid-template-columns: 36px 1fr 36px;
	}

	.quantity--minibag button,
	.pdp__info .quantity button {
		min-width: 42px;
		min-height: 42px;
	}

	.quantity--minibag button {
		min-width: 0;
	}

	/* A narrow drawer cannot fit the desktop image/details/price columns.
	   Keep the price and controls inside the details column so opening the bag
	   never creates a horizontally clipped row. */
	.minibag__line {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: .75rem;
		padding-block: .9rem;
	}

	.minibag__image {
		width: 72px;
		height: 84px;
	}

	.minibag__details {
		min-width: 0;
	}

	.minibag__details h3,
	.minibag__meta {
		overflow-wrap: anywhere;
	}

	.minibag__controls {
		flex-wrap: wrap;
		gap: .55rem .65rem;
	}

	.minibag__price {
		grid-column: 2;
		margin-top: -.35rem;
		justify-self: start;
	}

	.pdp-sticky-bar__inner {
		padding-bottom: calc(.5rem + env(safe-area-inset-bottom));
	}

	.section-heading--split { display: block; text-align: center; }
  .section-heading--split .rail-controls { margin-top: 1rem; justify-content: center; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .search-overlay__top { min-height: 104px; padding: 1rem; }
  .search-overlay__results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .region-grid { grid-template-columns: 1fr; }
  .hero__viewport { min-height: min(690px, calc(100svh - 56px)); }
  .hero__media { min-height: min(690px, calc(100svh - 56px)); }
  .hero__copy { width: 100%; min-height: 0; padding: 1.35rem 1rem 4.35rem; }
  .hero__copy .eyebrow { margin-bottom: .85rem; font-size: .72rem; letter-spacing: 1.6px; }
  .hero__title { max-width: 11.5ch; font-size: clamp(2.08rem, 9.4vw, 2.72rem); letter-spacing: .2px; line-height: .92; }
  .hero__text { max-width: 24rem; margin: .78rem 0 1.05rem; font-size: .88rem; line-height: 1.35; }
  .hero__copy .button { min-width: 0; min-height: 44px; gap: .85rem; padding: .72rem .95rem; font-size: .78rem; line-height: 1; white-space: nowrap; }
  .hero__copy .button .icon { width: 17px; height: 17px; flex: 0 0 auto; }
  .hero__control { width: 40px; height: 40px; }
  .category-card { min-height: 0; }
  .category-card__copy { padding: .62rem .3rem .8rem; }
  .category-card__copy p { display: none; }
  .product-rail { grid-auto-columns: 46vw; }
  .product-card__info { min-height: 172px; }
  .campaign-board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .campaign-tile { min-height: 0; }
  .split-feature__media { min-height: 360px; }
  .value-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .newsletter-form { grid-template-columns: 1fr; }
  .newsletter-consent, .newsletter-status { grid-column: auto; }
  .footer-newsletter h2 { font-size: 1.85rem; }
  .page-hero { padding-block: 2.15rem; }
  .category-chip { min-width: 112px; }
  .category-chip img { width: 76px; height: 76px; }
  .product-grid { gap-inline: .45rem; }
  .product-card__name { font-size: .86rem; }
  .product-card__variant { font-size: 10px; }
  .product-card__action { padding-inline: .35rem; font-size: .75rem; }
  .bundle-grid { grid-template-columns: repeat(2, 1fr); }
  .purchase-row { grid-template-columns: 106px minmax(0, 1fr); }
  .pdp__actions { grid-template-columns: 1fr; }
  .pdp__actions .button:first-child { grid-column: auto; }
  .review-summary { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.2rem; }
  .cart-line { grid-template-columns: 82px 1fr; }
  .cart-line__image { width: 82px; height: 96px; }
  .cart-line__price { grid-column: 2; }
  .cart-panel, .summary-card, .form-card { padding: 1rem; }
  .checkout-steps { gap: .35rem; }
  .checkout-step { font-size: 9px; }
  .auth-visual { min-height: 220px; }
  .auth-form { padding: 2rem 1rem 3rem; }
  .tracking-form { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; gap: 1.2rem; }
  .timeline::before { width: 2px; height: calc(100% - 28px); top: 12px; left: 11px; }
  .timeline-step { display: grid; grid-template-columns: 28px 1fr; text-align: left; }
  .timeline-step::before { grid-row: 1 / span 2; margin: 0; }
  .choice-grid { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card { min-height: 106px; padding: 1rem; }
  .metric-card strong { font-size: 1.7rem; }
  .portal-topbar { min-height: 66px; }
  .portal-topbar__title h1 { font-size: 1.35rem; }
  .portal-content { padding: .8rem; }
  .portal-card { padding: 1rem; }
  .donut-wrap { grid-template-columns: 1fr; justify-items: center; }
  .portal-toolbar { align-items: stretch; }
  .portal-toolbar__filters, .portal-toolbar__filters .field, .portal-toolbar__filters .select { width: 100%; }
}

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

@media print {
  .announcement, .site-header, .site-footer, .portal-sidebar, .portal-topbar__actions, .button, .icon-button { display: none !important; }
  .portal-shell { display: block; }
  .portal-topbar { position: static; }
  body { background: #fff; }
}

/* Account benefits, above the register submit (reference account page). */
.account-benefits { margin: .5rem 0 1.1rem; padding: 1.1rem 1.15rem; border: 1px solid var(--vx-line); border-left: 3px solid var(--vx-champagne-600); background: var(--vx-sand-50); }
.account-benefits__title { margin-bottom: .8rem; font-family: var(--font-condensed); font-size: var(--text-base); font-weight: 700; letter-spacing: var(--tracking); line-height: var(--leading-ui); text-transform: uppercase; }
.account-benefits__list { display: grid; gap: .65rem; list-style: none; margin: 0; padding: 0; }
.account-benefits__list li { display: flex; align-items: center; gap: .7rem; font-size: var(--text-sm); line-height: 1.3; }
.account-benefits__icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; color: var(--vx-berry-900); }
.account-benefits__icon svg { width: 18px; height: 18px; }

/* Coming-soon placeholder for announced-but-unstocked categories. */
.coming-soon { padding: clamp(3rem, 9vw, 7rem) var(--gutter); background: linear-gradient(180deg, var(--vx-champagne-100), var(--vx-white)); text-align: center; }
.coming-soon__inner { max-width: 640px; margin-inline: auto; }
.coming-soon .accent-rule { margin-inline: auto; }
.coming-soon__copy { margin-top: 1.4rem; color: var(--vx-muted); font-size: var(--text-md); line-height: var(--leading-body); }
.coming-soon__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 2rem; }

/* Registration form, matched to the reference's field order and legal footer. */
.field-row { display: grid; gap: 0 .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.register-consent { display: flex; align-items: flex-start; gap: .6rem; margin: .25rem 0 1rem; font-size: var(--text-sm); line-height: 1.35; }
.register-consent input { flex: none; width: 18px; height: 18px; margin-top: .1rem; }
.register-legal { margin-top: .9rem; color: var(--vx-muted); font-size: var(--text-xs); line-height: 1.4; }
@media (max-width: 600px) {
  .field-row { grid-template-columns: minmax(0, 1fr); }
}

/* Region control inside footer utility column */
.footer-group__region { margin-top: 1.25rem; }
.footer-group__region .footer-group__title {
  display: block !important;
  margin-bottom: .6rem;
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.footer-group__region .region-trigger { min-height: 38px; font-size: var(--text-sm); }

/* PDP size line, printed under the title as on the reference. */
.pdp__size { margin: .1rem 0 .5rem; color: var(--vx-muted); font-family: var(--font-condensed); font-size: var(--text-sm); letter-spacing: var(--tracking); text-transform: uppercase; }

/* Whole-slide click target. Sits under the copy block so the CTA button, the
   real keyboard-focusable control, still receives its own clicks. */
.hero__link { position: absolute; z-index: 1; inset: 0; display: block; }
.hero__copy { position: absolute; z-index: 2; }

/* --- Hero motion ------------------------------------------------------ */
/* Layered on top of the existing slide/copy transitions. Everything here is
   transform/opacity only so it stays on the compositor, and the global
   prefers-reduced-motion rule above neutralises all of it. */

/* Headline resolves letter by letter rather than arriving as a finished block. */
/* Transform/opacity only: animating letter-spacing reflows the headline on
   every frame, which reads as the text jumping as the slide settles. */
.hero__slide.is-active .hero__title { animation: hero-title-in .9s var(--ease) both; }
@keyframes hero-title-in {
  from { opacity: 0; transform: translateY(22px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Eyebrow draws its own champagne underline in. */
.hero__slide.is-active .eyebrow { position: relative; }
.hero__slide.is-active .eyebrow::after {
  content: '';
  position: absolute;
  bottom: -.35rem;
  left: 0;
  height: 1px;
  width: 100%;
  background: var(--vx-champagne);
  transform-origin: left;
  animation: hero-rule-in .9s var(--ease) .3s both;
}
@keyframes hero-rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* CTA lifts and its arrow leans forward on hover. */
.hero__copy .button { transition: transform var(--duration) var(--ease), background var(--duration), color var(--duration); }
.hero__copy .button:hover { transform: translateY(-2px); }
.hero__copy .button svg { transition: transform var(--duration) var(--ease); }
.hero__copy .button:hover svg { transform: translateX(4px); }


/* Admin-marked emphasis in announcements: [blink]...[/blink]. A soft pulse
   rather than a hard on/off flash, which is both less jarring and less of an
   accessibility risk than true blinking text. */
.blink { animation: blink-pulse 1.6s ease-in-out infinite; font-weight: 700; }
@keyframes blink-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ==========================================================================
   VittoriaX Empty Cart & Responsive Checkout Experience
   ========================================================================== */

.empty-cart-view {
  padding-block: clamp(2.5rem, 6vw, 5rem);
  text-align: center;
}

.empty-cart-hero {
  max-width: 620px;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 3.5rem) 1.5rem;
  background: var(--vx-white);
  border: 1px solid var(--vx-line);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.empty-cart-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 1.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vx-rose-50);
  color: var(--vx-berry-900);
}

.empty-cart-icon svg {
  width: 32px;
  height: 32px;
}

.empty-cart-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.35rem);
  font-weight: 400;
  color: var(--vx-berry-950, #350509);
  margin-bottom: .75rem;
  letter-spacing: -.01em;
}

.empty-cart-subtitle {
  color: var(--vx-muted);
  font-size: var(--text-base);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.empty-cart-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.empty-cart-cta {
  min-height: 50px;
  padding: .75rem 2rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  background: var(--vx-berry-900);
  color: var(--vx-white);
  border: none;
  transition: all var(--duration-fast) var(--ease);
}

.empty-cart-cta:hover {
  background: var(--vx-berry-800);
  color: var(--vx-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(100, 20, 40, 0.2);
}

.empty-cart-recommendations {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--vx-line);
}

.empty-cart-recommendations__head {
  text-align: center;
  margin-bottom: 2.5rem;
}

.empty-cart-recommendations .product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 1.25rem;
}

@media (max-width: 1024px) {
  .empty-cart-recommendations .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
  }
}

@media (max-width: 599px) {
  .empty-cart-recommendations .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem .75rem;
  }
}

/* --- WooCommerce Classic Checkout Polish ------------------------------- */

form.woocommerce-checkout,
form.checkout {
  max-width: 1560px;
  width: 100%;
  margin: 2rem auto 4rem;
  padding-inline: clamp(1rem, 2.5vw, 2rem);
}

.woocommerce-form-coupon-toggle {
  max-width: 1560px;
  width: 100%;
  margin: 2rem auto 1rem;
  padding-inline: clamp(1rem, 2.5vw, 2rem);
}

.woocommerce-form-coupon-toggle .woocommerce-info {
  background: var(--vx-sand-50);
  border: 1px solid var(--vx-line);
  border-left: 3px solid var(--vx-berry-900);
  padding: 1rem 1.25rem;
  color: var(--vx-ink);
  font-size: var(--text-sm);
}

.woocommerce-form-coupon-toggle .woocommerce-info a {
  color: var(--vx-berry-900);
  font-weight: 700;
  text-decoration: underline;
}

.woocommerce-form-coupon {
  max-width: 540px;
  margin: 1rem 0 2rem;
  padding: 1.5rem;
  background: var(--vx-white);
  border: 1px solid var(--vx-line);
}

@media (min-width: 960px) {
  form.woocommerce-checkout,
  form.checkout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(380px, 480px) !important;
    column-gap: 4rem !important;
    align-items: start !important;
  }

  form.woocommerce-checkout #customer_details,
  form.checkout #customer_details {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
  }

  form.woocommerce-checkout #order_review_heading,
  form.checkout #order_review_heading {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 0 1rem !important;
  }

  form.woocommerce-checkout #order_review,
  form.checkout #order_review {
    grid-column: 2 !important;
    grid-row: 2 !important;
    position: sticky !important;
    top: 90px !important;
  }
}

form.woocommerce-checkout h3,
form.checkout h3 {
  font-family: var(--font-condensed);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .75px;
  text-transform: uppercase;
  color: var(--vx-berry-950, #350509);
  margin: 0 0 1.25rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--vx-line);
}

form.woocommerce-checkout #customer_details,
form.checkout #customer_details {
  display: block;
}

form.woocommerce-checkout .col-1,
form.woocommerce-checkout .col-2,
form.checkout .col-1,
form.checkout .col-2 {
  float: none !important;
  width: 100% !important;
  margin: 0 0 2rem !important;
  padding: 0 !important;
}

form.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
form.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
form.woocommerce-checkout .woocommerce-additional-fields__field-wrapper,
form.checkout .woocommerce-billing-fields__field-wrapper,
form.checkout .woocommerce-shipping-fields__field-wrapper,
form.checkout .woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.25rem;
}

form.woocommerce-checkout .form-row,
form.checkout .form-row {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

form.woocommerce-checkout .form-row-wide,
form.woocommerce-checkout .notes,
form.woocommerce-checkout #billing_address_1_field,
form.woocommerce-checkout #billing_address_2_field,
form.woocommerce-checkout #billing_country_field,
form.woocommerce-checkout #billing_email_field,
form.woocommerce-checkout #billing_phone_field,
form.checkout .form-row-wide,
form.checkout .notes,
form.checkout #billing_address_1_field,
form.checkout #billing_address_2_field,
form.checkout #billing_country_field,
form.checkout #billing_email_field,
form.checkout #billing_phone_field {
  grid-column: 1 / -1;
}

form.woocommerce-checkout .form-row label,
form.checkout .form-row label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--vx-ink);
  margin-bottom: .45rem;
}

form.woocommerce-checkout .form-row label .required,
form.checkout .form-row label .required {
  color: var(--vx-berry-900);
  font-weight: 700;
}

form.woocommerce-checkout .form-row input.input-text,
form.woocommerce-checkout .form-row textarea,
form.woocommerce-checkout .form-row select,
form.checkout .form-row input.input-text,
form.checkout .form-row textarea,
form.checkout .form-row select {
  width: 100%;
  min-height: 48px;
  padding: .75rem 1rem;
  border: 1px solid var(--vx-line-dark);
  background: var(--vx-white);
  font-size: var(--text-sm);
  color: var(--vx-ink);
  border-radius: 2px;
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}

form.woocommerce-checkout .form-row input.input-text:focus,
form.woocommerce-checkout .form-row textarea:focus,
form.woocommerce-checkout .form-row select:focus,
form.checkout .form-row input.input-text:focus,
form.checkout .form-row textarea:focus,
form.checkout .form-row select:focus {
  outline: none;
  border-color: var(--vx-berry-900);
  box-shadow: 0 0 0 1px var(--vx-berry-900);
}

/* Order review box */
#order_review {
  background: var(--vx-sand-50, #fbf9f6);
  border: 1px solid var(--vx-line);
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

#order_review table.shop_table {
  width: 100%;
  background: transparent;
  border: none;
  margin-bottom: 1.5rem;
}

#order_review table.shop_table th,
#order_review table.shop_table td {
  padding: .85rem .5rem;
  border-bottom: 1px solid var(--vx-line);
  font-size: var(--text-sm);
  vertical-align: middle;
}

#order_review table.shop_table thead th {
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--vx-muted);
}

#order_review table.shop_table tr.order-total th {
  border-bottom: none;
  font-family: var(--font-condensed);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--vx-ink);
  padding-top: 1.2rem;
}

#order_review table.shop_table tr.order-total td {
  border-bottom: none;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--vx-berry-900);
  padding-top: 1.2rem;
  text-align: right;
}

/* Payment gateway list */
#order_review ul.wc_payment_methods {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  border-top: 1px solid var(--vx-line);
  padding-top: 1rem;
}

#order_review ul.wc_payment_methods li {
  margin-bottom: 1rem;
  padding: 1rem 1.15rem;
  background: var(--vx-white);
  border: 1px solid var(--vx-line);
  border-radius: 4px;
}

#order_review ul.wc_payment_methods li label {
  font-weight: 700;
  font-size: var(--text-sm);
  cursor: pointer;
  color: var(--vx-ink);
}

#order_review ul.wc_payment_methods li .payment_box {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--vx-line);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--vx-ink);
}

/* Luxury static payment cards (BACS / JazzCash / Easypaisa) */
.vx-payment-box {
  margin-top: .5rem;
}

.vx-bacs-intro {
  font-weight: 600;
  margin-bottom: .85rem;
  color: var(--vx-berry-900);
}

.vx-accounts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}

.vx-account-card {
  background: var(--vx-sand-50, #fbf9f6);
  border: 1px solid var(--vx-line);
  border-radius: 4px;
  padding: .75rem;
}

.vx-account-card__head {
  font-weight: 700;
  font-size: .85rem;
  color: var(--vx-berry-950, #350509);
  margin-bottom: .4rem;
  border-bottom: 1px solid var(--vx-line);
  padding-bottom: .3rem;
}

.vx-account-details {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 11.5px;
  line-height: 1.45;
}

.vx-account-details li {
  margin-bottom: .25rem;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.vx-whatsapp-note {
  background: rgba(40, 167, 69, 0.08);
  border: 1px solid rgba(40, 167, 69, 0.3);
  border-radius: 4px;
  padding: .75rem;
  font-size: 12px;
  line-height: 1.4;
  color: #1b5e20;
}

/* Stripe Box */
.vx-stripe-box .vx-payment-note {
  font-size: 12px;
  color: var(--vx-muted);
  margin-bottom: .6rem;
}

.vx-card-badges {
  display: flex;
  gap: .4rem;
  margin-bottom: .85rem;
}

.vx-badge {
  display: inline-block;
  padding: 2px 6px;
  background: var(--vx-sand-100);
  border: 1px solid var(--vx-line);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--vx-ink);
}

.vx-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

#order_review #place_order {
  width: 100%;
  min-height: 52px;
  padding: .85rem 1.5rem;
  background: var(--vx-berry-900);
  color: var(--vx-white);
  border: none;
  font-family: var(--font-condensed);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .75px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}

#order_review #place_order:hover {
  background: var(--vx-berry-800);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(100, 20, 40, 0.25);
}

@media (max-width: 959px) {
  form.woocommerce-checkout,
  form.checkout {
    display: block !important;
    margin: 1rem auto 2.5rem !important;
    width: 100% !important;
  }
  form.woocommerce-checkout #customer_details,
  form.checkout #customer_details,
  form.woocommerce-checkout #order_review_heading,
  form.checkout #order_review_heading,
  form.woocommerce-checkout #order_review,
  form.checkout #order_review {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
  }
  form.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  form.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
  form.woocommerce-checkout .woocommerce-additional-fields__field-wrapper,
  form.checkout .woocommerce-billing-fields__field-wrapper,
  form.checkout .woocommerce-shipping-fields__field-wrapper,
  form.checkout .woocommerce-additional-fields__field-wrapper {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  form.woocommerce-checkout .form-row,
  form.checkout .form-row {
    grid-column: 1 / -1 !important;
  }
  #order_review {
    position: static !important;
    margin-top: 2rem !important;
  }
}

/* Thank You page manual payment verification card */
.vx-thankyou-payment-card {
  box-shadow: 0 4px 20px rgba(90, 42, 58, 0.06);
}

.vx-thankyou-payment-card .button:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.35) !important;
}

@media (max-width: 767px) {
  .vx-thankyou-payment-card {
    padding: 1.25rem !important;
  }
  .vx-accounts-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   PDP DIRECT WHATSAPP ORDER & CONSULTATION BUTTON (LUXURY GOLD & FIG)
   ========================================================================== */
.vx-pdp-whatsapp-wrap {
  margin: 0.85rem 0 1.25rem;
  width: 100%;
}

.vx-pdp-whatsapp-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.85rem !important;
  width: 100% !important;
  padding: 0.85rem 1.4rem !important;
  background: #FAF8F5 !important;
  border: 1px solid #D8B98B !important;
  color: #5A2A3A !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 8px rgba(90, 42, 58, 0.04) !important;
  cursor: pointer !important;
}

.vx-pdp-whatsapp-btn:hover,
.vx-pdp-whatsapp-btn:focus {
  background: #5A2A3A !important;
  color: #FFFFFF !important;
  border-color: #5A2A3A !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(90, 42, 58, 0.18) !important;
}

.vx-pdp-whatsapp-icon {
  width: 20px !important;
  height: 20px !important;
  fill: #D8B98B !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease, fill 0.25s ease !important;
}

.vx-pdp-whatsapp-btn:hover .vx-pdp-whatsapp-icon {
  fill: #D8B98B !important;
  transform: scale(1.1);
}

.vx-pdp-whatsapp-btn__content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  line-height: 1.25 !important;
}

.vx-pdp-whatsapp-btn__title {
  font-family: var(--font-display, "Bodoni Moda", "Didot", serif) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: inherit !important;
}

.vx-pdp-whatsapp-btn__sub {
  font-size: 0.73rem !important;
  opacity: 0.8 !important;
  letter-spacing: 0.01em !important;
  margin-top: 2px !important;
  font-weight: 400 !important;
  color: inherit !important;
}

@media (max-width: 600px) {
  .vx-pdp-whatsapp-wrap {
    margin: 0.75rem 0 1rem;
  }
  .vx-pdp-whatsapp-btn {
    padding: 0.75rem 1rem !important;
    gap: 0.7rem !important;
  }
  .vx-pdp-whatsapp-btn__title {
    font-size: 0.88rem !important;
  }
  .vx-pdp-whatsapp-btn__sub {
    font-size: 0.68rem !important;
  }
}

/* ==========================================================================
   🎬 INFLUENCER & UGC VIDEO REELS CAROUSEL
   ========================================================================== */

.section--ugc-reels {
  padding: 4.5rem 0 3.5rem;
  background: #faf8f5;
  border-top: 1px solid #eee4d5;
  border-bottom: 1px solid #eee4d5;
  overflow: hidden;
}

.vx-ugc-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.vx-ugc-title {
  font-family: var(--font-display, "Bodoni Moda", "Didot", serif);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 600;
  color: var(--color-fig, #5a2a3a);
  letter-spacing: -0.01em;
  margin: 0.25rem 0 0.5rem;
}

.vx-ugc-subtitle {
  font-size: 0.95rem;
  color: #666;
  max-width: 580px;
  margin: 0 auto;
}

.vx-ugc-carousel-wrap {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 3.25rem;
  display: flex;
  align-items: center;
}

.vx-ugc-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.5rem 0.25rem 1.5rem;
  width: 100%;
  justify-content: flex-start;
}

@media (min-width: 1100px) {
  .vx-ugc-track {
    justify-content: center;
  }
}

.vx-ugc-track::-webkit-scrollbar {
  display: none;
}

.vx-ugc-card {
  flex: 0 0 270px;
  max-width: 280px;
  height: 480px;
  aspect-ratio: 9 / 16;
  scroll-snap-align: start;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(90, 42, 58, 0.08);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  user-select: none;
  background: #111;
}

.vx-ugc-card:hover,
.vx-ugc-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(90, 42, 58, 0.18);
  outline: none;
}

.vx-ugc-card__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vx-ugc-card__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vx-ugc-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(17, 17, 17, 0.6) 0%,
    rgba(17, 17, 17, 0.05) 35%,
    rgba(17, 17, 17, 0.1) 60%,
    rgba(17, 17, 17, 0.85) 100%
  );
  pointer-events: none;
}

.vx-ugc-card__play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(250, 248, 245, 0.88);
  backdrop-filter: blur(6px);
  color: var(--color-fig, #5a2a3a);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, background 0.3s ease;
  pointer-events: none;
}

.vx-ugc-card__play-badge svg {
  width: 24px;
  height: 24px;
  margin-left: 2px;
}

.vx-ugc-card:hover .vx-ugc-card__play-badge {
  transform: translate(-50%, -50%) scale(1.08);
  background: #ffffff;
}

.vx-ugc-card__creator {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  z-index: 2;
}

.vx-ugc-card__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-fig, #5a2a3a);
  color: #fff;
  border: 1.5px solid #d8b98b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}

.vx-ugc-card__creator-info strong {
  display: block;
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.vx-ugc-card__creator-info span {
  display: block;
  color: #d8b98b;
  font-size: 0.72rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.vx-ugc-card__prod-pill {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  background: rgba(17, 17, 17, 0.82);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(216, 185, 139, 0.35);
  border-radius: 10px;
  padding: 0.5rem 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  z-index: 2;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.vx-ugc-card:hover .vx-ugc-card__prod-pill {
  border-color: #d8b98b;
  background: rgba(17, 17, 17, 0.95);
}

.vx-ugc-card__prod-thumb {
  font-size: 1.25rem;
  line-height: 1;
}

.vx-ugc-card__prod-meta {
  flex: 1;
  min-width: 0;
}

.vx-ugc-card__prod-title {
  display: block;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vx-ugc-card__prod-details {
  display: block;
  font-size: 0.72rem;
  color: #ccc;
  margin-top: 1px;
}

.vx-ugc-card__shade {
  color: #f5d0a9;
}

.vx-ugc-card__price {
  color: #fff;
  font-weight: 600;
}

.vx-ugc-card__shop-tag {
  color: #d8b98b;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.vx-ugc-nav-btn {
  display: none;
  position: absolute;
  top: calc(50% - 0.75rem);
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid #d8b98b;
  color: var(--color-fig, #5a2a3a);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 6px 18px rgba(90, 42, 58, 0.14);
  transition: all 0.25s ease;
  align-items: center;
  justify-content: center;
}

.vx-ugc-nav-prev {
  left: 0;
}

.vx-ugc-nav-next {
  right: 0;
}

.vx-ugc-nav-btn:hover {
  background: var(--color-fig, #5a2a3a);
  color: #ffffff;
  border-color: var(--color-fig, #5a2a3a);
  box-shadow: 0 8px 24px rgba(90, 42, 58, 0.25);
}

.vx-ugc-nav-btn:disabled,
.vx-ugc-nav-btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.vx-ugc-progress-track {
  width: 200px;
  height: 3px;
  background: #ebdcc9;
  border-radius: 4px;
  margin: 1.5rem auto 0;
  overflow: hidden;
  position: relative;
}

.vx-ugc-progress-bar {
  height: 100%;
  width: 40%;
  background: var(--color-fig, #5a2a3a);
  border-radius: 4px;
  transition: transform 0.12s ease-out;
}

@media (min-width: 769px) {
  .vx-ugc-nav-btn {
    display: flex;
  }
}

@media (max-width: 768px) {
  .vx-ugc-carousel-wrap {
    padding: 0 1rem;
  }
  .vx-ugc-track {
    justify-content: flex-start;
    gap: 1rem;
  }
  .vx-ugc-card {
    flex: 0 0 220px;
    height: 380px;
  }
  .section--ugc-reels {
    padding: 3rem 0 2rem;
  }
  .vx-ugc-progress-track {
    width: 140px;
  }
}

/* ==========================================================================
   🎬 FULLSCREEN VERTICAL REEL MODAL PLAYER
   ========================================================================== */

.vx-ugc-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.vx-ugc-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.88);
  backdrop-filter: blur(10px);
}

.vx-ugc-modal__dialog {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vx-ugc-modal__player-box {
  width: min(92vw, 390px);
  height: min(84vh, 700px);
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(216, 185, 139, 0.25);
}

.vx-ugc-modal__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vx-ugc-modal__close {
  position: absolute;
  top: -45px;
  right: 0;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  line-height: 1;
}

.vx-ugc-modal__controls {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
}

.vx-ugc-modal__mute-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.65);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.vx-ugc-modal__creator-bar {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  z-index: 3;
}

.vx-ugc-modal__creator-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-fig, #5a2a3a);
  color: #fff;
  border: 1.5px solid #d8b98b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}

.vx-ugc-modal__product-bar {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  background: rgba(17, 17, 17, 0.88);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(216, 185, 139, 0.4);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  z-index: 3;
}

.vx-ugc-modal__buy-btn {
  background: var(--color-fig, #5a2a3a);
  color: #fff !important;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.55rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid #d8b98b;
  transition: background 0.2s ease;
}

.vx-ugc-modal__buy-btn:hover {
  background: #73374b;
}

.vx-ugc-modal__arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}

.vx-ugc-modal__arrow--prev {
  left: -70px;
}

.vx-ugc-modal__arrow--next {
  right: -70px;
}

.vx-ugc-modal__arrow:hover {
  background: rgba(255, 255, 255, 0.3);
}

@media (min-width: 768px) {
  .vx-ugc-modal__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ==========================================================================
   🔍 LUXURY FULLSCREEN LIVE SEARCH OVERLAY
   ========================================================================== */

.vx-search-modal[hidden],
.vx-search-modal[aria-hidden="true"] {
  display: none !important;
}

.vx-search-modal:not([hidden]):not([aria-hidden="true"]),
.vx-search-modal.is-open {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: clamp(1.5rem, 4vw, 3.5rem) 1.5rem 3rem !important;
  background: rgba(250, 248, 245, 0.98) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  overflow-y: auto !important;
  animation: vxSearchFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes vxSearchFadeIn {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vx-search-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}

.vx-search-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.vx-search-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.75rem;
}

.vx-search-brand-eyebrow {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--color-fig, #5a2a3a);
  text-transform: uppercase;
}

.vx-search-close-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  background: #ffffff !important;
  border: 1.5px solid #d8b98b !important;
  border-radius: 50px !important;
  padding: 0.45rem 1.1rem !important;
  color: var(--color-fig, #5a2a3a) !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s ease !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  font-family: inherit !important;
}

.vx-search-close-btn:hover {
  background: var(--color-fig, #5a2a3a) !important;
  color: #ffffff !important;
  border-color: var(--color-fig, #5a2a3a) !important;
}

.vx-search-close-icon {
  font-size: 0.85rem;
  font-weight: 700;
}

.vx-search-close-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.vx-search-form {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  border-bottom: 2px solid var(--color-fig, #5a2a3a);
  padding-bottom: 0.75rem;
  margin-bottom: 1.75rem;
  gap: 0.75rem;
}

.vx-search-input-icon {
  color: var(--color-fig, #5a2a3a);
  display: flex;
  align-items: center;
}

.vx-search-input {
  width: 100%;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  font-family: var(--font-display, "Bodoni Moda", "Didot", serif) !important;
  font-size: clamp(1.4rem, 3.5vw, 2.2rem) !important;
  font-weight: 500 !important;
  color: #111111 !important;
  padding: 0.2rem 2.5rem 0.2rem 0 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
}

.vx-search-input::-webkit-search-cancel-button,
.vx-search-input::-webkit-search-decoration,
.vx-search-input::-webkit-search-results-button,
.vx-search-input::-webkit-search-results-decoration {
  -webkit-appearance: none !important;
  display: none !important;
}

.vx-search-input::placeholder {
  color: #a89f91;
  font-style: italic;
}

.vx-search-clear-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 1.15rem;
  color: #999;
  cursor: pointer;
  padding: 0.4rem;
  line-height: 1;
  transition: color 0.2s ease;
}

.vx-search-clear-btn:hover {
  color: var(--color-fig, #5a2a3a);
}

.vx-search-trending {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.vx-search-trending__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.vx-search-trending__tags {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.vx-search-tag {
  background: #ffffff;
  border: 1px solid #d8b98b;
  color: var(--color-fig, #5a2a3a);
  padding: 0.4rem 0.95rem;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.vx-search-tag:hover {
  background: var(--color-fig, #5a2a3a);
  color: #ffffff;
  border-color: var(--color-fig, #5a2a3a);
  transform: translateY(-1px);
}

.vx-search-results-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid #eee4d5;
  padding-bottom: 0.65rem;
  margin-bottom: 1.5rem;
}

.vx-search-results-title {
  font-family: var(--font-display, "Bodoni Moda", "Didot", serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-fig, #5a2a3a);
  margin: 0;
}

.vx-search-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem 0;
  color: #777;
  font-size: 0.95rem;
}

.vx-search-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid #e0d5c1;
  border-top-color: var(--color-fig, #5a2a3a);
  border-radius: 50%;
  animation: vxSpin 0.7s linear infinite;
}

@keyframes vxSpin {
  to {
    transform: rotate(360deg);
  }
}

.vx-search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1.25rem;
}

.vx-search-card {
  background: #ffffff;
  border: 1px solid #eee4d5;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 14px rgba(90, 42, 58, 0.04);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

.vx-search-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(90, 42, 58, 0.12);
  border-color: #d8b98b;
}

.vx-search-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  background: #faf8f5;
  overflow: hidden;
}

.vx-search-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.vx-search-card:hover .vx-search-card__img {
  transform: scale(1.04);
}

.vx-search-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--color-fig, #5a2a3a);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
}

.vx-search-card__body {
  padding: 0.85rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.vx-search-card__category {
  font-size: 0.72rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.2rem;
}

.vx-search-card__title {
  font-family: var(--font-display, "Bodoni Moda", "Didot", serif);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-fig, #5a2a3a);
  line-height: 1.3;
  margin: 0 0 0.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vx-search-card__footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.5rem;
  border-top: 1px solid #f2ece2;
}

.vx-search-card__price {
  font-weight: 700;
  color: #111111;
  font-size: 0.95rem;
}

.vx-search-card__cta {
  color: #d8b98b;
  font-size: 0.8rem;
  font-weight: 700;
}

.vx-search-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  background: #ffffff;
  border-radius: 12px;
  border: 1px dashed #d8b98b;
  grid-column: 1 / -1;
}

.vx-search-empty h4 {
  font-family: var(--font-display, "Bodoni Moda", "Didot", serif);
  font-size: 1.3rem;
  color: var(--color-fig, #5a2a3a);
  margin: 0 0 0.5rem;
}

.vx-search-view-all-wrap {
  text-align: center;
  margin-top: 2.25rem;
}

.vx-search-view-all-btn {
  background: #ffffff !important;
  border: 1.5px solid var(--color-fig, #5a2a3a) !important;
  color: var(--color-fig, #5a2a3a) !important;
  font-weight: 700 !important;
  padding: 0.75rem 2rem !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

.vx-search-view-all-btn:hover {
  background: var(--color-fig, #5a2a3a) !important;
  color: #ffffff !important;
}

@media (max-width: 600px) {
  .vx-search-modal {
    padding: 1rem 1rem 2rem !important;
  }
  .vx-search-results-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .vx-search-card__body {
    padding: 0.65rem 0.75rem 0.75rem;
  }
  .vx-search-card__title {
    font-size: 0.82rem;
  }
  .vx-search-card__price {
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   Luxury My Account Portal & Staff Access
   ========================================================================== */
.staff-access-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.75rem;
  padding: 1.15rem 1.5rem;
  background: linear-gradient(135deg, rgba(90, 42, 58, 0.07) 0%, rgba(216, 185, 139, 0.18) 100%);
  border: 1.5px solid #d8b98b;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(90, 42, 58, 0.05);
}
.staff-access-card__badge {
  font-size: 0.72rem;
  font-weight: 800;
  color: #5a2a3a;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.staff-access-card__title {
  margin: 2px 0 3px;
  font-family: var(--font-display, 'Bodoni Moda', serif);
  font-size: 1.18rem;
  color: #111;
}
.staff-access-card__desc {
  margin: 0;
  font-size: 0.82rem;
  color: #555;
  line-height: 1.4;
}

.account-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-block: 1.25rem 1.75rem;
}
.account-summary__card {
  background: #faf8f5;
  border: 1px solid var(--vx-line, #e6ded5);
  border-radius: 6px;
  padding: 1.2rem 1.4rem;
  transition: all var(--duration-fast, 180ms) var(--ease, ease);
}
.account-summary__card:hover {
  border-color: #d8b98b;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}
.account-summary__label {
  margin: 0 0 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.account-summary__value {
  margin: 0;
  font-family: var(--font-display, 'Bodoni Moda', serif);
  font-size: 1.65rem;
  font-weight: 400;
  color: var(--vx-fig, #5a2a3a);
  line-height: 1.1;
}
.account-summary__meta {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: #888;
}

.account-quicklinks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-block: 1.25rem 2rem;
}
.account-quicklinks .button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-condensed, 'Tenor Sans', sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1.5px solid var(--vx-line-dark, #c5baa9);
  background: #fff;
  color: #111;
  border-radius: 4px;
  transition: all 180ms ease;
}
.account-quicklinks .button:hover {
  border-color: #5a2a3a;
  background: #5a2a3a;
  color: #fff;
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .account-summary {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .account-quicklinks {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .staff-access-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .staff-access-card .button {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================================================
   Store Manager Enterprise Design System
   ========================================================================== */
.portal-card {
  background: #ffffff !important;
  border: 1px solid var(--vx-line, #e6ded5) !important;
  border-radius: 6px !important;
  padding: 1.6rem !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
  margin-bottom: 1.5rem !important;
}

.portal-card h2, .portal-card__head h2 {
  font-family: var(--font-display, 'Bodoni Moda', serif) !important;
  font-size: 1.35rem !important;
  font-weight: 500 !important;
  color: #111111 !important;
  margin-bottom: 0.4rem !important;
}

.portal-btn-primary,
.manager-shell .button:not(.button--secondary):not(.button--destructive):not(.button--small) {
  background: #5a2a3a !important;
  color: #ffffff !important;
  border: 1px solid #5a2a3a !important;
  font-family: var(--font-condensed, 'Tenor Sans', sans-serif) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 0.65rem 1.6rem !important;
  min-height: 44px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 180ms ease !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(90, 42, 58, 0.15) !important;
}

.portal-btn-primary:hover,
.manager-shell .button:not(.button--secondary):not(.button--destructive):not(.button--small):hover {
  background: #401824 !important;
  border-color: #401824 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(90, 42, 58, 0.25) !important;
}

.portal-btn-secondary,
.manager-shell .button.button--secondary {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1.5px solid #d8cfc4 !important;
  font-family: var(--font-condensed, 'Tenor Sans', sans-serif) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding: 0.5rem 1.25rem !important;
  min-height: 40px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 180ms ease !important;
  text-decoration: none !important;
}

.portal-btn-secondary:hover,
.manager-shell .button.button--secondary:hover {
  border-color: #5a2a3a !important;
  color: #5a2a3a !important;
  background: #faf8f5 !important;
  transform: translateY(-1px) !important;
}

.portal-btn-destructive,
.manager-shell .button.button--destructive {
  background: #fff5f5 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
  font-family: var(--font-body, 'Montserrat', sans-serif) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  padding: 0.45rem 0.9rem !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 180ms ease !important;
  text-decoration: none !important;
}

.portal-btn-destructive:hover,
.manager-shell .button.button--destructive:hover {
  background: #fee2e2 !important;
  border-color: #b91c1c !important;
}

.portal-action-bar {
  background: #faf8f5 !important;
  border: 1.5px solid #d8b98b !important;
  border-radius: 6px !important;
  padding: 1.15rem 1.6rem !important;
  box-shadow: 0 4px 18px rgba(90, 42, 58, 0.08) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

.portal-action-bar__info {
  font-size: 0.88rem !important;
  color: #444444 !important;
  font-weight: 500 !important;
}

.portal-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
}
.portal-status-badge--active, .portal-status-badge--live {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.portal-status-badge--inactive, .portal-status-badge--disabled {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}
.portal-status-badge--sandbox, .portal-status-badge--test {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* ==========================================================================
   Store Manager Modernized Shell, Sidebar & Topbar System
   ========================================================================== */
.portal-shell.manager-shell {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  min-height: 100vh;
  background: #faf8f5;
  transition: grid-template-columns 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.portal-shell.manager-shell.is-sidebar-collapsed {
  grid-template-columns: 0px minmax(0, 1fr);
}

.portal-shell.manager-shell.is-sidebar-collapsed .portal-sidebar {
  transform: translateX(-100%);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Sidebar Container */
.portal-sidebar {
  background: #240c13 !important;
  color: #ffffff !important;
  border-right: 1px solid rgba(216, 185, 139, 0.15) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 0 !important;
  align-self: start !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease, visibility 250ms !important;
}

.admin-bar .portal-sidebar {
  top: 32px !important;
  height: calc(100vh - 32px) !important;
  max-height: calc(100vh - 32px) !important;
  min-height: 0 !important;
}

@media screen and (max-width: 782px) {
  .admin-bar .portal-sidebar {
    top: 46px !important;
    height: calc(100vh - 46px) !important;
    max-height: calc(100vh - 46px) !important;
    min-height: 0 !important;
  }
}

/* Brand Section (Logo & Store Manager Badge) */
.portal-brand {
  padding: 1rem 1rem 0.85rem !important;
  border-bottom: 1px solid rgba(216, 185, 139, 0.15) !important;
  background: rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.5rem !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

.portal-brand__logo-wrap {
  display: flex;
  align-items: center;
  width: 100%;
}

.portal-brand__logo-wrap .wordmark__image,
.acb-manager-login-body .wordmark__image {
  max-width: 150px !important;
  height: auto !important;
  filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0,0,0,0.5)) !important;
  transition: filter 180ms ease;
}

.portal-brand__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.portal-badge--manager {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.25rem 0.75rem !important;
  background: rgba(216, 185, 139, 0.12) !important;
  border: 1px solid #d8b98b !important;
  border-radius: 20px !important;
  color: #d8b98b !important;
  font-family: var(--font-condensed, 'Tenor Sans', sans-serif) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 8px rgba(216, 185, 139, 0.15) !important;
}

.portal-menu-close {
  display: none;
  background: transparent;
  border: none;
  color: #d8b98b;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

/* Sidebar Navigation */
.portal-nav {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 0 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 0.5rem 0.65rem 0.75rem !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(216, 185, 139, 0.25) transparent;
}

.portal-nav::-webkit-scrollbar {
  width: 4px;
}
.portal-nav::-webkit-scrollbar-thumb {
  background: rgba(216, 185, 139, 0.3);
  border-radius: 4px;
}

.portal-nav__section {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  margin-bottom: 0.45rem !important;
}

.portal-nav__section:last-child {
  margin-bottom: 0.15rem !important;
}

.portal-nav__group {
  font-family: var(--font-condensed, 'Tenor Sans', sans-serif) !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.3px !important;
  color: #d8b98b !important;
  margin: 0.35rem 0 0.15rem 0.35rem !important;
  padding: 0.1rem 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  opacity: 0.95;
}

.portal-nav__item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 0.32rem 0.6rem !important;
  border-radius: 0 4px 4px 0 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none !important;
  font-family: var(--font-body, 'Montserrat', sans-serif) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  min-height: 28px !important;
  transition: all 140ms ease !important;
  border-left: 3px solid transparent !important;
  box-sizing: border-box !important;
  margin-bottom: 1px !important;
}

.portal-nav__item:hover {
  background: rgba(216, 185, 139, 0.08) !important;
  color: #ffffff !important;
  transform: translateX(2px) !important;
}

.portal-nav__item[aria-current="page"] {
  background: linear-gradient(90deg, rgba(216, 185, 139, 0.18) 0%, rgba(216, 185, 139, 0.04) 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-left: 3px solid #d8b98b !important;
  box-shadow: inset 1px 0 0 #d8b98b, 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

.portal-nav__arrow {
  font-size: 0.82rem;
  color: rgba(216, 185, 139, 0.35);
  transition: all 140ms ease;
}

.portal-nav__item:hover .portal-nav__arrow,
.portal-nav__item[aria-current="page"] .portal-nav__arrow {
  color: #d8b98b;
  font-weight: 700;
  transform: translateX(1px);
}

/* Sidebar Footer (User info & quicklinks) */
.portal-sidebar__footer {
  flex: 0 0 auto !important;
  padding: 0.65rem 0.85rem !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border-top: 1px solid rgba(216, 185, 139, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
}

.portal-user-compact {
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.portal-user__avatar {
  width: 30px !important;
  height: 30px !important;
  background: #5a2a3a !important;
  border: 1px solid #d8b98b !important;
  color: #d8b98b !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-display, 'Bodoni Moda', serif) !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  flex-shrink: 0 !important;
}

.portal-user__meta {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.portal-user__name {
  color: #ffffff !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}

.portal-user__role {
  color: #d8b98b !important;
  font-size: 0.64rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2 !important;
}

.portal-user-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  flex-shrink: 0 !important;
}

.portal-footer-icon-btn {
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(216, 185, 139, 0.2) !important;
  text-decoration: none !important;
  transition: all 140ms ease !important;
}

.portal-footer-icon-btn:hover {
  background: #d8b98b !important;
  color: #18080c !important;
  border-color: #d8b98b !important;
  transform: translateY(-1px) !important;
}

.portal-footer-icon-btn--logout:hover {
  background: #ba1e2d !important;
  color: #ffffff !important;
  border-color: #ba1e2d !important;
}

/* ==========================================================================
   Modernized Topbar Header System
   ========================================================================== */
.portal-topbar {
  background: #ffffff !important;
  border-bottom: 1px solid var(--vx-line, #e6ded5) !important;
  padding: 0.85rem 2rem !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 90 !important;
}

.portal-topbar__left {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

.portal-toggle-btn {
  background: #faf8f5 !important;
  border: 1.5px solid #d8cfc4 !important;
  border-radius: 4px !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #350509 !important;
  font-size: 1.2rem !important;
  cursor: pointer !important;
  transition: all 180ms ease !important;
  padding: 0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

.portal-toggle-btn:hover {
  background: #5a2a3a !important;
  border-color: #5a2a3a !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

.portal-topbar__title-wrap {
  display: flex;
  flex-direction: column;
}

.portal-topbar__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.portal-pulse-dot {
  width: 6px;
  height: 6px;
  background: #059669;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(5, 150, 105, 0.6);
}

.portal-topbar__title {
  font-family: var(--font-display, 'Bodoni Moda', serif) !important;
  font-size: 1.45rem !important;
  font-weight: 500 !important;
  color: #111111 !important;
  margin: 0 !important;
  line-height: 1.15 !important;
}

.portal-topbar__actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  flex-wrap: wrap !important;
}

.portal-select-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.portal-view-select {
  height: 40px !important;
  padding: 0 2.2rem 0 0.9rem !important;
  border: 1.5px solid #d8b98b !important;
  border-radius: 4px !important;
  background: #ffffff url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a2a3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") no-repeat right 0.75rem center/14px 14px !important;
  font-family: var(--font-condensed, 'Tenor Sans', sans-serif) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #5a2a3a !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  min-width: 180px !important;
  box-shadow: 0 1px 4px rgba(216, 185, 139, 0.15) !important;
  transition: all 180ms ease !important;
}

.portal-view-select:hover,
.portal-view-select:focus {
  border-color: #5a2a3a !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(90, 42, 58, 0.1) !important;
}

.portal-topbar-btn {
  height: 40px !important;
  padding: 0 1.25rem !important;
  font-size: 0.82rem !important;
  min-height: 40px !important;
  white-space: nowrap !important;
}

/* ==========================================================================
   Responsive Drawer Mode (< 900px)
   ========================================================================== */
@media (max-width: 899px) {
  .portal-shell.manager-shell {
    grid-template-columns: 1fr !important;
  }

  .portal-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    transform: translateX(-100%) !important;
    z-index: 999 !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35) !important;
  }

  .portal-shell.manager-shell.is-sidebar-open .portal-sidebar {
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .portal-menu-close {
    display: inline-block !important;
  }

  .portal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(2px) !important;
    z-index: 998 !important;
  }
}