/* Generated from the Vibloom design build (assets/css/main.css): component classes are prefixed vb- so they cannot collide with the Stonex parent theme; JS state hooks (.is-*, .has-*) keep their real names. Edit the source and regenerate, or edit vb-overrides.css. */
/* ==========================================================================
   VIBLOOM — site stylesheet (homepage, listing page, product detail page)
   --------------------------------------------------------------------------
   01. Design tokens            11. Explore by mood (carousel)
   02. Reset & base             12. Why Vibloom statement
   03. Layout primitives        13. (folded into 12)
   04. Utilities                14. (removed)
   05. Buttons, chips, links    15. Footer
   07. Announcement + header    16. Toasts
   08. Drawers & overlay        17. Motion
   09. Main banner              18. Responsive
   10. Product card system      19. Listing page
   10b. Shop-by-product         20. Product detail page
   ========================================================================== */

/* ============================================================ 01. TOKENS */
:root {
  /* Sampled directly from Logo.vb-png */
  --ink:        #17161B;
  --cream:      #FEFCFA;
  --pink:       #FC6595;
  --purple:     #AB7BD3;
  --mint:       #6CD4B8;
  --yellow:     #FEC027;
  --orange:     #FB8829;

  /* Darkened brand hues that pass WCAG AA as text on cream */
  --pink-deep:   #D11463;
  --purple-deep: #7E43BC;
  --mint-deep:   #12715B;

  /* Neutrals */
  --white:       #FFFFFF;
  --surface:     #FFFFFF;
  --surface-alt: #F5F1ED;
  --line:        #E9E2DB;
  --line-2:      #D7CEC5;
  --muted:       #5D5866;
  --muted-soft:  #736E7E;
  --on-ink:      #F5F2EF;
  --on-ink-mute: #B5AFBD;

  --focus: var(--purple-deep);

  /* Type */
  --ff-display: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ff-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.5rem, 1.65rem + 3.1vw, 4.25rem);
  --fs-h2:      clamp(1.7rem, 1.15rem + 1.9vw, 2.6rem);
  --fs-lede:    clamp(1rem, 0.94rem + 0.28vw, 1.125rem);
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;

  --ls-eyebrow: 0.16em;

  /* Space */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;
  --section-y: clamp(2.75rem, 1.6rem + 3.4vw, 4.75rem);

  /* Radii */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* Shadow */
  --sh-sm: 0 1px 2px rgba(23,22,27,.05);
  --sh-md: 0 8px 24px -10px rgba(23,22,27,.18);
  --sh-lg: 0 26px 64px -30px rgba(23,22,27,.38);

  /* Layout */
  --container: 1320px;
  --pad: clamp(1.125rem, .6rem + 2.2vw, 2.5rem);
  --header-h: 136px;

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

  --z-header: 60;
  --z-drawer: 90;
  --z-toast: 120;
}

/* ============================================================ 02. RESET */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--sp-4);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--ff-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
}

p { margin: 0; }
[class^="vb-"] ul, [class^="vb-"] ol, [class*=" vb-"] ul, [class*=" vb-"] ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
[class^="vb-"] img, [class^="vb-"] picture, [class^="vb-"] svg, [class*=" vb-"] img, [class*=" vb-"] picture, [class*=" vb-"] svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button[disabled] { cursor: not-allowed; }
address { font-style: normal; }

/* Component display rules must never beat the hidden attribute */
[hidden] { display: none !important; }

svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

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

::selection { background: var(--pink); color: var(--ink); }

/* ============================================================ 03. LAYOUT */
.vb-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.vb-section { padding-block: var(--section-y); }

.vb-shead {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: clamp(1.75rem, 1.1rem + 2.2vw, 3rem);
}

.vb-shead--row { grid-template-columns: 1fr auto; align-items: end; }

/* Centred heading with room for a carousel control on the right. The outer
   columns are equal, so the text stays on the section's true centre line. */
.vb-shead--center {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  text-align: center;
}

.vb-shead--center > :first-child { grid-column: 2; }
.vb-shead--center .vb-shead__title { max-width: 24ch; margin-inline: auto; }
.vb-shead--center .vb-shead__intro { margin-inline: auto; }
.vb-shead--center .vb-filters { justify-content: center; margin-top: var(--sp-5); }
.vb-shead--center .vb-rail__nav { grid-column: 3; justify-self: end; }

.vb-shead__title { font-size: var(--fs-h2); max-width: 20ch; }

.vb-shead__intro {
  color: var(--muted);
  max-width: 48ch;
  font-size: var(--fs-lede);
}

.vb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-family: var(--ff-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}

.vb-eyebrow::before {
  content: "";
  width: 22px; height: 3px;
  border-radius: var(--r-pill);
  background: var(--pink);
}

.vb-eyebrow--bloom::before {
  width: 34px;
  background: linear-gradient(90deg,
    var(--pink) 0 25%, var(--orange) 25% 50%,
    var(--yellow) 50% 75%, var(--mint) 75% 100%);
}

.vb-eyebrow--light { color: var(--on-ink-mute); }

/* A centred eyebrow gets a matching rule on the right so it reads symmetrically */
.vb-shead--center .vb-eyebrow::after,
.vb-stmt__head .vb-eyebrow::after {
  content: "";
  width: 22px; height: 3px;
  border-radius: var(--r-pill);
  background: var(--pink);
}

