/* ============================================================================
   SITE — global design system: base type, components, header, footer,
   motion, and the page sections built in Divi.

   Every value comes from tokens.css. Scope convention:
     `#page-container #et-boc …`  (two IDs) wherever a rule has to beat Divi's
     own module CSS — Divi scopes archive/CPT pages under `.et-db #et-boc .et-l`
     (one ID) and writes custom buttons as `body #page-container .et-db #et-boc
     .et-l .et_pb_button_N` — so two IDs plus one more class wins without
     !important. !important is used only against Divi declarations that carry
     !important themselves, and each is noted.
   ============================================================================ */


/* ============================================================================
   1. BASE
   Fonts, sizes, line height, text / heading / link colours are Divi settings
   (Theme Customizer defaults, overridden per module). Only what Divi has no
   setting for is here.
   ========================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--ink-600) var(--ink-900);
  scrollbar-width: thin;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings break into balanced lines, paragraphs avoid one-word last lines. */
:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }

/* Bold text reads a step brighter than body copy (Divi has no setting for
   <strong>). */
strong, b { color: var(--text-hi); font-weight: var(--fw-bold); }

::selection { background: var(--select-bg); color: var(--text-on-accent); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-900); }
::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: var(--r-pill); border: var(--bw-lg) solid var(--ink-900); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-500); }

img { max-width: 100%; height: auto; }

/* Inline body links: their colour is the Customizer link colour or a Text
   module's link setting; the underline's weight and offset have no setting. */
#page-container #et-boc .et_pb_text_inner :is(p, li, td, dd) > a:not([class]):not(nav a),
#page-container #et-boc .et_pb_text_inner > a:not([class]):not([href^="tel:"]),
#page-container #et-boc .et_pb_blurb_description :is(p, li) > a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: var(--bw);
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
#page-container #et-boc .et_pb_text_inner :is(p, li, td, dd) > a:not([class]):not(nav a):hover,
#page-container #et-boc .et_pb_text_inner > a:not([class]):not([href^="tel:"]):hover,
#page-container #et-boc .et_pb_blurb_description :is(p, li) > a:not([class]):hover {
  text-decoration-color: currentColor;
}

/* Divi gives every list in a Text module bullets and padding; component
   lists opt out. */
#page-container #et-boc :is(.spv-stats, .spv-checklist, .spv-footer-links, .spv-trust-mini, .spv-legal ul, .spv-chips ul, .spv-drawer__nav, .spv-search__results) {
  list-style: none;
  padding-left: 0;
}
#page-container #et-boc :is(.spv-stats, .spv-checklist, .spv-footer-links, .spv-trust-mini, .spv-legal ul, .spv-chips ul) li { list-style: none; }

/* Focus: one ring, everywhere, never removed without a replacement. */
:focus { outline: none; }
:focus-visible {
  outline: var(--bw-lg) solid var(--cyan-400) !important;
  outline-offset: 3px;
  border-radius: inherit;
}

/* Skip link. */
.spv-skip {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: var(--z-modal);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--violet-600);
  color: var(--text-on-accent);
  font: var(--fw-semibold) var(--fs-sm)/1 var(--font-body);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur-base) var(--ease-out);
}
.spv-skip:focus-visible { transform: none; }

.screen-reader-text:not(:focus) {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

html.spv-locked,
html.spv-locked body { overflow: hidden; }


/* ============================================================================
   2. COMPONENTS
   The small pieces inside Text modules (pills, eyebrows, stat chips, notes…)
   carry their look inline in the module's content, where a client edits it.
   Here only what an inline style cannot do: decoration drawn with ::before /
   ::after, hover and focus states, and changes at breakpoints — plus the few
   pieces that PHP or JavaScript print outside Divi.
   ========================================================================== */

/* Eyebrow: the short gradient dash before the label. */
.spv-eyebrow::before {
  content: "";
  width: var(--s-4);
  height: var(--bw-lg);
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  flex: none;
}
.spv-eyebrow--plain::before { display: none; }

/* Status dot (product stock line, printed by PHP). */
.spv-dot {
  width: var(--s-2);
  height: var(--s-2);
  border-radius: var(--r-pill);
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);
  flex: none;
}
.spv-dot--success { color: var(--success); background: var(--success); }
.spv-dot--danger  { color: var(--danger);  background: var(--danger); }

/* Icon tile printed by PHP (empty shop results). */
.spv-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--s-12);
  height: var(--s-12);
  border-radius: var(--r-md);
  border: var(--bw) solid var(--tint-cyan-line);
  background: var(--tint-cyan);
  color: var(--cyan-400);
  font-size: var(--fs-icon-lg);
}

/* Interactive card: hover lift + a gradient hairline that fades in. */
.spv-card-hover,
.spv-card--link {
  position: relative;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.spv-card-hover::after,
.spv-card--link::after {
  content: "";
  position: absolute;
  inset: calc(var(--bw) * -1);
  border-radius: inherit;
  padding: var(--bw);
  background: var(--grad-brand);
  -webkit-mask: var(--mask-fill) content-box, var(--mask-fill);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.spv-card-hover:hover,
.spv-card--link:hover,
.spv-card-hover:focus-within,
.spv-card--link:focus-within {
  transform: translateY(calc(var(--s-1) * -1));
  border-color: var(--line-hi);
  box-shadow: var(--shadow-3);
}
.spv-card-hover:hover::after,
.spv-card--link:hover::after,
.spv-card-hover:focus-within::after,
.spv-card--link:focus-within::after { opacity: 0.6; }

/* Stat chips: three across, one swipeable row on phones (§12). */
.spv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Check / cross lists: the tick or cross before each item. */
.spv-checklist li::before {
  content: "check";
  font-family: var(--font-icon);
  font-size: var(--fs-icon-sm);
  line-height: 1;
  margin-top: 3px;
  color: var(--success);
  flex: none;
}
.spv-checklist--no li::before { content: "close"; color: var(--danger); }

/* Hours mini-table and phone link as the store shortcodes print them (the
   pages carry the same table as plain text with its look inline). The size
   is the Text module's. */
.spv-hours { width: 100%; margin: 0; border: 0; border-collapse: collapse; }
.spv-hours th,
.spv-hours td {
  padding: var(--s-1) 0;
  border: 0;
  background: none;
  text-align: left;
  white-space: nowrap;
}
.spv-hours th { color: var(--text-low); font-weight: var(--fw-medium); padding-right: var(--s-3); }
.spv-hours td { color: var(--text-hi); font-weight: var(--fw-semibold); text-align: right; }

/* Phone links: a full-size tap target, underlined on hover. Font and colour
   are the Text module's Link settings. */
.spv-phone {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}
.spv-phone:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Ghost link with arrow ("View all products", search "See all results"). */
.spv-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  color: var(--text-hi);
  font: var(--fw-semibold) var(--fs-ui)/1 var(--font-body);
  text-decoration: none;
}
.spv-link::after {
  content: "arrow_forward";
  font-family: var(--font-icon);
  font-size: var(--fs-icon-sm);
  transition: transform var(--dur-base) var(--ease-out);
}
.spv-link:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--line-hover); }
.spv-link:hover::after { transform: translateX(var(--s-1)); }

/* Store colour carrier. */
.spv-store--chilliwack { --store-color: var(--store-chilliwack); --store-tint: var(--tint-cyan);   --store-line: var(--tint-cyan-line);   --store-fg: var(--text-on-cyan); }
.spv-store--abbotsford { --store-color: var(--store-abbotsford); --store-tint: var(--tint-violet); --store-line: var(--tint-violet-line); --store-fg: var(--ink-950); }


