/*
Theme Name: Blueland Clone
Theme URI: https://www.blueland.com/
Author: Site Build
Description: Faithful rebuild of the Blueland storefront for WordPress + WooCommerce.
Version: 1.0.0
Text Domain: blueland
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
*/

/* ==========================================================================
   Design tokens (mirrored from the source design system)
   ========================================================================== */
:root {
  /* brand */
  --brand-01: #FFFCBB;
  --brand-10: #000175;
  --brand-20: #001589;
  --brand-30: #0033a7;
  --brand-35: #133cd1;
  --brand-40: #2c53c9;
  --brand-50: #2d56d2;
  --brand-60: #587bda;
  --brand-70: #7d9ce8;
  --brand-80: #b8caef;
  --brand-90: #cbd9f7;
  --brand-93: #e3eafd;
  --brand-95: #f1f5fd;
  --brand-98: #f4f8fe;
  /* neutrals */
  --neutral-0: #000000;
  --neutral-10: #151c22;
  --neutral-20: #273339;
  --neutral-30: #3c4950;
  --neutral-40: #52626a;
  --neutral-50: #687c86;
  --neutral-60: #82959e;
  --neutral-70: #9fafb7;
  --neutral-80: #bdc9cf;
  --neutral-85: #cdd6dc;
  --neutral-90: #dde4e8;
  --neutral-93: #e5ecf0;
  --neutral-95: #eff3f6;
  --neutral-98: #f7fafc;
  --neutral-100: #ffffff;
  /* skyblue */
  --skyblue-10: #001e2b;
  --skyblue-20: #003548;
  --skyblue-30: #004d67;
  --skyblue-40: #216582;
  --skyblue-50: #3f7e9d;
  --skyblue-60: #5b98b8;
  --skyblue-70: #76b3d3;
  --skyblue-80: #92cef0;
  --skyblue-85: #a0ddff;
  --skyblue-90: #c2e8ff;
  --skyblue-93: #d5efff;
  --skyblue-95: #e1f2ff;
  --skyblue-98: #f0f7ff;
  /* dark navy */
  --dark-navy-10: #0b1057;
  --dark-navy-20: #2d3265;
  --dark-navy-30: #444a7b;
  --dark-navy-40: #5e6493;
  --dark-navy-50: #7e84a9;
  --dark-navy-60: #9da3bd;
  --dark-navy-70: #c4ccdf;
  --dark-navy-80: #d6dbeb;
  --dark-navy-90: #e6ebf4;
  --dark-navy-93: #e9ecf6;
  --dark-navy-95: #f3f5fb;
  --dark-navy-98: #fafbfd;
  --blue-98: #F6F9FE;
  /* accents */
  --green-10: #00210b;
  --green-20: #003917;
  --green-30: #005224;
  --green-40: #006d32;
  --green-50: #168943;
  --green-60: #3ba45b;
  --green-70: #58bf73;
  --green-80: #74dc8c;
  --green-85: #82ea99;
  --green-90: #90f9a6;
  --green-93: #a6ffb5;
  --green-95: #c5ffcb;
  --green-98: #eaffe9;
  --orange-50: #db3d16;
  --orange-60: #ff562e;
  --orange-80: #ffb4a3;
  --orange-93: #ffe6e0;
  --red-40: #B23535;
  --red-50: #ce4947;
  --red-60: #f0625e;
  --red-93: #ffe5e3;
  --red-98: #fff8f7;
  --yellow-80: #f0c037;
  --yellow-85: #ffce46;
  --yellow-93: #ffe9b9;
  --yellow-98: #fff8f1;
  --purple-60: #d269cc;

  /* semantic */
  --background: #ffffff;
  --background-subtle: var(--brand-95);
  --background-muted: var(--neutral-95);
  --background-dark: var(--brand-20);
  --text: var(--dark-navy-10);
  --text-default-muted: var(--dark-navy-30);
  --text-default-subtlest: var(--dark-navy-60);
  --text-muted: var(--dark-navy-30);
  --text-bright: #ffffff;
  --text-invert: var(--brand-20);
  --border-default: var(--neutral-90);
  --border-light: var(--neutral-93);
  --border-brand: var(--brand-20);

  /* fonts */
  --font-primary: "Sailec", "Sailec Fallback", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-secondary: "GT-Pressura", "GT-Pressura Fallback", "Archivo", "Inter", Arial, sans-serif;
  --font-sans: "Sailec", "Sailec Fallback", "Inter", "Helvetica Neue", Arial, sans-serif;
  --tracking-sm: .03125rem;
  --tracking-md: .0625rem;
  --tracking-tight: -.009375rem;

  /* type scale */
  --text-display-xl: 2rem;
  --text-title-1: 1.875rem;
  --text-title-2: 1.625rem;
  --text-title-3: 1.5rem;
  --text-title-4: 1.25rem;
  --text-title-5: 1.125rem;
  --text-title-6: 1rem;
  --text-title-7: .875rem;
  --text-title-8: .8125rem;
  --text-body-editorial: 1.125rem;
  --text-body-xl: 1rem;
  --text-body-1: 1rem;
  --text-body-2: .875rem;
  --text-body-3: .8125rem;
  --text-ui-1: 1.25rem;
  --text-ui-2: 1.125rem;
  --text-ui-3: .9375rem;
  --text-ui-4: .8125rem;
  --text-ui-5: .75rem;
  --text-ui-6: .75rem;
  --text-support-1: .8125rem;
  --text-support-2: .75rem;
  --text-support-3: .75rem;
  --text-button-ui-1: 1rem;
  --text-button-ui-2: .875rem;
  --text-button-ui-3: .8125rem;
  --text-button-body-2: .875rem;

  /* spacing */
  --spacing-012: .125rem;
  --spacing-025: .25rem;
  --spacing-037: .375rem;
  --spacing-050: .5rem;
  --spacing-075: .75rem;
  --spacing-100: 1rem;
  --spacing-125: 1.25rem;
  --spacing-150: 1.5rem;
  --spacing-200: 2rem;
  --spacing-250: 2.5rem;
  --spacing-300: 3rem;
  --spacing-350: 3.5rem;
  --spacing-400: 4rem;
  --spacing-450: 4.5rem;
  --spacing-500: 5rem;
  --spacing-600: 6rem;
  --spacing-700: 7rem;
  --spacing-900: 9rem;
  --spacing-1100: 11rem;

  /* radii */
  --corner-regular: .25rem;
  --corner-large: .5rem;
  --corner-xl: 1rem;
  --corner-xxl: 1.5rem;
  --corner-circle: 9999px;

  /* layout */
  --content-max-width: 96rem;
  --container-pad: 1rem;
  --header-height: 2.5rem;
  --promo-height: 3.375rem;
  --subnav-height: 2.5rem;
  --header-with-subnavigation: 8.375rem;
}

@media (min-width: 48rem) {
  :root {
    --container-pad: 2.5rem;
    --header-height: 3.5rem;
    --promo-height: 2.375rem;
    --subnav-height: 3.125rem;
    --header-with-subnavigation: 9rem;
    --text-display-xl: 3.25rem;
    --text-title-1: 2.75rem;
    --text-title-2: 2rem;
    --text-title-3: 1.75rem;
    --text-title-4: 1.375rem;
    --text-title-5: 1.25rem;
    --text-title-6: 1.125rem;
    --text-title-7: 1rem;
    --text-title-8: .875rem;
    --text-body-editorial: 1.25rem;
    --text-body-xl: 1.25rem;
    --text-body-1: 1.125rem;
    --text-body-2: .9375rem;
    --text-button-ui-1: 1.0625rem;
    --text-button-ui-2: .9375rem;
    --text-button-body-2: .9375rem;
  }
}

@media (min-width: 64rem) {
  :root {
    --header-height: 4.0625rem;
    --promo-height: 2.5rem;
    --subnav-height: 3.125rem;
    --header-with-subnavigation: 9.6875rem;
    --text-display-xl: 3.5rem;
    --text-title-1: 3rem;
    --text-title-2: 2.5rem;
    --text-title-3: 2rem;
    --text-title-4: 1.625rem;
    --text-title-5: 1.375rem;
    --text-title-6: 1.25rem;
    --text-title-7: 1.0625rem;
    --text-title-8: .9375rem;
    --text-body-editorial: 1.375rem;
    --text-body-xl: 1.375rem;
    --text-body-1: 1.25rem;
    --text-body-2: 1.0625rem;
    --text-body-3: .9375rem;
    --text-ui-1: 1.375rem;
    --text-ui-2: 1.25rem;
    --text-ui-3: 1.0625rem;
    --text-ui-4: .875rem;
    --text-ui-5: .8125rem;
    --text-support-1: .875rem;
    --text-support-2: .8125rem;
    --text-button-ui-1: 1.25rem;
    --text-button-ui-2: 1.125rem;
    --text-button-ui-3: .9375rem;
    --text-button-body-2: 1.125rem;
    --spacing-200: 2rem;
    --spacing-250: 2.5rem;
    --spacing-300: 3rem;
    --spacing-450: 4.5rem;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; display: block; height: auto; }
img { border-style: none; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--brand-20); color: #fff; padding: .75rem 1rem;
}
.skip-link:focus { left: 0; }

/* layout helpers */
.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
.container--wide { max-width: none; }
/* `padding-block`, not the shorthand: `.section` lands after `.container` in the
   cascade and the shorthand was wiping the container side gutters, which left
   page content flush against the edge of the screen on phones. */
.section { padding-block: 3.5rem; }
@media (min-width: 64rem) { .section { padding-block: 5rem; } }

.eyebrow {
  font-family: var(--font-secondary);
  font-size: var(--text-ui-5);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.section-head { display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; }
.section-head h2 { font-size: var(--text-title-2); font-weight: 500; }
.section-head p { font-size: var(--text-body-1); color: var(--text-muted); max-width: 46rem; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.75rem; padding: .75rem 1.5rem;
  border: 1px solid transparent; border-radius: var(--corner-circle);
  font-size: var(--text-ui-3); font-weight: 500;
  cursor: pointer; text-align: center; transition: all .18s ease;
  background: var(--brand-20); color: #fff;
}
.btn:hover { background: var(--brand-30); }
.btn--light { background: #fff; color: var(--brand-20); }
.btn--light:hover { background: var(--brand-95); }
.btn--secondary { background: #fff; color: var(--text); border-color: var(--border-default); }
.btn--secondary:hover { background: var(--brand-95); color: var(--text); }
.btn--outline { background: transparent; color: var(--brand-20); border-color: var(--brand-20); }
.btn--outline:hover { background: var(--brand-20); color: #fff; }
.btn--ghost-light { background: transparent; color: #fff; border-color: #fff; }
.btn--ghost-light:hover { background: #fff; color: var(--brand-20); }
.btn--link { background: none; color: inherit; padding: 0; min-height: 0; text-decoration: underline; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .375rem;
  font-weight: 500; color: var(--brand-20);
}
.link-arrow svg { transition: transform .18s ease; }
.link-arrow:hover svg { transform: translateX(3px); }

/* generic product card */
.product-card { position: relative; display: flex; flex-direction: column; }
.product-card__media {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--corner-xl); background: var(--brand-95);
  aspect-ratio: 1 / 1;
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.product-card:hover .product-card__media img { transform: scale(1.03); }
.product-card__badges { position: absolute; top: .5rem; left: .5rem; display: flex; flex-wrap: wrap; gap: .25rem; z-index: 2; }
.product-card__badge {
  background: var(--brand-01); color: var(--brand-20);
  font-size: var(--text-ui-5); font-weight: 600;
  padding: .25rem .625rem; border-radius: var(--corner-circle);
  text-transform: uppercase; letter-spacing: .04em;
  align-self: flex-start;
}
.product-card__body { padding-top: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.product-card__title { font-size: var(--text-title-6); font-weight: 500; line-height: 1.25; }
.product-card__price { font-size: var(--text-body-2); color: var(--text-muted); }
.product-card__price del { opacity: .6; margin-right: .4rem; }
.product-card__price ins { text-decoration: none; color: var(--red-40); font-weight: 600; }
.product-card__rating { display: flex; align-items: center; gap: .3rem; font-size: var(--text-ui-4); color: var(--text-muted); }
.stars { color: #f0a500; letter-spacing: .08em; }

/* price */
.price { font-size: var(--text-body-1); }
.price del { color: var(--text-muted); opacity: .7; margin-right: .4rem; }
.price ins { text-decoration: none; color: var(--red-40); }

/* carousel */
.carousel { position: relative; }
.carousel__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 20%);
  gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: .5rem; scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }
.carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: #fff; border: 1px solid var(--border-default);
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.carousel__nav--prev { left: -.75rem; }
.carousel__nav--next { right: -.75rem; }
.carousel__nav[disabled] { opacity: .35; cursor: default; }

/* grids */
.grid { display: grid; gap: 1.25rem; }
.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 60rem) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   Header
   ========================================================================== */
.promo-bar {
  background: var(--brand-35); color: var(--neutral-100);
  font-size: var(--text-support-2); text-align: center;
}
.promo-bar__inner { display: flex; align-items: center; justify-content: center; gap: 2rem; min-height: var(--promo-height); overflow: hidden; }
.promo-bar a { color: #fff; }
.promo-bar a:hover { text-decoration: underline; }

.site-header-wrap { position: sticky; top: 0; z-index: 60; background: #fff; }
.site-header { position: relative; z-index: 60; background: #fff; }
@media (min-width: 64rem) { .site-header { box-shadow: 0 2px 5px 0 rgba(0,0,0,.04); } }
/* source storefront layout: left cell / centred logo / right cell */
.site-header__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: .5rem; height: var(--header-height);
  max-width: 45.9375rem; padding-left: 1.5rem; padding-right: 1.5rem;
  position: relative;
}
/* source storefront gutters + max width: 24/735, 56/976, 32, 48 */
@media (min-width: 36rem) {
  .site-header__inner { max-width: 61rem; padding-left: 3.5rem; padding-right: 3.5rem; }
}
@media (min-width: 64rem) {
  .site-header__inner { max-width: 96rem; padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 80rem) {
  .site-header__inner { padding-left: 3rem; padding-right: 3rem; }
}
.site-header__left { display: flex; align-items: center; height: 100%; }
.site-header__logo { justify-self: center; }
.site-header__actions { justify-self: end; }
.site-header__nav { height: 100%; }
.site-header__nav > ul { display: flex; align-items: center; gap: 0; height: 100%; }
.site-header__nav > ul > li { display: flex; height: 100%; }
/* nav items: full-height targets with the source storefront's typography and hover rule */
.site-header__nav > ul > li > a, .site-header__nav > ul > li > button {
  background: none; border: 0; cursor: pointer; padding: 0 1rem; height: 100%;
  font-size: var(--text-title-7); font-weight: 500; line-height: 1.38; color: inherit;
  display: inline-flex; align-items: center; gap: 0; position: relative;
}
.site-header__nav > ul > li > a::after, .site-header__nav > ul > li > button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--dark-navy-10); transform: scaleX(0); transform-origin: bottom center;
  transition: transform .15s cubic-bezier(.4, 0, .2, 1);
}
.site-header__nav > ul > li > a:hover::after, .site-header__nav > ul > li > button:hover::after,
.site-header__nav > ul > li > a:focus-visible::after, .site-header__nav > ul > li > button:focus-visible::after { transform: scaleX(1); }
.site-header__nav--left > ul { margin-left: -1rem; }
.site-header__nav--right > ul { margin-right: -1rem; }
/* source storefront logo widths: 112 / 149 / 124 / 174 */
.site-header__logo img { width: 7rem; height: auto; }
@media (min-width: 36rem) { .site-header__logo img { width: 9.3125rem; } }
@media (min-width: 64rem) { .site-header__logo img { width: 7.75rem; } }
@media (min-width: 80rem) { .site-header__logo img { width: 10.875rem; } }
.site-header__actions { display: flex; align-items: center; gap: 1rem; height: 100%; }
.site-header__actions button, .site-header__actions a { background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; }
.cart-count {
  position: absolute; top: -.35rem; right: -.45rem;
  background: var(--brand-20); color: #fff; font-size: .625rem; font-weight: 700;
  min-width: 1.05rem; height: 1.05rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 0 .2rem;
}
.cart-link { position: relative; }
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; padding: 0; background: none; border: 0; cursor: pointer; color: inherit; }
.menu-toggle svg { width: 100%; height: 100%; }
@media (min-width: 48rem) { .menu-toggle { width: 1.5rem; height: 1.5rem; } }
@media (min-width: 64rem) { .site-header__left .menu-toggle { display: none; } .site-header__nav { display: block; } }
@media (max-width: 63.99rem) { .site-header__nav { display: none; } }

/* Phones: the icon-only header controls are barely bigger than their glyphs,
   which is a hard tap on a real device. Grow the hit area with a transparent
   overlay so the measured header geometry stays exactly the same. */
@media (max-width: 47.99rem) {
  .site-header__actions button,
  .site-header__actions a,
  .site-header__left .menu-toggle { position: relative; }

  .site-header__actions button::before,
  .site-header__actions a::before,
  .site-header__left .menu-toggle::before {
    content: "";
    position: absolute;
    top: -0.625rem;
    bottom: -0.625rem;
    left: -0.3125rem;
    right: -0.3125rem;
  }

  /* First and last control have free space on their outer side. */
  .site-header__actions .action-search::before { left: -0.5rem; }
  .site-header__actions .cart-link::before { right: -0.75rem; }
  .site-header__left .menu-toggle::before { left: -0.625rem; right: -0.625rem; }

  /* The account link sits between two neighbours, so it takes the rest of the
     flex gap without overlapping either of them. */
  .site-header__actions > a::before { left: -0.5rem; right: -0.5rem; }
}

.subnav { position: relative; z-index: 10; background: var(--skyblue-98); box-shadow: 0 4px 5px 0 rgba(0,0,0,.05); }
.subnav__inner { display: flex; justify-content: center; padding-left: 1.5rem; padding-right: 1.5rem; }
.subnav ul { display: flex; align-items: center; gap: 1.5rem; height: var(--subnav-height); overflow-x: auto; scrollbar-width: none; padding: .625rem 0; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav li { display: flex; align-items: center; gap: 1.5rem; }
.subnav li:nth-child(3)::after { content: ""; height: 18px; width: 1px; background: var(--skyblue-85); }
@media (min-width: 48rem) {
  .subnav__inner { padding-left: 3.5rem; padding-right: 3.5rem; }
  .subnav ul, .subnav li { gap: 2.5rem; }
}
@media (min-width: 64rem) {
  .subnav__inner { padding-left: 0; padding-right: 0; }
  .subnav ul, .subnav li { gap: 3rem; }
}
.subnav a { font-size: var(--text-ui-5); font-weight: 500; white-space: nowrap; color: var(--dark-navy-10); }
.subnav a:hover { text-decoration: underline; }

/* mega menu - source storefront parity: compact panels anchor to their nav item,
   the shop panel anchors to the header container (left edge 2rem) like the source */
.site-header__nav--right > ul > li.has-mega { position: relative; }
.mega {
  position: absolute; top: 100%; left: 0; z-index: 5;
  transform: scaleY(0); transform-origin: top center;
  visibility: hidden; pointer-events: none;
  transition: transform .2s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .2s;
}
.mega.is-open {
  transform: scaleY(1); visibility: visible; pointer-events: auto;
  transition: transform .2s cubic-bezier(.4, 0, .2, 1), visibility 0s;
}
.mega__list { display: flex; flex-direction: column; min-width: 17.5rem; margin: 0; padding: 1.5rem 0 1.5rem 1rem; list-style: none; }
.mega__list li { padding: 10px 1.5rem; }
.mega__list a { display: flex; align-items: center; color: var(--dark-navy-10); text-decoration: none; }
.mega__list a.is-bright { color: var(--brand-35); }
.mega__label {
  font-size: var(--text-title-7); font-weight: 500; line-height: 1.38; white-space: nowrap;
  background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px;
  background-position: left bottom; background-repeat: no-repeat;
  transition: background-size .2s cubic-bezier(.4, 0, .2, 1);
}
.mega__list a:hover .mega__label, .mega__list a:focus-visible .mega__label { background-size: 100% 1px; }
.mega__badge {
  display: inline-flex; align-items: center; margin-left: .5rem;
  padding: .25rem .5rem; border-radius: var(--corner-circle);
  font-family: var(--font-secondary); font-size: var(--text-ui-6); font-weight: 700;
  line-height: 1.1; letter-spacing: var(--tracking-sm); text-transform: uppercase;
  color: var(--dark-navy-10); white-space: nowrap;
}

/* shop panel: links / categories / promo, from the source 1fr 1fr 1.32fr grid */
.mega--shop .mega__panel {
  position: relative; display: grid; grid-template-columns: 1fr 1fr 1.32fr;
  width: min(94vw, 71.375rem); overflow: hidden;
  background: var(--neutral-100);
  border-radius: 0 0 var(--corner-xl) var(--corner-xl);
  box-shadow: 0 6px 12px 0 rgba(11, 16, 87, .08);
}
.mega--shop { left: 2rem; }
.mega--shop .mega__list { background: var(--neutral-100); }
.mega--shop .mega__list--cats { background: var(--skyblue-98); }
.mega__promo { position: relative; display: flex; min-width: 23rem; overflow: hidden; }
.mega__promo-link {
  display: flex; flex: 1; min-width: 0; flex-direction: column;
  overflow: auto; padding: 1.5rem 2rem; color: inherit; text-decoration: none;
}
.mega__promo-media { position: relative; display: block; min-height: 10rem; overflow: hidden; border-radius: var(--corner-regular); }
.mega__promo-media img { display: block; width: 100%; aspect-ratio: 450 / 254; object-fit: cover; object-position: center; }
.mega__promo-text { display: flex; flex-direction: column; justify-content: center; padding: 1rem 0 .5rem; }
.mega__promo-title { font-size: var(--text-title-7); font-weight: 500; line-height: 1.38; color: var(--dark-navy-10); }
.mega__promo-body { padding-top: .25rem; font-size: var(--text-body-3); font-weight: 400; line-height: 1.5; color: var(--dark-navy-10); }
.mega__promo-cta { display: flex; padding-top: .75rem; }
.mega__promo-cta .btn {
  display: inline-flex; align-items: center; justify-content: center; width: fit-content;
  min-height: 2.25rem; height: 2.25rem; padding: 0 1.5rem;
  border: 1px solid var(--brand-35); border-radius: var(--corner-circle);
  background: transparent; color: var(--brand-35);
  font-family: var(--font-secondary); font-size: var(--text-button-ui-3); font-weight: 700;
  line-height: 1; letter-spacing: var(--tracking-md); text-transform: uppercase;
}
.mega__promo-cta .btn:hover { background: var(--brand-35); color: var(--neutral-100); }
.mega__shadow { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 6px 12px -6px rgba(11, 16, 87, .16); }

/* compact panels (About Us / Our Mission) */
.mega--small {
  min-width: 15.625rem; width: auto;
  background: var(--neutral-100);
  border-radius: 0 0 var(--corner-xl) var(--corner-xl);
  box-shadow: 0 6px 12px 0 rgba(11, 16, 87, .08), inset 0 6px 12px -6px rgba(11, 16, 87, .16);
}
.mega--small .mega__list { min-width: 0; gap: 1rem; padding: 1.5rem; }
.mega--small .mega__list li { padding: 0; min-height: 1.5rem; }
.mega--small .mega__label { font-size: var(--text-ui-3); font-weight: 500; line-height: 1.1; letter-spacing: -.15px; }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(22rem, 88vw); background: #fff;
  transform: translateX(100%); transition: transform .25s ease; z-index: 80;
  display: flex; flex-direction: column; overflow-y: auto;
}
.drawer.is-open { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-light); }
.drawer ul { padding: .5rem 0; }
.drawer li a { display: block; padding: .75rem 1.25rem; font-size: var(--text-ui-2); }
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 70; }
.overlay.is-open { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   Home sections
   ========================================================================== */

/* hero */
.hero {
  position: relative;
  height: calc(100vh - var(--header-with-subnavigation));
  height: calc(100svh - var(--header-with-subnavigation));
  min-height: 31rem;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
@media (min-width: 48rem) { .hero { min-height: 37.5rem; } }
.hero__media { position: absolute; inset: 0; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,1,60,.35) 0%, rgba(0,1,60,.55) 100%); }
.hero__content { position: relative; z-index: 2; text-align: center; color: #fff; max-width: 46rem; padding: 3rem 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.hero__content h1 { font-size: var(--text-title-1); font-weight: 500; line-height: 1.15; }
.hero__content p { font-size: var(--text-body-1); }
@media (min-width: 64rem) { .hero__content p { font-size: var(--text-body-xl); } }

/* category tiles */
.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 48rem) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } }
.cat-tile { display: flex; flex-direction: column; gap: .875rem; }
.cat-tile__media { border-radius: var(--corner-xl); overflow: hidden; background: var(--brand-95); aspect-ratio: 1/1; }
.cat-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.cat-tile:hover .cat-tile__media img { transform: scale(1.04); }
.cat-tile__title {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-secondary);
  font-size: var(--text-title-7);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-md);
  color: var(--brand-35);
}
.cat-tile__title svg { transition: transform .2s ease; }
.cat-tile:hover .cat-tile__title svg { transform: translateX(.5rem); }
.cat-tile__desc { font-size: var(--text-body-2); font-weight: 400; color: var(--dark-navy-30); }