.vb-shead--center .vb-eyebrow,
.vb-stmt__head .vb-eyebrow { justify-content: center; }

.vb-mark { position: relative; white-space: nowrap; }

.vb-mark::after {
  content: "";
  position: absolute;
  left: -.03em; right: -.03em; bottom: .07em;
  height: .2em;
  border-radius: var(--r-pill);
  background: var(--pink);
  z-index: -1;
}

/* ============================================================ 04. UTILITIES */
.vb-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.vb-skip-link {
  position: absolute; top: -100px; left: var(--sp-4); z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  background: var(--ink); color: var(--on-ink);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600;
  transition: top var(--t) var(--ease);
}

.vb-skip-link:focus-visible { top: 0; }

/* ============================================================ 05. BUTTONS */
.vb-btn {
  --bg: var(--ink); --fg: var(--on-ink); --bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 46px; padding: 0 var(--sp-6);
  border: 1.5px solid var(--bd);
  border-radius: var(--r-pill);
  background: var(--bg); color: var(--fg);
  font-family: var(--ff-display);
  font-size: var(--fs-sm); font-weight: 600;
  text-align: center;
  transition: transform var(--t-fast) var(--ease),
              background-color var(--t) var(--ease),
              color var(--t) var(--ease),
              border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}

.vb-btn:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.vb-btn:active { transform: translateY(0); }
.vb-btn--ink:hover { --bg: #2C2A33; --bd: #2C2A33; }

.vb-btn--outline { --bg: transparent; --fg: var(--ink); --bd: var(--line-2); }
.vb-btn--outline:hover { --bd: var(--ink); --bg: var(--white); }

.vb-btn--cream { --bg: var(--cream); --fg: var(--ink); --bd: var(--cream); }
.vb-btn--cream:hover { --bg: var(--white); --bd: var(--white); }

.vb-btn--lg { min-height: 54px; padding: 0 var(--sp-8); font-size: 1rem; }
.vb-btn--sm { min-height: 40px; padding: 0 var(--sp-4); }
.vb-btn--block { width: 100%; }

.vb-icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink);
  transition: background-color var(--t) var(--ease);
}

.vb-icon-btn:hover { color: var(--pink-deep); }

.vb-count {
  position: absolute; top: 4px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--pink-deep); color: var(--white);
  font-family: var(--ff-display);
  font-size: .6875rem; font-weight: 700; line-height: 1;
}

.vb-chip {
  min-height: 40px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--white);
  font-family: var(--ff-display);
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease),
              background-color var(--t) var(--ease);
}

.vb-chip:hover { border-color: var(--ink); color: var(--ink); }

.vb-chip.is-active {
  background: var(--ink); border-color: var(--ink);
  color: var(--on-ink); font-weight: 600;
}

.vb-chip--sm { min-height: 34px; font-size: var(--fs-xs); }

.vb-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Active collection filter, shown above the grid with a way out */
.vb-filter-note {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-3);
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.vb-filter-note strong {
  font-family: var(--ff-display);
  color: var(--ink);
}

.vb-filter-note__clear {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--muted);
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease);
}

.vb-filter-note__clear:hover { border-color: var(--ink); color: var(--ink); }
.vb-filter-note__clear svg { width: 13px; height: 13px; }

.vb-pgrid__empty {
  padding: var(--sp-10) 0;
  text-align: center;
  color: var(--muted);
}

.vb-link-cta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--ff-display);
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink);
}

.vb-link-cta svg { width: 18px; height: 18px; transition: transform var(--t) var(--ease); }

.vb-link-cta--solo { position: relative; padding-bottom: 3px; white-space: nowrap; }

.vb-link-cta--solo::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px; background: currentColor;
  transform-origin: right; transition: transform var(--t) var(--ease);
}

.vb-link-cta--solo:hover::after { transform-origin: left; transform: scaleX(.3); }
.vb-link-cta--solo:hover svg { transform: translateX(4px); }

/* ============================================================ 07. HEADER */
.vb-announce {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin: 0;
  padding: 4px var(--pad);
  background: var(--ink); color: var(--on-ink);
  font-family: var(--ff-display);
  font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
  text-align: center;
}

.vb-header {
  position: relative; z-index: var(--z-header);
  /* Warm off-white so the header reads as its own component over the cream page */
  background: #FFFDFC;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(23, 22, 27, .04);
  transition: box-shadow var(--t) var(--ease);
}


/* One row: logo left, nav centre, icons right. The outer columns are equal,
   so the nav sits on the viewport's true centre line and cannot shift when
   the cart count changes. */
.vb-header__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  min-height: 136px;
  padding: var(--sp-2) clamp(1rem, .2rem + 2.6vw, 3rem);
}

.vb-header__side { display: flex; align-items: center; min-width: 0; }
/* The start column only holds the burger, so it is hidden on desktop */
.vb-header__side--start { display: none; justify-content: flex-start; }
.vb-header__side--end { justify-content: flex-end; gap: var(--sp-1); }