/* ============================================================================
   3. BUTTONS
   Divi Button modules: colour, background (or gradient), border, radius,
   type, padding and hover are the module's Button settings; shadows and the
   gradient's hover slide are its Advanced › Custom CSS. Here only what Divi
   has no setting for: the flex box that centres the label, the minimum
   height, the pressed and focus states.

   WooCommerce's buttons and the few button-styled links that PHP prints
   (.spv-btn) are outside Divi and keep the full component below.
   ========================================================================== */

#page-container #et-boc .et_pb_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--control-md);
  margin: 0;
  line-height: 1.2 !important;
  text-align: center;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
}
#page-container #et-boc .et_pb_button:active { transform: scale(0.98); }
#page-container #et-boc .et_pb_button:focus-visible {
  outline: var(--bw-lg) solid var(--cyan-400) !important;
  outline-offset: 3px;
}
#page-container #et-boc .et_pb_button.spv-btn--lg,
#page-container #et-boc .et_pb_button.spv-cta-primary,
#page-container #et-boc .et_pb_button.spv-cta-ghost { min-height: var(--control-lg); }
#page-container #et-boc .et_pb_button.spv-btn--sm { min-height: var(--control-sm); }

/* --- WooCommerce buttons and .spv-btn links -------------------------------- */
.spv-btn,
.woocommerce #page-container #et-boc a.button,
.woocommerce #page-container #et-boc button.button,
.woocommerce #page-container #et-boc input.button,
#page-container #et-boc .woocommerce a.button,
#page-container #et-boc .woocommerce button.button,
#page-container #et-boc .woocommerce input.button,
#page-container #et-boc .wc-block-components-button {
  --btn-bg: var(--ink-700);
  --btn-fg: var(--text-hi);
  --btn-line: var(--line-hi);
  --btn-shadow: var(--shadow-1);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--control-md);
  margin: 0;
  padding: 0 var(--s-5) !important;
  border: var(--bw) solid var(--btn-line) !important;
  border-radius: var(--r-md) !important;
  background: var(--btn-bg) !important;
  color: var(--btn-fg) !important;
  box-shadow: var(--btn-shadow);
  font-family: var(--font-body) !important;
  font-size: var(--fs-ui) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-align: center;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background-position var(--dur-slow) var(--ease-out), filter var(--dur-base) var(--ease-out);
}

.spv-btn:hover,
#page-container #et-boc .woocommerce a.button:hover,
#page-container #et-boc .woocommerce button.button:hover,
.woocommerce #page-container #et-boc a.button:hover,
.woocommerce #page-container #et-boc button.button:hover {
  --btn-bg: var(--ink-600);
  --btn-line: color-mix(in srgb, var(--line-focus) 50%, transparent);
  padding: 0 var(--s-5) !important;
}

.spv-btn:active,
#page-container #et-boc .woocommerce .button:active { transform: scale(0.98); }

.spv-btn:focus-visible,
#page-container #et-boc .woocommerce .button:focus-visible {
  outline: var(--bw-lg) solid var(--cyan-400) !important;
  outline-offset: 3px;
}

#page-container #et-boc .woocommerce .button:disabled,
#page-container #et-boc .woocommerce .button.disabled,
#page-container #et-boc .woocommerce .button[disabled] {
  opacity: 0.45 !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed;
}

/* Primary: gradient, lift, glow. */
.spv-btn.spv-btn--primary,
#page-container #et-boc .woocommerce .button.alt,
#page-container #et-boc .woocommerce button.single_add_to_cart_button,
#page-container #et-boc .woocommerce .checkout-button,
#page-container #et-boc .woocommerce #place_order,
.woocommerce #page-container #et-boc .button.alt,
.woocommerce #page-container #et-boc .checkout-button,
.woocommerce #page-container #et-boc #place_order {
  --btn-fg: var(--text-on-accent);
  --btn-line: transparent;
  --btn-shadow: var(--glow-violet);
  background: var(--grad-brand) !important;
  background-size: 200% 100% !important;
  background-position: 0% 50% !important;
}
.spv-btn.spv-btn--primary:hover,
#page-container #et-boc .woocommerce .button.alt:hover,
#page-container #et-boc .woocommerce button.single_add_to_cart_button:hover,
#page-container #et-boc .woocommerce .checkout-button:hover,
#page-container #et-boc .woocommerce #place_order:hover,
.woocommerce #page-container #et-boc .button.alt:hover,
.woocommerce #page-container #et-boc .checkout-button:hover,
.woocommerce #page-container #et-boc #place_order:hover {
  --btn-line: transparent;
  --btn-shadow: var(--glow-violet-hi);
  background-position: 100% 50% !important;
  transform: translateY(calc(var(--bw-lg) * -1));
}
.spv-btn.spv-btn--primary:active,
#page-container #et-boc .woocommerce .button.alt:active,
#page-container #et-boc .woocommerce button.single_add_to_cart_button:active { transform: scale(0.98); }

/* Store solid ("Call store", printed by the mobile drawer). */
.spv-btn.spv-btn--store-solid {
  --btn-bg: var(--store-color, var(--cyan-400));
  --btn-fg: var(--store-fg, var(--text-on-cyan));
  --btn-line: transparent;
}
.spv-btn.spv-btn--store-solid:hover {
  --btn-bg: var(--store-color, var(--cyan-400));
  --btn-line: transparent;
  filter: brightness(1.08);
  transform: translateY(calc(var(--bw-lg) * -1));
}

.spv-btn.spv-btn--sm { min-height: var(--control-sm); padding-inline: var(--s-3) !important; font-size: var(--fs-sm) !important; }
.spv-btn.spv-btn--lg { min-height: var(--control-lg); padding-inline: var(--s-7) !important; font-size: var(--fs-base) !important; }
.spv-btn.spv-btn--block { width: 100%; }

/* Loading: label hidden, spinner centred, width held. */
.spv-btn.is-loading,
#page-container #et-boc .woocommerce .button.loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.spv-btn.is-loading::before,
#page-container #et-boc .woocommerce .button.loading::before {
  content: "" !important;
  position: absolute;
  inset: 50% auto auto 50%;
  width: var(--s-4);
  height: var(--s-4);
  margin: calc(var(--s-2) * -1) 0 0 calc(var(--s-2) * -1);
  border: var(--bw-lg) solid var(--btn-fg, var(--text-hi));
  border-right-color: transparent;
  border-radius: var(--r-pill);
  animation: spv-spin 700ms linear infinite;
  display: block !important;
}
#page-container #et-boc .woocommerce .button.loading::after { display: none !important; }
@keyframes spv-spin { to { transform: rotate(360deg); } }

/* Added (WooCommerce toggles .added for a moment after an AJAX add). */
#page-container #et-boc .woocommerce .button.added::after {
  display: inline-block !important;
  content: "check" !important;
  position: static !important;
  margin: 0 !important;
  font-family: var(--font-icon) !important;
  font-size: var(--fs-icon-sm) !important;
  opacity: 1 !important;
}

/* Divi slides an ETmodules "›" into every Divi and WooCommerce button on
   hover (position:absolute; margin-left:-1em). In these flex buttons it
   landed in the middle of the label ("re›servation"). The button's own hover
   state says enough; Divi Button modules have "Show Button Icon" off. The
   deliberate icons (lookup phone icon, "added" tick, loading spinner) are set
   with two IDs and still win. */
body #page-container :is(.button, button.button, input.button, .checkout-button, .single_add_to_cart_button)::after {
  display: none !important;
}

/* Button groups: equal height, 12px gap, stack below 480px. */
.spv-btn-group { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.spv-btn-group > * { flex: 1 1 0; }
@media (max-width: 479px) { .spv-btn-group > * { flex-basis: 100%; } }

.et_pb_button_module_wrapper { line-height: 1; }


/* ============================================================================
   4. FORM CONTROLS (global; WooCommerce specifics in woocommerce.css)
   ========================================================================== */

/* WooCommerce's and the theme's own fields. The Divi Contact Form's fields
   take their colours, type, border and padding from the module's Fields
   settings; only their height, focus ring and placeholder colour are here. */
#page-container #et-boc input:is([type="text"], [type="email"], [type="tel"], [type="search"],
  [type="password"], [type="number"], [type="url"], [type="date"]):not(.et_pb_contact_form *),
