:root {
  --vx-berry-950: #2a0507;
  --vx-berry-900: #3a080a;
  --vx-berry-800: #4c0d10;
  --vx-berry-700: #6d1216;
  --vx-berry-600: #96282c;
  --vx-rose-100: #fde8e0;
  --vx-rose-50: #fdf3ef;
  --vx-sand-100: #eceae9;
  --vx-sand-50: #f5f3f3;
  --vx-plum: #352033;
  --vx-ink: #3a080a;
  --vx-muted: #6f5254;
  --vx-line: #e4dedd;
  --vx-line-dark: #3a080a;
  --vx-white: #fff;
  --vx-success: #2e6a4d;
  --vx-warning: #a46120;
  --vx-danger: #c81f3e;
  /* Sale pricing previously reused the error red, which reads as a discount
     store. Keep markdowns on-brand and let --vx-danger mean "something is
     wrong" again. */
  --vx-sale: #6d1216;
  --vx-info: #2f5e78;
  --font-display: 'Playfair Display', 'Noto Serif Display', 'Nimbus Roman', Georgia, 'Times New Roman', serif;
  --font-body: 'Helvetica Neue LT Std', 'Helvetica Neue', Helvetica, 'Nimbus Sans', Arial, sans-serif;
  --font-condensed: 'Helvetica Neue LT Condensed', 'Avenir Next Condensed Medium', 'Nimbus Sans Narrow', 'Liberation Sans Narrow', 'Arial Narrow', Arial, sans-serif;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: clamp(1.75rem, 2.4vw, 2.5rem);
  --text-hero: clamp(2.6rem, 4.4vw, 4.4rem);
  --leading-tight: 1.05;
  --leading-body: 1.4;
  --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: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.display-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; line-height: .95; letter-spacing: .5px; }
.section-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; line-height: .93; letter-spacing: .5px; }
.condensed-title { font-family: var(--font-condensed); font-size: var(--text-lg); font-weight: 500; line-height: 1.1; letter-spacing: .025em; text-transform: uppercase; }
.muted { color: var(--vx-muted); }
.text-link { border-bottom: 1px solid currentColor; font-weight: 600; }
.text-link:hover { color: var(--vx-berry-700); }
.icon { width: 24px; height: 24px; }

.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  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-align: center;
  text-transform: uppercase;
  transition: color var(--duration-fast), background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
}
.button:hover { border-color: var(--vx-berry-700); background: var(--vx-berry-700); }
.button--secondary { color: var(--vx-berry-900); background: transparent; }
.button--secondary:hover { color: var(--vx-white); background: var(--vx-berry-900); }
.button--light { color: var(--vx-berry-950); border-color: var(--vx-white); background: var(--vx-white); }
.button--light:hover { color: var(--vx-white); border-color: var(--vx-white); background: transparent; }
.button--ghost { color: inherit; border-color: var(--vx-line); background: transparent; }
.button--ghost:hover { color: var(--vx-berry-900); border-color: var(--vx-berry-900); 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: 600; }
.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);
  background: var(--vx-rose-100);
  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: 1fr auto 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; }
.region-trigger .icon { width: 17px; height: 17px; }
.wordmark { display: inline-flex; align-items: baseline; font-family: var(--font-display); font-size: clamp(1.9rem, 2.6vw, 2.4rem); font-weight: 700; letter-spacing: .01em; line-height: 1; }
.wordmark span:last-child { font-style: italic; }
.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: 600; }
.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; }
.desktop-nav__item { display: flex; }
.desktop-nav__trigger {
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 3px solid transparent;
  font-family: var(--font-condensed);
  font-size: clamp(.78rem, .98vw, .875rem);
  font-weight: 400;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.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); }