/* Explicit cells, so the hidden burger column can never shift auto-placement */
.vb-header__logo { grid-column: 1; grid-row: 1; justify-self: start; }
.vb-header__nav { grid-column: 2; grid-row: 1; }
.vb-header__side--end { grid-column: 3; grid-row: 1; }

.vb-header__logo { display: block; }
.vb-header__logo img {
  height: 120px;
  width: auto;
  /* Pin the source ratio so rounding in the derivatives cannot distort it */
  aspect-ratio: 918 / 710;
  object-fit: contain;
}
.vb-header__logo:focus-visible { outline-offset: 6px; }

.vb-header__burger { display: none; }

/* ---- primary nav ---- */
.vb-nav { display: flex; align-items: center; gap: clamp(.25rem, -.4rem + 1.8vw, 1.25rem); }

.vb-nav__item { position: relative; }

.vb-nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 44px;
  padding: 0 var(--sp-2);
  font-family: var(--ff-display);
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  white-space: nowrap;
}

.vb-nav__link::after {
  content: ""; position: absolute;
  left: var(--sp-2); right: var(--sp-2); bottom: 7px;
  height: 2px; border-radius: var(--r-pill);
  background: var(--pink);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t) var(--ease);
}

.vb-nav__link:hover::after,
.vb-nav__item.is-open > .vb-nav__link::after { transform: scaleX(1); }

.vb-nav__chev { width: 14px; height: 14px; transition: transform var(--t) var(--ease); }
.vb-nav__item.is-open .vb-nav__chev { transform: rotate(180deg); }

/* Compact dropdown, aligned to its trigger's left edge so it never runs off */
.vb-menu {
  position: absolute; top: calc(100% - 6px); left: 0;
  min-width: 244px;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh-lg);
}

.vb-menu__eyebrow {
  margin-bottom: var(--sp-3);
  font-family: var(--ff-display);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--muted);
}

.vb-menu__list { display: flex; flex-direction: column; }

.vb-menu__list a {
  display: block;
  padding: var(--sp-2);
  margin-inline: calc(-1 * var(--sp-2));
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 500;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}

.vb-menu__list a:hover { background: var(--surface-alt); color: var(--purple-deep); }

.vb-menu__all {
  display: block; width: 100%;
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-family: var(--ff-display);
  font-size: var(--fs-sm); font-weight: 600;
}

.vb-menu__all:hover { color: var(--pink-deep); }

/* A crowded header should overflow visibly, not silently drop chevrons
   or shrink icons below a 44px tap target. */
.vb-nav__chev,
.vb-header .vb-icon-btn { flex: none; }

/* ============================================================ 08. DRAWERS */
.vb-overlay {
  position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1);
  background: rgba(23,22,27,.45);
  opacity: 0; transition: opacity var(--t) var(--ease);
}

.vb-overlay.is-open { opacity: 1; }

.vb-drawer {
  position: fixed; top: 0; bottom: 0; z-index: var(--z-drawer);
  display: flex; flex-direction: column;
  width: min(400px, 88vw);
  background: var(--cream);
  box-shadow: var(--sh-lg);
  transition: transform var(--t-slow) var(--ease);
}

.vb-drawer--left { left: 0; transform: translateX(-102%); }
.vb-drawer--right { right: 0; transform: translateX(102%); }
.vb-drawer.is-open { transform: translateX(0); }

.vb-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
}

.vb-drawer__head img { width: auto; height: 24px; }
.vb-drawer__title { font-size: 1.125rem; font-weight: 600; }

.vb-drawer__body {
  flex: 1 1 auto; overflow-y: auto;
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-5);
}

.vb-drawer__nav { display: flex; flex-direction: column; }

.vb-acc__head {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: var(--sp-3);
  min-height: 56px;
  padding: var(--sp-3) var(--sp-1);
  border: 0; border-bottom: 1px solid var(--line);
  background: transparent;
  font-family: var(--ff-display);
  font-size: 1.0625rem; font-weight: 600;
  text-align: left;
  color: inherit;
}

.vb-acc__head svg { transition: transform var(--t) var(--ease); flex: none; }
.vb-acc__head[aria-expanded="true"] svg { transform: rotate(180deg); }
.vb-acc__head[aria-expanded="true"] { color: var(--pink-deep); }

.vb-acc__panel { padding: var(--sp-2) 0 var(--sp-4); }

.vb-acc__panel a {
  display: flex; align-items: center;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--muted);
  transition: color var(--t) var(--ease);
}

.vb-acc__panel a:hover { color: var(--ink); }
.vb-acc__all { font-weight: 600; color: var(--ink); }

.vb-drawer__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-1); }

.vb-drawer__util {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; min-height: 48px;
  padding: var(--sp-2);
  border: 0; border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--ff-display);
  font-size: var(--fs-sm); font-weight: 600;
  text-align: left;
  transition: background-color var(--t) var(--ease);
}

.vb-drawer__util:hover { background: var(--surface-alt); }

.vb-drawer__tag {
  margin-top: var(--sp-4);
  font-family: var(--ff-display);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--muted);
}

/* Bag */
.vb-drawer__body--cart { gap: var(--sp-4); }
.vb-cart-empty { color: var(--muted); font-size: var(--fs-sm); }
.vb-cart-list { display: flex; flex-direction: column; gap: var(--sp-4); }