#page-container #et-boc select:not(.et_pb_contact_form *),
#page-container #et-boc textarea:not(.et_pb_contact_form *),
.spv-input {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--input-h);
  padding: var(--s-3) var(--s-4) !important;
  border: var(--bw) solid var(--line-hi) !important;
  border-radius: var(--r-sm) !important;
  background-color: var(--ink-800) !important;
  color: var(--text-hi) !important;
  font: var(--fw-regular) var(--fs-base)/1.4 var(--font-body) !important;   /* 16px stops iOS zoom */
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
#page-container #et-boc textarea:not(.et_pb_contact_form *) { min-height: 140px; resize: vertical; }
#page-container #et-boc .et_pb_contact_form .input:not([type="radio"]):not([type="checkbox"]) {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--input-h);
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

#page-container #et-boc input::placeholder,
#page-container #et-boc textarea::placeholder,
.spv-input::placeholder { color: var(--text-low) !important; opacity: 1; }

#page-container #et-boc input:not([type="checkbox"]):not([type="radio"]):hover,
#page-container #et-boc select:hover,
#page-container #et-boc textarea:hover { border-color: var(--line-hover) !important; }

#page-container #et-boc input:not([type="checkbox"]):not([type="radio"]):focus,
#page-container #et-boc select:focus,
#page-container #et-boc textarea:focus,
.spv-input:focus {
  outline: none !important;
  border-color: var(--cyan-400) !important;
  box-shadow: var(--focus-halo) !important;
}

/* The select arrow — every select, the contact form's too (Divi has no
   setting for it). Room for it is added outside the contact form only;
   there the module's Fields › Padding setting decides. */
#page-container #et-boc select,
select.spv-input {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(168,179,199)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right var(--s-3) center !important;
  background-size: var(--fs-icon) !important;
  cursor: pointer;
}
#page-container #et-boc select:not(.et_pb_contact_form *),
select.spv-input { padding-right: var(--s-10) !important; }
#page-container #et-boc .et_pb_contact_field[data-type="select"]::after { display: none !important; }  /* Divi's own arrow */

/* The Divi Contact Form's option marks and labels, and its submit button's
   glow, are in the module's Advanced › Custom CSS › Free-Form CSS. */

/* Error state (Divi contact form + WooCommerce). */
#page-container #et-boc .et_contact_error,
#page-container #et-boc .woocommerce-invalid input,
#page-container #et-boc .woocommerce-invalid select { border-color: var(--danger) !important; }

/* Checkbox / radio: 20px, gradient when checked. */
#page-container #et-boc input:is([type="checkbox"], [type="radio"]):not(.et_pb_contact_field input) {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block !important;
  flex: none;
  width: var(--s-5) !important;   /* WooCommerce/Divi set checkbox width:auto */
  height: var(--s-5) !important;
  min-height: 0;
  padding: 0 !important;
  margin: 0 var(--s-2) 0 0;
  vertical-align: middle;
  border: var(--bw-md) solid var(--line-hover);
  border-radius: var(--s-1);
  background: var(--ink-800) no-repeat center / 70%;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
#page-container #et-boc input[type="radio"] { border-radius: var(--r-pill); }
#page-container #et-boc input[type="checkbox"]:checked,
#page-container #et-boc input[type="radio"]:checked {
  border-color: transparent;
  background-color: var(--violet-600);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"), var(--grad-brand);
  background-size: 70%, cover;
  background-position: center;
}
#page-container #et-boc input[type="checkbox"]:focus-visible,
#page-container #et-boc input[type="radio"]:focus-visible { outline: var(--bw-lg) solid var(--cyan-400) !important; outline-offset: 3px; }

#page-container #et-boc label:not(.et_pb_contact_form *) { color: var(--text-mid); font-size: var(--fs-sm); font-weight: var(--fw-medium); }


/* ============================================================================
   5. COMPLIANCE BARS (Theme Builder header, post 40)
   Background, borders, padding, font, size, colour, spacing and alignment are
   the sections' and Text modules' Divi settings. Only what Divi has no
   setting for is here.
   ========================================================================== */

#page-container #et-boc .spv-tb-compliance .et_pb_text_inner { text-wrap: balance; }
#page-container #et-boc .spv-tb-compliance .et_pb_text_inner::before {
  content: "shield";
  display: inline-block;
  margin-right: var(--s-2);
  vertical-align: -0.28em;
  font-family: var(--font-icon);
  font-size: var(--fs-icon-sm);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
}


/* ============================================================================
   6. HEADER (Theme Builder header section `.spv-tb-header`, Divi Menu module)
   The section's glass background, border, blur and z-index, the Menu
   module's fonts, link / hover / active / dropdown colours, icon colours and
   logo height are Divi settings. What follows is behaviour and geometry Divi
   has no setting for. Divi's sticky setting keeps the section fixed once
   scrolled past and leaves a placeholder, so shrinking the stuck header never
   shifts the page.
   ========================================================================== */

#page-container #et-boc .spv-tb-header.et_pb_section { transition: box-shadow var(--dur-base) var(--ease-out); }
#page-container #et-boc .spv-tb-header.et_pb_sticky { box-shadow: var(--shadow-3); }

#page-container #et-boc .spv-tb-header .et_pb_menu_inner_container {
  display: flex;
  align-items: center;
  min-height: var(--header-h);
  transition: min-height var(--dur-base) var(--ease-out);
}
#page-container #et-boc .spv-tb-header.et_pb_sticky .et_pb_menu_inner_container { min-height: var(--header-h-scrolled); }

/* Logo. */
#page-container #et-boc .spv-tb-header .et_pb_menu__logo-wrap { flex: none; margin-right: var(--s-8); }
#page-container #et-boc .spv-tb-header .et_pb_menu__logo a { display: inline-flex; align-items: center; min-height: var(--tap); }
#page-container #et-boc .spv-tb-header .et_pb_menu__logo img {
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}
#page-container #et-boc .spv-tb-header.et_pb_sticky .et_pb_menu__logo img { transform: scale(0.9); }

/* Nav right-aligned, then a hairline divider, then search + cart. */
#page-container #et-boc .spv-tb-header .et_pb_menu__wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-1);
}
#page-container #et-boc .spv-tb-header .et_pb_menu__menu { display: flex; order: 1; }
#page-container #et-boc .spv-tb-header .et_pb_menu__search-button { order: 2; }
#page-container #et-boc .spv-tb-header .et_pb_menu__cart-button { order: 3; }
#page-container #et-boc .spv-tb-header .et_mobile_nav_menu { order: 4; }

#page-container #et-boc .spv-tb-header .et_pb_menu__menu::after {
  content: "";
  align-self: center;
  width: var(--bw);
  height: var(--s-6);
  margin: 0 var(--s-3) 0 var(--s-4);
  background: var(--line-hi);
}

#page-container #et-boc .spv-tb-header .et-menu {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin: 0;
}
#page-container #et-boc .spv-tb-header .et-menu > li {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 !important;
}

/* Nav link box: 44px tall target, 12px side padding (no Divi setting). */
#page-container #et-boc .spv-tb-header .et_pb_menu .et-menu > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: var(--tap);
  padding: 0 var(--s-3) !important;
  text-decoration: none;
}
/* Gradient underline that grows from the centre on hover / current page. */
#page-container #et-boc .spv-tb-header .et_pb_menu .et-menu > li > a::before {
  content: "";
  position: absolute;
  left: var(--s-3);
  right: var(--s-3);
  bottom: calc(50% - var(--s-5) + 1px);
  height: var(--bw-lg);
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}
/* States Divi's Menu module has no colour setting for: the parent of the
   current page (Shop on a product page), an open dropdown, keyboard focus. */