.mega-menu__group a:hover { color: var(--vx-berry-700); text-decoration: underline; text-underline-offset: 3px; }
.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-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%);
  transform: translateY(-100%);
  transition: transform var(--duration), visibility var(--duration);
}
.sticky-header.is-visible { visibility: visible; transform: none; }
.sticky-header__cluster { display: flex; align-items: stretch; min-width: 0; }
.sticky-header__cluster .desktop-nav { flex: 1; height: 54px; padding-inline: 0; }
.sticky-header__cluster:first-child .desktop-nav { justify-content: flex-end; }
.sticky-header__cluster:last-child .desktop-nav { justify-content: flex-start; }
.sticky-header .wordmark { align-self: center; padding-inline: 1.2rem; font-size: 1.5rem; }
.sticky-header__bag { align-self: center; margin-left: auto; }
.sticky-header .mega-menu { display: none; }
.mobile-header { display: none; }

/* 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: 600; }
.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__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.2vw); }
.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__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.2vw); 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 ease-out both; }
@keyframes hero-image { from { transform: scale(1.045); } to { transform: scale(1.01); } }
.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; }
.hero__dot { width: 8px; height: 8px; border: 1px solid var(--vx-white); border-radius: 50%; }
.hero__dot[aria-current='true'] { background: var(--vx-white); transform: scale(1.25); }
.category-grid { max-width: 1200px; margin-inline: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 294px)); justify-content: center; gap: 8px; }
.category-card { grid-column: auto; display: flex; flex-direction: column; overflow: hidden; color: var(--vx-ink); background: var(--vx-white); }
.category-card__image { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--vx-sand-50); transition: transform var(--duration-slow) var(--ease); }
/* The campaign board on /offers/ had no column rule, so each card rendered
   full-bleed; its label uses __label rather than __copy and was unstyled.
   auto-fill (not auto-fit) keeps two campaigns at tile size instead of
   stretching each to half the viewport. */
.category-group__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.category-card__label { display: block; padding: .9rem .5rem 1.2rem; font-family: var(--font-condensed); font-size: .9rem; letter-spacing: .5px; text-align: center; text-transform: uppercase; }
.category-card__copy { padding: .9rem .5rem 1.2rem; text-align: center; }
.category-card__copy h3 { margin-bottom: 0; font-family: var(--font-condensed); font-size: .9rem; font-weight: 400; letter-spacing: .5px; text-transform: uppercase; }
.category-card__copy p { display: none; }
.category-card:hover .category-card__copy h3 { text-decoration: underline; text-underline-offset: 3px; }
.category-card .text-link { display: none; }
.category-card:hover .category-card__image { transform: scale(1.03); }
.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); }
.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; }
.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; }
.price del { color: var(--vx-muted); font-weight: 400; }
.price ins { color: var(--vx-sale); 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: 600; }
.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: clamp(1.9rem, 3.4vw, 3.2rem); font-weight: 800; line-height: 1.02; }
.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-region .newsletter-form .button { min-height: 48px; padding-inline: 1.4rem; white-space: nowrap; }
.footer-region .newsletter-consent { margin-top: 1.1rem; gap: .65rem; line-height: 1.6; }
.newsletter-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.footer-social { display: flex; flex-wrap: wrap; gap: .8rem; }
.footer-social a { width: 34px; height: 34px; display: grid; place-items: center; }
.footer-social a:hover { opacity: .7; }
.footer-social .icon { width: 20px; height: 20px; }
/* 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: 600; 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, 818px) 358px; gap: 32px; align-items: start; }
.gallery { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; position: sticky; top: 88px; }
.gallery__thumbs { display: grid; align-content: start; gap: 8px; }
.gallery__thumb { aspect-ratio: 1; overflow: hidden; border: 1px solid transparent; background: var(--vx-sand-50); }
.gallery__thumb[aria-current='true'] { border-color: var(--vx-berry-900); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__stage { aspect-ratio: 1; position: relative; overflow: hidden; background: #f6f5f4; cursor: zoom-in; }
.gallery__stage img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease); }
.gallery__stage:hover img { transform: scale(1.035); }
.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: 1.75rem; font-weight: 700; letter-spacing: .5px; line-height: 1.14; 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: 600; 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: 15px; }
.shade-option { width: 47px; height: 47px; display: block; padding: 0; border: 1px solid transparent; background: none; line-height: 0; }
.shade-option::before { content: ''; display: block; width: 100%; height: 100%; background: var(--shade); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 15%); }
.shade-option[aria-pressed='true'] { padding: 3px; border-color: var(--vx-berry-900); }
.shade-option[disabled] { opacity: .35; cursor: not-allowed; }

/* Without an admin-set colour the chip keeps its name rather than showing an
   invented swatch. */