.vb-cart-item {
  display: grid; grid-template-columns: 64px 1fr auto;
  gap: var(--sp-3); align-items: start;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}

.vb-cart-item__img {
  width: 64px; aspect-ratio: 4 / 5;
  object-fit: cover; border-radius: var(--r-sm);
  background: var(--surface-alt);
}

.vb-cart-item__title {
  font-family: var(--ff-display);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.35;
}

.vb-cart-item__meta { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--muted); }

.vb-cart-item__remove {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--muted);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}

.vb-cart-item__remove:hover { background: var(--surface-alt); color: var(--ink); }
.vb-cart-item__remove svg { width: 16px; height: 16px; }

.vb-cart-foot {
  padding: var(--sp-5);
  border-top: 1px solid var(--line);
  background: var(--white);
}

.vb-cart-total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--ff-display); font-size: 1.0625rem; font-weight: 600;
}

.vb-cart-note { margin: var(--sp-2) 0 var(--sp-4); font-size: var(--fs-xs); color: var(--muted); }

/* ============================================================ 09. MAIN BANNER */
.vb-banner { background: var(--surface-alt); }

.vb-banner__link { display: block; }

.vb-banner__link img {
  width: 100%;
  height: auto;
  /* The supplied artwork is 1942x809; shown uncropped so none of the baked-in
     type or product is lost at any width. */
  aspect-ratio: 1942 / 809;
  object-fit: cover;
}

.vb-banner__link:focus-visible { outline-offset: -4px; }

/* ============================================================ 10. PRODUCT CARD */
.vb-pgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, .5rem + 1.4vw, 1.75rem) clamp(.75rem, .3rem + 1.2vw, 1.5rem);
}

.vb-pcard { display: flex; flex-direction: column; height: 100%; }

.vb-pcard__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-alt);
  border: 1px solid var(--line);
}

.vb-pcard__link { display: block; position: relative; aspect-ratio: 4 / 5; }

.vb-pcard__view {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease);
}

.vb-pcard__view.is-active { opacity: 1; }
.vb-pcard__view img { width: 100%; height: 100%; object-fit: cover; }

/* Front/back dots */
/* The front/back control is hidden so nothing sits on top of the product.
   Hover (pointer) and a sideways swipe (touch) still flip the view; the control
   itself stays in the DOM and reappears on keyboard focus, so the back image is
   never unreachable without a mouse. */
.vb-pcard__views {
  position: absolute; left: 50%; bottom: 2px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t) var(--ease);
}

.vb-pcard__views:focus-within {
  opacity: 1;
  pointer-events: auto;
}

.vb-pcard__dot {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%;
  background: transparent;
}

.vb-pcard__dot::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 1px rgba(23, 22, 27, .22), 0 1px 3px rgba(23, 22, 27, .35);
  transition: background-color var(--t) var(--ease), transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}

.vb-pcard__dot.is-active::before {
  background: var(--ink);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 1px 3px rgba(23, 22, 27, .35);
  transform: scale(1.15);
}

.vb-wish-btn {
  position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 2;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.92);
  color: var(--ink);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease),
              transform var(--t-fast) var(--ease);
}

.vb-wish-btn:hover { transform: scale(1.08); }
.vb-wish-btn:active { transform: scale(.96); }

.vb-wish-btn[aria-pressed="true"] {
  background: var(--pink-deep); border-color: var(--pink-deep); color: var(--white);
}

.vb-wish-btn[aria-pressed="true"] svg { fill: currentColor; }


.vb-pcard__quick {
  position: absolute;
  left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3);
  z-index: 3;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}

.vb-pcard__body {
  display: flex; flex-direction: column; flex: 1 1 auto;
  gap: 2px;
  padding-top: var(--sp-4);
}

.vb-pcard__collection {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}

/* Title on the left, price opposite it on the right */
.vb-pcard__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px var(--sp-3);
  margin-top: auto;
  padding-top: 2px;
}

.vb-pcard__title {
  flex: 1 1 8ch;
  font-size: .9375rem; font-weight: 600; line-height: 1.35;
  letter-spacing: -.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vb-pcard__title a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--t) var(--ease);
}

.vb-pcard__title a:hover { background-size: 100% 1.5px; }

.vb-price {
  flex: none;
  display: flex; align-items: baseline; flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-left: auto;
  /* Outfit ships no rupee glyph, so prices are set in Inter */
  font-family: var(--ff-body);
  font-variant-numeric: tabular-nums;
}

.vb-price__now { font-size: 1rem; font-weight: 600; }

.vb-price__was {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
}

/* Saving badge, top-left of the product image */
.vb-pcard__badge {
  position: absolute;
  top: var(--sp-3); left: var(--sp-3);
  z-index: 2;
  margin: 0;
  padding: 5px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--pink);
  color: var(--ink);
  font-family: var(--ff-display);
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  line-height: 1.4;
}

/* Add to Cart slides up over the foot of the image on pointer devices;
   on touch it simply stays visible. */
@media (hover: hover) and (min-width: 641px) {
  .vb-pcard__quick { opacity: 0; transform: translateY(10px); }
  .vb-pcard:hover .vb-pcard__quick,
  .vb-pcard:focus-within .vb-pcard__quick { opacity: 1; transform: translateY(0); }
  .vb-pcard__media { transition: box-shadow var(--t) var(--ease); }
  .vb-pcard:hover .vb-pcard__media { box-shadow: var(--sh-md); }
}