#page-container #et-boc .spv-tb-header .et_pb_menu .et-menu > li:focus-within > a,
#page-container #et-boc .spv-tb-header .et_pb_menu .et-menu > li.is-open > a,
#page-container #et-boc .spv-tb-header .et_pb_menu .et-menu > li.current-menu-ancestor > a,
#page-container #et-boc .spv-tb-header .et_pb_menu .et-menu > li.current_page_parent > a {
  color: var(--text-hi) !important;   /* Divi writes the link colour with !important */
}
#page-container #et-boc .spv-tb-header .et_pb_menu .et-menu > li > a:hover::before,
#page-container #et-boc .spv-tb-header .et_pb_menu .et-menu > li.current-menu-item > a::before,
#page-container #et-boc .spv-tb-header .et_pb_menu .et-menu > li.current-menu-ancestor > a::before,
#page-container #et-boc .spv-tb-header .et_pb_menu .et-menu > li.current_page_parent > a::before { transform: scaleX(1); }
#page-container #et-boc .spv-tb-header .et_pb_menu .et-menu > li > a:focus-visible { border-radius: var(--r-sm); outline-offset: 4px; }

/* Shop chevron. Divi prints ETmodules "3", whose glyph sits high in its box,
   so it floated above the label; the site's own chevron replaces it and is
   centred on the text by the link's flex alignment. */
#page-container #et-boc .spv-tb-header .et-menu > li.menu-item-has-children > a::after {
  content: "expand_more" !important;
  position: static !important;
  display: inline-block;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  top: auto !important;
  right: auto !important;
  font-family: var(--font-icon) !important;
  font-size: var(--fs-icon) !important;
  font-weight: var(--fw-regular);
  line-height: 1 !important;
  transform: none !important;   /* Divi: translateY(-50%) for its absolutely placed glyph */
  transition: transform var(--dur-base) var(--ease-out);
}
#page-container #et-boc .spv-tb-header .et-menu > li.menu-item-has-children:hover > a::after,
#page-container #et-boc .spv-tb-header .et-menu > li.menu-item-has-children.is-open > a::after,
#page-container #et-boc .spv-tb-header .et-menu > li.menu-item-has-children:focus-within > a::after { transform: rotate(180deg) !important; }
#page-container #et-boc .spv-tb-header .et-menu > li.menu-item-has-children.is-closed > a::after { transform: none !important; }
#page-container #et-boc .spv-tb-header .et-menu > li.menu-item-has-children > a { padding-right: var(--s-2) !important; }

/* Dropdown panel: shape, shadow and motion (its background, border colour
   and text colours are the Menu module's dropdown settings). Opens on
   hover/focus/click with a 150ms hover-intent delay on close. */
#page-container #et-boc .spv-tb-header .et-menu li.menu-item-has-children { position: relative; }
#page-container #et-boc .spv-tb-header .et-menu li > ul.sub-menu {
  position: absolute;
  top: calc(100% + var(--s-2));
  left: calc(var(--s-2) * -1);
  z-index: var(--z-dropdown);
  display: block !important;
  width: auto;
  min-width: var(--w-dropdown);
  margin: 0;
  padding: var(--s-2) !important;
  border-width: var(--bw) !important;   /* Divi: a 3px top rule only */
  border-style: solid !important;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(calc(var(--s-2) * -0.75));
  pointer-events: none;
  animation: none !important;
  transition:
    opacity var(--dur-base) var(--ease-out) var(--dur-hover-intent),
    transform var(--dur-base) var(--ease-out) var(--dur-hover-intent),
    visibility 0s linear calc(var(--dur-base) + var(--dur-hover-intent));
}
/* Invisible bridge across the gap so the pointer can travel into the panel. */
#page-container #et-boc .spv-tb-header .et-menu li > ul.sub-menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--s-3) * -1);
  height: var(--s-3);
}
#page-container #et-boc .spv-tb-header .et-menu li.menu-item-has-children:hover > ul.sub-menu,
#page-container #et-boc .spv-tb-header .et-menu li.menu-item-has-children:focus-within > ul.sub-menu,
#page-container #et-boc .spv-tb-header .et-menu li.menu-item-has-children.is-open > ul.sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
}
#page-container #et-boc .spv-tb-header .et-menu li.menu-item-has-children.is-closed > ul.sub-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

#page-container #et-boc .spv-tb-header .et-menu .sub-menu li {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 !important;
}
#page-container #et-boc .spv-tb-header .et_pb_menu .et-menu .sub-menu li a {
  display: flex !important;
  align-items: center;
  gap: var(--s-3);
  width: 100% !important;
  min-height: var(--s-10);
  padding: var(--s-2) var(--s-3) !important;
  border-radius: var(--r-sm);
  line-height: 1.3;
  background: transparent;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
/* Row highlight (no Divi setting for a dropdown item background). Divi dims
   a hovered dropdown link to 70% (it only undoes that for the top level). */
#page-container #et-boc .spv-tb-header .et_pb_menu .et-menu .sub-menu li a:hover,
#page-container #et-boc .spv-tb-header .et_pb_menu .et-menu .sub-menu li a:focus-visible,
#page-container #et-boc .spv-tb-header .et_pb_menu .et-menu .sub-menu li.current-menu-item a { background: var(--ink-600); opacity: 1; }
#page-container #et-boc .spv-tb-header .et_pb_menu .et-menu .sub-menu li a:focus-visible { color: var(--text-hi) !important; outline-offset: -2px; }

/* Category icon before each dropdown item (menu-item classes spv-mi-*). */
#page-container #et-boc .spv-tb-header .et-menu .sub-menu li[class*="spv-mi-"] > a::before {
  content: "";
  flex: none;
  width: var(--fs-icon);
  height: var(--fs-icon);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 200%;
  transition: transform var(--dur-fast) var(--ease-out);
}
#page-container #et-boc .spv-tb-header .et-menu .sub-menu li[class*="spv-mi-"] > a:hover::before { transform: translateX(2px); }
.spv-mi-disposables > a::before { background-image: url("../img/icons/categories/disposables.svg"); }
.spv-mi-pod-systems > a::before { background-image: url("../img/icons/categories/pod-systems.svg"); }
.spv-mi-e-liquids   > a::before { background-image: url("../img/icons/categories/e-liquids.svg"); }
.spv-mi-coils-pods  > a::before { background-image: url("../img/icons/categories/coils-pods.svg"); }
.spv-mi-mods-kits   > a::before { background-image: url("../img/icons/categories/mods-kits.svg"); }
.spv-mi-accessories > a::before { background-image: url("../img/icons/categories/accessories.svg"); }

/* "Shop all products →" closes the list under a divider. */
#page-container #et-boc .spv-tb-header .et-menu .sub-menu li.spv-mi-all {
  margin-top: var(--s-2) !important;
  padding-top: var(--s-2) !important;
  border-top: var(--bw) solid var(--line);
}
#page-container #et-boc .spv-tb-header .et_pb_menu .et-menu .sub-menu li.spv-mi-all a { color: var(--text-hi) !important; font-weight: var(--fw-semibold) !important; }
#page-container #et-boc .spv-tb-header .et_pb_menu .et-menu .sub-menu li.spv-mi-all a::after {
  content: "arrow_forward";
  margin-left: auto;
  font-family: var(--font-icon);
  font-size: var(--fs-icon-sm);
  transition: transform var(--dur-fast) var(--ease-out);
}
#page-container #et-boc .spv-tb-header .et_pb_menu .et-menu .sub-menu li.spv-mi-all a:hover::after { transform: translateX(var(--s-1)); }

/* Icon buttons: matching 20px stroke icons in 40px round buttons (their
   colour is the Menu module's cart / search icon colour setting). */