/* stats / value props */
.stats { background: var(--skyblue-95); }
.stats__title { text-align: center; font-size: var(--text-title-2); font-weight: 500; margin-bottom: 2.5rem; }
.stats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
@media (min-width: 60rem) { .stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .625rem; }
.stat img { width: 5.5rem; height: 5.5rem; object-fit: contain; }
.stat h3 { font-size: var(--text-title-6); font-weight: 500; }
.stat p { font-size: var(--text-body-2); color: var(--text); max-width: 14.375rem; }

/* press */
.press { background: var(--skyblue-98); color: var(--brand-35); }
.press__label { text-align: center; font-family: var(--font-secondary); text-transform: uppercase; letter-spacing: var(--tracking-md); font-size: var(--text-title-7); font-weight: 700; margin-bottom: 2rem; }
.press__grid { display: grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap: 2rem; }
@media (min-width: 48rem) { .press__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 64rem) { .press__grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.press__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
.press__item img { height: 3.5rem; width: auto; object-fit: contain; filter: brightness(0) invert(1); }
.press__quote { font-size: var(--text-title-2); font-weight: 500; }

/* full-bleed banner */
.banner { position: relative; min-height: 31rem; overflow: hidden; }
.banner__media { position: absolute; inset: 0; }
.banner__media img { width: 100%; height: 100%; object-fit: cover; }
.banner__overlay { position: absolute; inset: 0; z-index: 2; display: flex; padding: 1.5rem 1rem; }
.banner__inner { display: flex; width: 100%; max-width: var(--content-max-width); margin: 0 auto; }
.banner__spacer { display: none; }
.banner__col { display: flex; flex: 1; align-items: flex-end; justify-content: center; }
.banner__card { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; width: 100%; max-width: 40rem; padding: 1.5rem 1.25rem; background: #F0F7FF; border-radius: var(--corner-xxl); text-align: left; }
.banner__card h2 { font-size: var(--text-title-3); font-weight: 500; margin: 0; }
@media (min-width: 48rem) { .banner__card h2 { font-size: var(--text-title-2); } }
.banner__card p { font-size: var(--text-body-2); margin: 0; }
@media (min-width: 48rem) {
  .banner { min-height: 37.5rem; }
  .banner__card h2 { font-size: var(--text-title-2); }
  .banner__card p { font-size: var(--text-body-1); }
}
@media (min-width: 64rem) {
  .banner__spacer { display: block; width: 50%; }
  .banner__col { justify-content: flex-end; align-items: center; }
  .banner__card { padding: 2.5rem; }
}

/* reviews */
.reviews { background: var(--brand-35); color: var(--neutral-100); }
.reviews__inner { display: flex; flex-direction: column; align-items: center; gap: 2rem; padding: 4rem 0; }
.reviews__title { margin: 0; padding: 0 2.5rem; text-align: center; font-size: var(--text-title-2); font-weight: 500; line-height: 1.2; letter-spacing: normal; }
.reviews__carousel { display: flex; flex-direction: column; align-items: center; gap: 2rem; width: 100%; overflow: hidden; }
.reviews__track { display: flex; flex-wrap: nowrap; width: 100%; transform: translate3d(0, 0, 0); transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.review { flex: 0 0 auto; display: flex; align-items: flex-end; width: 80vw; min-width: 260px; max-width: 800px; min-height: 278px; margin: 0; }
.review__fit { width: 100%; height: 100%; transform: scaleY(.9); transform-origin: bottom; opacity: .3; transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .3s cubic-bezier(.4, 0, .2, 1); }
.review.is-active .review__fit { transform: scaleY(1); opacity: 1; }
.review__card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; height: 100%; padding: 2rem; border: 1px solid currentColor; border-radius: var(--corner-xl); color: var(--neutral-100); text-align: center; }
.review__stars { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.review__stars li { color: var(--neutral-100); }
.review__stars svg { display: block; width: 15px; height: auto; min-height: 15px; }
.review__quote-wrap { display: flex; flex-grow: 1; align-items: center; }
.review__quote { margin: 0; font-size: var(--text-title-4); font-weight: 400; line-height: 1.3; }
.review__author { font-size: var(--text-ui-3); font-weight: 500; line-height: 1.1; }
.review__product { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.review__product:hover { text-decoration-thickness: 2px; }
.review__product-label { display: inline-block; font-family: var(--font-secondary); font-size: var(--text-button-body-2); font-weight: 700; line-height: 1; letter-spacing: var(--tracking-md); text-transform: uppercase; }
.reviews__controls { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0 .5rem; color: var(--neutral-100); }
.reviews__ctrl { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: var(--corner-circle); background: none; color: inherit; font: inherit; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.reviews__ctrl[disabled] { cursor: not-allowed; }
.reviews__ctrl svg { display: block; width: 10px; height: auto; }
.reviews__ctrl--pause svg { width: 19px; }
.reviews__icon { display: inline-flex; align-items: center; justify-content: center; }
.reviews__icon[hidden] { display: none; }
.reviews__dots-wrap { display: flex; align-items: center; gap: .5rem; }
.reviews__dots { display: flex; align-items: center; gap: .5rem; min-width: 60px; }
.reviews__dot { flex: 0 0 auto; width: 8px; height: 8px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, .2); cursor: pointer; transition: opacity .2s ease, background-color .2s ease; }
.reviews__dot.is-active { opacity: 1; background: var(--swiper-pagination-color, var(--swiper-theme-color, #007aff)); }
@media (min-width: 48rem) {
  .reviews__title { padding: 0 5rem; }
  .reviews__controls { padding: 0 1rem; }
}
@media (min-width: 64rem) {
  .reviews__inner { gap: 3rem; padding: 7rem 0; }
  .reviews__carousel { gap: 3rem; }
  .reviews__title { padding: 0; }
  .review { width: 820px; }
  .review__card { gap: 1.5rem; padding: 2.5rem; }
  .reviews__controls { justify-content: center; gap: 9rem; padding: 0 2rem; }
}

/* how it works */
.hiw__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 64rem) { .hiw__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3.5rem; } }
.hiw__copy { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.hiw__copy h2 { font-size: var(--text-title-2); font-weight: 500; }
.hiw__copy p { font-size: var(--text-body-1); color: var(--text-muted); }
.hiw__media img { border-radius: var(--corner-xl); width: 100%; }

/* certifications */
.certs { background: var(--brand-95); }
.certs__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.5rem; margin-top: 2.5rem; }
.certs__logos img { height: 3.25rem; width: auto; object-fit: contain; }

/* instagram / Good Clean Fun tiles */
.section--insta { padding: 0; }
.insta {
  display: flex; flex-direction: column; gap: 2.5rem;
  padding: 4rem 2.5rem; overflow-x: clip;
}
.insta > * { width: 100%; max-width: 102rem; margin-left: auto; margin-right: auto; }
.insta__head { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; text-align: left; }
.insta__head h2 { margin: 0; font-size: 1.625rem; line-height: 1.2; font-weight: 500; letter-spacing: normal; }
.insta__head .link-arrow {
  position: relative; display: inline-flex; align-items: center; padding-right: 1.5rem;
  font-family: var(--font-secondary); font-size: .875rem; font-weight: 700; line-height: 19.9px;
  letter-spacing: var(--tracking-md); text-transform: uppercase; text-decoration: underline; color: inherit;
}
.insta__head .link-arrow svg { position: absolute; right: 0; top: 50%; transform: translateY(-50%); transition: transform .3s; }
.insta__head .link-arrow:hover svg { transform: translateY(-50%) translateX(5px); }
.insta__grid {
  display: flex; flex-wrap: nowrap; gap: 1.5rem;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
}
.insta__grid::-webkit-scrollbar { display: none; }
.insta__grid > a {
  flex: 0 0 auto; display: block; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--brand-95);
  width: calc((100% - 4.8px) / 1.2);
}
.insta__grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 48rem) {
  .insta { padding: 4rem 5rem 4rem 2.5rem; }
  .insta__head h2 { font-size: 2rem; }
  .insta__head .link-arrow { font-size: .9375rem; line-height: 21.3px; }
  .insta__grid > a { width: calc((100% - 52.8px) / 3.2); }
}
@media (min-width: 64rem) {
  .insta { padding: 7rem 6rem; gap: 3rem; }
  .insta__head h2 { font-size: 2.5rem; }
  .insta__head .link-arrow { font-size: 1.125rem; line-height: 24.1px; }
  .insta__grid { gap: 2rem; }
  .insta__grid > a { width: calc((100% - 96px) / 4); }
}
@media (min-width: 80rem) {
  .insta { padding: 7rem 6rem 7rem 11rem; }
  .insta__grid > a { width: calc((100% - 128px) / 5); }
}

/* final CTA */
.final-cta {
  background-color: var(--skyblue-95);
  background-image: url('assets/img/cta-journey-bg.png');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  color: var(--brand-35); text-align: center;
}
.final-cta h2 { font-size: var(--text-title-2); font-weight: 500; margin-bottom: 2rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--brand-35); color: #fff; padding: 3.5rem 0 2rem; }
.site-footer a { color: #fff; font-size: var(--text-body-2); }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__grid { display: grid; gap: 2rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 1.4fr repeat(3, minmax(0,1fr)); } }
.site-footer h3 { font-family: var(--font-secondary); text-transform: uppercase; letter-spacing: .12em; font-size: var(--text-ui-5); margin-bottom: 1rem; color: #fff; }
.site-footer li { padding: .3rem 0; }
.site-footer__bottom { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; border-top: 1px solid rgba(184,202,239,.3); margin-top: 2.5rem; padding-top: 1.5rem; font-size: var(--text-ui-4); color: #fff; }
.newsletter { display: flex; gap: .5rem; margin-top: 1rem; }
.newsletter input { flex: 1; border: 1px solid #fff; background: #fff; color: var(--dark-navy-10); border-radius: var(--corner-circle); padding: .625rem 1rem; }
.newsletter input::placeholder { color: #9ca3af; }

/* ==========================================================================
   WooCommerce overrides
   ========================================================================== */
.woocommerce .woocommerce-breadcrumb { font-size: var(--text-ui-4); color: var(--text-muted); padding: 1rem 0; }
/* collection header */
.archive-head { padding: 2rem 0 0; }
.archive-head__text { display: flex; flex-direction: column; gap: .5rem; text-align: center; }
.archive-head h1 { font-size: var(--text-title-3); font-weight: 500; margin: 0; }
.archive-head__sub { font-size: var(--text-body-2); color: var(--text); }
.archive-head__sub p { margin: 0; }
@media (min-width: 48rem) {
  .archive-head__text { text-align: left; }
  .archive-head__sub { font-size: var(--text-body-1); }
}
@media (min-width: 64rem) { .archive-head h1 { font-size: var(--text-title-2); } }

/* collection toolbar */
.shop-controls { position: relative; display: flex; flex-direction: column; gap: 1rem; margin: 1.5rem 0 2rem; }
.shop-controls__bar { display: none; align-items: center; justify-content: space-between; gap: 1rem; }
.shop-controls__count { font-size: var(--text-ui-3); color: var(--text-muted); }
.shop-controls__filters { display: flex; flex: 1; align-items: center; justify-content: flex-end; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.shop-filter { display: flex; }
.shop-filter__rule { width: 1px; height: 20px; background: var(--border-light); }
.shop-filter__btn, .shop-sort__btn { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem; border: 0; border-radius: .25rem; background: none; font: inherit; color: var(--text); cursor: pointer; }
.shop-filter__label { font-size: var(--text-ui-3); line-height: 1.25; text-transform: capitalize; white-space: nowrap; }
.shop-filter__btn:hover:not(:disabled) .shop-filter__label { text-decoration: underline; }
.shop-filter__btn:disabled { opacity: .5; cursor: not-allowed; }
.shop-filter__btn svg, .shop-sort__btn svg { flex: none; transition: transform .2s ease; }
.shop-filter__btn.is-open svg, .shop-sort__btn.is-open svg { transform: rotate(180deg); }
.shop-sort__btn { height: 48px; min-width: 240px; max-width: 240px; justify-content: space-between; padding: 0 1rem; background: #fff; border: 1px solid var(--border-light); border-radius: .25rem; }
.shop-sort__btn:hover { border-color: var(--border-default); }
.shop-controls__rule { display: none; height: 1px; width: 100%; background: var(--border-light); }
.shop-controls__mobile { display: flex; gap: .5rem; }
.btn-pill { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: .5rem 1rem; border: 1px solid var(--dark-navy-80); border-radius: var(--corner-circle); background: none; font: inherit; font-size: var(--text-ui-4); font-weight: 500; color: var(--dark-navy-10); cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.btn-pill:hover { background: var(--brand-93); border-color: var(--brand-20); }
.btn-pill:active { background: var(--brand-80); border-color: var(--brand-10); }
.collection-filter__anchor { position: relative; display: flex; }
.shop-filter__panel {
  position: absolute; top: calc(100% + .5rem); right: 0; left: auto;
  z-index: 24;
  display: flex; flex-direction: column;
  width: 100%; min-width: 220px; max-height: 210px;
  overflow: hidden auto;
  padding: .5rem 0;
  background: var(--neutral-100);
  border: 1px solid var(--dark-navy-10);
  border-radius: var(--corner-regular);
  box-shadow: none;
}
.shop-filter__panel[hidden] { display: none; }
.shop-filter__panel ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.shop-filter__option {
  display: flex; align-items: center; gap: .25rem; width: 100%;
  margin: 0; padding: .5rem 1rem;
  border: 0; background: none; color: var(--text);
  font: inherit; font-size: var(--text-ui-4); line-height: 1.25;
  text-align: left; text-decoration: none; cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.shop-filter__option:hover { background: var(--brand-98); }
.shop-filter__option:active { background: var(--brand-93); color: var(--brand-35); }
.shop-filter__option-label { flex: 1; min-width: 0; }
.shop-filter__panel .shop-filter__option-label { line-height: 1.1; }
.shop-filter__check {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: .75rem; height: .75rem; margin: .125rem;
  overflow: hidden; background: var(--neutral-100);
  border: 1px solid var(--dark-navy-50); border-radius: .25rem;
  transition: background-color .15s ease, border-color .15s ease;
}
.shop-filter__check svg { width: .625rem; height: .347rem; opacity: 0; transition: opacity .15s ease; }
.shop-filter__option.is-selected .shop-filter__check { background: var(--brand-35); border-color: var(--brand-35); }
.shop-filter__option.is-selected .shop-filter__check svg { opacity: 1; }
.shop-filter__panel .shop-filter__check { border-color: var(--dark-navy-40); border-radius: .125rem; }
.shop-filter__panel .shop-filter__check svg { width: .43125rem; height: .269375rem; }
.shop-filter__radio {
  position: relative; flex: none; display: flex; align-items: center; justify-content: center;
  width: .75rem; height: .75rem; margin: .125rem;
  border: 1px solid var(--dark-navy-50); border-radius: var(--corner-circle); background: var(--neutral-100);
  transition: border-color .15s ease;
}
.shop-filter__radio-dot { width: .5rem; height: .5rem; border-radius: var(--corner-circle); background: var(--brand-35); opacity: 0; transition: opacity .15s ease; }
.shop-filter__option.is-selected .shop-filter__radio { border-color: var(--brand-35); }
.shop-filter__option.is-selected .shop-filter__radio-dot { opacity: 1; }
@media (min-width: 48rem) {
  .shop-controls__bar { display: flex; }
  .shop-controls__rule { display: block; }
  .shop-controls__mobile { display: none; }
}
/* Same track definition as .collection-grid, so any remaining WooCommerce loop
   (e.g. related products) matches the source grid: 2 / 3 / 3 / 4 columns. */
.woocommerce ul.products { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 1rem; row-gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0,1fr)); column-gap: 1.5rem; row-gap: 2.5rem; } }
@media (min-width: 64rem) { .woocommerce ul.products { column-gap: 2rem; row-gap: 2rem; } }
@media (min-width: 80rem) { .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.woocommerce ul.products li.product { margin: 0; width: auto; float: none; }
.woocommerce ul.products li.product a img { border-radius: var(--corner-xl); background: var(--brand-95); margin: 0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: var(--text-title-6); font-weight: 500; padding: .75rem 0 .25rem; }
.woocommerce ul.products li.product .price { font-size: var(--text-body-2); color: var(--text-muted); }
.woocommerce ul.products li.product .button { display: none; }
/* WooCommerce's clearfix pseudo-elements (.woocommerce ul.products::before/::after,
   content:" "; display:table) are laid out as real flex/grid items. On CSS Grid they
   occupy the first two cells, so the first product cell renders blank and every card
   is pushed one or two columns to the right. Neutralise them. */
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; display: none; }
/* Beat woocommerce-smallscreen.css (.woocommerce ul.products[class*=columns-] li.product)
   which forces width:48%; float:left; clear:both and breaks the grid on mobile. */
.woocommerce ul.products[class*="columns-"] li.product { width: auto; float: none; clear: none; margin: 0; }
.woocommerce nav.woocommerce-pagination ul { display: flex; gap: .5rem; justify-content: center; border: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span { display: flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--border-default); }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--brand-20); color: #fff; border-color: var(--brand-20); }

/* single product */
.single-product div.product { display: grid; gap: 2.5rem; }
@media (min-width: 64rem) { .single-product div.product { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 3.5rem; } }
.single-product div.product .woocommerce-product-gallery { width: 100%; float: none; }
.single-product div.product .woocommerce-product-gallery img { border-radius: var(--corner-xl); }
.single-product div.product .summary { margin: 0; float: none; width: 100%; }
.single-product div.product .product_title { font-size: var(--text-title-1); font-weight: 500; margin-bottom: .75rem; }
.single-product div.product p.price { font-size: var(--text-title-5); color: var(--text); margin-bottom: 1rem; }
.single-product div.product .woocommerce-product-details__short-description { font-size: var(--text-body-1); color: var(--text-muted); margin-bottom: 1.5rem; }
.single-product div.product form.cart { display: flex; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; }
.single-product div.product form.cart .quantity input { border: 1px solid var(--border-default); border-radius: var(--corner-circle); padding: .6rem .75rem; width: 5rem; }
.single-product div.product form.cart .single_add_to_cart_button { border-radius: var(--corner-circle); background: var(--brand-20); color: #fff; padding: .8rem 2rem; font-size: var(--text-ui-3); font-weight: 500; border: 0; cursor: pointer; }
.single-product div.product form.cart .single_add_to_cart_button:hover { background: var(--brand-30); }
.single-product div.product .variations { width: 100%; margin-bottom: 1rem; }
.single-product div.product .variations th,
.single-product div.product .variations td { padding: .35rem 0; text-align: left; font-size: var(--text-ui-4); }
.single-product div.product .variations select { border: 1px solid var(--border-default); border-radius: var(--corner-large); padding: .5rem .75rem; min-width: 14rem; background: #fff; }
.woocommerce-tabs { grid-column: 1 / -1; margin-top: 2rem; }
.woocommerce-tabs ul.tabs { display: flex; gap: 1.5rem; padding: 0; border-bottom: 1px solid var(--border-light); }
.woocommerce-tabs ul.tabs li { border: 0; background: none; border-radius: 0; margin: 0; padding: 0; }
.woocommerce-tabs ul.tabs li a { padding: .75rem 0; font-weight: 500; }
.woocommerce-tabs ul.tabs li.active a { border-bottom: 2px solid var(--brand-20); }
.woocommerce-tabs .panel { padding-top: 1.5rem; font-size: var(--text-body-1); }
.woocommerce-tabs .panel h2 { display: none; }
.related.products { grid-column: 1 / -1; margin-top: 3rem; }
.related.products > h2 { font-size: var(--text-title-2); font-weight: 500; margin-bottom: 1.5rem; }

/* notices / cart / checkout */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-radius: var(--corner-large); border-top: 0; background: var(--brand-95);
  padding: 1rem 1.25rem; margin-bottom: 1.5rem; list-style: none;
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--brand-20); }
.woocommerce .button, .wc-block-components-button { border-radius: var(--corner-circle); }
.woocommerce table.shop_table { border: 1px solid var(--border-light); border-radius: var(--corner-large); border-collapse: separate; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
  border: 1px solid var(--border-default); border-radius: var(--corner-large); padding: .7rem .9rem;
}

/* entry content (pages) */
.entry-content { font-size: var(--text-body-1); line-height: 1.7; overflow-wrap: break-word; }
.entry-content h2 { font-size: var(--text-title-2); margin: 2.5rem 0 1rem; font-weight: 500; }
.entry-content h3 { font-size: var(--text-title-4); margin: 2rem 0 .75rem; font-weight: 500; }
.entry-content p { margin-bottom: 1rem; }
.entry-content ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.entry-content ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1rem; }
.entry-content img { border-radius: var(--corner-large); }
.entry-content a { color: var(--brand-30); text-decoration: underline; }
.entry-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.entry-content th, .entry-content td { border: 1px solid var(--border-light); padding: .625rem .875rem; text-align: left; }

/* Pages imported from the source storefront still carry Tailwind utility
   classes, which this theme does not ship. The width-critical one is the
   scroll wrapper around the wide policy tables. */
.entry-content .overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.page-hero { background: var(--brand-95); padding: 3.5rem 0; text-align: center; }
.page-hero h1 { font-size: var(--text-title-1); font-weight: 500; }

@media (max-width: 47.99rem) {
  .carousel__track { grid-auto-columns: minmax(11rem, 62%); }
}

/* trust bullets on product pages */
.trust-bullets { display: flex; flex-direction: column; gap: .625rem; margin: 1.25rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--border-light); }
.trust-bullets li { display: flex; align-items: flex-start; gap: .625rem; font-size: var(--text-body-2); color: var(--text-muted); }
.trust-bullets svg { color: var(--green-50); flex: 0 0 auto; margin-top: .15rem; }

/* search bar */
.search-bar { background: var(--brand-95); border-bottom: 1px solid var(--border-light); }
.search-bar .search-form { display: flex; gap: .75rem; padding: .875rem 0; }
.search-bar input[type="search"] { flex: 1; border: 1px solid var(--border-default); border-radius: var(--corner-circle); padding: .625rem 1.125rem; background: #fff; }

/* single product layout gaps */
.woocommerce-page-wrap { padding-top: 1rem; padding-bottom: 4rem; }
.woocommerce div.product .woocommerce-product-gallery { margin-bottom: 1.5rem; }
.woocommerce div.product .woocommerce-tabs { clear: both; }

/* archive description */
.archive-desc { max-width: 46rem; color: var(--text-muted); font-size: var(--text-body-1); }
.archive-desc p { margin: 0; }

/* pagination */
.woocommerce-pagination { margin-top: 2.5rem; }

/* cart / checkout width */
.woocommerce-cart .woocommerce, .woocommerce-checkout .woocommerce { max-width: 72rem; margin: 0 auto; }

/* WooCommerce bleeds its product-grid block 8px past the container. Once the
   container keeps its side gutter that negative margin leaves the cards flush
   with the right edge on phones, so square it up there. */
@media (max-width: 47.99rem) {
  .wc-block-grid__products { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
}

/* responsive header logo centering */
@media (max-width: 63.99rem) {
  .site-header__nav--right { display: none; }
}

/* ==========================================================================
   Fidelity pass: source-site parity additions
   ========================================================================== */

/* promo bar slides */
.promo-bar__inner { position: relative; }
.promo-bar__slide { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.promo-bar__slide[hidden] { display: none; }
@media (max-width: 47.99rem) {
  .promo-bar__slide { flex-direction: column; gap: 0; white-space: normal; text-align: center; line-height: 1.35; }
  .promo-bar__divider { display: none; }
}
.promo-bar__label { font-weight: 600; }
.promo-bar__cta { text-decoration: underline; text-underline-offset: 3px; }

/* dropdown trigger arrow: matches the source storefront (12px filled chevron) */
.site-header__nav > ul > li > button .chevron-down { width: 12px; height: 12px; flex-shrink: 0; margin-left: .25rem; transition: transform .2s ease; }
.site-header__nav > ul > li > button[aria-expanded="true"] .chevron-down { transform: rotate(180deg); }

/* hero video */
.hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video--mobile { display: none; }
@media (max-width: 63.99rem) {
  .hero__video--desktop { display: none; }
  .hero__video--mobile { display: block; }
}

/* section head variants */
.section-head--inline {
  flex-direction: row; align-items: flex-end;
  justify-content: space-between; text-align: left; gap: 1.5rem;
}
.section-head--inline > div { display: flex; flex-direction: column; gap: .5rem; }
@media (max-width: 47.99rem) {
  .section-head--inline { flex-direction: column; align-items: flex-start; }
}

/* category scroller */
.cat-scroller { scrollbar-width: none; }
.cat-scroller::-webkit-scrollbar { display: none; }

/* product card: media wrapper holds the hover quick-add overlay */
.product-card__media-wrap { position: relative; }
.product-card__quick {
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
  width: calc(100% - 2rem); z-index: 3; display: none;
}
@media (min-width: 80rem) {
  .product-card__quick { display: block; opacity: 0; transition: opacity .2s ease; }
  .product-card:hover .product-card__quick,
  .product-card:focus-within .product-card__quick { opacity: 1; }
}

/* product card: Listing pages reveal a row of size buttons over the media for
   products that need a size picked, mirroring the source storefront. */
.product-card__quick-options {
  display: grid;
  grid-template-rows: 46px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--neutral-100);
}
.product-card__quick-option {
  display: flex;
  overflow: hidden;
  border-right: 1px solid var(--brand-20);
}
.product-card__quick-option:last-child { border-right: 0; }
.btn--quick-option {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 46px; padding: .25rem .5rem;
  border: 0; border-radius: 0; background: none;
  color: var(--brand-30); font-family: var(--font-secondary);
  font-size: var(--text-ui-4); font-weight: 700; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase; text-align: center;
  cursor: pointer; transition: background-color .2s ease;
}
.btn--quick-option:hover { background: var(--brand-95); }
.btn--quick-option:disabled { cursor: default; }

/* product card: hover image, rating, variants, quick add */
.product-card__img--main { position: relative; }
.product-card__img--hover { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.product-card:hover .product-card__img--hover { opacity: 1; }
.product-card:hover .product-card__img--main { transform: none; }
.product-card__review-count { font-size: var(--text-ui-5); }
.product-card__variants { display: flex; flex-direction: column; gap: .4rem; margin-top: .4rem; }
.product-card__variants-label {
  font-size: var(--text-ui-5); text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted);
}
.product-card__chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
  border: 1px solid #d9dbe3; background: #fff; color: inherit;
  border-radius: var(--corner-circle); padding: .25rem .65rem;
  font-size: var(--text-ui-5); font-family: inherit; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.chip:hover { border-color: var(--brand-60); }
.chip.is-active { border-color: var(--brand-35); background: var(--brand-95); color: var(--brand-30); font-weight: 600; }
.btn--quick-add { width: 100%; padding: .7rem 1rem; font-size: var(--text-ui-4); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }

.carousel__footer { text-align: center; margin-top: 1.75rem; }

/* source site renders these labels in uppercase */
.stat h3 {
  text-transform: uppercase; letter-spacing: 0;
  font-family: var(--font-secondary); font-weight: 700;
  font-size: var(--text-title-6); color: var(--brand-35);
}
.certs .eyebrow { text-transform: uppercase; letter-spacing: .14em; font-family: var(--font-secondary); font-weight: 700; font-size: var(--text-ui-5); color: var(--brand-30); }
.certs .btn { text-transform: uppercase; letter-spacing: .08em; }
.site-footer h3 { letter-spacing: .14em; }

/* press coverage */
.press { background: var(--skyblue-98); color: var(--brand-35); }
.press__label { color: var(--brand-35); }
.press__item img { filter: none; height: 3rem; }
.press__quote-wrap { display: flex; align-items: flex-end; min-height: 5.5rem; }
.press__quote { font-size: var(--text-title-2); font-weight: 500; color: var(--brand-35); }

/* full-bleed banner */
.banner__media picture { display: block; width: 100%; height: 100%; }
.banner__overlay { z-index: 3; }

/* certifications */
.certs { background: #eff5ff; }
.certs__logos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1.5rem; margin-top: 2.5rem; align-items: start;
}
@media (min-width: 48rem) { .certs__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 2rem; } }
.cert { display: flex; flex-direction: column; align-items: center; gap: .65rem; text-align: center; }
.cert img { height: 3.5rem; width: auto; object-fit: contain; }
.cert__label { display: block; font-size: var(--text-ui-4); font-weight: 600; }
.cert__note { display: block; margin-top: .2rem; font-size: var(--text-ui-5); color: var(--text-muted); }

/* footer newsletter + columns */
.newsletter-block {
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  text-align: center; max-width: 40rem; margin: 0 auto 3.5rem;
}
.newsletter-block h2 { font-size: var(--text-title-2); font-weight: 500; }
.newsletter-block p { font-size: var(--text-body-2); color: #fff; }
.newsletter-block .newsletter { width: 100%; max-width: 32rem; margin-top: .5rem; }
.newsletter__legal { font-size: var(--text-ui-5) !important; color: #fff; }
.newsletter__legal a { text-decoration: underline; }

/* the source storefront's footer submit is the light-blue "alternate" button,
   not the white one the hero CTA uses */
.newsletter .btn--light { border-color: #a0ddff; background: #a0ddff; color: var(--brand-35); }
.newsletter .btn--light:hover { border-color: #8ed3ff; background: #8ed3ff; color: var(--brand-30); }
.site-footer__brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 1.25rem; }
.site-footer__social { display: flex; flex-wrap: wrap; gap: 1rem; }
.site-footer__social a { display: inline-flex; align-items: center; }
.site-footer__badges { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
.site-footer__badges img { max-height: 4.5rem; width: auto; object-fit: contain; }
.site-footer__copyright { margin: 0; }
.site-footer__email { font-weight: 600; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 1rem; }
@media (min-width: 48rem) { .site-footer__brand { grid-column: auto; } }

/* ==========================================================================
   Fidelity pass 2: badge colours, card layout, swatches, promo nav, region
   ========================================================================== */

/* badge colours (measured on the source storefront) */
.product-card__badge { font-family: var(--font-secondary); line-height: 1; padding: .25rem .5rem; }
@media (min-width: 64rem) { .product-card__badge { padding: .375rem .75rem; } }
.product-card__badge.is-bestseller { background: #a0ddff; color: #0b1057; }
.product-card__badge.is-savings    { background: #eaffe9; color: #0b1057; }
.product-card__badge.is-new-scent  { background: #dfb7ff; color: #0b1057; }
.product-card__badge.is-new-scents { background: #ffd8b4; color: var(--text); }
.product-card__badge.is-award      { background: #e1f2ff; color: var(--text); }
.product-card__badge.is-new        { background: var(--brand-35); color: #fff; }
.product-card__badge.is-exclusive  { background: #fff88c; color: #0b1057; }
.product-card__badge.is-limited    { background: var(--green-95); color: #0b1057; }
.product-card__badge.is-neutral    { background: var(--brand-01); color: var(--brand-20); }

/* card rating link */
.product-card__rating { display: flex; align-items: center; flex-wrap: wrap; min-height: .75rem; text-decoration: none; color: var(--dark-navy-10); gap: .25rem; }
.product-card__rating:hover .product-card__rating-value { text-decoration: underline; }
/* specificity must beat WooCommerce's `.woocommerce .products ul { margin: 0 0 1em }` */
.product-card .product-card__rating .stars { display: flex; align-items: center; gap: .125rem; margin: 0; padding: 0; list-style: none; color: var(--brand-35); font-size: inherit; letter-spacing: 0; }
.product-card .product-card__rating .stars li { display: flex; color: var(--brand-35); }
.product-card .product-card__rating .stars svg { display: block; width: .75rem; height: auto; min-height: .75rem; }
/* WooCommerce's `.woocommerce .products ul::before/::after` clearfix adds two pseudo flex items (+4px) */
.product-card .product-card__rating .stars::before,
.product-card .product-card__rating .stars::after { content: none; display: none; }
.product-card__rating-value {
  font-size: var(--text-ui-4); font-weight: 700; font-family: var(--font-secondary);
  text-transform: uppercase; letter-spacing: .03125rem; color: var(--brand-35); line-height: 15px;
}
.product-card__review-count {
  font-size: var(--text-ui-5); font-weight: 700; font-family: var(--font-secondary);
  color: var(--dark-navy-40); text-decoration: none; line-height: 15px;
}
.product-card__rating-sep { width: 1px; height: 15px; background: var(--brand-80); display: inline-block; }

/* title + price row */
.product-card__head { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; width: 100%; }
@media (min-width: 60rem) {
  .product-card__head { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 1rem; }
}
.product-card__title { font-size: var(--text-title-7); font-weight: 500; line-height: 1.38; }
.product-card__price { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; font-size: var(--text-title-7); white-space: nowrap; }
.price-original { color: var(--text-muted); text-decoration: line-through; font-weight: 400; }
.price-current { color: var(--text); font-weight: 500; }

/* promo bar carousel controls */
.promo-bar { font-size: .875rem; }
.promo-bar__label { font-weight: 500; }
.promo-bar__cta { font-weight: 500; }
.promo-bar__inner { gap: 1rem; }
.promo-bar__slides { display: flex; align-items: center; justify-content: center; }
.promo-bar__divider { margin: 0 .5rem; opacity: .7; }
.promo-bar__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: #fff; cursor: pointer;
  padding: .25rem .5rem; opacity: .9; line-height: 0;
}
.promo-bar__nav--prev { left: .25rem; }
.promo-bar__nav--next { right: .25rem; }
.promo-bar__nav:hover { opacity: 1; }
.promo-bar__nav svg { width: 8px; height: 10px; }
@media (max-width: 47.99rem) { .promo-bar__nav { display: none; } }

/* footer shipping region selector */
.site-footer__region { margin-top: .5rem; }
.region-select {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  height: 3rem; padding: 0 1rem; border: 1px solid #fff;
  border-radius: var(--corner-circle); background: #fff; color: var(--dark-navy-10);
}
.region-select__value { font-size: var(--text-ui-3); color: var(--dark-navy-10); }
.region-select select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; font: inherit; appearance: none; border: 0;
}
.region-select .caret-down { width: 12px; height: 6px; flex-shrink: 0; transition: transform .2s ease; }
.region-select:focus-within .caret-down { transform: rotate(180deg); }

/* drawer accordion sections (mobile menu), mirroring the source storefront */
.drawer__acc-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1.25rem; background: none; border: 0; cursor: pointer; color: inherit; text-align: left;
}
.drawer__acc-title { font-size: var(--text-title-6); font-weight: 500; }
.drawer__acc-btn .chevron-down { width: 16px; height: 16px; flex: 0 0 16px; transition: transform .3s ease-in-out; }
.drawer__acc-btn[aria-expanded="true"] .chevron-down { transform: rotate(180deg); }
.drawer__acc-panel { max-height: 0; overflow: hidden; transition: max-height .3s ease-in-out; }
.drawer__section.is-open .drawer__acc-panel { max-height: 40rem; }
.drawer__acc-panel ul { padding: .25rem 0 .75rem 1.25rem; }
.drawer__acc-panel li a { padding: .6rem 0; }

/* footer link columns collapse into accordions below the desktop breakpoint */
@media (max-width: 63.99rem) {
  .site-footer__col { border-bottom: 1px solid rgba(184,202,239,.3); }
  .site-footer__col h3 {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    padding: 1.5rem 0; margin: 0; font-size: var(--text-title-6); font-weight: 700;
    font-family: var(--font-secondary); text-transform: uppercase; letter-spacing: var(--tracking-md);
  }
  .site-footer__toggle { position: absolute; inset: 0; display: block; background: none; border: 0; cursor: pointer; color: inherit; }
  .site-footer__sign { position: absolute; right: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px; }
  .site-footer__sign::before, .site-footer__sign::after { content: ""; position: absolute; background: currentColor; border-radius: 9999px; }
  .site-footer__sign::before { left: 5px; top: 0; width: 2px; height: 100%; transition: transform .2s ease-in-out; }
  .site-footer__sign::after { left: 0; top: 5px; width: 100%; height: 2px; }
  .site-footer__col.is-open .site-footer__sign::before { transform: rotate(90deg); }
  .site-footer__col ul { max-height: 0; overflow: hidden; transition: max-height .3s ease-in-out; }
  .site-footer__col.is-open ul { max-height: 40rem; padding-bottom: 1.5rem; }
}
@media (min-width: 64rem) {
  .site-footer__toggle { display: none; }
}
.region-select:focus-within .caret-down { transform: rotate(180deg); }

/* variant swatches */
.product-card__variants { gap: .5rem; }
.product-card__chips { align-items: center; gap: .5rem; padding: .1rem 0; }
.product-card__chips--swatch { gap: .5rem; }
.product-card__variants-sep { display: none; }
@media (min-width: 64rem) {
  .product-card__variants { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem; }
  .product-card__variants-sep { display: block; width: 1px; height: 15px; background: var(--neutral-80); }
}
.swatch {
  width: 16px; height: 16px; min-width: 16px; padding: 1px;
  border: 1px solid var(--neutral-85); border-radius: 50%;
  background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s ease;
}
.swatch:hover { border-color: var(--neutral-50); }
.swatch.is-active { border-color: var(--brand-20); }
.swatch__dot { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.product-card__variants-label {
  font-size: var(--text-support-2); line-height: 1.4; font-weight: 400;
  text-transform: none; letter-spacing: 0; color: var(--dark-navy-10);
  white-space: normal; min-width: 0;
}
.product-card__variants-name { color: var(--text-muted); }

/* quick add stays out of the way until the card is engaged (source cards
   link through to the product page instead of showing a button) */
.btn--quick-add { opacity: 0; transition: opacity .18s ease; }
@media (hover: none) { .btn--quick-add { opacity: 1; } }
@media (hover: hover) {
  .product-card:hover .btn--quick-add,
  .product-card:focus-within .btn--quick-add { opacity: 1; }
}

/* From 80rem up the card media carries its own overlay Quick Add, so the
   in-body button is a second, duplicate CTA on simple products. Below that
   width the overlay is display:none and this is the only quick add. */
@media (min-width: 80rem) {
  .product-card__body > .btn--quick-add { display: none; }
}


/* ==========================================================================
   Product detail page
   ========================================================================== */

.pdp { --pdp-sticky: calc(var(--promo-height) + var(--header-height) + .5rem); --pdp-sticky-jump: calc(var(--promo-height) + var(--header-height)); }
.pdp .woocommerce-notices-wrapper:empty { display: none; }
.pdp .woocommerce-message,
.pdp .woocommerce-info,
.pdp .woocommerce-error { margin: 1.5rem 0 0; }

/* head (mobile) */
.pdp__head { display: flex; flex-direction: column; gap: .5rem; padding-top: 1.5rem; }
.pdp__panel-head { display: none; }
.pdp__crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; line-height: 1;
  font-family: var(--font-secondary); font-size: var(--text-ui-5); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted);
}
.pdp__crumbs a { color: inherit; }
.pdp__crumbs a:hover { text-decoration: underline; }
.pdp__title { font-size: var(--text-title-3); font-weight: 500; margin: 0; line-height: 1.3; }

/* rating */
.pdp__rating {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: .25rem;
  width: fit-content; padding: 0; border: 0; background: none; font: inherit; cursor: text;
}
.pdp__stars { display: inline-flex; align-items: center; gap: .125rem; color: var(--brand-35); }
.pdp__stars svg { width: .75rem; height: .75rem; display: block; }
.pdp__rating-value {
  font-family: var(--font-secondary); font-size: var(--text-ui-4); font-weight: 700;
  text-transform: uppercase; letter-spacing: .03125rem; line-height: 1.1; color: var(--brand-35);
}
.pdp__rating-sep { display: inline-block; width: 1px; height: 15px; background: var(--neutral-80); }
.pdp__rating-count {
  font-family: var(--font-secondary); font-size: var(--text-ui-5); font-weight: 700;
  text-transform: uppercase; letter-spacing: .03125rem; line-height: 1.1; color: var(--dark-navy-40);
}

/* two column shell */
.pdp__grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem;
  max-width: 88rem; margin: 1.25rem auto 0;
  padding-left: var(--container-pad); padding-right: var(--container-pad);
}

/* gallery */
.pdp__media > .pdp__gallery { position: sticky; top: var(--pdp-sticky); }
.pdp__gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.pdp__thumbs { display: none; }
.pdp__stage { position: relative; overflow: hidden; border-radius: var(--corner-xl); background: var(--brand-95); }
.pdp__slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pdp__slides::-webkit-scrollbar { display: none; }
.pdp__slide { position: relative; flex: 0 0 100%; aspect-ratio: 1; scroll-snap-align: start; }
.pdp__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pdp__badges {
  position: absolute; top: .75rem; left: .75rem; z-index: 2;
  display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none;
}
.pdp__badges .product-card__badge { border-radius: var(--corner-circle); }
.pdp__arrow { display: none; }
.pdp__dots {
  position: absolute; left: 0; right: 0; bottom: .75rem;
  display: flex; justify-content: center; gap: .375rem;
}
.pdp__dot {
  width: .5rem; height: .5rem; padding: 0; border: 0; border-radius: 50%;
  background: var(--neutral-80); cursor: pointer; transition: background .18s ease;
}
.pdp__dot.is-active { background: var(--neutral-10); }

/* buy panel */
.pdp__panel-inner { display: flex; flex-direction: column; gap: 1.5rem; }
.pdp__details { display: flex; flex-direction: column; gap: 2rem; }
.pdp__rule { height: 0; border-top: 1px solid var(--border-light); }
.pdp__panel-head .pdp__crumbs { margin-bottom: .25rem; }

/* option chips */
.pdp__options {
  display: flex; flex-direction: column; gap: 2rem;
  padding: 1.5rem 0 0;
}
.pdp__option { display: flex; flex-direction: column; gap: .75rem; }
.pdp__option-head { display: flex; align-items: baseline; gap: .5rem; }
.pdp__option-title { font-size: var(--text-title-7); font-weight: 500; line-height: 1.38; margin: 0; }
.pdp__option-hint { font-size: var(--text-title-8); color: var(--text-muted); }
.pdp__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.pdp__chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  min-width: 7rem; min-height: 4.8125rem; padding: 1rem;
  border: 1px solid var(--dark-navy-60); border-radius: var(--corner-large);
  background: none; font: inherit; color: var(--text); cursor: pointer; text-align: center;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.pdp__chip:hover { border-color: var(--brand-35); }
.pdp__chip.is-active { border-color: var(--brand-35); background: #f0f7ff; color: var(--text); }
.pdp__chip-dot {
  flex: none; width: 1rem; height: 1rem; padding: 1px; box-sizing: border-box;
  border: 1px solid var(--dark-navy-60); border-radius: 50%; background-clip: content-box;
}
.pdp__chip.is-active .pdp__chip-dot { border-color: var(--brand-35); }
/* scent / colour chips sit inline: dot plus label, half the height of a card */
.pdp__chip--swatch {
  flex-direction: row; min-width: 0; min-height: 0; padding: 1rem 1.25rem;
}
.pdp__chip-label { font-size: var(--text-title-7); font-weight: 400; line-height: 1.1; color: var(--dark-navy-10); }
.pdp__chip.is-active .pdp__chip-label { font-weight: 500; color: var(--brand-35); }
.pdp__chip-sub { font-size: var(--text-support-2); font-weight: 400; line-height: 1.1; color: var(--dark-navy-30); }
.pdp__chip.is-active .pdp__chip-sub { color: var(--brand-35); }
.pdp__chip-badge { font-size: var(--text-support-2); font-weight: 500; line-height: 1.1; color: var(--brand-35); }

/* what's included */
.pdp__included { display: flex; flex-direction: column; gap: .5rem; position: relative; }
.pdp__included-title { font-size: var(--text-title-7); font-weight: 500; margin: 0; }
.pdp__included-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.pdp__included-list li { position: relative; padding-left: 1rem; font-size: var(--text-body-2); color: var(--text-muted); }
.pdp__included-list li::before { content: "\2022"; position: absolute; left: .25rem; top: -.125rem; }
.pdp__more {
  align-self: flex-start; padding: 0; border: 0; background: none;
  font: inherit; font-size: var(--text-body-2); font-weight: 500;
  color: var(--text); text-decoration: underline; cursor: pointer;
}
.pdp__included::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2rem; height: 2.5rem;
  background: linear-gradient(rgba(255,255,255,0), #fff); pointer-events: none;
}
.pdp__included.is-expanded::after { display: none; }

/* total + add to cart */
.pdp__form { display: flex; flex-direction: column; gap: 1.5rem; }
.pdp__total { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
.pdp__total-label { font-size: var(--text-title-6); font-weight: 500; line-height: 1.3; margin: 0; }
.pdp__total-value { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: var(--text-body-2); font-weight: 500; }
.pdp__price-original { color: var(--text-muted); text-decoration: line-through; font-weight: 400; }
.pdp__atc {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 3rem; min-height: 3rem; padding: 0 3.5rem;
  border: 1px solid var(--brand-35); border-radius: var(--corner-circle);
  background: var(--brand-35); color: #fff; cursor: pointer;
  font-family: var(--font-secondary); font-size: var(--text-button-ui-2); font-weight: 700;
  line-height: 1; text-transform: uppercase; letter-spacing: .0625rem;
  transition: background .18s ease, border-color .18s ease;
}
.pdp__atc-label { width: 100%; text-align: center; line-height: 1; }
.pdp__atc:hover { background: var(--brand-30); border-color: var(--brand-30); }
.pdp__atc[disabled] { background: var(--neutral-50); border-color: var(--neutral-50); cursor: wait; }
.pdp__atc.is-added { background: var(--green-50); border-color: var(--green-50); }

/* popular add-on */
.pdp__addon { display: flex; flex-direction: column; gap: .75rem; padding-top: 1.25rem; border-top: 1px solid var(--border-light); }
.pdp__addon-title { font-size: var(--text-title-7); font-weight: 500; margin: 0; }
.pdp__addon-card {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1rem; border: 1px solid var(--border-light); border-radius: var(--corner-large);
}
.pdp__addon-link { display: flex; align-items: center; gap: .75rem; min-width: 0; color: inherit; }
.pdp__addon-media { flex: none; width: 4rem; height: 4rem; border-radius: var(--corner-large); overflow: hidden; background: var(--brand-95); }
.pdp__addon-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp__addon-body { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.pdp__addon-name { font-size: var(--text-title-7); font-weight: 500; }
.pdp__addon-sub { font-size: var(--text-ui-5); color: var(--text-muted); }
.pdp__addon-actions { display: flex; align-items: center; gap: .75rem; flex: none; }
.pdp__addon-price { font-size: var(--text-ui-3); white-space: nowrap; }
.pdp__addon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.25rem; padding: 0 1rem; border-radius: var(--corner-circle);
  border: 1px solid var(--brand-20); color: var(--brand-20);
  font-size: var(--text-ui-4); font-weight: 600;
}
.pdp__addon-btn:hover { background: var(--brand-20); color: #fff; }

/* tabs */
.pdp__tablist { display: flex; gap: 1.5rem; overflow-x: auto; border-bottom: 1px solid var(--dark-navy-60); scrollbar-width: none; }
.pdp__tablist::-webkit-scrollbar { display: none; }
.pdp__tab {
  position: relative; padding: .5rem 0; border: 0; background: none;
  font: inherit; font-size: var(--text-title-7); font-weight: 400; line-height: 1.1;
  color: var(--dark-navy-10);
  white-space: nowrap; cursor: pointer;
}
.pdp__tab.is-active { font-weight: 500; }
.pdp__tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px;
  background: var(--brand-35); transform: scaleX(0); transition: transform .18s ease;
}
.pdp__tab.is-active::after { transform: scaleX(1); }
.pdp__tabpanel { padding-top: 1.5rem; }
.pdp__prose { font-size: var(--text-body-2); line-height: 1.5; color: var(--text); margin: .25rem 0; }
.pdp__prose > :last-child { margin-bottom: 0; }
.pdp__prose p { margin: 0 0 .75rem; }
.pdp__prose ul, .pdp__bullets { margin: 0 0 .75rem; padding-left: 2rem; list-style: disc; }
.pdp__prose li { margin: 0 0 .5rem; }
.pdp__prose li:last-child { margin-bottom: 0; }
.pdp__prose strong, .pdp__bullets strong { font-weight: 500; }
.pdp__prose a { text-decoration: underline; }
.pdp__saves-title { font-size: var(--text-title-6); font-weight: 500; margin: 0 0 1rem; }
.pdp__saves { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.pdp__save {
  display: flex; align-items: center; gap: .75rem; padding: .625rem 1rem;
  border-radius: var(--corner-large); color: #fff;
  background: linear-gradient(100deg, var(--save-tint), color-mix(in srgb, var(--save-tint) 55%, #000 12%));
}
.pdp__save-value {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 3rem; min-height: 3rem; padding: 0 .375rem;
  border: 1px solid rgba(255,255,255,.85); border-radius: 50%;
  font-family: var(--font-secondary); font-size: var(--text-ui-4); font-weight: 700; text-transform: uppercase;
}
.pdp__save-label { font-size: var(--text-ui-3); }

/* jump menu - mirrors the source sticky scroll menu */
.pdp__jump {
  position: sticky; top: var(--pdp-sticky-jump); z-index: 15;
  background: transparent;
}
.pdp__jump-inner {
  display: flex; justify-content: space-between; gap: 2.5rem;
  max-width: 74.5rem; margin: 0 auto; padding: 0 1rem;
  overflow-x: auto; scrollbar-width: none;
}
@media (min-width: 64rem) { .pdp__jump-inner { padding: 0 6rem; } }
.pdp__jump-inner::-webkit-scrollbar { display: none; }
.pdp__jump-link {
  position: relative; display: inline-flex; align-items: center; min-height: 3.125rem; padding: .75rem; white-space: nowrap;
  font-size: var(--text-title-7); font-weight: 500; line-height: 1.38;
  color: var(--dark-navy-30);
}
.pdp__jump-link.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--brand-35);
}

/* how it works */
.pdp .pdp-hiw, .pdp-section.pdp-hiw { padding: 0; overflow: hidden; }
.pdp-hiw__grid { display: grid; }
@media (min-width: 64rem) { .pdp-hiw__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pdp-hiw__copy {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 1.5rem; padding: 2.5rem 1.5rem;
}
@media (min-width: 64rem) { .pdp-hiw__copy { padding: 0 0 0 3rem; } }
.pdp-hiw__title { font-size: var(--text-title-2); font-weight: 500; line-height: 1.2; color: var(--dark-navy-10); margin: 0; }
.pdp-hiw__steps { display: flex; flex-direction: column; gap: 1.5rem; margin: 0; padding: 1rem 0; list-style: none; }
.pdp-hiw__step { display: flex; align-items: center; gap: 1rem; }
.pdp-hiw__step-num {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: var(--corner-circle);
  background: var(--brand-35); color: #fff;
  font-size: var(--text-title-7); font-weight: 700; line-height: 1;
}
.pdp-hiw__step-body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.pdp-hiw__step-title { font-size: var(--text-title-6); font-weight: 500; line-height: 1.3; color: var(--dark-navy-10); margin: 0; }
.pdp-hiw__step-text { font-size: var(--text-body-2); font-weight: 400; line-height: 1.5; margin: 0; color: var(--text); }
.pdp-hiw__media { position: relative; }
.pdp-hiw__media img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* faq */
.pdp-faq__inner { max-width: 42.1875rem; margin: 0 auto; }
.pdp-faq__title { font-size: var(--text-title-2); font-weight: 500; line-height: 1.2; color: var(--dark-navy-10); text-align: center; margin: 0 0 1.625rem; }
.pdp-faq__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--dark-navy-60); }
.pdp-faq__item { border-top: 1px solid var(--dark-navy-60); padding: 1rem 0; }
.pdp-faq__question {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 1rem 0 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.pdp-faq__label { font-size: var(--text-body-2); font-weight: 500; line-height: 1.5; color: var(--dark-navy-10); }
.pdp-faq__icon { flex: none; display: inline-flex; align-items: center; color: var(--dark-navy-10); transition: transform .3s ease; }
.pdp-faq__item.is-open .pdp-faq__icon { transform: rotate(180deg); }
.pdp-faq__answer { padding-top: .3125rem; }
.pdp-faq__answer p { font-size: var(--text-body-2); font-weight: 400; line-height: 1.5; color: var(--text); margin: 0; }

/* shared section rhythm */
.pdp-section { padding: 3.5rem 0; }
@media (min-width: 64rem) { .pdp-section { padding: 5rem 0; } }
.pdp-values { background: #eaf6ff; }
.pdp-scents { background: var(--brand-98); }
.pdp-reviews .section-head { margin-bottom: 2rem; }

/* scent tiles */
.pdp-scents__track { grid-auto-columns: minmax(8rem, 42%); }
@media (min-width: 48rem) { .pdp-scents__track { grid-auto-columns: minmax(9rem, 24%); } }
@media (min-width: 64rem) { .pdp-scents__track { grid-auto-columns: minmax(10rem, 18%); } }
.pdp-scent { display: flex; flex-direction: column; gap: .75rem; text-align: center; margin: 0; }
.pdp-scent__media {
  position: relative; display: block; width: 100%; aspect-ratio: 1;
  border-radius: var(--corner-xl); overflow: hidden;
}
.pdp-scent__tablet {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #eef3f7 70%);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.pdp-scent__body { display: flex; flex-direction: column; gap: .25rem; }
.pdp-scent__title {
  margin: 0; font-family: var(--font-secondary); font-size: var(--text-ui-3);
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.pdp-scent__desc { margin: 0; font-size: var(--text-body-2); color: var(--text-muted); }

/* values tabs */
.pdp-values__tabs { margin-top: 2rem; }
.pdp-values__tablist { display: flex; justify-content: center; gap: 1.5rem; border-bottom: 1px solid var(--border-light); }
.pdp-values__tab {
  position: relative; padding: .5rem 0 .75rem; border: 0; background: none;
  font: inherit; font-size: var(--text-ui-3); font-weight: 500; cursor: pointer; white-space: nowrap;
}
.pdp-values__tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: var(--brand-20); transform: scaleX(0); transition: transform .18s ease;
}
.pdp-values__tab.is-active::after { transform: scaleX(1); }

/* Phones: the tab row is wider than the viewport, so let it scroll on its own
   instead of dragging the whole document sideways. `safe center` keeps the
   centred look whenever the tabs do fit. */
@media (max-width: 47.99rem) {
	.pdp-values__tablist {
		justify-content: safe center;
		gap: 1.25rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.pdp-values__tablist::-webkit-scrollbar { display: none; }
	.pdp-values__tab { flex: 0 0 auto; }
}

.pdp-values__panel {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem;
  align-items: center; padding-top: 2.5rem; max-width: 64rem; margin: 0 auto;
}
@media (min-width: 48rem) { .pdp-values__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; } }
.pdp-values__panel[hidden] { display: none; }
.pdp-values__copy { display: flex; flex-direction: column; gap: 1.5rem; }
.pdp-values__lead { margin: 0; font-size: var(--text-body-1); }
.pdp-values__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem;
  margin: 0; padding: 1.25rem; list-style: none;
  background: var(--neutral-98); border-radius: var(--corner-xl);
}
.pdp-values__list li { display: flex; align-items: center; gap: .5rem; font-size: var(--text-body-2); }
.pdp-values__check { display: inline-flex; color: var(--green-50); flex: none; }
.pdp-values__certs { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.pdp-values__certs img { width: 4.5rem; height: auto; }
.pdp-values__media img { width: 100%; height: auto; border-radius: var(--corner-xl); }

/* reviews */
.pdp-reviews__summary {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem;
  align-items: center; max-width: 48rem; margin: 0 auto 2.5rem;
  padding: 1.5rem; border: 1px solid var(--border-light); border-radius: var(--corner-xl);
}
@media (min-width: 48rem) { .pdp-reviews__summary { grid-template-columns: auto minmax(0, 1fr); } }
.pdp-reviews__score { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.pdp-reviews__number { font-size: var(--text-title-1); font-weight: 500; line-height: 1; }
.pdp-reviews__stars { color: var(--brand-35); letter-spacing: .1em; }
.pdp-reviews__count { font-size: var(--text-ui-4); color: var(--text-muted); }
.pdp-reviews__bars { display: flex; flex-direction: column; gap: .375rem; }
.pdp-reviews__bar { display: flex; align-items: center; gap: .75rem; font-size: var(--text-ui-5); }
.pdp-reviews__bar-label { width: 1rem; text-align: right; color: var(--text-muted); }
.pdp-reviews__bar-track { flex: 1; height: .5rem; border-radius: var(--corner-circle); background: var(--neutral-93); overflow: hidden; }
.pdp-reviews__bar-fill { display: block; height: 100%; background: var(--brand-35); }
.pdp-reviews__bar-value { width: 2.5rem; color: var(--text-muted); }
.pdp-reviews__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 48rem) { .pdp-reviews__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pdp-reviews__grid .review {
  width: auto; max-width: none; min-width: 0; height: 100%;
  flex-direction: column; align-items: flex-start; gap: .75rem;
  border: 1px solid var(--border-light); border-radius: var(--corner-xl); padding: 1.5rem;
}

/* desktop layout */
@media (min-width: 64rem) {
  .pdp__head { display: none; }
  .pdp__panel-head { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
  .pdp__panel-head .pdp__title { margin-bottom: .5rem; }
  .pdp__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0; margin-top: 2rem;
    max-width: none; padding-left: 3rem; padding-right: 3rem;
  }
  .pdp__panel-inner { position: sticky; top: var(--pdp-sticky); gap: 2rem; padding-left: 3rem; padding-right: 3rem; }
  /* the source storefront insets the page sections further than the buy panel */
  .pdp .container { padding-left: 6rem; padding-right: 6rem; }
  .pdp__gallery { grid-template-columns: 78px minmax(0, 1fr); gap: 1.25rem; }
  .pdp__thumbs {
    display: flex; flex-direction: column; gap: .75rem; order: -1;
    max-height: calc(78px * 5 + .75rem * 4); overflow-y: auto; scrollbar-width: none;
  }
  .pdp__thumbs::-webkit-scrollbar { display: none; }
  .pdp__thumb {
    flex: none; width: 78px; height: 78px; padding: 0; overflow: hidden;
    border: 1px solid var(--border-light); border-radius: var(--corner-large);
    background: var(--brand-95); cursor: pointer;
  }
  .pdp__thumb.is-active { border-color: var(--brand-20); box-shadow: 0 0 0 1px var(--brand-20); }
  .pdp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pdp__dots { display: none; }
  .pdp__arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    display: flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%;
    background: #fff; border: 1px solid var(--border-light);
    color: var(--text); cursor: pointer; transition: background .18s ease;
  }
  .pdp__arrow:hover { background: var(--brand-95); }
  .pdp__arrow--prev { left: .75rem; }
  .pdp__arrow--next { right: .75rem; }
  .pdp__arrow--prev svg { transform: rotate(90deg); }
  .pdp__arrow--next svg { transform: rotate(-90deg); }
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .pdp__save { background: var(--save-tint); }
}
/* ==========================================================================
   Collection (PLP) parity with the source storefront
   ========================================================================== */

.collection-route {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  overflow: hidden;
  padding: 3rem 0;
}
.collection { width: 100%; margin: 0 auto; padding: 0 1.5rem; }
.collection__inner { display: flex; flex-direction: column; gap: 1.5rem; width: 100%; }
.collection__hero { display: flex; flex-direction: column; gap: 1.5rem; }
.collection__head { display: flex; flex-direction: column; gap: .5rem; text-align: center; }
.collection__head .page-title { margin: 0 0 0 -1px; font-size: var(--text-title-3); line-height: 1.3; font-weight: 500; }
.collection__lede { margin: 0; font-size: var(--text-body-2); line-height: 1.5; color: var(--dark-navy-10); }
.collection__lede p { margin: 0; }
.collection__body { display: flex; flex-direction: column; gap: 1.5rem; }
.collection-group { display: flex; flex-direction: column; gap: 1.25rem; }
.collection-group__title { margin: 0; font-size: var(--text-title-5); line-height: 1.3; font-weight: 500; }
.collection-grid {
  display: grid; width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1rem; row-gap: 1rem;
  margin: 0; padding: 0; list-style: none;
}
.collection-grid > li { margin: 0; width: auto; float: none; }
.collection-rule { height: 1px; width: 100%; background: var(--dark-navy-60); }
.collection-loader { display: flex; align-items: center; justify-content: center; min-height: 25rem; width: 100%; }
.collection-loader[hidden] { display: none; }
.collection-loader__spin { width: 2rem; height: 2rem; color: var(--brand-35); animation: collection-spin .75s linear infinite; }
@keyframes collection-spin { to { transform: rotate(360deg); } }

/* result count + category/sort filters above the grid */
.collection__filters { display: none; flex-direction: column; gap: 1.5rem; margin: 0; }
.collection__filters-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.collection__count { font-size: var(--text-ui-3); line-height: 1.1; color: var(--dark-navy-40); }
.collection__filter-list { display: flex; flex: 1; align-items: center; justify-content: flex-end; gap: 1.125rem; margin: 0; padding: 0; list-style: none; }
.collection__filter { display: flex; }
.collection__filter-rule { flex: none; width: 1px; height: 20px; background: var(--dark-navy-60); }
.collection__filter-btn {
  display: inline-flex; align-items: center; gap: .5rem; padding: .25rem;
  border: 0; border-radius: .25rem; background: none; font: inherit; color: var(--dark-navy-10);
  cursor: pointer;
}
.collection__filter-btn svg { flex: none; color: var(--dark-navy-10); transition: transform .2s ease; }
.collection__filter-btn.is-open svg { transform: rotate(180deg); }
.collection__filter-btn:disabled { opacity: .5; cursor: not-allowed; }
.collection__filter-btn:hover:not(:disabled) .collection__filter-label { text-decoration: underline; }
.collection__filter-label { font-size: var(--text-ui-3); line-height: 1.25; text-transform: capitalize; white-space: nowrap; }
.collection__sort-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem;
  height: 48px; max-width: 240px; padding: .75rem 1rem;
  background: #fff; border: 1px solid var(--dark-navy-80); border-radius: .25rem;
  color: var(--dark-navy-10);
  font: inherit; cursor: pointer; transition: border-color .2s ease, background-color .2s ease;
}
.collection__sort-btn:hover { border-color: var(--dark-navy-10); background: var(--brand-98); }
.collection__sort-btn:active { border-color: var(--brand-35); background: var(--brand-93); }
.collection__sort-btn svg { flex: none; color: var(--dark-navy-10); transition: transform .2s ease; }
.collection__sort-btn.is-open svg { transform: rotate(180deg); }

/* trailing search-engine summary */
.collection-seo { padding: 3rem 1.5rem; }
.collection-seo__inner { max-width: none; margin: 0 auto; color: var(--dark-navy-10); font-size: var(--text-body-2); line-height: 1.5; }
.collection-seo__inner p { margin: 0; line-height: 1.5; }
.collection-seo__inner a { color: inherit; text-decoration: underline; }

/* cards inside the grouped grid */
.collection-group .product-card { height: 100%; justify-content: flex-start; }
.collection-group .product-card__media-wrap { border-radius: .25rem; overflow: hidden; }
.collection-group .product-card__media { border-radius: 0; }
.collection-group .product-card__body { padding-top: .5rem; gap: .5rem; }
.collection-group .product-card__head { gap: .25rem; }
.collection-group .product-card__title { font-size: var(--text-title-7); line-height: 1.38; font-weight: 500; letter-spacing: normal; }
.collection-group .product-card__badges { top: .5rem; left: .5rem; gap: .125rem .25rem; }
.collection-group .product-card__badge {
  font-family: var(--font-secondary); font-size: var(--text-ui-5); font-weight: 700;
  letter-spacing: .03125rem; padding: .25rem .5rem; border-radius: 999px;
}
.collection-group .product-card__rating { flex-wrap: wrap; gap: .25rem; min-height: .75rem; color: var(--dark-navy-10); }
.collection-group .product-card__rating .stars { display: flex; align-items: center; gap: .125rem; letter-spacing: 0; font-size: inherit; }
.collection-group .product-card__rating .stars li { display: flex; color: var(--brand-35); }
.collection-group .product-card__rating .stars svg { display: block; width: .75rem; height: auto; min-height: .75rem; }
.collection-group .product-card__rating-value {
  font-size: var(--text-ui-4); font-weight: 700; font-family: var(--font-secondary);
  text-transform: uppercase; letter-spacing: .03125rem; color: var(--brand-35);
  line-height: 1.1; padding-bottom: .125rem; margin-bottom: -.125rem;
}
.collection-group .product-card__rating-sep { width: 1px; height: 15px; background: var(--brand-80); }
.collection-group .product-card__review-count {
  font-size: var(--text-ui-5); font-weight: 700; font-family: var(--font-secondary);
  color: var(--dark-navy-40); text-decoration: underline;
  line-height: 1.1; padding-bottom: .125rem; margin-bottom: -.125rem;
}
.collection-group .product-card__price .price-original { font-weight: 400; color: var(--dark-navy-40); }
.collection-group .product-card__price .price-current { font-weight: 500; color: var(--dark-navy-10); }

@media (min-width: 48rem) {
  .collection-route { padding: 3.5rem 0; }
  .collection { padding: 0 3.5rem; }
  .collection__inner { gap: 2rem; }
  .collection__head { text-align: left; }
  .collection__head .page-title { margin-left: -2px; }
  .collection__lede { margin-left: -1px; font-size: var(--text-body-1); }
  .collection__body { gap: 2.5rem; }
  .collection-group__title { font-size: 1.25rem; }
  .collection-group .product-card__body { padding-top: 1rem; }
  .collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 2.5rem; }
  .collection__filters { display: flex; }
  .collection__count, .collection__filter-label { font-size: .9375rem; }
  .collection-group .product-card__rating-value { font-size: .8125rem; }
  .collection-group .product-card__review-count { font-size: .75rem; }
  .collection-seo { padding: 3.5rem 3.5rem; font-size: .9375rem; }
}

@media (min-width: 64rem) {
  .collection-route { gap: 2.5rem; padding: 4.5rem 0; }
  .collection { padding: 0 6rem; }
  .collection__inner { gap: 2.5rem; }
  .collection__hero { gap: 2rem; }
  .collection__head .page-title { margin-left: -3px; font-size: var(--text-title-2); line-height: 1.2; }
  .collection__body { gap: 3rem; }
  .collection-group { gap: 1.5rem; }
  .collection-group__title { font-size: 1.375rem; }
  .collection-grid { column-gap: 2rem; row-gap: 2rem; }
  .collection__filters { gap: 2rem; }
  .collection__count, .collection__filter-label { font-size: 1.0625rem; }
  .collection__filter-list { gap: 1.25rem; }
  .collection__sort-btn, .shop-sort__btn { min-width: 240px; padding: 1rem; }
  .collection-group .product-card__body { padding-top: 1.25rem; }
  .collection-group .product-card__badge { font-size: .875rem; padding: .375rem .75rem; }
  .collection-group .product-card__rating-value { font-size: .875rem; }
  .collection-group .product-card__review-count { font-size: .8125rem; text-decoration: none; }
  .collection-group .product-card__head { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 1rem; }
  .collection-seo { padding: 4.5rem 6rem; }
}

@media (min-width: 80rem) {
  .collection { max-width: 102rem; }
  .collection-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Collection (PLP) parity, pass 2: toolbar rule, mobile toolbar, swatch row
   -------------------------------------------------------------------------- */

.collection-controls { position: relative; display: flex; flex-direction: column; gap: 0; margin: 0; }
.collection__filters-rule { height: 1px; width: 100%; background: var(--dark-navy-60); }
.collection__filters-mobile { display: flex; flex-direction: column; gap: 1.5rem; }
.collection__filters-mobile-row { display: flex; gap: .5rem; }
.collection__filters-mobile-rule { width: 100%; height: .125rem; background: rgb(222, 234, 255); }
.collection__pill {
  display: inline-flex; flex: 1 1 0; min-width: 0; align-items: center; justify-content: center;
  padding: .5rem 1rem; border: 1px solid var(--dark-navy-80); border-radius: var(--corner-circle);
  background: none; color: var(--dark-navy-10); font: inherit; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.collection__pill:hover { background: var(--brand-93); border-color: var(--brand-20); }
.collection__pill:active { background: var(--brand-80); border-color: var(--brand-10); }
.collection__pill span { font-size: var(--text-ui-4); line-height: 1.1; font-weight: 500; }
@media (min-width: 48rem) {
  .collection__filters-mobile { display: none; }
}

.collection-group .product-card__media { border-radius: .25rem; }
.collection-group .product-card__price { line-height: 1.38; min-height: 1.25rem; }
.collection-group .product-card__rating-value { line-height: 15px; padding-bottom: 0; margin-bottom: 0; }
.collection-group .product-card__review-count { line-height: 15px; padding-bottom: 0; margin-bottom: 0; }

.collection-group .product-card__variants {
  display: flex; flex-direction: column; flex-wrap: wrap;
  row-gap: .25rem; column-gap: .5rem; margin-top: 0;
}
.collection-group .product-card__chips { align-items: center; gap: .5rem; padding: .125rem; }
.collection-group .product-card__variants-sep { display: none; }
.collection-group .product-card__variants-label {
  font-size: var(--text-support-2); line-height: 1.4; font-weight: 400;
  text-transform: none; letter-spacing: 0; color: var(--dark-navy-10); white-space: normal; min-width: 0;
}
.collection-group .product-card__variants-name { color: inherit; }
.collection-group .swatch { padding: 0; border-color: var(--dark-navy-60); }
.collection-group .swatch.is-active { padding: 1px; border-color: var(--brand-35); }
.collection-group .swatch-more {
  display: flex; align-items: center; border: 0; background: none;
  padding: 0; font: inherit; color: var(--brand-35); cursor: pointer;
}
.collection-group .swatch-more span { font-size: var(--text-support-2); line-height: 1.4; }
.collection-seo__inner { line-height: 1.42; }

@media (min-width: 64rem) {
  .collection-group .product-card__variants { flex-direction: row; align-items: center; }
  .collection-group .product-card__variants-sep { display: block; width: 1px; height: 15px; background: #7d9ce8; }
}

/* --------------------------------------------------------------------------
   Collection (PLP) parity, pass 3: editorial promo tiles
   -------------------------------------------------------------------------- */

.collection-tile { height: 100%; }
.collection-tile__box { height: 100%; }
.collection-tile__media {
  position: relative; height: 100%; overflow: hidden;
  border-radius: var(--corner-regular);
}
.collection-tile__img {
  position: absolute; top: 50%; left: 50%; width: 100%; height: 100%;
  max-width: none; transform: translate(-50%, -50%); object-fit: cover;
}
.collection-tile__scrim {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, .2); pointer-events: none;
}
.collection-tile__content {
  position: relative; display: flex; height: 100%; flex-direction: column;
  gap: .5rem; padding: .75rem;
}
.collection-tile__text {
  position: relative; display: flex; flex: 1 1 0%; flex-direction: column;
  gap: .5rem; justify-content: center; text-align: center;
}
.collection-tile__text p { margin: 0; }
.collection-tile__title { font-size: var(--text-title-6); line-height: 1.3; font-weight: 500; }
.collection-tile__copy { font-size: var(--text-support-2); line-height: 1.4; font-weight: 400; }
.collection-tile--inverted { color: var(--neutral-100); }

@media (min-width: 48rem) {
  .collection-tile__content { padding-left: 1rem; padding-right: 1rem; }
  .collection-tile__title { font-size: var(--text-title-5); }
  .collection-tile__copy { font-size: var(--text-body-1); line-height: 1.5; }
}

/* --------------------------------------------------------------------------
   Collection (PLP) parity, pass 3: mobile filter + sort drawers
   -------------------------------------------------------------------------- */

.collection-drawer { position: fixed; inset: 0; z-index: 50; display: flex; width: 0; overflow: hidden; transition: width .5s ease-in-out; }
.collection-drawer[hidden] { display: none; }
.collection-drawer.is-open { width: 100vw; }
.collection-drawer__panel { display: flex; flex: none; width: 100vw; max-width: 330px; height: 100dvh; flex-direction: column; gap: .75rem; background: #fff; }
.collection-drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 1rem; }
.collection-drawer__title { margin: 0; font-size: var(--text-title-5); line-height: 1.3; font-weight: 500; }
.collection-drawer__close { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; padding: 0; border: 0; background: none; color: var(--dark-navy-10); cursor: pointer; }
.collection-drawer__close svg { width: 100%; height: 100%; }
.collection-drawer__scroll { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2rem; margin: 0; padding: 0; list-style: none; overflow-y: auto; }
.collection-drawer__section { display: flex; flex-direction: column; gap: .5rem; }
.collection-drawer__section-head { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; }
.collection-drawer__section-title { margin: 0; font-family: var(--font-secondary); font-size: var(--text-ui-4); font-weight: 700; line-height: 1.1; letter-spacing: .03125rem; text-transform: uppercase; color: var(--text-muted); }
.collection-drawer__section-rule { flex: 1; border-bottom: 1px solid var(--dark-navy-80); }
.collection-drawer__options { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.shop-filter__option--drawer { padding: .75rem; gap: .5rem; }
.shop-filter__option--drawer-sort { padding: .75rem 1rem; }
.collection-drawer__footer { display: flex; gap: 1rem; padding: 0 1rem 1.5rem; }
.collection-drawer__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2rem; padding: .5rem 1.25rem;
  border: 1px solid transparent; border-radius: var(--corner-circle);
  background: none; font-family: var(--font-secondary); font-size: var(--text-button-ui-3);
  font-weight: 700; letter-spacing: .0625rem; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.collection-drawer__btn--secondary { border-color: var(--dark-navy-10); color: var(--dark-navy-10); }
.collection-drawer__btn--secondary:hover { background: var(--dark-navy-93); border-color: var(--dark-navy-30); }
.collection-drawer__btn--secondary:active { background: var(--dark-navy-70); border-color: var(--dark-navy-50); }
.collection-drawer__btn--primary { flex: 1; background: var(--brand-35); border-color: var(--brand-35); color: var(--neutral-100); }
.collection-drawer__btn--primary:hover { background: var(--brand-93); color: var(--brand-20); }
.collection-drawer__btn--primary:active { background: var(--brand-10); color: var(--neutral-100); }
.collection-drawer__overlay { flex: 1 1 auto; padding: 0; border: 0; background: #000; opacity: .6; cursor: pointer; }
@media (min-width: 48rem) { .collection-drawer { display: none !important; } }

/* ==========================================================================
   Editorial / marketing pages (About Us, Our Mission, Certifications, ...)
   ========================================================================== */
.blm { display: block; background: var(--background); }
.blm * { box-sizing: border-box; }
.blm-wrap { width: 100%; max-width: 102rem; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }

.blm-hero { position: relative; display: flex; align-items: center; justify-content: center; min-height: 12.5rem; overflow: hidden; background: var(--skyblue-95); text-align: center; }
.blm-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.blm-hero__inner { position: relative; z-index: 1; width: 100%; max-width: 47.9375rem; margin: 0 auto; padding: 2.5rem 1.5rem; }
.blm-hero__title { margin: 0; font-size: 2rem; font-weight: 500; line-height: 1.1; color: var(--dark-navy-10); }

.blm-statement { display: flex; align-items: center; justify-content: center; min-height: 12.5rem; background: var(--skyblue-98); text-align: center; }
.blm-statement__inner { display: flex; flex-direction: column; align-items: center; gap: .75rem; width: 100%; max-width: 41rem; padding: 2.5rem 1.5rem; }
.blm-statement__super { margin: 0; font-size: .8125rem; font-weight: 700; line-height: 1.38; letter-spacing: .0625rem; text-transform: uppercase; color: var(--brand-35); }
.blm-statement__title { margin: 0; font-size: 1.625rem; font-weight: 500; line-height: 1.2; color: var(--brand-35); }
.blm-statement__body { display: flex; flex-direction: column; gap: .75rem; font-size: 1rem; line-height: 1.5; color: var(--dark-navy-10); }
.blm-statement__body p { margin: 0; }
.blm-statement--lg .blm-statement__inner { max-width: 57rem; padding-top: 5.5rem; padding-bottom: 5.5rem; }

.blm-sechead { display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; }
.blm-sechead__title { margin: 0; font-size: 1.625rem; font-weight: 500; line-height: 1.2; color: var(--dark-navy-10); }
.blm-sechead__sub { margin: 0; max-width: 46rem; font-size: 1.125rem; line-height: 1.5; color: var(--dark-navy-30); }
.blm-sechead--brand .blm-sechead__title, .blm-sechead--brand .blm-sechead__sub { color: var(--brand-35); }

.blm-half { display: flex; flex-direction: column; background: var(--background); }
.blm-half__media { display: block; order: -1; }
.blm-half__media img { display: block; width: 100%; height: auto; object-fit: cover; }
.blm-half--square .blm-half__media img { aspect-ratio: 1 / 1; }
.blm-half--wide .blm-half__media img { aspect-ratio: 3 / 2; }
.blm-half__body { padding: 2.5rem 1.5rem; }
.blm-half__body-inner { display: flex; flex-direction: column; gap: 1rem; }
.blm-half__title { margin: 0; font-size: 1.75rem; font-weight: 500; line-height: 1.2; color: var(--dark-navy-10); }
.blm-prose { font-size: 1.125rem; line-height: 1.5; color: var(--dark-navy-10); }
.blm-prose p { margin: 0 0 .75rem; }
.blm-prose p:last-child { margin-bottom: 0; }
.blm-prose strong { font-weight: 500; }
.blm-sign { margin: 0 !important; }
.blm-sign img { width: 100%; max-width: 22.5rem; height: auto; }
.blm-half__links { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.blm-half__cta { margin: 0; }
.blm-link { font-size: 1rem; color: var(--dark-navy-10); text-decoration: underline; text-underline-offset: .2em; }
.blm-link--arrow::after { content: " \2192"; }
.blm-groups { display: flex; flex-direction: column; gap: 2.5rem; }
.blm-groups__title { margin: 0 0 .5rem; font-size: 1.5rem; font-weight: 500; line-height: 1.3; color: var(--dark-navy-10); }
.blm-groups__body { margin: 0; font-size: 1.125rem; line-height: 1.5; color: var(--dark-navy-10); }
.blm-check { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.blm-check__item { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
.blm-check__img { width: 3.75rem; height: 3.75rem; object-fit: contain; }
.blm-check__label { font-size: .9375rem; font-weight: 500; line-height: 1.3; color: var(--dark-navy-10); }

.blm-values { padding: 2.5rem 0; background: var(--background); }
.blm-values__list { display: flex; flex-direction: column; gap: 1.5rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.blm-values__item { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; padding: 1rem; border-radius: .5rem; background: var(--neutral-98); }
.blm-values__icon { display: block; flex: none; }
.blm-values__icon img { display: block; width: 5rem; height: 5rem; object-fit: contain; }
.blm-values__text { display: block; }
.blm-values__name { display: block; font-size: 1.125rem; font-weight: 500; line-height: 1.3; color: var(--dark-navy-10); }
.blm-values__body { display: block; margin-top: .25rem; font-size: 1rem; line-height: 1.5; color: var(--dark-navy-10); }

.blm-logos { padding: 2.5rem 0; background: var(--skyblue-98); }
.blm-logos--sky { background: var(--skyblue-95); }
.blm-logos__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.blm-logos__item { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
.blm-logos__img { width: 4rem; height: 4rem; object-fit: contain; }
.blm-logos__name { font-size: .9375rem; font-weight: 500; line-height: 1.3; color: var(--dark-navy-10); }
.blm-logos__desc { max-width: 16.5rem; font-size: .9375rem; line-height: 1.5; color: var(--dark-navy-10); }
.blm-logos--scroll .blm-logos__list { display: flex; gap: 1.5rem; margin-top: 2.5rem; padding: 0 0 .5rem; overflow-x: auto; }
.blm-logos--scroll .blm-logos__item { flex: 0 0 calc(50% - .75rem); }
.blm-logos--bleed .blm-logos__list { margin-left: -1.5rem; margin-right: -1.5rem; }

.blm-tiles { padding: 2.5rem 0; background: var(--background); }
.blm-tiles__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.blm-tiles__link { display: block; color: inherit; text-decoration: none; }
.blm-tiles__item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .25rem; }
.blm-tiles--ratio-5x4 .blm-tiles__item img { aspect-ratio: 5 / 4; }
.blm-tiles__name { margin: .875rem 0 0; font-size: 1.25rem; font-weight: 500; line-height: 1.3; color: var(--dark-navy-10); }
.blm-tiles__body { margin: .25rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--dark-navy-10); }
.blm-tiles__more { margin: 2rem 0 0; }

.blm-mosaic { padding: 2.5rem 0; background: var(--background); }
.blm-mosaic__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.blm-mosaic__link { display: block; color: inherit; text-decoration: none; }
.blm-mosaic__item img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: .25rem; }
.blm-mosaic__item--feature img { aspect-ratio: 4 / 3; }
.blm-mosaic__name { display: block; margin-top: 1.25rem; font-size: 1.25rem; font-weight: 500; line-height: 1.3; color: var(--dark-navy-10); }
.blm-mosaic__item--feature .blm-mosaic__name { font-size: 1.625rem; }
.blm-mosaic__more { display: inline-block; margin-top: .5rem; font-size: 1.0625rem; color: var(--dark-navy-10); text-decoration: underline; text-underline-offset: .2em; }

.blm-stats { padding: 2.5rem 0; background: var(--background); text-align: center; }
.blm-stats__super { margin: 0 0 1rem; font-size: .8125rem; font-weight: 700; line-height: 1.38; letter-spacing: .0625rem; text-transform: uppercase; color: var(--dark-navy-10); }
.blm-stats__value { margin: 1rem 0 0; font-size: 3.5rem; font-weight: 500; line-height: 1.12; color: var(--dark-navy-10); }
.blm-stats__label { margin: 0; font-size: 1.25rem; line-height: 1.3; color: var(--dark-navy-10); }
.blm-stats__label:last-child { margin-bottom: 0; }

.blm-freefrom { padding: 2.5rem 0; background: var(--background); }
.blm-freefrom__body { display: grid; gap: 2rem; margin-top: 2rem; }
.blm-freefrom__media img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: .25rem; }
.blm-freefrom__intro { margin: 0 0 1rem; font-size: 1.0625rem; line-height: 1.5; color: var(--dark-navy-10); }
.blm-freefrom__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.blm-freefrom__list li { display: flex; align-items: center; gap: .75rem; font-size: 1.0625rem; line-height: 1.5; color: var(--dark-navy-10); }
.blm-freefrom__list img { width: 1.25rem; height: 1.25rem; object-fit: contain; }

.blm-anchors { background: var(--skyblue-95); }
.blm-anchors__inner { width: 100%; max-width: 102rem; margin: 0 auto; padding: .625rem 1.5rem; }
.blm-anchors__list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.blm-anchors__list a { display: inline-flex; align-items: center; height: 1.875rem; padding: 0 1rem; border-radius: 9999px; background: var(--neutral-100); font-size: .875rem; font-weight: 500; color: var(--dark-navy-10); text-decoration: none; }

.blm-cta { position: relative; display: flex; align-items: center; min-height: 12.5rem; overflow: hidden; background: var(--skyblue-95); text-align: center; }
.blm-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.blm-cta__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 2.5rem 0; }
.blm-cta__super { margin: 0; font-size: .8125rem; font-weight: 700; line-height: 1.38; letter-spacing: .0625rem; text-transform: uppercase; color: var(--brand-35); }
.blm-cta__title { margin: 0; font-size: 1.625rem; font-weight: 500; line-height: 1.2; color: var(--brand-35); }
.blm-cta__body { margin: 0; max-width: 38rem; font-size: 1.125rem; line-height: 1.5; color: var(--brand-35); }
.blm-cta--left .blm-cta__inner { align-items: flex-start; text-align: left; }
.blm-cta--left .blm-cta__body { max-width: 38rem; }
.blm-btn { display: inline-flex; align-items: center; justify-content: center; height: 3rem; padding: 0 3.5rem; border-radius: 9999px; background: var(--brand-35); color: var(--neutral-100); font-size: 1.0625rem; font-weight: 400; line-height: 1; letter-spacing: .0625rem; text-decoration: none; }
.blm-btn:hover, .blm-btn:focus { background: var(--brand-30); color: var(--neutral-100); }

@media (min-width: 48rem) {
  .blm-wrap { padding-left: 6rem; padding-right: 6rem; }
  .blm-hero { min-height: 18.75rem; }
  .blm-hero__title { font-size: 3.5rem; }
  .blm-statement { min-height: 18.75rem; }
  .blm-statement__super { font-size: 1.0625rem; }
  .blm-statement__inner { max-width: 38rem; padding: 2.5rem 0; }
  .blm-statement--lg .blm-statement__inner { max-width: 54rem; padding-top: 5.75rem; padding-bottom: 5.75rem; }
  .blm-statement__title { font-size: 2.5rem; }
  .blm-statement--md .blm-statement__inner { max-width: 48rem; }
  .blm-statement--md .blm-statement__title { font-size: 2rem; }
  .blm-statement--lg .blm-statement__title { font-size: 3rem; }
  .blm-statement__body { font-size: 1.25rem; }
  .blm-sechead__title { font-size: 2.5rem; }
  .blm-sechead__sub { font-size: 1.375rem; }
  .blm-half { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding-top: 2rem; padding-bottom: 2rem; }
  .blm-half--pad-none { padding-top: 0; padding-bottom: 0; }
  .blm-half--pad-lg { padding-top: 9.6875rem; padding-bottom: 9.6875rem; }
  .blm-half__media { order: 0; padding-left: 3rem; padding-right: 3rem; }
  .blm-half--media-left .blm-half__media { padding-right: 0; grid-column: 1; grid-row: 1; }
  .blm-half--media-right .blm-half__media { padding-left: 0; grid-column: 2; grid-row: 1; }
  .blm-half--media-right .blm-half__body { grid-column: 1; grid-row: 1; }
  .blm-half__body { padding: 0 3rem; }
  .blm-half--media-left .blm-half__body { padding-left: 4.5rem; padding-right: 3rem; }
  .blm-half--media-right .blm-half__body { padding-left: 3rem; padding-right: 4.5rem; }
  .blm-half__body-inner { max-width: 37rem; }
  .blm-half--media-right .blm-half__body-inner { margin-left: auto; }
  .blm-half--narrow .blm-half__body-inner { max-width: 27.25rem; }
  .blm-half__title { font-size: 2.5rem; }
  .blm-prose { font-size: 1.25rem; }
  .blm-link { font-size: 1.0625rem; }
  .blm-groups__title { font-size: 2rem; line-height: 1.3; }
  .blm-groups__body { font-size: 1.25rem; }
  .blm-check { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.875rem; margin-top: 2rem; }
  .blm-check__img { width: 7.5rem; height: 7.5rem; }
  .blm-check__label { font-size: .9375rem; }
  .blm-values { padding: 4.5rem 0; }
  .blm-values__list { gap: 2rem; margin-top: 2.5rem; }
  .blm-values__item { flex-direction: row; align-items: center; gap: 3rem; padding: 2rem 6rem 2rem 4.5rem; }
  .blm-values__icon img { width: 7.5rem; height: 7.5rem; }
  .blm-values__name { font-size: 1.375rem; }
  .blm-values__body { font-size: 1.25rem; }
  .blm-logos { padding: 4.5rem 0; }
  .blm-logos__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 2.5rem; }
  .blm-logos__img { width: 6.5rem; height: 6.5rem; }
  .blm-logos__name { font-size: 1.0625rem; }
  .blm-logos__desc { font-size: 1.0625rem; line-height: 1.5; }
  .blm-logos .blm-sechead__sub { max-width: none; font-size: 1.25rem; }
  .blm-logos--scroll .blm-logos__list { gap: 2.5rem; }
  .blm-logos--scroll .blm-logos__item { flex: 0 0 calc(25% - 1.875rem); }
  .blm-logos--bleed .blm-logos__list { margin-left: -6rem; margin-right: -6rem; }
  .blm-tiles { padding: 4.5rem 0; }
  .blm-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 74.5rem; margin-left: auto; margin-right: auto; }
  .blm-tiles--3 .blm-tiles__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; max-width: none; }
  .blm-tiles__name { margin-top: 1.25rem; font-size: 1.625rem; }
  .blm-tiles--3 .blm-tiles__name { font-size: 1.25rem; }
  .blm-tiles__body { font-size: 1.0625rem; }
  .blm-mosaic { padding: 4.5rem 0; }
  .blm-mosaic__grid { grid-template-columns: 2.15fr 1fr 1fr; gap: 2.5rem; }
  .blm-mosaic__item--feature { grid-row: span 2; }
  .blm-mosaic__item--feature .blm-mosaic__name { font-size: 2rem; }
  .blm-stats { padding: 4.5rem 0; }
  .blm-stats__super { font-size: 1rem; }
  .blm-stats__value { font-size: 5.5rem; }
  .blm-stats__label { font-size: 1.625rem; }
  .blm-freefrom { padding: 4.5rem 0; }
  .blm-freefrom__body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4.5rem; align-items: center; }
  .blm-anchors__inner { padding-left: 6rem; padding-right: 6rem; }
  .blm-cta { min-height: 18.75rem; }
  .blm-cta--tall { min-height: 30.75rem; }
  .blm-cta__title { font-size: 2.5rem; }
  .blm-cta__body { font-size: 1.25rem; }
  .blm-cta__super { font-size: 1rem; }
  .blm-cta__inner { padding: 4rem 0; }
}

@media (min-width: 80rem) {
  .blm-logos--cols-8 .blm-logos__list { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1.5rem 1rem; }
  .blm-logos--cols-8 .blm-logos__img { width: 6.5rem; height: 6.5rem; }
}
/* ==========================================================================
   Mini cart drawer — mirrors the source storefront's slide-out cart
   (655px panel, header with close/title/count, line items, "You may also
   like" strip, subtotal + checkout footer, empty state with bestsellers)
   ========================================================================== */
.mc-overlay { position: fixed; inset: 0; z-index: 120; background: transparent; }
.mc-overlay[hidden] { display: none; }
body.mc-open { overflow: hidden; }

.mc-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 121;
  display: flex; justify-content: flex-end;
  width: 100%; max-width: 100%;
  visibility: hidden; pointer-events: none;
  transition: visibility 0s linear .3s;
}
.mc-drawer.is-open { visibility: visible; transition-delay: 0s; }
.mc-panel {
  position: relative; margin-left: auto; pointer-events: auto;
  display: flex; flex-direction: column;
  width: 100%; max-width: 100%; height: 100vh; height: 100dvh;
  background: var(--skyblue-98);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
  transform: translateX(100%);
  transition: transform .3s ease;
}
.mc-drawer.is-open .mc-panel { transform: translateX(0); }
@media (min-width: 48rem) { .mc-panel { width: 40.9375rem; max-width: 40.9375rem; } }
@media (prefers-reduced-motion: reduce) { .mc-panel { transition: none; } }

/* header */
.mc-head {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  padding: .5rem 3rem; background: #fff;
}
.mc-head__close {
  position: absolute; left: 3rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; background: none; border: 0; border-radius: 9999px;
  color: var(--dark-navy-10); cursor: pointer;
}
.mc-head__title {
  margin: 0; padding-left: 1.5rem;
  font-size: 1.625rem; font-weight: 500; line-height: 1.3;
  color: var(--dark-navy-10); text-align: center;
}
.mc-head__pill {
  position: absolute; right: 3rem; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; margin: 0;
  border: 1px solid var(--dark-navy-10); border-radius: 9999px;
}
.mc-head__count {
  font-size: 1.0625rem; font-weight: 700; line-height: 1;
  text-transform: uppercase; letter-spacing: var(--tracking-sm);
  color: var(--dark-navy-10);
}

/* scroll region */
.mc-body {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: 1.5rem;
  padding: 1.5rem 2rem 2rem;
  overflow-y: auto; overflow-x: clip;
  background: var(--skyblue-98);
  scrollbar-width: none;
}
.mc-body::-webkit-scrollbar { display: none; }
.mc-panel.is-empty .mc-body { padding: 0; }

/* line items */
.mc-items { display: flex; flex-direction: column; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.mc-item { list-style: none; }
.mc-item__card {
  position: relative; display: flex; flex-direction: column; gap: 1rem;
  padding: 1rem 1.25rem; border-radius: .5rem; background: #fff;
}
.mc-item__remove {
  position: absolute; top: 1rem; right: 1.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1rem; height: 1rem; padding: 0; background: none; border: 0; cursor: pointer;
}
.mc-item__row { display: flex; gap: 1rem; width: 100%; }
.mc-item__media { flex: none; width: 5rem; height: 5rem; border-radius: .5rem; overflow: hidden; }
.mc-item__media a { display: block; width: 100%; height: 100%; }
.mc-item__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-item__main { display: flex; flex-direction: column; justify-content: space-between; gap: .5rem; flex: 1 1 auto; min-width: 0; }
.mc-item__head { display: flex; flex-direction: column; gap: .25rem; }
.mc-item__title { font-size: 1.0625rem; font-weight: 500; line-height: 1.38; color: var(--dark-navy-10); padding-right: 1.75rem; }
.mc-item__variant { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--dark-navy-30); }
.mc-item__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; }
.mc-item__price { font-size: 1.0625rem; font-weight: 500; line-height: 1.38; color: var(--dark-navy-10); }

/* quantity stepper */
.mc-qty {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem; border: 1px solid var(--dark-navy-80); border-radius: 1.5625rem;
}
.mc-qty__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1rem; height: 1rem; padding: 0; background: none; border: 0;
  color: var(--dark-navy-10); cursor: pointer;
}
.mc-qty__btn:hover { color: var(--brand-35); }
.mc-qty__btn[disabled] { color: var(--dark-navy-70); cursor: not-allowed; }
.mc-qty__value {
  width: 1rem; margin: 0; text-align: center;
  font-size: .875rem; font-weight: 700; line-height: 1;
  text-transform: uppercase; letter-spacing: var(--tracking-sm); color: var(--dark-navy-10);
}

/* buttons */
.mc-btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  border-radius: 9999px; font-family: var(--font-secondary); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-md); cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.mc-btn--primary { background: var(--brand-35); border: 1px solid var(--brand-35); color: #fff; font-size: 1.125rem; }
.mc-btn--primary:hover { background: var(--brand-30); border-color: var(--brand-30); }
.mc-btn--outline { background: transparent; border: 1px solid var(--brand-35); color: var(--brand-35); }
.mc-btn--outline:hover { background: var(--brand-95); }
.mc-btn--large { height: 3rem; min-height: 3rem; padding: 0 3.5rem; font-size: 1.125rem; line-height: 1; }
.mc-btn--tile { width: 100%; height: 2.5rem; min-height: 2.5rem; padding: 0 1rem; font-size: .9375rem; line-height: 1; background: var(--brand-35); border-color: var(--brand-35); color: #fff; }
.mc-btn--tile:hover { background: var(--brand-30); border-color: var(--brand-30); color: #fff; }
.mc-btn--mini { height: 1.75rem; min-height: 1.75rem; padding: 0 1rem; font-size: .75rem; line-height: 1; }
.mc-btn--checkout { width: 100%; height: 3rem; min-height: 3rem; padding: 0; font-size: 1.125rem; line-height: 1; }
.mc-btn[disabled], .mc-btn.is-disabled { color: var(--dark-navy-40); border-color: var(--dark-navy-70); background: none; cursor: not-allowed; }
.mc-btn__sep { padding: 0 .25rem; }
.mc-btn__price { white-space: nowrap; }

/* subtotal + checkout footer */
.mc-tail[hidden] { display: none; }
.mc-foot {
  position: relative; z-index: 10; flex: none;
  display: flex; flex-direction: column; gap: .75rem;
  padding: 1rem 2rem; background: #fff;
  box-shadow: 0 -2px 16px 0 rgba(0, 0, 0, .05);
}
.mc-foot__row { display: flex; align-items: center; justify-content: space-between; }
.mc-foot__label, .mc-foot__value { margin: 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.38; color: var(--dark-navy-10); }
.mc-foot__note { margin: 0; font-size: .8125rem; line-height: 1.4; text-align: center; color: var(--dark-navy-40); }
.mc-donate {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .5rem 2rem; background: var(--skyblue-98);
}
.mc-donate__info { display: flex; align-items: center; gap: .375rem; min-width: 0; }
.mc-donate__media { flex: none; width: 1.875rem; height: 1.875rem; border-radius: 50%; overflow: hidden; }
.mc-donate__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-donate__title { margin: 0; font-size: .8125rem; font-weight: 500; color: var(--dark-navy-10); }

/* empty state */
.mc-empty { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; padding: 2rem .5rem; }
.mc-empty__title { width: 100%; margin: 0; font-size: 1.25rem; font-weight: 500; line-height: 1.3; text-align: center; color: var(--dark-navy-10); }
.mc-empty__links { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin: 0; padding: 0; list-style: none; }

/* explore our bestsellers (empty cart) */
.mc-upsell { flex: none; padding: 1.5rem 2rem 2.5rem; background: #fff; }
.mc-upsell__title { margin: 0 0 1.5rem; font-size: 1.375rem; font-weight: 500; line-height: 1.3; text-align: center; color: var(--dark-navy-10); }
.mc-upsell__track { display: flex; gap: .9375rem; width: 90%; margin: 0 auto; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.mc-upsell__track::-webkit-scrollbar { display: none; }
.mc-tile { flex: 0 0 calc((100% - 1.875rem) / 3); display: flex; flex-direction: column; min-height: 22.5rem; scroll-snap-align: start; }
.mc-tile__media { position: relative; display: block; margin-bottom: .9375rem; }
.mc-tile__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.mc-tile__badges { position: absolute; left: 1.25rem; top: .875rem; display: flex; flex-direction: column; gap: .9375rem; }
.mc-tile__badge { font-size: .875rem; font-weight: 700; line-height: 1.1; text-transform: uppercase; letter-spacing: var(--tracking-sm); color: var(--dark-navy-10); background: none; padding: 0; border: 0; border-radius: 0; }
.mc-tile__rating { display: flex; align-items: center; gap: .375rem; height: .75rem; margin: 0 0 .5rem; }
.mc-tile__stars { display: inline-flex; gap: 1px; }
.mc-tile__stars svg { display: block; width: .75rem; height: .75rem; }
.mc-tile__rating-value { font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-sm); color: var(--brand-35); }
.mc-tile__title { margin: 0 0 .5rem; font-size: 1.0625rem; font-weight: 500; line-height: 1.38; color: var(--dark-navy-10); }
.mc-tile__price { display: flex; align-items: center; gap: .375rem; font-size: 1.0625rem; font-weight: 500; color: var(--dark-navy-10); }
.mc-tile__price .price-original { color: var(--dark-navy-40); font-weight: 400; }
.mc-tile__cta { margin-top: auto; padding-top: .75rem; }

/* you may also like (filled cart) */
.mc-recs { display: flex; flex-direction: column; margin-right: -2rem; }
.mc-recs__head { display: flex; align-items: center; justify-content: space-between; padding-right: 3rem; margin-bottom: .5rem; }
.mc-recs__title { margin: 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.38; color: var(--dark-navy-10); }
.mc-recs__nav { display: flex; gap: .5rem; }
.mc-recs__arrow { display: inline-flex; padding: 0; background: none; border: 0; color: var(--dark-navy-10); cursor: pointer; }
.mc-recs__arrow svg { display: block; width: 1rem; height: 1.5rem; }
.mc-recs__arrow[disabled] { opacity: .4; cursor: default; }
.mc-recs__track { display: flex; gap: 1rem; overflow-x: auto; padding-right: 2rem; scrollbar-width: none; scroll-snap-type: x mandatory; }
.mc-recs__track::-webkit-scrollbar { display: none; }
.mc-rec {
  flex: 0 0 32.3125rem; max-width: 100%;
  display: flex; align-items: center; gap: 1rem;
  padding: .75rem 1rem; border-radius: .5rem; background: #fff;
  scroll-snap-align: start;
}
.mc-rec__media { flex: none; display: block; width: 3rem; height: 3rem; border-radius: .25rem; overflow: hidden; }
.mc-rec__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-rec__col { display: flex; flex-direction: column; gap: .375rem; flex: 1 1 auto; min-width: 0; }
.mc-rec__text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.mc-rec__name { font-size: .875rem; font-weight: 500; line-height: 1.5; color: var(--dark-navy-10); }
.mc-rec__variant { font-size: .8125rem; line-height: 1.4; color: var(--dark-navy-30); }

@media (max-width: 47.98rem) {
  .mc-head { padding: .5rem 1rem; }
  .mc-head__close { left: 1rem; }
  .mc-head__pill { right: 1rem; }
  .mc-body { padding: 1rem 1rem 1.5rem; }
  .mc-panel.is-empty .mc-body { padding: 0; }
  .mc-item__media { width: 4rem; height: 4rem; }
  .mc-item__card { padding: 1rem; }
  .mc-item__remove { right: 1rem; }
  .mc-upsell { padding: 1.5rem 1rem 2rem; }
  .mc-upsell__track { width: 100%; gap: .75rem; }
  .mc-tile { flex: 0 0 calc((100% - .75rem) / 2); min-height: 20rem; }
  .mc-foot, .mc-donate { padding-left: 1rem; padding-right: 1rem; }
  .mc-recs { margin-right: -1rem; }
  .mc-recs__head { padding-right: 1rem; }
  .mc-recs__track { padding-right: 1rem; }
  .mc-rec { flex: 0 0 100%; }
}
/* bestseller carousel arrows (empty cart) */
.mc-upsell__wrap { position: relative; }
.mc-upsell__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6875rem; height: 2.75rem; padding: 0; background: none; border: 0;
  color: var(--dark-navy-10); cursor: pointer;
}
.mc-upsell__arrow--prev { left: 0; }
.mc-upsell__arrow--next { right: 0; }
.mc-upsell__arrow[disabled] { opacity: .4; cursor: default; }
.mc-upsell__arrow svg { display: block; width: 1rem; height: 1.5rem; }
/* =========================================================================
   Customer account — sign in card and account app
   Geometry mirrors the source storefront's hosted account screen, measured
   at 1440x1000: 379px column, 49px controls, 12px radii, #DEDEDE borders,
   rgb(19,60,209) focus ring, 82px header, 59px footer, blue consent check.
   ========================================================================= */
body.bl-acct--auth .site-header-wrap,
body.bl-acct--auth .promo-bar,
body.bl-acct--auth .site-header,
body.bl-acct--auth .subnav,
body.bl-acct--auth .site-footer,
body.bl-acct--auth .drawer,
body.bl-acct--auth .overlay { display: none !important; }

body.bl-acct--auth { background: #fff; }

body.bl-acct--auth .site-main {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	padding: 0;
}

.acct-page,
.acct-auth {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	width: 100%;
}

/* `[woocommerce_my_account]` wraps the card in its own `.woocommerce` div. */
.acct-page > .woocommerce {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

/* --- shell: logo bar, centred column, pinned footer ------------------- */
.acct-auth__head {
	display: flex;
	flex: 0 0 auto;
	justify-content: center;
	padding: 2.5rem 1.25rem 1.25rem;
}

.acct-auth__brand { display: block; color: inherit; }
.acct-auth__brand img { display: block; width: 8.75rem; height: 1.375rem; }

.acct-auth__main {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	padding: 2.5rem 1.25rem;
}

.acct-auth__card { width: 100%; max-width: 23.6875rem; }

.acct-auth__foot {
	display: flex;
	flex: 0 0 auto;
	justify-content: center;
	padding: 1.25rem 0;
}

.acct-auth__policy { margin: 0; font-size: 0.875rem; line-height: 1.35; }
.acct-auth__policy a { color: rgb(19, 60, 209); text-decoration: none; }
.acct-auth__policy a:hover { text-decoration: underline; }

/* --- panels and steps ------------------------------------------------- */
.acct-auth[data-panel="login"] .acct-form--register,
.acct-auth[data-panel="register"] .acct-form--login { display: none; }

.acct-form--login[data-step="email"] [data-acct-step="password"],
.acct-form--login[data-step="password"] [data-acct-step="email"] { display: none; }

/* WooCommerce frames form.login / form.register as a bordered box; the
   card owns the framing here, so reset it. */
.acct-auth .acct-form.acct-form {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-align: left;
}

/* --- heading --------------------------------------------------------- */
.acct-auth__intro { display: flex; flex-direction: column; gap: 0.375rem; padding: 0 0 1.25rem; }
.acct-auth__title { margin: 0; color: #000; font-size: 1.375rem; font-weight: 600; line-height: 1.2; letter-spacing: 0; }
.acct-auth__sub { margin: 0; color: rgba(0, 0, 0, 0.56); font-size: 0.875rem; font-weight: 400; line-height: 1.35; }
.acct-step--password .acct-auth__sub { display: flex; align-items: baseline; gap: 0.875rem; }
.acct-auth__mail { overflow-wrap: anywhere; }
.acct-auth__change { flex: 0 0 auto; color: rgb(19, 60, 209); text-decoration: none; }
.acct-auth__change:hover { text-decoration: underline; }

/* --- Google button and "or" divider ---------------------------------- */
.acct-google { padding: 4rem 0 0; }

.acct-google__btn {
	display: grid;
	grid-template-columns: 1.5rem auto;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 3.0625rem;
	padding: 0.875rem;
	border: 1px solid #dedede;
	border-radius: 0.75rem;
	background: #fff;
	color: #000;
	text-decoration: none;
}

.acct-google__btn:hover { border-color: #c9c9c9; color: #000; }
.acct-google__btn svg { display: block; }
.acct-google__btn strong { font-size: 0.875rem; font-weight: 600; line-height: 1.35; }

.acct-or {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0.875rem 0;
	font-size: 0.875rem;
	line-height: 1.35;
}

.acct-or__label { color: rgba(0, 0, 0, 0.56); }

/* --- fields ---------------------------------------------------------- */
.acct-field { position: relative; margin: 0; }

.acct-field__box {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 2.5rem;
	align-items: center;
	height: 3.0625rem;
	border: 1px solid #dedede;
	border-radius: 0.75rem;
	background: #fff;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.acct-field__box:focus-within {
	border-color: rgb(19, 60, 209);
	box-shadow: 0 0 0 0.5px rgb(19, 60, 209);
}

.acct-field__label {
	position: absolute;
	top: 0.375rem;
	left: 0.6875rem;
	z-index: 1;
	color: #707070;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.35;
	pointer-events: none;
	opacity: 0;
	transform: translateY(3px);
	transition: all 0.2s ease-in-out;
}

.acct-field:has(.acct-field__input:not(:placeholder-shown)) .acct-field__label {
	opacity: 1;
	transform: none;
}

.acct-field__input {
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0.846875rem 0.625rem;
	transition: padding 0.2s ease-in-out;
	border: 0;
	border-radius: 0.75rem 0 0 0.75rem;
	background: transparent;
	color: #000;
	font-size: 0.875rem;
	line-height: 1.35;
	box-shadow: none;
	appearance: none;
}

.acct-field__input:focus { outline: 0; box-shadow: none; }

.acct-field:has(.acct-field__input:not(:placeholder-shown)) .acct-field__input { padding-top: 1.315625rem; padding-bottom: 0.378125rem; }

/* WooCommerce injects its strength meter + hint as siblings of the input, which
   lands them in the field grid's 2.5rem action column and squeezes the text one
   character per line. The source storefront has no password field at all. */
.acct-auth .woocommerce-password-strength,
.acct-auth .woocommerce-password-hint { display: none !important; }

.acct-field__go {
	grid-column: 2;
	grid-row: 1;
	display: inline-flex;
	align-self: center;
	justify-self: center;
	align-items: center;
	justify-content: center;
	width: 2.125rem;
	height: 2.1875rem;
	padding: 0 0.625rem;
	border: 0;
	border-radius: 0.75rem;
	background: #fff;
	color: #000;
	cursor: pointer;
}

.acct-field__go:hover { color: rgb(19, 60, 209); }
.acct-field__arrow { display: block; flex: 0 0 auto; width: 0.875rem; height: 0.875rem; }
.acct-field__arrow svg { display: block; width: 0.875rem; height: 0.875rem; max-width: none; }
.acct-field__go > svg.acct-field__spinner { display: none; }
.acct-field.is-busy .acct-field__arrow { display: none; }
.acct-field.is-busy .acct-field__go > svg.acct-field__spinner { display: block; animation: acct-spin 0.7s linear infinite; }
@keyframes acct-spin { to { transform: rotate(360deg); } }

/* --- consent checkbox and terms -------------------------------------- */
.acct-consent { margin: 0.875rem 0 0; }

.acct-check {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	color: #000;
	font-size: 0.875rem;
	line-height: 1.35;
	cursor: pointer;
}

.acct-check__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }

.acct-check__box {
	position: relative;
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.0625rem;
	border-radius: 0.5rem;
	background: #fff;
	box-shadow: inset 0 0 0 1px #dedede;
	color: transparent;
	transition: box-shadow 0.12s ease;
}

.acct-check__input:checked + .acct-check__box { box-shadow: inset 0 0 0 10px rgb(19, 60, 209); color: #fff; }
.acct-check__input:focus-visible + .acct-check__box { outline: 2px solid rgba(19, 60, 209, 0.3); outline-offset: 2px; }
.acct-check__box svg { display: block; width: 0.625rem; height: 0.625rem; }
.acct-check__text { min-width: 0; }

.acct-auth__terms { margin: 1.25rem 0 0; color: rgba(0, 0, 0, 0.56); font-size: 0.75rem; line-height: 1.35; }
.acct-auth__terms a { color: inherit; text-decoration: underline; }

.acct-form__aside { margin: 0.75rem 0 0; text-align: right; }
.acct-form__aside a { color: rgb(19, 60, 209); font-size: 0.875rem; text-decoration: none; }
.acct-form__aside a:hover { text-decoration: underline; }

.acct-form__switch { margin: 1.25rem 0 0; color: rgba(0, 0, 0, 0.56); font-size: 0.875rem; text-align: center; }
.acct-form__switch a { color: rgb(19, 60, 209); text-decoration: none; }
.acct-form__switch a:hover { text-decoration: underline; }

/* --- buttons --------------------------------------------------------- */
.acct-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 3.0625rem;
	padding: 0.875rem 1.25rem;
	border-radius: 0.75rem;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	cursor: pointer;
}

/* WooCommerce's `.woocommerce button.button` outranks a bare class name. */
.acct-auth .acct-form .acct-btn--primary {
	margin: 1.5rem 0 0;
	border: 1px solid rgb(19, 60, 209);
	background: rgb(19, 60, 209);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.acct-auth .acct-form .acct-btn--primary:hover {
	border-color: rgb(15, 48, 167);
	background: rgb(15, 48, 167);
	color: #fff;
}

/* --- notices --------------------------------------------------------- */
.acct-auth .woocommerce-notices-wrapper:not(:empty) { margin: 0 0 1.25rem; }
.acct-auth .woocommerce-error,
.acct-auth .woocommerce-message,
.acct-auth .woocommerce-info {
	margin: 0;
	padding: 0.75rem 0.9375rem;
	border: 1px solid #dedede;
	border-radius: 0.75rem;
	background: #f7f7f7;
	color: #000;
	font-size: 0.8125rem;
	line-height: 1.4;
	list-style: none;
}
.acct-auth .woocommerce-error { border-color: #e0b4b4; background: #fdf2f2; }
.acct-auth .woocommerce-error a,
.acct-auth .woocommerce-message a,
.acct-auth .woocommerce-info a { color: rgb(19, 60, 209); }

@media (min-width: 48rem) {
	.acct-auth__head { padding: 2.5rem 1.5rem 1.25rem; }
	.acct-auth__main { padding: 2.5rem 1.5rem; }
}

@media (max-width: 30rem) {
	.acct-auth__head { padding: 1.75rem 1.25rem 1rem; }
	.acct-auth__main { padding: 1.25rem; }
	.acct-google { padding-top: 2.5rem; }
}

/* --- account app (signed in) ----------------------------------------- */
.acct-page .acct-app {
	width: 100%;
	max-width: 72rem;
	margin: 0 auto;
	padding: 2rem var(--container-pad) 3.5rem;
}

@media (min-width: 48rem) {
	.acct-page .acct-app { padding-top: 3rem; padding-bottom: 4.5rem; }
}

/* WooCommerce floats the navigation at 30% and the content at 68%. The
   account shell owns the layout here, so both of those are reset. */
.woocommerce-account .acct-app .woocommerce-MyAccount-navigation,
.woocommerce-account .acct-app .woocommerce-MyAccount-content { float: none; width: auto; }

.acct-app__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
}

@media (min-width: 64rem) {
	.acct-app__grid { grid-template-columns: 15.5rem minmax(0, 1fr); gap: 3rem; align-items: start; }
}

.acct-app__side { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }

@media (min-width: 64rem) {
	.acct-app__side { position: sticky; top: 1.5rem; }
}

.acct-app__id {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	border: 1px solid var(--dark-navy-90);
	border-radius: 0.75rem;
	background: var(--brand-98);
}

.acct-app__avatar {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	background: var(--brand-35);
	color: #fff;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1;
}

.acct-app__who { display: flex; flex-direction: column; min-width: 0; }
.acct-app__name { overflow: hidden; color: var(--dark-navy-10); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.acct-app__email { overflow: hidden; color: var(--dark-navy-40); font-size: 0.8125rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }

.acct-nav { width: 100%; }
.acct-nav__list { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.acct-nav__item { margin: 0; }

.acct-nav__link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 2.75rem;
	padding: 0.625rem 0.75rem;
	border: 1px solid transparent;
	border-radius: 0.625rem;
	color: var(--dark-navy-20);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
}

.acct-nav__link:hover { background: var(--dark-navy-98); color: var(--dark-navy-10); }
.acct-nav__icon { display: inline-flex; flex: 0 0 auto; align-items: center; }
.acct-nav__item.is-active .acct-nav__link { background: var(--brand-95); color: var(--brand-30); }
.acct-nav__item.is-active .acct-nav__icon { color: var(--brand-35); }

@media (min-width: 64rem) {
	.acct-nav__item.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 0.5rem; }
}

/* Phones and tablets: the sidebar collapses into a swipeable pill bar. */
@media (max-width: 63.99rem) {
	.acct-app__grid { gap: 1rem; }

	.acct-nav__list {
		flex-direction: row;
		gap: 0.5rem;
		padding-bottom: 0.25rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.acct-nav__list::-webkit-scrollbar { display: none; }
	.acct-nav__item { flex: 0 0 auto; }

	.acct-nav__link {
		min-height: 2.75rem;
		padding: 0.5rem 0.9375rem;
		border-color: var(--dark-navy-90);
		border-radius: 999px;
		background: #fff;
		white-space: nowrap;
	}

	.acct-nav__item.is-active .acct-nav__link { border-color: var(--brand-35); }
	.acct-nav__item.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 0; }
}

.acct-app__main { min-width: 0; }

/* --- panels ----------------------------------------------------------- */
.acct-panel__title { margin: 0 0 0.375rem; color: var(--dark-navy-10); font-size: 1.75rem; font-weight: 600; line-height: 1.2; }
.acct-panel__lead { margin: 0 0 1.5rem; color: var(--dark-navy-30); font-size: 0.9375rem; line-height: 1.55; }

@media (min-width: 48rem) {
	.acct-panel__title { font-size: 2rem; }
}

.acct-empty {
	padding: 2rem 1.25rem;
	border: 1px dashed var(--dark-navy-80);
	border-radius: 0.75rem;
	background: var(--dark-navy-98);
	text-align: center;
}

.acct-empty__text { margin: 0 0 1.25rem; color: var(--dark-navy-30); font-size: 0.9375rem; }
.acct-empty .acct-btn--primary { display: inline-flex; }

/* --- orders ----------------------------------------------------------- */
.acct-orders__list { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; list-style: none; }

.acct-order {
	padding: 1.25rem;
	border: 1px solid var(--dark-navy-90);
	border-radius: 0.75rem;
	background: #fff;
}

.acct-order__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.625rem; margin-bottom: 1rem; }
.acct-order__num { color: var(--dark-navy-10); font-size: 1.0625rem; font-weight: 600; text-decoration: none; }
.acct-order__num:hover { text-decoration: underline; }

.acct-order__status {
	display: inline-flex;
	align-items: center;
	padding: 0.3125rem 0.6875rem;
	border-radius: 999px;
	background: var(--dark-navy-95);
	color: var(--dark-navy-20);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.acct-order__status--pending { background: var(--brand-95); color: var(--brand-30); }
.acct-order__status--processing,
.acct-order__status--on-hold { background: #fff3d6; color: #7a5500; }
.acct-order__status--completed { background: #e4f5ea; color: #1b6b3a; }
.acct-order__status--cancelled,
.acct-order__status--failed,
.acct-order__status--refunded { background: #fdecec; color: #9b2c2c; }

.acct-order__meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.875rem; margin: 0 0 1.25rem; }
.acct-order__meta dt { margin: 0 0 0.1875rem; color: var(--dark-navy-40); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.acct-order__meta dd { margin: 0; color: var(--dark-navy-10); font-size: 0.9375rem; line-height: 1.45; }
.acct-order__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

@media (min-width: 40rem) {
	.acct-order { padding: 1.5rem; }
	.acct-order__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- buttons ---------------------------------------------------------- */
.acct-btn--sm { width: auto; min-height: 2.75rem; padding: 0.625rem 1.125rem; font-size: 0.9375rem; }
.acct-btn--ghost { border: 1px solid var(--dark-navy-80); background: #fff; color: var(--dark-navy-10); }
.acct-btn--ghost:hover { border-color: var(--dark-navy-30); background: var(--dark-navy-98); color: var(--dark-navy-10); }
.acct-app__main .acct-btn--primary,
.acct-order .acct-btn--primary { border: 1px solid rgb(19, 60, 209); background: rgb(19, 60, 209); color: #fff; }
.acct-app__main .acct-btn--primary:hover,
.acct-order .acct-btn--primary:hover { border-color: rgb(15, 48, 167); background: rgb(15, 48, 167); color: #fff; }

/* --- content typography ---------------------------------------------- */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 { color: var(--dark-navy-10); font-size: 1.25rem; font-weight: 600; }
.woocommerce-MyAccount-content h2:first-child,
.woocommerce-MyAccount-content h3:first-child { margin-top: 0; }
.woocommerce-MyAccount-content p { color: var(--dark-navy-20); font-size: 0.9375rem; line-height: 1.55; }
.woocommerce-MyAccount-content a { color: var(--brand-35); }
.woocommerce-MyAccount-content address { font-style: normal; }

/* --- notices --------------------------------------------------------- */
.woocommerce-MyAccount-content .woocommerce-error,
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--dark-navy-90);
	border-radius: 0.75rem;
	background: var(--dark-navy-98);
	color: var(--dark-navy-10);
	font-size: 0.9375rem;
	line-height: 1.5;
	list-style: none;
}

.woocommerce-MyAccount-content .woocommerce-error { border-color: #e6bfbf; background: #fdf2f2; }

/* --- addresses ------------------------------------------------------- */
/* WooCommerce ships float based .col2-set markup plus :before/:after clearfix
   nodes; inside our grid those become real cells and knock the two cards out of
   line, and .col-1/.col-2 keep a 48% width that lands on 181px. Neutralise all
   of it so the cards behave as plain, equal grid items. */
.woocommerce-MyAccount-content .woocommerce-Addresses {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	align-items: stretch;
}

.woocommerce-MyAccount-content .woocommerce-Addresses::before,
.woocommerce-MyAccount-content .woocommerce-Addresses::after { display: none; content: none; }

@media (min-width: 48rem) {
	.woocommerce-MyAccount-content .woocommerce-Addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.woocommerce-MyAccount-content .woocommerce-Address,
.woocommerce-MyAccount-content .woocommerce-Addresses .col-1,
.woocommerce-MyAccount-content .woocommerce-Addresses .col-2,
.woocommerce-MyAccount-content .woocommerce-Addresses .u-column1,
.woocommerce-MyAccount-content .woocommerce-Addresses .u-column2 {
	float: none;
	width: auto;
	max-width: none;
	clear: none;
}

.woocommerce-MyAccount-content .woocommerce-Address {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	border: 1px solid var(--dark-navy-90);
	border-radius: 0.75rem;
	background: #fff;
}

/* The same clearfix pseudo-elements also sit inside the card header; as flex
   items they each eat a column gap, indenting the title and the edit link. */
.woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address-title::before,
.woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address-title::after { display: none; content: none; }

.woocommerce-MyAccount-content .woocommerce-Address-title {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.375rem 1rem;
	margin: 0 0 0.875rem;
	padding: 0 0 0.875rem;
	border-bottom: 1px solid var(--dark-navy-95);
}

.woocommerce-MyAccount-content .woocommerce-Address-title h3,
.woocommerce-MyAccount-content .woocommerce-Address-title h2 { margin: 0; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* WooCommerce ships `.woocommerce-account .addresses .title .edit{float:right}`
   (4 classes) which outranks a 3-class selector, so match its specificity. */
.woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address-title .edit {
	float: none;
	color: var(--brand-35);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}

.woocommerce-MyAccount-content .woocommerce-Address-title .edit:hover { text-decoration: underline; }

.woocommerce-MyAccount-content .woocommerce-Address address { margin: 0; color: var(--dark-navy-30); font-size: 0.9375rem; line-height: 1.7; }

.woocommerce-MyAccount-content .woocommerce-Address address br { line-height: 1.7; }

@media (max-width: 47.99rem) {
	.woocommerce-MyAccount-content .woocommerce-Address-title .edit { font-size: 0.875rem; }
}

/* --- forms ----------------------------------------------------------- */
.woocommerce-MyAccount-content form .form-row { margin: 0 0 1.25rem; padding: 0; }
.woocommerce-MyAccount-content form .form-row label { display: block; margin: 0 0 0.4375rem; color: var(--dark-navy-20); font-size: 0.875rem; font-weight: 500; }
.woocommerce-MyAccount-content form .form-row .required { color: #c0392b; text-decoration: none; }

.woocommerce-MyAccount-content form .form-row input.input-text,
.woocommerce-MyAccount-content form .form-row select,
.woocommerce-MyAccount-content form .form-row textarea,
.woocommerce-MyAccount-content .select2-container .select2-selection {
	width: 100%;
	min-height: 3rem;
	padding: 0.75rem 1rem;
	border: 1px solid #dedede;
	border-radius: 0.75rem;
	background: #fff;
	color: #000;
	font-size: 0.9375rem;
	line-height: 1.4;
	box-shadow: none;
}

.woocommerce-MyAccount-content form .form-row input.input-text:focus,
.woocommerce-MyAccount-content form .form-row select:focus,
.woocommerce-MyAccount-content form .form-row textarea:focus {
	border-color: rgb(19, 60, 209);
	outline: 0;
	box-shadow: 0 0 0 0.5px rgb(19, 60, 209);
}

/* iOS Safari zooms the page when a focused control is under 16px. */
@media (max-width: 47.99rem) {
	.woocommerce-MyAccount-content form .form-row input.input-text,
	.woocommerce-MyAccount-content form .form-row select,
	.woocommerce-MyAccount-content form .form-row textarea { font-size: 1rem; }
	.woocommerce-MyAccount-content fieldset { padding: 1rem; }
}

.woocommerce-MyAccount-content form .form-row-first,
.woocommerce-MyAccount-content form .form-row-last { width: 100%; float: none; }

@media (min-width: 40rem) {
	.woocommerce-MyAccount-content form .form-row-first,
	.woocommerce-MyAccount-content form .form-row-last { width: calc(50% - 0.625rem); float: left; }
	.woocommerce-MyAccount-content form .form-row-last { float: right; }
	.woocommerce-MyAccount-content form .form-row-wide + .form-row-first { clear: both; }
}

/* Address forms: WooCommerce floats the first/last name pair and renders the
   optional "Apartment" field with a screen-reader-only label, so its row ends
   up 35px shorter and nothing lines up. Lay the wrapper out as a grid and
   bottom-align every control so all inputs share one baseline per row. */
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	grid-auto-rows: minmax(5.1875rem, auto);
	align-items: stretch;
}

@media (min-width: 40rem) {
	.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > .form-row {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	float: none;
	width: auto;
	max-width: none;
	clear: none;
	margin: 0;
}

.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > .form-row-wide { grid-column: 1 / -1; }
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper > .form-row > label { margin: 0 0 0.4375rem; }
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper .woocommerce-input-wrapper { display: block; width: 100%; }

/* one control height for text inputs, selects and select2 so rows match */
.woocommerce-MyAccount-content .woocommerce-address-fields .input-text,
.woocommerce-MyAccount-content .woocommerce-address-fields select,
.woocommerce-MyAccount-content .woocommerce-address-fields .select2-selection--single {
	height: 3rem;
	min-height: 3rem;
	box-sizing: border-box;
}

.woocommerce-MyAccount-content .woocommerce-address-fields .select2-container { height: 3rem; }
.woocommerce-MyAccount-content .woocommerce-address-fields .select2-selection--single .select2-selection__rendered { line-height: 1.4; padding: 0.75rem 2.25rem 0.75rem 1rem; }
.woocommerce-MyAccount-content .woocommerce-address-fields .select2-selection--single .select2-selection__arrow { height: 100%; }

.woocommerce-MyAccount-content .woocommerce-address-fields > p { margin: 1.5rem 0 0; }

.woocommerce-MyAccount-content form::after { display: block; clear: both; content: ""; }
.woocommerce-MyAccount-content fieldset { margin: 0 0 1.5rem; padding: 1.25rem; border: 1px solid var(--dark-navy-90); border-radius: 0.75rem; }
.woocommerce-MyAccount-content fieldset legend { padding: 0 0.375rem; color: var(--dark-navy-10); font-size: 1rem; font-weight: 600; }

.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content button.button,
.woocommerce-MyAccount-content .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.75rem 1.5rem;
	border: 1px solid rgb(19, 60, 209);
	border-radius: 0.75rem;
	background: rgb(19, 60, 209);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.woocommerce-MyAccount-content .woocommerce-Button:hover,
.woocommerce-MyAccount-content button.button:hover,
.woocommerce-MyAccount-content .button:hover { border-color: rgb(15, 48, 167); background: rgb(15, 48, 167); color: #fff; }

.woocommerce-MyAccount-content .acct-order__actions .button + .button,
.woocommerce-MyAccount-content .acct-order__actions .button { margin: 0; }

/* --- order detail ---------------------------------------------------- */
.woocommerce-MyAccount-content .woocommerce-order-details,
.woocommerce-MyAccount-content .woocommerce-customer-details { margin: 0 0 2rem; }
.woocommerce-MyAccount-content .woocommerce-order-details__title,
.woocommerce-MyAccount-content .woocommerce-column__title { margin: 0 0 0.75rem; color: var(--dark-navy-10); font-size: 1.125rem; font-weight: 600; }
.woocommerce-MyAccount-content .woocommerce-customer-details address { padding: 1.25rem; border: 1px solid var(--dark-navy-90); border-radius: 0.75rem; background: #fff; }

.woocommerce-MyAccount-content .woocommerce-columns--addresses,
.woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }

@media (min-width: 48rem) {
	.woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-column--col-1 { float: none; width: auto; }
	.woocommerce-MyAccount-content .woocommerce-customer-details .woocommerce-column--col-2 { float: none; width: auto; }
}

/* --- pagination ------------------------------------------------------ */
.woocommerce-MyAccount-content .woocommerce-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }

/* --- legacy table fallback ------------------------------------------- */
.woocommerce-MyAccount-content .woocommerce-orders-table,
.woocommerce-MyAccount-content .shop_table {
	width: 100%;
	margin: 0 0 1.5rem;
	border: 1px solid var(--dark-navy-90);
	border-radius: 0.75rem;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: 0.9375rem;
}

.woocommerce-MyAccount-content .woocommerce-orders-table th,
.woocommerce-MyAccount-content .woocommerce-orders-table td,
.woocommerce-MyAccount-content .shop_table th,
.woocommerce-MyAccount-content .shop_table td {
	padding: 0.875rem 1rem;
	border: 0;
	border-bottom: 1px solid var(--dark-navy-93);
	text-align: left;
	vertical-align: middle;
}

.woocommerce-MyAccount-content .woocommerce-orders-table thead th,
.woocommerce-MyAccount-content .shop_table thead th {
	background: var(--dark-navy-98);
	color: var(--dark-navy-30);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.woocommerce-MyAccount-content .woocommerce-orders-table tbody tr:last-child td { border-bottom: 0; }
.woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions { white-space: nowrap; }