/* Centred "view all" under a grid */
.vb-viewall { margin-top: clamp(2rem, 1.2rem + 2.4vw, 3rem); text-align: center; }

/* ============================================================ 10b. SHOP BY PRODUCT */
.vb-shopgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, .5rem + 1.6vw, 2rem);
}

.vb-shopcard {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.vb-shopcard:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }

.vb-shopcard__link { display: grid; grid-template-rows: auto 1fr; height: 100%; }
.vb-shopcard__media { overflow: hidden; background: var(--surface-alt); }

.vb-shopcard__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}

.vb-shopcard:hover .vb-shopcard__media img { transform: scale(1.04); }

.vb-shopcard__body {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sp-2);
  padding: clamp(1.25rem, .8rem + 1.4vw, 1.9rem);
}

.vb-shopcard__title { font-size: clamp(1.35rem, 1rem + 1.1vw, 1.8rem); }
.vb-shopcard__text { color: var(--muted); max-width: 32ch; font-size: var(--fs-sm); }

.vb-shopcard__body .vb-link-cta {
  margin-top: var(--sp-3);
  padding-bottom: 3px;
  border-bottom: 1.5px solid var(--ink);
}

.vb-shopcard:hover .vb-link-cta svg { transform: translateX(4px); }

/* ============================================================ 11. MOODS (carousel) */
.vb-moods {
  background: var(--ink);
  color: var(--on-ink);
  --focus: var(--yellow);
}

.vb-moods .vb-eyebrow { color: var(--on-ink-mute); }
.vb-moods .vb-shead__intro { color: var(--on-ink-mute); }

.vb-moods .vb-rail__btn {
  background: transparent;
  border-color: rgba(245, 242, 239, .28);
  color: var(--on-ink);
}

.vb-moods .vb-rail__btn:hover:not(:disabled) { border-color: var(--on-ink); }

.vb-rail__nav { display: flex; gap: var(--sp-2); }

.vb-rail__btn {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink);
  transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease),
              opacity var(--t) var(--ease);
}

.vb-rail__btn:hover:not(:disabled) { border-color: var(--ink); }
.vb-rail__btn:disabled { opacity: .35; cursor: default; }

/* Four across on desktop; a native scroll-snap rail, so it works without JS
   and stays keyboard- and touch-scrollable. */
.vb-rail {
  --rail-gap: clamp(.75rem, .4rem + 1vw, 1.5rem);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--rail-gap)) / 4);
  gap: var(--rail-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.vb-rail::-webkit-scrollbar { display: none; }
.vb-rail > * { scroll-snap-align: start; }
.vb-rail:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

.vb-mood {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #22212A;
  border: 1px solid rgba(245, 242, 239, .12);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease);
}

.vb-mood:hover { border-color: rgba(245, 242, 239, .3); }

.vb-mood:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.vb-mood__link { display: grid; grid-template-rows: auto 1fr; height: 100%; }
.vb-mood__media { overflow: hidden; background: #2B2A33; }

.vb-mood__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}

.vb-mood:hover .vb-mood__media img { transform: scale(1.05); }

.vb-mood__body { padding: var(--sp-5); }
.vb-mood__title { font-size: 1.0625rem; }
.vb-mood__text { margin-top: 4px; font-size: var(--fs-sm); color: var(--on-ink-mute); }

/* ============================================================ 12. STATEMENT */
.vb-stmt {
  background: linear-gradient(180deg, #FFF4F7 0%, #FDF7F3 100%);
  color: var(--ink);
  padding-block: var(--section-y);
}

.vb-stmt__head {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}

.vb-stmt__title { font-size: var(--fs-h2); }

.vb-stmt__text {
  margin: var(--sp-5) auto var(--sp-8);
  max-width: 54ch;
  color: var(--muted);
}

.vb-stmt__points {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  border-top: 1px solid var(--line);
}

.vb-stmt__point {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem) clamp(1rem, .5rem + 1.2vw, 1.75rem);
  border-left: 1px solid var(--line);
}

.vb-stmt__point:first-child { border-left: 0; padding-left: 0; }
.vb-stmt__point:last-child { padding-right: 0; }

.vb-stmt__point svg {
  width: 24px; height: 24px;
  flex: none; margin-top: 3px;
  stroke-width: 1.5;
  color: var(--pink-deep);
}

.vb-stmt__point h3 { font-size: 1rem; font-weight: 600; }

.vb-stmt__point p {
  margin-top: 4px;
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* ============================================================ 15. FOOTER */
.vb-footer {
  background: var(--ink);
  color: var(--on-ink);
  /* Why-Vibloom is ink too, so a hairline keeps the two from merging */
  border-top: 1px solid rgba(245, 242, 239, .12);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) var(--sp-8);
  --focus: var(--yellow);
}

/* Centred brand block, then the link columns, then the legal line */
.vb-footer__brand {
  text-align: center;
  padding-bottom: clamp(2rem, 1.2rem + 2.4vw, 3rem);
  border-bottom: 1px solid rgba(245, 242, 239, .14);
}