#page-container #et-boc .spv-tb-header .et_pb_menu__icon {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--icon-btn) !important;
  height: var(--icon-btn);
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  font-size: 0 !important;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
#page-container #et-boc .spv-tb-header .et_pb_menu__icon::after {
  content: "" !important;
  display: block;
  width: var(--fs-icon);
  height: var(--fs-icon);
  background: currentColor;
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}
#page-container #et-boc .spv-tb-header .et_pb_menu__cart-button {
  --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E");
}
#page-container #et-boc .spv-tb-header .et_pb_menu__search-button {
  --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}
/* Hover disc (no Divi setting for an icon hover background or colour). */
#page-container #et-boc .spv-tb-header .et_pb_menu__icon:hover,
#page-container #et-boc .spv-tb-header .et_pb_menu__icon[aria-expanded="true"] {
  background: var(--ink-600);
  color: var(--text-hi) !important;
}

/* Cart count badge (inserted and kept current by main.js + a Woo fragment). */
.spv-cart-count {
  position: absolute;
  top: calc(var(--s-1) * -0.5);
  right: calc(var(--s-1) * -0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--badge);
  height: var(--badge);
  padding: 0 var(--s-1);
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  color: var(--text-on-accent);
  font: var(--fw-bold) var(--fs-eyebrow)/1 var(--font-body);
  box-shadow: 0 0 0 var(--bw-lg) var(--ink-900);
  pointer-events: none;
}
.spv-cart-count[data-count="0"] { display: none; }
.spv-cart-count.is-bumped { animation: spv-bump var(--dur-slow) var(--ease-out); }
@keyframes spv-bump { 0% { transform: scale(1); } 40% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* Divi's inline search container is replaced by the overlay (main.js). */
#page-container #et-boc .spv-tb-header .et_pb_menu__search-container { display: none !important; }

/* Mobile trigger (inserted by main.js; hidden until the mobile breakpoint). */
.spv-burger {
  display: none;
  position: relative;
  width: var(--tap);
  height: var(--tap);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-hi);
  cursor: pointer;
}
.spv-burger:hover { background: var(--ink-600); }
.spv-burger span {
  position: absolute;
  left: calc(50% - var(--s-2) - var(--s-1) / 2);
  width: calc(var(--s-5));
  height: var(--bw-lg);
  border-radius: var(--r-pill);
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.spv-burger span:nth-child(1) { top: calc(50% - 7px); }
.spv-burger span:nth-child(2) { top: calc(50% - 1px); }
.spv-burger span:nth-child(3) { top: calc(50% + 5px); }
.spv-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.spv-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.spv-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1023px) {
  html.js #page-container #et-boc .spv-tb-header .et_pb_menu__menu,
  html.js #page-container #et-boc .spv-tb-header .et_pb_menu__search-button,
  html.js #page-container #et-boc .spv-tb-header .et_mobile_nav_menu { display: none !important; }
  html.js .spv-burger { display: inline-flex; align-items: center; justify-content: center; order: 5; }
  #page-container #et-boc .spv-tb-header .et_pb_menu__wrap { gap: var(--s-2); }
  #page-container #et-boc .spv-tb-header .et_pb_menu__logo-wrap { margin-right: auto; }
  #page-container #et-boc .spv-tb-header .et_pb_menu_inner_container { min-height: var(--header-h-scrolled); }
}


/* ============================================================================
   7. SEARCH OVERLAY (markup from functions.php, behaviour in main.js)
   ========================================================================== */

.spv-search[hidden],
.spv-drawer[hidden],
.spv-scrim[hidden] { display: none !important; }

.spv-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--scrim);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.spv-scrim.is-open { opacity: 1; }

/* The search overlay and the mobile panel sit outside Divi's content: their
   text keeps the body's unitless line height (Divi's Customizer writes the
   body's in em, which would reach them as a fixed 26.4px). */
.spv-search,
.spv-drawer { line-height: var(--lh-body); }
.spv-search {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--spv-header-bottom, var(--header-h));
  z-index: calc(var(--z-overlay) + 1);
  max-height: calc(100vh - var(--spv-header-bottom, var(--header-h)));
  overflow-y: auto;
  padding: var(--s-6) var(--gutter) var(--s-8);
  background: var(--ink-800);
  border-top: var(--bw) solid var(--line);
  border-bottom: var(--bw) solid var(--line-hi);
  box-shadow: var(--shadow-3);
  opacity: 0;
  transform: translateY(calc(var(--s-2) * -1));
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.spv-search.is-open { opacity: 1; transform: none; }
.spv-search__inner { max-width: var(--w-search); margin: 0 auto; }
.spv-search__form { position: relative; display: flex; align-items: center; gap: var(--s-3); }
.spv-search__form::before {
  content: "search";
  position: absolute;
  left: var(--s-5);
  font-family: var(--font-icon);
  font-size: var(--fs-icon-lg);
  color: var(--text-low);
  pointer-events: none;
}
.spv-search__input.spv-input {
  min-height: var(--s-14);
  padding-left: calc(var(--s-5) + var(--s-8)) !important;
  border-radius: var(--r-md) !important;
  font-size: var(--fs-search) !important;
}
.spv-search__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-mid);
  font: var(--fw-regular) var(--fs-icon-lg)/1 var(--font-icon);
  cursor: pointer;
}
.spv-search__close:hover { background: var(--ink-600); color: var(--text-hi); }
.spv-search__hint { margin: var(--s-3) 0 0; font-size: var(--fs-caption); color: var(--text-low); }
.spv-search__results { display: grid; gap: var(--s-1); margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.spv-search__results:empty { display: none; }
.spv-search__result a {
  display: grid;
  grid-template-columns: var(--s-12) 1fr auto;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--s-16);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  color: var(--text-hi);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.spv-search__result a:hover,
.spv-search__result a:focus-visible { background: var(--ink-600); }
.spv-search__result img { width: var(--s-12); height: var(--s-12); border-radius: var(--r-sm); object-fit: cover; background: var(--ink-700); }
.spv-search__result-name { font-weight: var(--fw-semibold); font-size: var(--fs-ui); }
.spv-search__result-cat { display: block; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--cyan-400); }
.spv-search__result-price { font: var(--fw-bold) var(--fs-ui)/1 var(--font-display); color: var(--violet-300); }
.spv-search__all { margin-top: var(--s-4); }
.spv-search__empty { margin: var(--s-4) 0 0; color: var(--text-mid); }


/* ============================================================================
   8. MOBILE DRAWER (< 1024px)
   ========================================================================== */

.spv-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-overlay) + 2);
  display: flex;
  flex-direction: column;
  width: min(var(--w-drawer), 88vw);
  background: var(--ink-800);
  border-left: var(--bw) solid var(--line-hi);
  box-shadow: var(--shadow-3);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.spv-drawer.is-open { transform: none; }
.spv-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: var(--header-h-scrolled);
  padding: 0 var(--s-3) 0 var(--s-5);
  border-bottom: var(--bw) solid var(--line);
}
.spv-drawer__head img { height: var(--s-8); width: auto; }
.spv-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: var(--s-4) var(--s-5) var(--s-6); overscroll-behavior: contain; }
.spv-drawer__search { margin-bottom: var(--s-4); }
.spv-drawer__nav { margin: 0; padding: 0; list-style: none; }
.spv-drawer__nav > li { border-bottom: var(--bw) solid var(--line); }
.spv-drawer__nav a,
.spv-drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--s-14);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-hi);
  font: var(--fw-semibold) var(--fs-lg)/1.3 var(--font-body);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.spv-drawer__nav a[aria-current="page"] { color: var(--cyan-400); }