.shade-option--unset { width: auto; min-width: 47px; height: auto; min-height: 47px; padding: .45rem .8rem; border-color: var(--vx-berry-900); font-family: var(--font-condensed); font-size: .875rem; letter-spacing: .5px; text-transform: uppercase; }
.shade-option--unset::before { content: none; }
.shade-option--unset[aria-pressed='true'] { padding: calc(.45rem - 2px) calc(.8rem - 2px); border-width: 3px; }

/* 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; }
/* 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: .5rem; }
/* The tile resolves to a flex row elsewhere in the cascade, which puts the
   multiplier and its label on one line ("2×Double"). Stack them explicitly. */
.bundle-option { min-height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; padding: .55rem .35rem; border: 1px solid var(--vx-line-dark); text-align: center; }
.bundle-option strong, .bundle-option span { display: block; }
.bundle-option strong { font-family: var(--font-condensed); font-size: .8rem; text-transform: uppercase; }
.bundle-option span { color: var(--vx-muted); font-size: 10px; }
.bundle-option[aria-pressed='true'] { color: var(--vx-berry-950); border-color: var(--vx-berry-900); background: var(--vx-rose-50); box-shadow: inset 0 0 0 1px var(--vx-berry-900); }
.bundle-option[aria-pressed='true'] span { 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; font-size: 1rem; line-height: 1.125; }
.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: 600; }
.pdp__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .7rem; }
.pdp__actions .button:first-child { grid-column: 1 / -1; }
/* Reference lists the exclusives as plain icon rows, not a boxed panel. */
.pdp__perks { display: grid; gap: .75rem; margin: 1.4rem 0; padding: 0; border: 0; background: none; }
.pdp__perk { display: flex; align-items: flex-start; gap: .7rem; font-size: var(--text-sm); }
.pdp__perk .icon { width: 19px; height: 19px; flex: 0 0 auto; color: var(--vx-berry-700); }
.pdp-accordion { border-top: 1px solid var(--vx-line); }
.pdp-accordion details { border-bottom: 1px solid var(--vx-line); }
.pdp-accordion summary { padding: 1.1rem 0; font-family: var(--font-condensed); font-size: 1rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; list-style: none; }
.pdp-accordion summary::after { content: '+'; float: right; }
.pdp-accordion details[open] summary::after { content: '−'; }
.pdp-accordion__content { padding: 0 0 1.1rem; color: var(--vx-muted); font-size: var(--text-sm); }
.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); top: 50%; left: 50%; 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.is-open { visibility: visible; opacity: 1; transform: translate(-50%, -50%); }
.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: 600; 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: 600; 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-color: var(--vx-berry-900);
  background: var(--vx-rose-50);
  color: var(--vx-ink);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--vx-berry-900); }
.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); }

/* 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: 800;
  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; }
  .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; }
  .announcement { grid-template-columns: 26px minmax(0, 1fr) 58px; font-size: 10px; }
  .site-header__desktop, .sticky-header { display: none; }
  .site-header { position: sticky; top: 0; }
  .mobile-header { display: block; }
  .mobile-header__main { height: 56px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: .35rem; }
  .mobile-header__side { display: flex; align-items: center; }
  .mobile-header__side:last-child { justify-content: end; }
  .mobile-header .wordmark { font-size: 1.6rem; }
  .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: 600; 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;
    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);
  }
  .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) {
  .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: 66vw; }
  .product-card__info { min-height: 172px; }
  .campaign-board { grid-template-columns: 1fr; }
  .campaign-tile { min-height: 190px; }
  .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; }
}