/* The logo is a <picture>, so the size has to land on the inner <img> */
.vb-footer__logo { display: inline-block; }
.vb-footer__logo img { width: auto; height: 92px; }

.vb-footer__tagline {
  margin: var(--sp-5) auto 0;
  max-width: 56ch;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--on-ink-mute);
}

.vb-social {
  display: flex; justify-content: center; gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.vb-social__link {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(245, 242, 239, .22);
  border-radius: var(--r-pill);
  color: var(--on-ink);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease);
}

.vb-social__link:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }

.vb-footer__cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.5fr;
  gap: clamp(1.5rem, .8rem + 2vw, 3rem);
  padding-block: clamp(2rem, 1.2rem + 2.4vw, 3rem);
  border-bottom: 1px solid rgba(245, 242, 239, .14);
}

.vb-footer__h {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--on-ink);
}

/* Padding rather than gap keeps each link a comfortable tap target */
.vb-footer__links { display: flex; flex-direction: column; gap: 2px; }
.vb-footer__links a { display: inline-block; padding-block: 7px; }

.vb-footer__links a,
.vb-footer__addr a,
.vb-footer__addr span {
  font-size: var(--fs-sm);
  color: var(--on-ink-mute);
  transition: color var(--t) var(--ease);
}

.vb-footer__links a:hover,
.vb-footer__addr a:hover { color: var(--on-ink); }

.vb-footer__addr { display: flex; flex-direction: column; gap: var(--sp-4); }

.vb-footer__line {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  line-height: 1.6;
}

.vb-footer__line svg {
  width: 17px; height: 17px;
  flex: none;
  margin-top: 4px;
  stroke-width: 1.6;
  color: var(--pink);
}

.vb-footer__bottom {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-6);
}

.vb-footer__copy { font-size: var(--fs-sm); color: var(--on-ink-mute); }

.vb-pay { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }

.vb-pay__label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--on-ink-mute);
}

.vb-pay__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.vb-pay__chip {
  padding: 5px var(--sp-3);
  border: 1px solid rgba(245, 242, 239, .22);
  border-radius: var(--r-xs);
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--on-ink-mute);
}

/* ============================================================ 16. TOASTS */
.vb-toasts {
  position: fixed; left: 50%; bottom: var(--sp-6);
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--sp-2);
  width: min(400px, calc(100vw - 2 * var(--sp-4)));
  pointer-events: none;
}

.vb-toast {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--ink); color: var(--on-ink);
  box-shadow: var(--sh-lg);
  font-size: var(--fs-sm); font-weight: 500;
  animation: toast-in var(--t) var(--ease);
}

.vb-toast svg { width: 18px; height: 18px; flex: none; color: var(--mint); }
.vb-toast.is-leaving { animation: toast-out var(--t) var(--ease) forwards; }

@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ============================================================ 16b. WHATSAPP BUTTON */
.vb-wa-fab {
  position: fixed;
  right: clamp(1rem, .6rem + 1vw, 1.5rem);
  bottom: max(clamp(1rem, .6rem + 1vw, 1.5rem), env(safe-area-inset-bottom));
  /* Below the overlay, so an open drawer covers it */
  z-index: calc(var(--z-drawer) - 2);
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--r-pill);
  /* Darker than WhatsApp's #25D366 so the white glyph clears 3:1 */
  background: #1DA150; color: #fff;
  box-shadow: var(--sh-lg);
  transition: background-color var(--t) var(--ease), transform var(--t) var(--ease);
}