.spv-drawer__toggle::after {
  content: "expand_more";
  font-family: var(--font-icon);
  font-size: var(--fs-icon-lg);
  color: var(--text-mid);
  transition: transform var(--dur-base) var(--ease-out);
}
.spv-drawer__toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.spv-drawer__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.spv-drawer__sub.is-open { grid-template-rows: 1fr; }
.spv-drawer__sub > ul { overflow: hidden; margin: 0; padding: 0 0 0 var(--s-3); list-style: none; }
.spv-drawer__sub a { min-height: var(--control-lg); font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--text-mid); justify-content: flex-start; gap: var(--s-3); }
.spv-drawer__sub a:hover { color: var(--text-hi); }
.spv-drawer__foot {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom));
  border-top: var(--bw) solid var(--line);
}
/* "Call a store" (printed by inc/chrome.php): the eyebrow look that Divi
   content carries inline. */
.spv-drawer .spv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  font: var(--fw-bold) var(--fs-eyebrow)/1.2 var(--font-body);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--cyan-400);
}
.spv-drawer .spv-eyebrow::before {
  content: "";
  width: var(--s-4);
  height: var(--bw-lg);
  border-radius: var(--r-pill);
  background: var(--grad-brand);
  flex: none;
}


/* ============================================================================
   9. FOOTER (Theme Builder footer, post 41)
   Background, spacing, fonts, colours, the warning box and the bottom rule
   are the section's, rows' and modules' Divi settings. Here: the column
   grid, the gradient hairline, link behaviour and the phone accordions.
   ========================================================================== */

#page-container #et-boc .spv-tb-footer.et_pb_section { position: relative; }
#page-container #et-boc .spv-tb-footer.et_pb_section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--bw);
  background: var(--hairline-grad);
}

/* Four columns ≥1024 (brand wider), two ≥600, one below. */
#page-container #et-boc .spv-footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8);
}
#page-container #et-boc .spv-footer-main::after { display: none; }
#page-container #et-boc .spv-footer-main > .et_pb_column { width: auto !important; margin: 0 !important; float: none; }
@media (min-width: 600px) {
  #page-container #et-boc .spv-footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-10) var(--s-8); }
}
@media (min-width: 1024px) {
  #page-container #et-boc .spv-footer-main { grid-template-columns: 4fr 2.6fr 2.6fr 2.4fr; }
}

/* Logo: a 44px tap target around the 40px mark, sitting on the text line
   (the space under it is part of the gap above the wordmark). */
#page-container #et-boc .spv-footer-logo { display: inline-block; }
#page-container #et-boc .spv-footer-logo a { display: inline-flex; min-height: var(--tap); align-items: center; }

/* Explore links: 44px targets, arrow slides in on hover. */
#page-container #et-boc .spv-footer-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: var(--tap);
  text-decoration: none;
}
#page-container #et-boc .spv-footer-links a::after {
  content: "arrow_forward";
  font-family: var(--font-icon);
  font-size: var(--fs-icon-sm);
  opacity: 0;
  transform: translateX(calc(var(--s-1) * -1));
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
#page-container #et-boc .spv-footer-links a:hover::after { opacity: 1; transform: none; }

#page-container #et-boc .spv-footer-warning p { text-wrap: balance; }

/* Bottom bar: © left, legal links right. */
.spv-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s-6); }
.spv-legal ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); margin: 0 !important; }
.spv-legal li { margin: 0 !important; padding: 0 !important; }
#page-container #et-boc .spv-legal a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  text-decoration: none;
}
#page-container #et-boc .spv-legal a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Store columns collapse into accordions on phones (main.js adds the toggle,
   which takes the heading's own font and colour). */
.spv-footer-acc__toggle {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--tap);
  justify-content: space-between;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.spv-footer-acc__toggle::after {
  content: "expand_more";
  font-family: var(--font-icon);
  font-size: var(--fs-icon);
  line-height: 1.2;
  letter-spacing: 0;
  transition: transform var(--dur-base) var(--ease-out);
}
.spv-footer-acc__toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.spv-footer-acc__panel[hidden] { display: none !important; }
@media (max-width: 599px) {
  #page-container #et-boc .spv-footer-store { border-bottom: var(--bw) solid var(--line); padding-bottom: var(--s-2); }
  #page-container #et-boc .spv-footer-main { gap: var(--s-4); }
  #page-container #et-boc .spv-footer-brand { margin-bottom: var(--s-4) !important; }
  .spv-legal { flex-direction: column; align-items: flex-start; }
}


/* ============================================================================
   10. MOTION — scroll reveal (main.js tags elements; only under html.js so
   content is visible if scripts fail).
   ========================================================================== */

html.js .spv-reveal {
  opacity: 0;
  transform: translateY(var(--s-4));
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * var(--dur-reveal-stagger));
}
html.js .spv-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity !important;
    transition-duration: var(--dur-fast) !important;
    transition-delay: 0s !important;
  }
  html.js .spv-reveal { transform: none; }
  .spv-card-hover:hover, .spv-card--link:hover,
  #page-container #et-boc .et_pb_button:hover,
  .spv-btn:hover { transform: none !important; }
}


/* ============================================================================
   11. LAYOUT
   Every row's width, gutter and spacing, and every section's padding and
   background, are Divi settings (Row / Section › Design). Divi 4 has no grid
   setting, so the card rows below lay their columns out as a CSS grid.
   ========================================================================== */

/* Grid rows: columns become grid items; Divi's float gutters and clearfix go. */
#page-container #et-boc .spv-grid-row,
#page-container #et-boc .spv-hero-row,
#page-container #et-boc .spv-store-row,
#page-container #et-boc .spv-cat-row,
#page-container #et-boc .spv-trust-row,
#page-container #et-boc .spv-id-row,
#page-container #et-boc .spv-lookup-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
}
#page-container #et-boc :is(.spv-grid-row, .spv-hero-row, .spv-store-row, .spv-cat-row, .spv-trust-row, .spv-id-row, .spv-lookup-row)::after { display: none; }
#page-container #et-boc :is(.spv-grid-row, .spv-hero-row, .spv-store-row, .spv-cat-row, .spv-trust-row, .spv-id-row, .spv-lookup-row) > .et_pb_column {
  width: auto !important;
  margin: 0 !important;
  float: none;
}


/* ============================================================================
   12. HOME
   ========================================================================== */

/* --- Hero -------------------------------------------------------------------
   The section's background, glows, padding and height, and every module's
   type, colour and spacing are Divi settings. Here: the two-column grid, the
   phone/tablet re-ordering (the image moves between the calls to action and
   the stat chips), the floating chip and spec card, the image frame's shape
   and the soft glow behind it. */
.home #page-container #et-boc .spv-hero-row { align-items: center; }
@media (min-width: 1024px) {
  .home #page-container #et-boc .spv-hero-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-16); }
}

#page-container #et-boc .spv-hero-copy {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: var(--s-6) var(--s-3);
}
#page-container #et-boc .spv-hero-copy > * { flex: 0 0 100%; }
#page-container #et-boc .spv-hero-copy > .et_pb_button_module_wrapper { flex: 0 0 auto; }

.spv-sec-hero .spv-stats { width: 100%; }

/* Media column: image with a soft glow behind it; the in-stock pill and the
   product card float over its lower-left edge. */
#page-container #et-boc .spv-hero-media {
  position: relative;
  isolation: isolate;
}
#page-container #et-boc .spv-hero-media::before {
  content: "";
  position: absolute;
  inset: 8% 4% 16%;
  z-index: -1;
  border-radius: var(--r-pill);
  background:
    radial-gradient(closest-side at 30% 40%, var(--violet-glow), transparent),
    radial-gradient(closest-side at 75% 70%, var(--glow-orb-cyan), transparent);
  filter: blur(40px);
  opacity: 0.6;
  animation: spv-float 8s var(--ease-in-out) infinite alternate;
}
@keyframes spv-float { to { transform: translate3d(4%, -6%, 0) scale(1.06); } }

#page-container #et-boc .spv-hero-image .et_pb_image_wrap {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
#page-container #et-boc .spv-hero-image img { width: 100%; height: 100%; object-fit: cover; }

/* The chip and the spec card sit over the image on desktop and drop into the
   flow below 1024px; their position and margins change with that layout, so
   they live here rather than in the modules' spacing settings. */
#page-container #et-boc .spv-hero-chip {
  position: absolute;
  top: var(--s-6);
  left: calc(var(--s-6) * -1);
  margin: 0 !important;
}
#page-container #et-boc .spv-hero-spec-card {
  position: absolute;
  left: calc(var(--s-8) * -1);
  right: var(--s-10);
  bottom: 0;
  margin: 0 !important;
}
.spv-float-card { background: var(--surface-glass); }

@media (max-width: 1023px) {
  /* One column; the image follows the calls to action, then the stats. */
  #page-container #et-boc .spv-hero-row { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-6); }
  #page-container #et-boc .spv-hero-copy,
  #page-container #et-boc .spv-hero-media { display: contents; }
  #page-container #et-boc .spv-hero-copy > * { order: 1; }
  #page-container #et-boc .spv-hero-media > * { order: 2; }
  #page-container #et-boc .spv-hero-copy > .spv-hero-specs,
  #page-container #et-boc .spv-hero-copy > .spv-hero-note { order: 3; }
  #page-container #et-boc .spv-hero-image .et_pb_image_wrap { aspect-ratio: 5 / 4; }
  #page-container #et-boc .spv-hero-chip,
  #page-container #et-boc .spv-hero-spec-card { position: static; }
  #page-container #et-boc .spv-hero-chip { margin-top: calc(var(--s-12) * -1 - var(--s-2)) !important; margin-left: var(--s-4) !important; align-self: flex-start; position: relative; z-index: 1; }
  #page-container #et-boc .spv-hero-row > .et_pb_column > .et_pb_button_module_wrapper { align-self: stretch; }
  #page-container #et-boc .et_pb_button.spv-hero-cta { width: 100%; }
  .spv-float-card { background: var(--surface-card); }
}
@media (min-width: 600px) and (max-width: 1023px) {
  /* Tablet: the two calls to action side by side. */
  #page-container #et-boc .spv-hero-row { flex-flow: row wrap; }
  #page-container #et-boc .spv-hero-row > .et_pb_column > * { flex: 0 0 100%; }
  #page-container #et-boc .spv-hero-row > .et_pb_column > .et_pb_button_module_wrapper { flex: 1 1 0; }
}
@media (max-width: 599px) {
  /* Stat chips: one swipeable row. */
  .spv-sec-hero .spv-stats {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    max-width: 100%;
  }
  #page-container #et-boc .spv-hero-row > .et_pb_column > * { min-width: 0; max-width: 100%; }
  .spv-sec-hero .spv-stats::-webkit-scrollbar { display: none; }
  .spv-sec-hero .spv-stat { flex: 0 0 auto; scroll-snap-align: start; }
  .spv-float-card { flex-wrap: wrap; }
}

/* --- Stores -----------------------------------------------------------------
   The global "Visit us" section (Divi Library, post 52). Each store card is a
   Divi column: its background, border, radius, padding, shadow and the store
   colour bar (Advanced › Custom CSS › Before) are the column's settings. Here
   only the card's inner flex layout, which Divi 4 has no setting for. */
@media (min-width: 900px) {
  #page-container #et-boc .spv-store-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#page-container #et-boc .spv-store-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--s-5) var(--s-3);
}
#page-container #et-boc .spv-store-card > * { flex: 0 0 100%; }
#page-container #et-boc .spv-store-card > .et_pb_button_module_wrapper { flex: 1 1 150px; }
#page-container #et-boc .spv-store-card .et_pb_button { width: 100%; }

/* --- Categories and trust cards -----------------------------------------------
   Each card is a Divi Blurb: its background, border, radius, padding, shadow,
   hover lift, title and text styles and the icon tile's colours are Blurb
   settings. Here: the grids, the card's inner column layout (so the "Shop"
   line and the tags sit at the foot), the icon tile's size, the whole-card
   link, and the hover details inside the card. */
@media (min-width: 600px)  { #page-container #et-boc .spv-cat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { #page-container #et-boc .spv-cat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  #page-container #et-boc .spv-cat-row {
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    margin-inline: auto;
  }
  #page-container #et-boc .spv-cat-row::-webkit-scrollbar { display: none; }
  #page-container #et-boc .spv-cat-row > .et_pb_column { scroll-snap-align: start; }
}

#page-container #et-boc :is(.spv-cat-card, .spv-trust-card).et_pb_blurb { position: relative; }
#page-container #et-boc :is(.spv-cat-card, .spv-trust-card) .et_pb_blurb_content {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: none;
  text-align: left;
}
/* The icon tile is as wide as the blurb's Image › Image Width setting, and square. */
#page-container #et-boc :is(.spv-cat-card, .spv-trust-card) .et_pb_main_blurb_image {
  display: inline-flex;
  text-align: left;
  align-self: flex-start;
}
#page-container #et-boc :is(.spv-cat-card, .spv-trust-card) .et_pb_main_blurb_image .et_pb_image_wrap {
  display: inline-flex;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out);
}
#page-container #et-boc :is(.spv-cat-card, .spv-trust-card) .et_pb_main_blurb_image img { width: 100%; height: 100%; max-width: none; }
#page-container #et-boc :is(.spv-cat-card, .spv-trust-card) .et_pb_module_header a { color: inherit !important; text-decoration: none; }
#page-container #et-boc :is(.spv-cat-card, .spv-trust-card) .et_pb_blurb_description { display: flex; flex-direction: column; flex: 1 1 auto; }
#page-container #et-boc :is(.spv-cat-card, .spv-trust-card) .et_pb_blurb_container { display: flex; flex-direction: column; flex: 1 1 auto; }

/* The whole category card is the link. */
#page-container #et-boc .spv-cat-card .et_pb_module_header a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
#page-container #et-boc .spv-cat-card .et_pb_module_header a:focus-visible { outline: none !important; }
#page-container #et-boc .spv-cat-card:has(.et_pb_module_header a:focus-visible) { outline: var(--bw-lg) solid var(--cyan-400); outline-offset: 3px; }
#page-container #et-boc .spv-cat-card:hover .et_pb_image_wrap { transform: scale(1.06); }
/* Keyboard focus lifts a category card the way its hover settings do (Divi's
   hover settings do not cover focus). */
#page-container #et-boc .spv-cat-card:focus-within { transform: translateY(calc(var(--s-1) * -1)); border-color: var(--line-hi); box-shadow: var(--shadow-3); }