.vb-wa-fab:hover { background: #178A44; transform: translateY(-2px); }
.vb-wa-fab svg { width: 28px; height: 28px; }

/* ============================================================ 17. MOTION */
[data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .vb-btn:hover, .vb-shopcard:hover, .vb-mood:hover { transform: none; }
}

/* ============================================================ 18. RESPONSIVE */

/* Below 1024px the five categories no longer clear the logo, so they move
   into the burger drawer: burger left, logo centred, icons right.
   Keep 1024 in sync with `desktop` in main.vb-js. */
@media (max-width: 1023px) {
  .vb-header__nav { display: none; }
  .vb-header__burger { display: inline-flex; }
  .vb-header__side--start { display: flex; grid-column: 1; grid-row: 1; }
  .vb-header__logo { grid-column: 2; justify-self: center; }
}

/* Laptop */
@media (max-width: 1180px) {
  .vb-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vb-footer__cols { grid-template-columns: 1fr 1fr 1fr; }
  .vb-footer__col:last-child { grid-column: 1 / -1; }
}

/* Tablet — the split layouts give out here */
@media (max-width: 900px) {
  :root { --header-h: 70px; }

  /* Touch devices get full-size tap targets on the front/back control */
  .vb-pcard__dot { width: 44px; height: 44px; }
  .vb-pcard__dot::before { width: 9px; height: 9px; }

  .vb-header__logo img { height: 96px; }


  .vb-shopgrid { grid-template-columns: 1fr; }
  .vb-rail { grid-auto-columns: calc((100% - 2 * var(--rail-gap)) / 3); }

  .vb-stmt__points { grid-template-columns: 1fr 1fr; }
  .vb-stmt__point:nth-child(odd) { border-left: 0; padding-left: 0; }
  .vb-stmt__point:nth-child(even) { padding-right: 0; }
  .vb-stmt__point:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* Small tablet / large phone */
@media (max-width: 860px) {

  .vb-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .vb-footer__col:last-child { grid-column: 1 / -1; }
}

/* Phone */
@media (max-width: 640px) {
  :root { --section-y: 2.75rem; --header-h: 92px; }

  /* Phone header: hamburger, centred lockup, wishlist + bag.
     Account moves into the drawer too. */
  .vb-header__account { display: none; }
  .vb-header__row { min-height: 88px; padding-block: 6px; }
  .vb-header__logo img { height: 76px; }
  .vb-announce { min-height: 32px; }

  .vb-shead--row { grid-template-columns: 1fr; align-items: start; }
  .vb-shead__title { max-width: none; }

  .vb-filters {
    /* Chips scroll sideways rather than wrapping into a tall block */
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-inline: calc(-1 * var(--pad));
    padding-inline: var(--pad);
    scroll-snap-type: x proximity;
  }

  .vb-filters::-webkit-scrollbar { display: none; }
  .vb-filters .vb-chip { scroll-snap-align: start; }

  .vb-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vb-rail { grid-auto-columns: calc((100% - var(--rail-gap)) / 2); }


  .vb-rail__nav { display: none; }

  .vb-footer__bottom { flex-direction: column; align-items: flex-start; }
  .vb-toasts { bottom: var(--sp-4); }
}

/* Why-Vibloom points stack to one column on small phones */
@media (max-width: 560px) {
  .vb-stmt__points { grid-template-columns: 1fr; }
  .vb-stmt__point {
    border-left: 0;
    padding-inline: 0;
    border-top: 1px solid var(--line);
  }
  .vb-stmt__point:first-child { border-top: 0; }
}

/* Compact phone (360px and below) */
@media (max-width: 400px) {
  :root { --pad: 1rem; }

  .vb-header__side--end { gap: 0; }
  .vb-header__row { gap: var(--sp-2); }

  .vb-pgrid { gap: var(--sp-4) var(--sp-3); }
  .vb-pcard__title { font-size: .875rem; }
  .vb-wish-btn { width: 34px; height: 34px; top: var(--sp-2); right: var(--sp-2); }
  .vb-pcard__badge { top: var(--sp-2); left: var(--sp-2); padding: 4px var(--sp-2); font-size: .625rem; }
  .vb-wish-btn svg { width: 17px; height: 17px; }

  .vb-footer__cols { grid-template-columns: 1fr; }
}

/* ==========================================================================
   19. LISTING PAGE  (listing.vb-html)
   ========================================================================== */
.vb-crumbs { margin-bottom: var(--sp-5); }

.vb-crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.vb-crumbs li + li::before {
  content: "/";
  margin-right: var(--sp-2);
  color: var(--line-2);
}

.vb-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.vb-crumbs [aria-current] { color: var(--ink); font-weight: 500; }

/* Dark, centred band so the listing head reads as its own component */
.vb-lhead {
  background: var(--ink);
  color: var(--on-ink);
  padding-block: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
  text-align: center;
  --focus: var(--yellow);
}

.vb-lhead .vb-crumbs { margin-bottom: var(--sp-4); }
.vb-lhead .vb-crumbs ol { justify-content: center; color: var(--on-ink-mute); }
.vb-lhead .vb-crumbs li + li::before { color: rgba(245, 242, 239, .35); }
.vb-lhead .vb-crumbs a:hover { color: var(--on-ink); }
.vb-lhead .vb-crumbs [aria-current] { color: var(--on-ink); }

.vb-lhead__title { font-size: var(--fs-h2); }

.vb-lhead__intro {
  margin: var(--sp-3) auto 0;
  max-width: 56ch;
  color: var(--on-ink-mute);
}

/* --- filter / sort bar --- */
.vb-lbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(254, 252, 250, .94);
  backdrop-filter: blur(8px);
  border-block: 1px solid var(--line);
}

.vb-lbar__inner {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: 64px;
}

.vb-lbar__meta { flex: 1 1 auto; min-width: 0; }
.vb-lbar__results { font-size: var(--fs-sm); color: var(--muted); }



.vb-lbar__sort { position: relative; flex: none; }

.vb-select {
  appearance: none;
  min-height: 42px;
  padding: 0 var(--sp-8) 0 var(--sp-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--white);
  font-family: var(--ff-display);
  font-size: var(--fs-sm); font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t) var(--ease);
}

.vb-select:hover { border-color: var(--ink); }

.vb-select__chev {
  position: absolute; right: var(--sp-4); top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  pointer-events: none;
  color: var(--muted);
}

/* --- grid --- */
.vb-lgrid { padding-top: clamp(1.75rem, 1rem + 2vw, 2.5rem); }

/* ==========================================================================
   20. PRODUCT DETAIL PAGE  (product/*.vb-html)
   ========================================================================== */
.vb-pdp { padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem) 0; }

.vb-pdp__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 1rem + 3vw, 4rem);
  align-items: start;
}

/* --- gallery --- */
.vb-gal__stage {
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface-alt);
  border: 1px solid var(--line);
}

.vb-gal__slide { display: none; }
.vb-gal__slide.is-active { display: block; }
.vb-gal__slide img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.vb-gal__thumbs { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); }