/* "Shop →" slides in on hover (always shown on touch screens). */
.spv-cat-shop {
  opacity: 0;
  transform: translateX(calc(var(--s-2) * -1));
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.spv-cat-shop::after { content: "arrow_forward"; font-family: var(--font-icon); font-size: var(--fs-icon-sm); }
#page-container #et-boc .spv-cat-card:hover .spv-cat-shop,
#page-container #et-boc .spv-cat-card:focus-within .spv-cat-shop { opacity: 1; transform: none; }
@media (hover: none) { .spv-cat-shop { opacity: 1; transform: none; } }

@media (min-width: 600px)  { #page-container #et-boc .spv-trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { #page-container #et-boc .spv-trust-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --- ID check ------------------------------------------------------------------ */
@media (min-width: 768px) { #page-container #et-boc .spv-id-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Stock-check strip ------------------------------------------------------------
   The strip is a Divi row: background, radius, padding, width, shadow and the
   gradient hairline (Advanced › Custom CSS › Before) are its settings. */
#page-container #et-boc .spv-lookup-row { align-items: center; gap: var(--s-6); }
@media (min-width: 1024px) {
  #page-container #et-boc .spv-lookup-row { grid-template-columns: minmax(0, 1fr) auto; }
  #page-container #et-boc .spv-lookup-actions { flex-wrap: nowrap; }
  #page-container #et-boc .spv-lookup-actions > .et_pb_button_module_wrapper { flex: 1 1 0; }
}
#page-container #et-boc .spv-lookup-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
#page-container #et-boc .spv-lookup-actions > .et_pb_button_module_wrapper { flex: 1 1 200px; }
#page-container #et-boc .spv-lookup-actions .et_pb_button { width: 100%; white-space: nowrap; }
#page-container #et-boc .spv-lookup-actions .et_pb_button::before {
  content: "call" !important;
  display: inline-block !important;
  position: static !important;
  opacity: 1 !important;
  margin: 0 !important;
  font-family: var(--font-icon) !important;
  font-size: var(--fs-icon-sm) !important;
}
@media (max-width: 599px) { .spv-lookup { align-items: flex-start !important; } }


/* ============================================================================
   13. EDITORIAL + PLACEHOLDERS
   ========================================================================== */

/* "CLIENT/COUNSEL TO CONFIRM" notes: only rendered for logged-in editors. */
#page-container #et-boc .spv-editor-note { outline: var(--bw-lg) dashed var(--amber-400); outline-offset: 4px; }
#page-container #et-boc .spv-editor-note::before {
  content: "Internal note — hidden from visitors";
  display: block;
  margin-bottom: var(--s-2);
  font: var(--fw-bold) var(--fs-eyebrow)/1.2 var(--font-body);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--amber-400);
}

/* Designed stand-in for photography that does not exist yet. */
.spv-ph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 100%;
  margin: 0;
  padding: var(--s-6);
  overflow: hidden;
  border-radius: var(--r-lg);
  border: var(--bw) solid var(--line);
  background:
    radial-gradient(60% 70% at 25% 20%, var(--glow-orb-violet), transparent 70%),
    radial-gradient(55% 60% at 80% 85%, var(--glow-orb-cyan), transparent 70%),
    var(--ink-800);
  color: var(--text-low);
  text-align: center;
}
.spv-ph .material-symbols-outlined { font-size: var(--fs-icon-lg); color: var(--text-mid); }
.spv-ph__caption { display: flex; flex-direction: column; gap: var(--s-1); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-mid); }
.spv-ph__caption small { font-size: var(--fs-eyebrow); font-weight: var(--fw-regular); color: var(--amber-400); max-width: 44ch; }


/* ============================================================================
   14. PAGE HEADS
   Eyebrow, the page's one H1, lead and last-updated chip: all Divi settings
   on their Text modules (type, spacing) with the small pieces' look inline.
   ========================================================================== */


/* ============================================================================
   15. INNER PAGES
   ========================================================================== */

/* --- Accordions (FAQ, Locations "questions") ------------------------------
   Title and body type, colours, the toggles' background (and its hover),
   border and radius are the Accordion module's settings; the gap between
   toggles is each item's margin. Here: the open toggle's brighter edge and
   gradient bar, the keyboard button main.js puts in each title, the + / ×
   icon, and the answer's padding and reading width. */
#page-container #et-boc .et_pb_accordion .et_pb_toggle {
  position: relative;
  overflow: hidden;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
#page-container #et-boc .et_pb_accordion .et_pb_toggle_open { border-color: var(--line-hi) !important; }
#page-container #et-boc .et_pb_accordion .et_pb_toggle_open::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: var(--bw-lg);
  background: var(--grad-brand);
}
#page-container #et-boc .et_pb_accordion .et_pb_toggle_title {
  position: relative;
  margin: 0;
  padding: 0 !important;
  cursor: pointer;
}
/* main.js moves the title text into this button. */
#page-container #et-boc .spv-toggle-btn {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--s-14);
  margin: 0;
  padding: var(--s-4) calc(var(--s-5) + var(--s-7) + var(--s-3)) var(--s-4) var(--s-5);
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#page-container #et-boc .spv-toggle-btn:focus-visible { outline-offset: -3px !important; }
/* Divi hides the icon on the open item and prints it in ETmodules; every item
   gets the same + that turns into × here (its colour is the module's Icon
   Color setting). */
#page-container #et-boc .et_pb_accordion .et_pb_toggle_title::before {
  content: "add" !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50% !important;
  right: var(--s-5) !important;
  left: auto !important;
  width: var(--s-7);
  height: var(--s-7);
  margin-top: calc(var(--s-7) / -2) !important;
  border-radius: var(--r-pill);
  border: var(--bw) solid var(--line-hi);
  background: var(--ink-700);
  font-family: var(--font-icon) !important;
  font-size: var(--fs-icon-sm) !important;
  line-height: 1;
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
#page-container #et-boc .et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title::before { transform: rotate(45deg); background: var(--ink-600); }
#page-container #et-boc .et_pb_accordion .et_pb_toggle_title:focus-visible { outline-offset: -3px !important; border-radius: var(--r-md); }
#page-container #et-boc .et_pb_accordion .et_pb_toggle_content {
  max-width: var(--prose-wide);
  padding: 0 var(--s-5) var(--s-5) !important;
}
#page-container #et-boc .et_pb_accordion .et_pb_toggle_content p { padding-bottom: var(--s-3); }

/* FAQ group jump-bar (built by main.js). */
.spv-faq-nav {
  position: sticky;
  top: calc(var(--header-h-scrolled) + var(--bw));
  z-index: 5;
  padding: var(--s-3) 0;
  background: var(--surface-glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-top: var(--bw) solid var(--line);
  border-bottom: var(--bw) solid var(--line);
}
.spv-faq-nav .spv-chips { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); box-sizing: border-box; }

/* --- Locations: towns closest to each store --------------------------------
   The label's look is inline; the list's type and colour are the Text
   module's List settings. Here the rows and the store-coloured pin. */
#page-container #et-boc .spv-town-list li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--s-10);
  margin: 0 !important;
  padding: 0 !important;
  border-top: var(--bw) solid var(--line);
  list-style: none;
}
#page-container #et-boc .spv-town-list li::before {
  content: "location_on";
  font-family: var(--font-icon);
  font-size: var(--fs-icon-sm);
  color: var(--store-color);
}

/* --- Store pages: "what's on the shelf" list (inline two-column grid) ---- */
@media (max-width: 599px) {
  #page-container #et-boc .spv-shelf-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
#page-container #et-boc .spv-shelf-grid > a { min-width: 0; transition: background-color var(--dur-fast) var(--ease-out); border-radius: var(--r-sm); }
#page-container #et-boc .spv-shelf-grid > a:hover { background: var(--ink-600); }

/* --- Long-form pages: About, policies ------------------------------------- */
/* The reading column (760px + gutters) and every Text module's type are the
   pages' own Divi settings; the policy pages' section headings open with a
   32px gap Divi has no heading-margin setting for. */
:is(.page-id-23, .page-id-3, .page-id-27, .page-id-28) #page-container #et-boc #main-content .et_pb_text_inner :is(h2, h3) { text-wrap: balance; }
:is(.page-id-3, .page-id-27, .page-id-28) #page-container #et-boc #main-content .et_pb_text_inner h3 { margin-top: var(--s-8); }

#page-container #et-boc .spv-pullquote { margin: var(--s-8) 0 !important; }
/* The quote's type, colour and amber rule are the Text module's Quote
   settings; its tint, padding and rounded corner have no setting. */
#page-container #et-boc .spv-pullquote blockquote {
  margin: 0;
  padding: var(--s-8);
  border-top-width: 0;         /* the left rule's width and colour are the Quote settings */
  border-right-width: 0;
  border-bottom-width: 0;
  border-left-style: solid;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--tint-amber);
  text-wrap: balance;
}
#page-container #et-boc .et_pb_image figcaption,
#page-container #et-boc .spv-caption { margin-top: var(--s-3); font-size: var(--fs-sm); font-style: italic; color: var(--text-low); text-align: center; }