.vb-gal__thumb {
  width: 76px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-alt);
  transition: border-color var(--t) var(--ease);
}

.vb-gal__thumb img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.vb-gal__thumb:hover { border-color: var(--line-2); }
.vb-gal__thumb.is-active { border-color: var(--ink); border-width: 2px; }

/* --- buy box --- */
.vb-pdp__coll {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}

.vb-pdp__coll a:hover { color: var(--pink-deep); }

.vb-pdp__title { margin-top: var(--sp-2); font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem); }

.vb-pdp__price {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  font-family: var(--ff-body);
  font-variant-numeric: tabular-nums;
}

.vb-pdp__now { font-size: 1.5rem; font-weight: 600; }
.vb-pdp__was { font-size: 1.0625rem; color: var(--muted); }

.vb-pdp__off {
  padding: 4px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--pink);
  color: var(--ink);
  font-family: var(--ff-display);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}

.vb-pdp__tax { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--muted); }

.vb-pdp__block { margin-top: var(--sp-6); }


.vb-pdp__label {
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--muted);
}


.vb-pdp__colour { margin-top: var(--sp-2); font-size: var(--fs-sm); }
.vb-pdp__hint { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--pink-deep); }

/* --- colour swatches --- */
.vb-swatches { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-4); }

.vb-swatch {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
}

/* The selected ring sits directly on the dot — no gap, no inner padding. */
.vb-swatch__dot {
  width: 40px; height: 40px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(23, 22, 27, .18);
  transition: box-shadow var(--t) var(--ease);
}

/* Demo colourways — see COLOURWAYS in the product generator */
.vb-swatch__dot--0 { background: #17161B; }
.vb-swatch__dot--1 { background: #6E2233; }
.vb-swatch__dot--2 { background: #20463A; }
.vb-swatch__dot--3 { background: #EFE7DC; }

.vb-swatch:hover .vb-swatch__dot { box-shadow: inset 0 0 0 1px rgba(23, 22, 27, .3); }

/* Ring hugs the dot with a hairline of page colour between, so the selected
   state stays visible even on the black swatch. */
.vb-swatch[aria-checked="true"] .vb-swatch__dot {
  box-shadow: inset 0 0 0 1px rgba(23, 22, 27, .18),
              0 0 0 2px var(--cream),
              0 0 0 4px var(--ink);
}

.vb-pdp__freesize {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--muted);
}

.vb-pdp__freesize strong { color: var(--ink); font-weight: 600; }

/* --- quantity --- */
.vb-qty {
  display: inline-flex; align-items: center;
  margin-top: var(--sp-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.vb-qty__btn {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 0; background: transparent;
  transition: background-color var(--t) var(--ease);
}

.vb-qty__btn:hover:not(:disabled) { background: var(--surface-alt); }
.vb-qty__btn:disabled { opacity: .35; cursor: default; }
.vb-qty__btn svg { width: 16px; height: 16px; }

.vb-qty__input {
  width: 48px; height: 46px;
  border: 0; background: transparent;
  text-align: center;
  font-family: var(--ff-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.vb-qty__input::-webkit-outer-spin-button,
.vb-qty__input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.vb-qty__input:focus { outline: none; }
.vb-qty:focus-within { border-color: var(--ink); }

/* --- actions --- */
.vb-pdp__actions { display: flex; align-items: stretch; gap: var(--sp-3); margin-top: var(--sp-8); }

.vb-wish-btn--inline {
  position: static;
  width: 54px; height: 54px;
  flex: none;
  border-color: var(--line-2);
  background: var(--white);
}




/* --- accordions in the buy box --- */
.vb-acc-list { margin-top: var(--sp-8); border-top: 1px solid var(--line); }

.vb-acc-list .vb-acc__head {
  min-height: 56px;
  padding-inline: 0;
  font-size: var(--fs-sm);
  letter-spacing: .02em;
}

.vb-acc-list .vb-acc__head[aria-expanded="true"] { color: var(--ink); }
.vb-acc-list .vb-acc__panel { padding: 0 0 var(--sp-5); }

.vb-acc__text { font-size: var(--fs-sm); color: var(--muted); }
.vb-acc__text a { color: var(--purple-deep); text-decoration: underline; text-underline-offset: 3px; }

.vb-specs { display: flex; flex-direction: column; gap: var(--sp-3); }

.vb-spec {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}

.vb-spec dt { font-weight: 600; color: var(--muted); }
.vb-spec dd { margin: 0; color: var(--muted); }
.vb-spec dd strong { color: var(--pink-deep); font-weight: 600; }

/* ============================================================ RESPONSIVE */
@media (max-width: 900px) {
  .vb-pdp__inner { grid-template-columns: 1fr; }
  .vb-gal { max-width: 560px; width: 100%; margin-inline: auto; }
}

@media (max-width: 640px) {
  .vb-lbar__inner { min-height: 58px; gap: var(--sp-3); }
  .vb-lbar__results { font-size: var(--fs-xs); }
  .vb-select { padding-right: var(--sp-6); font-size: var(--fs-xs); }
  .vb-select__chev { right: var(--sp-2); }
  .vb-gal__thumb { width: 62px; }
  .vb-pdp__actions { flex-wrap: wrap; }
}