/**
 * Commerce storefront — Horizon Core.
 *
 * HORIZON-20260901-081, P3b. Scope: docs/merch-included-upgrade-scope-2026-09-01.md
 *
 * ⛔⛔ SHIPS INERT. Enqueued only when the tenant setting `merch_included` is
 * true, and that defaults FALSE on every tenant. Nothing renders differently
 * anywhere until somebody opts a tenant in (P3d). Do not read its presence on
 * the server as a live change.
 *
 * WHY IT EXISTS. All 24 commerce storefront function BODIES already live in
 * Core (`src/Commerce/woo-zone.php`) and resolve on every tenant — but measured
 * 2026-09-01, the markup they emit had CSS in EXACTLY ONE theme
 * (`wp-child-theme-commerce`). Filters, cart drawer, trust badges and the size
 * guide had ZERO rules in entertainer, dark-luxury and the two per-client
 * themes. So switching the hooks on without this file would ship
 * unstyled filters and an unstyled cart drawer onto live client sites — the
 * same failure as a per-client theme defining `.hp-btn` in zero stylesheets,
 * at five times the surface area.
 *
 * ⭐ LIFTED VERBATIM, not re-designed, from the one theme that had them:
 *   filters + shop layout   hp-shop.css       186-320
 *   trust badges            hp-shop.css      1702-1771
 *   size guide tab          hp-shop.css      1773-1803
 *   slide-out cart drawer   hp-components.css 1100-1319
 * Byte-identity is what makes "no tenant sees a rendering change" checkable —
 * the pattern that worked for the links-panel hoist and again for pagination.
 * Each block was brace-balance checked before assembly.
 *
 * ⚠️ THE COMMERCE THEME KEEPS ITS OWN COPIES AND IS UNAFFECTED. It is not
 * enqueued this file (its tenants have `merch_included` off and their own
 * stylesheets), so the commerce-theme stores cannot change. When the commerce
 * theme is eventually retired, this becomes the single definition.
 *
 * ⛔⛔ THE HEADER CART/ACCOUNT ICONS ARE DELIBERATELY NOT HERE. Their rules live
 * across `hp-base.css` AND `hp-responsive.css` and are entangled with
 * GeneratePress nav internals (`.inside-navigation`, `.menu-toggle`, `.main-nav`)
 * and the mobile menu animation. Memory `feedback-an-open-mobile-menu-can-be-
 * unreachable` records that three of those behaviours are per THEME, not per
 * pattern, and that copying a rule across is how each one broke. They need their
 * own scope, not a verbatim lift.
 *
 * ⚠️ Reads only `var(--hp-*)` design tokens. All 26 used here were verified
 * present in entertainer, dark-luxury and both per-client themes, so
 * unlike hp-woo-pagination.css this file needs no literal fallbacks — it is only
 * ever enqueued on a Horizon theme.
 *
 * @package Horizon_Core
 */

/* ══ Shop / category filters — desktop sidebar, mobile drawer ══
   ⛔ ONE comment, not two. Until HORIZON-20260901-107 this header was closed on
   its first line and the lines below sat as bare text, which the CSS parser
   swallowed together with the NEXT RULE — .hp-shop-layout — so the sidebar grid
   never applied and the filters stacked full-width above the products. Same
   defect at the trust-badges and size-guide headers below. Invisible while the
   sheet shipped inert; found by the first tenant to render it.
   Shop/category filters — desktop sidebar, mobile drawer, one shared form
   rendered twice by hp_render_shop_filters() (sidebar shell + drawer shell).
   See docs/commerce-product-filters-plan.md §2c. 768px chosen on content
   grounds — the point the 220px sidebar column plus the product grid gets
   too cramped to read, not a device-width guess.
   ========================================================================== */

.hp-shop-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--hp-sp-8);
  align-items: start;
}

.hp-shop-filters-mobile { display: none; }
.hp-shop-filters--drawer { display: none; } /* off-canvas, shown via .is-open below 768px */

.hp-shop-filters__form {
  display: flex;
  flex-direction: column;
  gap: var(--hp-sp-6);
}

.hp-shop-filters__title {
  font-size: var(--hp-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
  margin: 0 0 var(--hp-sp-3);
}

/* Collapsible groups (HORIZON-20261002-010): each facet is a <details>, its
   title the <summary>; a long list folds behind a nested "Show all N" <details>.
   docs/shop-filter-groups-scope-2026-10-02.md, option A. */
.hp-shop-filters__facet > summary.hp-shop-filters__title {
  display: flex;
  align-items: center;
  gap: var(--hp-sp-2);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.hp-shop-filters__facet > summary::-webkit-details-marker,
.hp-shop-filters__more > summary::-webkit-details-marker { display: none; }
.hp-shop-filters__facet > summary.hp-shop-filters__title::after {
  content: '';
  margin-left: auto;
  width: 0.45em;
  height: 0.45em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(25%) rotate(-135deg); /* open: points up */
  transition: transform var(--hp-dur) var(--hp-ease);
}
.hp-shop-filters__facet:not([open]) > summary.hp-shop-filters__title { margin-bottom: 0; }
.hp-shop-filters__facet:not([open]) > summary.hp-shop-filters__title::after { transform: translateY(-25%) rotate(45deg); /* folded: points down */ }
.hp-shop-filters__facet > summary:focus-visible,
.hp-shop-filters__more > summary:focus-visible {
  outline: 2px solid var(--hp-gold);
  outline-offset: 2px;
}
/* How many ticks a group carries, so a folded group still says it is filtering. */
.hp-shop-filters__ticked {
  min-width: 1.6em;
  padding: 0 0.4em;
  border: 1px solid var(--hp-gold);
  border-radius: 999px;
  color: var(--hp-gold);
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
  line-height: 1.5;
}
.hp-shop-filters__more { margin-top: var(--hp-sp-2); }
.hp-shop-filters__more > .hp-shop-filters__chips { margin-top: var(--hp-sp-2); }
.hp-shop-filters__more-toggle {
  display: inline-flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
  padding: var(--hp-sp-1) 0;
  font-size: var(--hp-text-xs);
  color: var(--hp-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hp-shop-filters__more-toggle:hover { color: var(--hp-gold); }
.hp-shop-filters__more-hide { display: none; }
.hp-shop-filters__more[open] > .hp-shop-filters__more-toggle .hp-shop-filters__more-show { display: none; }
.hp-shop-filters__more[open] > .hp-shop-filters__more-toggle .hp-shop-filters__more-hide { display: inline; }

.hp-shop-filters__price-row {
  display: flex;
  align-items: center;
  gap: var(--hp-sp-2);
}
.hp-shop-filters__price-row input[type="number"] {
  width: 0;
  flex: 1;
  min-width: 0;
  padding: var(--hp-sp-2) var(--hp-sp-3);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-sm);
  background: var(--hp-bg-surface);
  color: var(--hp-text);
  font-size: var(--hp-text-sm);
}

.hp-shop-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hp-sp-2);
}

.hp-shop-filters__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: var(--hp-text-xs);
  padding: var(--hp-sp-2) var(--hp-sp-3);
  border: 1px solid var(--hp-border-strong);
  border-radius: var(--hp-r-sm);
  color: var(--hp-text-muted);
  cursor: pointer;
  transition: border-color var(--hp-dur) var(--hp-ease), color var(--hp-dur) var(--hp-ease);
}
.hp-shop-filters__chip input {
  /* No pointer-events:none here — that blocks the browser's native
     label-click-activates-its-checkbox behaviour in Chromium, so clicking
     the visible chip silently did nothing (found live 2026-07-27). The
     checkbox stays fully clickable, just visually hidden under the label. */
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
/* Product count on each chip (HORIZON-20260902-008): quiet, never the first thing read. */
.hp-shop-filters__count {
  font-style: normal;
  font-size: var(--hp-text-xs);
  color: var(--hp-text-subtle);
  margin-left: 0.15em;
}
.hp-shop-filters__chip--checked .hp-shop-filters__count { color: inherit; opacity: 0.75; }

.hp-shop-filters__chip--checked {
  border-color: var(--hp-gold);
  color: var(--hp-gold);
  font-weight: 600;
}

.hp-shop-filters__apply {
  width: 100%;
  justify-content: center;
}

.hp-shop-filters__clear {
  font-size: var(--hp-text-xs);
  color: var(--hp-text-muted);
  text-align: center;
  text-decoration: underline;
}
.hp-shop-filters__clear:hover { color: var(--hp-gold); }

.hp-shop-filters-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--hp-sp-5) var(--hp-sp-6);
  border-bottom: 1px solid var(--hp-border);
  font-size: var(--hp-text-sm);
  font-weight: 600;
}
.hp-shop-filters-drawer__header button {
  background: none;
  border: none;
  color: var(--hp-text-muted);
  cursor: pointer;
  display: flex;
}

.hp-shop-filters--drawer .hp-shop-filters__form {
  padding: var(--hp-sp-6);
}

@media (max-width: 768px) {
  .hp-shop-layout { grid-template-columns: minmax(0, 1fr); }
  .hp-shop-filters--sidebar { display: none; }
  .hp-shop-filters-mobile { display: block; margin-bottom: var(--hp-sp-6); }
  .hp-shop-filters--drawer {
    display: block;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 90vw);
    height: 100%;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    background: var(--hp-bg-surface);
    border-left: 1px solid var(--hp-border);
    z-index: 9999; /* matches the lightbox/offcanvas overlay convention */
    overflow-y: auto;
  }
  .hp-shop-filters--drawer.is-open { transform: translateX(0); }
  /* The fold controls are tap targets in the drawer (mobile probe tap-small, 44px). */
  .hp-shop-filters__facet > summary.hp-shop-filters__title,
  .hp-shop-filters__more-toggle { min-height: 44px; }
}

/* ══ Trust badges (single product, after add-to-cart) ══
   Trust badges (single product page, after add-to-cart)
   ========================================================================== */

.hp-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hp-sp-4);
  margin-top: var(--hp-sp-5);
  padding-top: var(--hp-sp-5);
  border-top: 1px solid var(--hp-border);
}

/* On shop/category archive pages the trust strip sits directly below
   .hp-page-header, which already ends in its own divider — the badges' own
   border-top duplicated it, leaving two lines with dead space between them
   (found live: flagged as a misplaced divider). Only scoped to this call
   site; the single-product-page usage (no adjacent divider above it) keeps
   its own border. */
.hp-trust-strip--attached .hp-trust-badges {
  margin-top: 0;
  padding-top: var(--hp-sp-6);
  border-top: none;
}

/* Homepage band, directly under the hero. The base .hp-trust-badges rule is
   built to hang off the bottom of an add-to-cart column — left-aligned, with
   a top border and margin — so the band neutralises those and centres the row
   across the full width instead. Same markup and same copy as the product and
   shop placements; only the framing differs. */
.hp-trust-band {
  background: var(--hp-bg-surface);
  border-bottom: 1px solid var(--hp-border);
}

.hp-trust-band .hp-trust-badges {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  justify-content: center;
  gap: var(--hp-sp-10);
  padding-block: var(--hp-sp-5);
  /* Beats the ≤640px `.hp-trust-badges { flex-direction: column }` rule below
     on specificity (0,2,0 vs 0,1,0), which is deliberate: stacking three short
     labels vertically here would push the first product section a long way
     down the page. flex-wrap is inherited from the base rule, so they wrap to
     two lines on a narrow phone rather than overflowing. */
  flex-direction: row;
}

@media (max-width: 640px) {
  .hp-trust-band .hp-trust-badges {
    gap: var(--hp-sp-3) var(--hp-sp-5);
    padding-block: var(--hp-sp-4);
  }
}

.hp-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--hp-sp-2);
  font-size: var(--hp-text-xs);
  color: var(--hp-text-muted);
  font-weight: 500;
}

.hp-trust-badge svg {
  flex-shrink: 0;
  color: var(--hp-gold);
}


/* ══ Size guide tab content ══
   Size guide tab content
   ========================================================================== */

.hp-size-guide {
  max-width: 720px;
}

.hp-size-guide table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--hp-text-sm);
  margin-top: var(--hp-sp-4);
}

.hp-size-guide th,
.hp-size-guide td {
  padding: var(--hp-sp-3) var(--hp-sp-4);
  border: 1px solid var(--hp-border);
  text-align: left;
}

.hp-size-guide th {
  background: var(--hp-bg-surface);
  font-weight: 600;
  color: var(--hp-text);
}

.hp-size-guide td {
  color: var(--hp-text-muted);
}


/* ══ Slide-out cart drawer ══ */
/* ══ Slide-out cart drawer ═══════════════════════════════════════════
   Skin-aware throughout (tokens only, no hardcoded colours) — this is the
   network-wide Commerce theme, so it has to read correctly on all 13 skins,
   light and dark. See inc/cart-drawer.php for the behaviour contract. */

.hp-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  visibility: hidden;
}
.hp-cart-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}

.hp-cart-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity var(--hp-dur) var(--hp-ease);
}
.hp-cart-drawer.is-open .hp-cart-drawer__scrim { opacity: 1; }

.hp-cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--hp-bg-surface);
  border-left: 1px solid var(--hp-border);
  box-shadow: var(--hp-shadow-raised);
  transform: translateX(100%);
  transition: transform var(--hp-dur) var(--hp-ease);
}
.hp-cart-drawer.is-open .hp-cart-drawer__panel { transform: translateX(0); }
/* G1 R3 (HORIZON-20260929-003): the panel prints BEFORE the scrim and both are position:absolute, so without this the
   50% black scrim painted over the open panel (live on every store since 607e2466, 2026-07-29). */
.hp-cart-drawer__panel { z-index: 1; }

.hp-cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hp-sp-4);
  padding: var(--hp-sp-5) var(--hp-sp-6);
  border-bottom: 1px solid var(--hp-border);
  flex: 0 0 auto;
}
.hp-cart-drawer__title {
  font-family: var(--hp-font-display);
  font-size: var(--hp-text-2xl);
  color: var(--hp-text);
  margin: 0;
}
.hp-cart-drawer__close {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--hp-text-muted);
  display: flex;
  padding: var(--hp-sp-1);
  border-radius: var(--hp-r-sm);
  transition: color var(--hp-dur) var(--hp-ease);
}
.hp-cart-drawer__close:hover { color: var(--hp-text); }

/* The inner node is replaced wholesale by the add-to-cart fragment, so it
   owns the scroll region rather than the panel — replacing a scrolled node
   would otherwise reset scroll position on every quantity change. */
.hp-cart-drawer__inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.hp-cart-drawer.is-busy .hp-cart-drawer__inner { opacity: 0.5; pointer-events: none; }

.hp-cart-drawer__items {
  list-style: none;
  margin: 0;
  padding: var(--hp-sp-4) var(--hp-sp-6);
  flex: 1 1 auto;
}
.hp-cart-drawer__item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: var(--hp-sp-4);
  padding: var(--hp-sp-4) 0;
  border-bottom: 1px solid var(--hp-border);
}
.hp-cart-drawer__item:last-child { border-bottom: 0; }

.hp-cart-drawer__thumb img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--hp-r-sm);
  display: block;
}
.hp-cart-drawer__detail {
  display: flex;
  flex-direction: column;
  gap: var(--hp-sp-2);
  min-width: 0;
}
.hp-cart-drawer__name a,
.hp-cart-drawer__name {
  font-size: var(--hp-text-sm);
  color: var(--hp-text);
  text-decoration: none;
  line-height: 1.4;
}
.hp-cart-drawer__name a:hover { color: var(--hp-gold); }
.hp-cart-drawer__meta {
  font-size: var(--hp-text-xs);
  color: var(--hp-text-muted);
}

/* The quantity stepper is the same single box as the product page and cart page (Alex, 2026-10-03: the − and +
   "sat on the bottom" of their buttons). The theme's base `button` rule adds `padding: 10px 20px`; these 26px buttons
   never reset it, so each glyph sat 4-5px below centre and every button was 26px tall against the 44px tap floor. */
.hp-cart-drawer__qty {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* a long price narrows the column: the remove button drops a line, nothing overflows */
  gap: 0;
  margin-top: auto;
}
.hp-cart-qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--hp-border-strong, var(--hp-border));
  background: var(--hp-bg);
  color: var(--hp-text);
  cursor: pointer;
  font-family: var(--hp-font-body);
  font-size: 1.125rem;
  line-height: 1;
  transition: background var(--hp-dur) var(--hp-ease);
}
.hp-cart-qty-btn:first-child {
  border-right: 0;
  border-radius: var(--hp-r-sm) 0 0 var(--hp-r-sm);
}
.hp-cart-qty-value + .hp-cart-qty-btn {
  border-left: 0;
  border-radius: 0 var(--hp-r-sm) var(--hp-r-sm) 0;
}
.hp-cart-qty-btn:hover,
.hp-cart-qty-btn:focus { background: var(--hp-bg-surface); color: var(--hp-text); }
.hp-cart-qty-btn:focus-visible {
  outline: 2px solid var(--hp-gold);
  outline-offset: -2px;
}
.hp-cart-qty-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 32px;
  height: 44px;
  border-top: 1px solid var(--hp-border-strong, var(--hp-border));
  border-bottom: 1px solid var(--hp-border-strong, var(--hp-border));
  background: var(--hp-bg);
  font-size: 1rem;
  font-weight: 600;
  color: var(--hp-text);
}
.hp-cart-drawer__remove {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--hp-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--hp-dur) var(--hp-ease);
}
.hp-cart-drawer__remove:hover,
.hp-cart-drawer__remove:focus { background: none; }
.hp-cart-drawer__remove:hover { color: var(--hp-error); }

.hp-cart-drawer__price {
  font-size: var(--hp-text-sm);
  color: var(--hp-text);
  white-space: nowrap;
}

.hp-cart-drawer__footer {
  flex: 0 0 auto;
  padding: var(--hp-sp-5) var(--hp-sp-6) var(--hp-sp-6);
  border-top: 1px solid var(--hp-border);
  background: var(--hp-bg-surface);
  position: sticky;
  bottom: 0;
}
.hp-cart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--hp-text-base);
  color: var(--hp-text);
  margin-bottom: var(--hp-sp-1);
}
.hp-cart-drawer__note {
  font-size: var(--hp-text-xs);
  color: var(--hp-text-subtle);
  margin: 0 0 var(--hp-sp-4);
}
.hp-cart-drawer__checkout {
  display: block;
  width: 100%;
  text-align: center;
}
.hp-cart-drawer__viewcart {
  display: block;
  text-align: center;
  margin-top: var(--hp-sp-3);
  font-size: var(--hp-text-sm);
  color: var(--hp-text-muted);
  text-decoration: underline;
}
.hp-cart-drawer__viewcart:hover { color: var(--hp-text); }

.hp-cart-drawer__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--hp-sp-4);
  flex: 1 1 auto;
  padding: var(--hp-sp-12) var(--hp-sp-6);
  color: var(--hp-text-muted);
  text-align: center;
}
.hp-cart-drawer__empty p { margin: 0; font-size: var(--hp-text-sm); }

body.hp-cart-drawer-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .hp-cart-drawer__panel,
  .hp-cart-drawer__scrim { transition: none; }
}


/* ══ Header cart / account / search icons ═══════════════════════════════
   HORIZON-20260901-081, Option B.

   ⛔⛔ CORE RENDERS THESE AT `generate_after_header_content`, NOT AT
   `generate_after_primary_menu` LIKE THE COMMERCE THEME. That hook fires inside
   `.inside-header` and OUTSIDE `#site-navigation`, which is the whole point:
   `.hp-header-icons` inside `.inside-navigation` cannot survive the four
   non-commerce themes, because they ANIMATE that element and the commerce theme
   does not. A `transform` on an ancestor re-anchors absolutely positioned
   descendants, and an `opacity` fade applies to the entire subtree, so the icons
   would jump and fade with the menu panel.

   ⭐ The commerce theme animates `.main-nav` PRECISELY BECAUSE it hosts the
   icons (-20260828-012/-015). Rendering them outside the nav removes the
   coupling instead of asking four more themes to adopt that workaround, which
   would reopen mobile-nav work recorded as finished across five live sites.

   ⛔ SO THE `hp-responsive.css` GYMNASTICS ARE DELIBERATELY NOT LIFTED — the
   `position: static !important` handover, the `:not(.toggled)` guards and the
   escape-the-zero-height-box rules exist ONLY to drag the icons out of the nav.
   Outside the nav there is nothing to escape. Lifting them would re-import the
   problem this option exists to avoid.

   Rules below lifted verbatim from wp-child-theme-commerce/assets/css/hp-base.css
   461-537. Only this comment is new; the theme's own said "landing inside GP's
   .inside-navigation flex row", which is false for Core's path.
   ══════════════════════════════════════════════════════════════════════ */

.hp-header-icons {
  display: flex;
  align-items: center;
  gap: var(--hp-sp-2);
  margin-left: auto;
}

.hp-header-icon {
  /* !important: GeneratePress's own .main-navigation a rule sets display:block
     at higher specificity (element+class beats this single class), which
     silently won the cascade — align-items/justify-content below still
     applied with no effect since the box was never actually flex, so the SVG
     fell back to inline vertical-align:middle centering (~8px too high
     against the 60px-tall nav row's line-height). Confirmed via computed
     style live 2026-07-28: getComputedStyle showed display:"block" despite
     this rule, svg visual center 66px vs text visual center 73.5px. */
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--hp-text) !important;
  transition: background-color var(--hp-dur) var(--hp-ease), color var(--hp-dur) var(--hp-ease);

  /* Reset UA + GeneratePress button chrome. Account and cart are <a>, but the
     search control is a <button> (it opens a dialog, it is not a link), and
     GP's global `button, html input[type="button"], input[type="reset"],
     input[type="submit"], a.button …` rule paints it rgb(85,85,94) with
     10px 20px padding. That made search render as a filled dark pill beside
     two plain outline icons — reported live 2026-07-29. These declarations are
     inert for the <a> cases, so one rule can serve all three. The :hover rule
     below still wins (higher specificity), so the hover wash is unaffected. */
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  line-height: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.hp-header-icon:hover,
.hp-header-icon:focus-visible {
  background-color: var(--hp-gold-muted, rgba(0, 0, 0, 0.06));
  color: var(--hp-gold) !important;
}

.hp-header-icon .hp-icon {
  pointer-events: none;
}

.hp-header-cart-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--hp-gold);
  color: var(--hp-on-accent, #fff);
  font-family: var(--hp-font-body);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}

.hp-header-cart-count--zero {
  display: none;
}


/* ══ Cart + Checkout (WooCommerce BLOCKS) ═══════════════════════════════
   HORIZON-20260901-081.

   ⛔⛔ THE TARGET IS THE **BLOCK** CART AND CHECKOUT, NOT THE CLASSIC
   TEMPLATES. Measured 2026-09-01: the cart and checkout pages are
   `wp:woocommerce/cart` / `wp:woocommerce/checkout` BLOCKS on every tenant
   except the `star` and `fetish` samples. Before this, only one merch store and
   `store` had any Horizon styling on them — every other merch store served the
   STOCK WooCommerce block cart, because these rules lived in
   `wp-child-theme-commerce/assets/css/hp-shop.css` alone.

   ⛔⛔ AND THIS IS WHY THE GAP WAS INVISIBLE. Four of the five themes DO ship
   `woocommerce/cart/cart.php`, `checkout/form-checkout.php` and ~39 classic
   `.woocommerce-cart` / `.woocommerce-checkout` rules — and ALL OF IT IS DEAD
   CODE on a block cart. **A theme having a cart template is not evidence the
   cart is styled.** Same trap the commerce theme already carried
   (`-20260819-007`, memory `feedback-block-cart-is-not-the-classic-template`);
   it turns out to apply estate-wide.

   ⚠️ The dead classic templates and CSS are deliberately LEFT IN PLACE by this
   change — retiring them is a separate decision, and they are the fallback if a
   tenant is ever switched back to classic pages (`star` and `fetish` still use
   them today).

   Lifted verbatim from hp-shop.css 1990-2227. All 24 tokens verified present in
   entertainer, dark-luxury and both per-client themes.
   ══════════════════════════════════════════════════════════════════════ */

/* ==========================================================================
   Cart (WooCommerce Blocks — wp:woocommerce/cart)
   Flagged critical 2026-07-28: bare default styling. Real class names
   confirmed against the live hydrated DOM, same as checkout below.
   ========================================================================== */

.wp-block-woocommerce-cart {
  font-family: var(--hp-font-body);
  color: var(--hp-text);
  max-width: var(--hp-content-max);
  margin: 0 auto;
  padding: var(--hp-sp-10) var(--hp-content-pad) var(--hp-sp-16);
}

.wc-block-cart-item__product .wc-block-components-product-name {
  font-family: var(--hp-font-display) !important;
  color: var(--hp-text) !important;
  font-size: var(--hp-text-lg, 1.1rem) !important;
  text-decoration: none !important;
}

.wc-block-components-quantity-selector {
  border: 1px solid var(--hp-border) !important;
  border-radius: var(--hp-r-sm) !important;
}

.wc-block-components-quantity-selector__button {
  color: var(--hp-text) !important;
  /* WC Blocks' own default renders these at ~30x37px — under the ~44px
     minimum tap target size (WCAG 2.5.5 / Apple HIG), found live 2026-07-28
     on a mobile pass of the Cart page. */
  min-width: 44px !important;
  min-height: 44px !important;
}

.wc-block-cart-item__remove-link {
  color: var(--hp-text-muted, var(--hp-text)) !important;
}

.wc-block-cart-item__remove-link:hover {
  color: #c0392b !important;
}

.wc-block-cart__sidebar,
.wc-block-cart-totals-block .wc-block-components-sidebar {
  background: var(--hp-bg-surface) !important;
  border: 1px solid var(--hp-border) !important;
  border-radius: var(--hp-r-md) !important;
  padding: var(--hp-sp-6) !important;
}

.wc-block-cart__totals-title {
  font-family: var(--hp-font-display) !important;
  color: var(--hp-text) !important;
}

.wc-block-cart__submit-button {
  background: var(--hp-gold) !important;
  border-color: var(--hp-gold) !important;
  color: var(--hp-on-accent, #fff) !important;
  border-radius: var(--hp-r-sm) !important;
  font-family: var(--hp-font-body) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wc-block-cart__submit-button:hover {
  background: var(--hp-gold-dark, var(--hp-gold)) !important;
}

@media (max-width: 782px) {
  .wp-block-woocommerce-cart {
    padding: var(--hp-sp-6) var(--hp-content-pad) var(--hp-sp-10);
  }
}

/* ==========================================================================
   Checkout (WooCommerce Blocks — wp:woocommerce/checkout)
   Flagged critical 2026-07-28: bare default WC Blocks styling, no brand
   tokens applied anywhere. Real class names confirmed against the live
   hydrated DOM (a live store's /checkout/), not guessed — Blocks
   renders form fields client-side, so a plain curl only shows the
   pre-hydration skeleton.
   ========================================================================== */

.wc-block-checkout {
  font-family: var(--hp-font-body);
  color: var(--hp-text);
  max-width: var(--hp-content-max);
  margin: 0 auto;
  padding: var(--hp-sp-10) var(--hp-content-pad) var(--hp-sp-16);
}

/* Step headings ("Contact information", "Shipping address", etc.) */
.wc-block-components-checkout-step__title {
  font-family: var(--hp-font-display);
  font-size: var(--hp-text-xl);
  color: var(--hp-text);
  margin-bottom: var(--hp-sp-4);
}

.wc-block-components-checkout-step__heading-content {
  border-bottom: 1px solid var(--hp-border);
  padding-bottom: var(--hp-sp-3);
  margin-bottom: var(--hp-sp-5);
}

/* Text inputs — WC Blocks' floating-label pattern */
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-address-form select,
.wc-block-components-country-input .components-combobox-control__input,
.wc-block-components-state-input .components-combobox-control__input {
  border: 1px solid var(--hp-border) !important;
  border-radius: var(--hp-r-sm) !important;
  background: var(--hp-bg) !important;
  color: var(--hp-text) !important;
  font-family: var(--hp-font-body) !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-address-form select:focus {
  border-color: var(--hp-gold) !important;
  box-shadow: 0 0 0 1px var(--hp-gold) !important;
  outline: none !important;
}

.wc-block-components-text-input label {
  font-family: var(--hp-font-body) !important;
  color: var(--hp-text-muted, var(--hp-text)) !important;
}

/* Country/State selects (a different WC Blocks component,
   .wc-blocks-components-select, not the text-input one above) — its "notch"
   label is meant to sit astride the field's top border with an opaque
   background masking the border/value beneath it, but this theme never gave
   it that background, so the label just floated transparently on top of the
   selected value text (found live 2026-07-28, both "Country/Region" over
   "United States (US)" and "State" over "Florida"). Position and mask it
   explicitly rather than rely on WC's own notch math. */
.wc-blocks-components-select__container {
  position: relative !important;
}
.wc-blocks-components-select__label {
  position: absolute !important;
  top: -8px !important;
  left: 12px !important;
  background: var(--hp-bg) !important;
  padding: 0 4px !important;
  font-family: var(--hp-font-body) !important;
  font-size: var(--hp-text-xs) !important;
  color: var(--hp-text-muted, var(--hp-text)) !important;
  z-index: 2;
}

/* Our checkout opt-in checkbox (Subscribers/WooCommerceCheckout.php) and any
   other checkbox field — brand accent on the checked state. */
.wc-block-components-checkbox__input:checked + .wc-block-components-checkbox__mark {
  color: var(--hp-gold) !important;
}

.wc-block-components-checkbox svg {
  fill: var(--hp-gold) !important;
}

/* Shipping-option / payment-option radio cards */
.wc-block-components-radio-control__option {
  border: 1px solid var(--hp-border) !important;
  border-radius: var(--hp-r-sm) !important;
  background: var(--hp-bg) !important;
}

.wc-block-components-radio-control__option.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control__option[aria-checked="true"] {
  border-color: var(--hp-gold) !important;
  background: var(--hp-gold-muted, rgba(0, 0, 0, 0.04)) !important;
}

.wc-block-components-radio-control-accordion-option[aria-expanded="true"] {
  border-color: var(--hp-gold) !important;
}

/* Order summary / totals sidebar */
.wc-block-checkout__sidebar {
  background: var(--hp-bg-surface) !important;
  border: 1px solid var(--hp-border) !important;
  border-radius: var(--hp-r-md) !important;
  padding: var(--hp-sp-6) !important;
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-product-name {
  font-family: var(--hp-font-body) !important;
  color: var(--hp-text) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--hp-font-display) !important;
  font-size: var(--hp-text-xl) !important;
  font-weight: 600 !important;
}

/* Place-order button — same brand button treatment as the rest of the site */
.wc-block-components-checkout-place-order-button {
  background: var(--hp-gold) !important;
  border-color: var(--hp-gold) !important;
  color: var(--hp-on-accent, #fff) !important;
  border-radius: var(--hp-r-sm) !important;
  font-family: var(--hp-font-body) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wc-block-components-checkout-place-order-button:hover {
  background: var(--hp-gold-dark, var(--hp-gold)) !important;
  border-color: var(--hp-gold-dark, var(--hp-gold)) !important;
}

/* Notice banners (errors, "no payment methods", coupon feedback, etc.) */
.wc-block-components-notice-banner {
  border-radius: var(--hp-r-sm) !important;
  font-family: var(--hp-font-body) !important;
}

.wc-block-components-notice-banner.is-error {
  border-left: 3px solid #c0392b !important;
}

@media (max-width: 782px) {
  .wc-block-checkout {
    padding: var(--hp-sp-6) var(--hp-content-pad) var(--hp-sp-10);
  }
}

/* ══ Category page-header image layer (Core shop archive, HORIZON-20260901-107) ══
   Lifted verbatim from wp-child-theme-commerce hp-shop.css (".hp-collection-hero__*")
   and hp-base.css (".hp-page-header--has-image .hp-container"). The band itself is
   positioned here because only the commerce theme positions .hp-page-header. */

.hp-page-header--has-image { position: relative; overflow: hidden; }
.hp-page-header--has-image .hp-container {
  position: relative;
  z-index: 1;
}

.hp-collection-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hp-collection-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.25;
  display: block;
}

.hp-collection-hero__breadcrumb {
  font-size: var(--hp-text-xs);
  color: var(--hp-text-muted);
  margin-bottom: var(--hp-sp-4);
}

.hp-collection-hero__breadcrumb a {
  color: var(--hp-text-muted);
  text-decoration: none;
}

.hp-collection-hero__breadcrumb a:hover {
  color: var(--hp-text);
}

/* ══ Predictive search overlay ═══════════════════════════════════════
   Full-bleed top sheet. The inner content uses the theme's own
   --hp-content-max/--hp-content-pad container tokens rather than a bespoke
   max-width, so it lines up with every other section instead of inventing a
   new width. Tokens only — must read on all 13 skins. */

.hp-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;          /* above the cart drawer (9999) */
  pointer-events: none;
  visibility: hidden;
}
.hp-search-overlay.is-open { pointer-events: auto; visibility: visible; }

.hp-search-overlay__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity var(--hp-dur) var(--hp-ease);
}
.hp-search-overlay.is-open .hp-search-overlay__scrim { opacity: 1; }

.hp-search-overlay__panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--hp-bg-surface);
  border-bottom: 1px solid var(--hp-border);
  box-shadow: var(--hp-shadow-raised);
  transform: translateY(-100%);
  transition: transform var(--hp-dur) var(--hp-ease);
}
.hp-search-overlay.is-open .hp-search-overlay__panel { transform: translateY(0); }

.hp-search-form {
  display: flex;
  align-items: center;
  gap: var(--hp-sp-3);
  width: 100%;
  max-width: var(--hp-content-max);
  margin: 0 auto;
  padding: var(--hp-sp-5) var(--hp-content-pad);
  border-bottom: 1px solid var(--hp-border);
  flex: 0 0 auto;
}
.hp-search-form__icon { display: flex; color: var(--hp-text-muted); flex: 0 0 auto; }
.hp-search-form__input {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--hp-text);
  font-family: var(--hp-font-body);
  font-size: var(--hp-text-xl);
  padding: var(--hp-sp-2) 0;
}
.hp-search-form__input::placeholder { color: var(--hp-text-subtle); }
/* Kill the native clear affordance — the overlay has its own close control. */
.hp-search-form__input::-webkit-search-cancel-button { display: none; }
.hp-search-form__close {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--hp-text-muted);
  display: flex;
  padding: var(--hp-sp-1);
  flex: 0 0 auto;
  transition: color var(--hp-dur) var(--hp-ease);
}
.hp-search-form__close:hover { color: var(--hp-text); }

.hp-search-overlay__results {
  width: 100%;
  max-width: var(--hp-content-max);
  margin: 0 auto;
  padding: var(--hp-sp-5) var(--hp-content-pad) var(--hp-sp-8);
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.hp-search-overlay__results.is-loading { opacity: 0.55; }

.hp-search-group { margin-bottom: var(--hp-sp-6); }
.hp-search-group:last-child { margin-bottom: 0; }
.hp-search-group__label {
  display: block;
  font-size: var(--hp-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hp-text-subtle);
  margin-bottom: var(--hp-sp-3);
}

.hp-search-chips { display: flex; flex-wrap: wrap; gap: var(--hp-sp-2); }
.hp-search-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--hp-sp-2);
  padding: var(--hp-sp-2) var(--hp-sp-4);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-full);
  font-size: var(--hp-text-sm);
  color: var(--hp-text);
  text-decoration: none;
  transition: border-color var(--hp-dur) var(--hp-ease), color var(--hp-dur) var(--hp-ease);
}
.hp-search-chip:hover { border-color: var(--hp-border-strong); color: var(--hp-gold); }
.hp-search-chip__count { font-size: var(--hp-text-xs); color: var(--hp-text-subtle); }

.hp-search-results { display: flex; flex-direction: column; }
.hp-search-result {
  display: flex;
  align-items: center;
  gap: var(--hp-sp-4);
  padding: var(--hp-sp-3);
  border-radius: var(--hp-r-sm);
  text-decoration: none;
  color: var(--hp-text);
  transition: background var(--hp-dur) var(--hp-ease);
}
.hp-search-result:hover,
.hp-search-result.is-active { background: var(--hp-gold-muted); }
.hp-search-result__thumb { flex: 0 0 auto; }
.hp-search-result__thumb img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--hp-r-sm);
  display: block;
}
.hp-search-result__noimg {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-sm);
  color: var(--hp-text-subtle);
}
.hp-search-result__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.hp-search-result__eyebrow {
  font-size: var(--hp-text-xs);
  letter-spacing: 0.1em;
  color: var(--hp-text-subtle);
}
.hp-search-result__title {
  font-size: var(--hp-text-sm);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hp-search-result__price { font-size: var(--hp-text-sm); color: var(--hp-text-muted); white-space: nowrap; }
.hp-search-result--page { padding-left: var(--hp-sp-3); }

.hp-search-viewall {
  display: inline-flex;
  align-items: center;
  gap: var(--hp-sp-2);
  margin-top: var(--hp-sp-4);
  font-size: var(--hp-text-sm);
  color: var(--hp-gold);
  text-decoration: none;
}
.hp-search-viewall:hover { text-decoration: underline; }

.hp-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hp-sp-4);
  padding: var(--hp-sp-10) var(--hp-sp-4);
  text-align: center;
  color: var(--hp-text-muted);
}
.hp-search-empty p { margin: 0; font-size: var(--hp-text-sm); }

body.hp-search-open { overflow: hidden; }

@media (max-width: 768px) {
  .hp-search-overlay__panel { height: 100%; max-height: 100%; }
  .hp-search-form__input { font-size: var(--hp-text-base); }
  .hp-search-result__price { display: none; }   /* title needs the width more */
}

@media (prefers-reduced-motion: reduce) {
  .hp-search-overlay__panel,
  .hp-search-overlay__scrim { transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   HORIZON-20260902-012 — the rest of the merch-store treatment.

   Measured 2026-09-02 on an entertainer tenant against a live merch store
   (commerce): the four non-commerce themes carry a COPY of the commerce theme's
   single-product / account CSS, but the copy was taken before five blocks were
   added to the original, so on a merch-package tenant those blocks had ZERO
   rules anywhere. What that looked like live on a creator's product page:

     · .hp-gallery-thumb — Core's hp_gallery_thumb_script() builds the thumbnail
       strip on every product page, so every gallery image rendered STACKED AT
       FULL WIDTH under the main photo (a 3-image product was 6,447px tall on
       desktop and 6,845px on a phone). Thumb strip rules below.
     · .hp-swatch — one word chip for every variation option (colours and sizes); the theme showed bare selects.
     · .hp-pdp-breadcrumb — the breadcrumb Core's single-product renderer prints.
     · .show-password-input — WooCommerce ships that button with NO icon; it was
       a bare grey square on the login form.
     · .woocommerce-account .woocommerce — no margin-top for the fixed header, so
       "Login" sat underneath the site header. The theme copy declares
       `margin: 0 auto` AFTER this sheet loads, hence the body-qualified selector
       (0-2-1 beats the theme's 0-2-0).

   ⭐ LIFTED from wp-child-theme-commerce/assets/css/hp-shop.css (993-1030 thumbs,
   1078-1185 swatches, 1816-1836 breadcrumb, 1915-2001 account dashboard + show
   password). One deliberate change: the active-thumb border used
   `var(--hp-color-primary, #111)`, a token no skin defines; it reads --hp-gold.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Product gallery thumbnail strip (built by hp_gallery_thumb_script) ──
   Printify syncs one image per colour/angle, so 24 thumbs on a hoodie is
   normal: the strip scrolls horizontally instead of blowing out the row. */
/* The two PDP grid columns must be allowed to shrink below their content's min-content, or the
   thumbnail strip below (overflow-x:auto, but 14 Printify mockups wide) sets the column width and
   the main image scales to it. Pairs with minmax(0,1fr) in Commerce/single-product.php.
   HORIZON-20260906-011. */
.hp-product-gallery,
.hp-product-summary {
  min-width: 0;
}

.hp-gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.hp-gallery-thumb {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  cursor: pointer;
  border: 2px solid var(--hp-border);
  border-radius: var(--hp-r-sm);
  overflow: hidden;
  opacity: 0.55;
  transition: opacity 0.18s ease, border-color 0.18s ease;
}
.hp-gallery-thumb:hover,
.hp-gallery-thumb--active {
  opacity: 1;
  border-color: var(--hp-gold);
}
.hp-gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ── Variation swatches (initVariationSwatches in hp-commerce-storefront.js) ──
   The native select stays in the DOM for WooCommerce's own variation logic
   and is only visually / AT hidden; without JS it is never hidden and the
   plain dropdown still works. */
.hp-variations-native-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}
.hp-swatch-row {
  margin-bottom: var(--hp-sp-5);
}
.hp-swatch-row__label {
  display: block;
  font-family: var(--hp-font-body);
  font-size: var(--hp-text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
  margin-bottom: var(--hp-sp-2);
}
.hp-swatch-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hp-sp-2);
}
.hp-swatch {
  font-family: var(--hp-font-body);
  cursor: pointer;
  background: var(--hp-bg);
  color: var(--hp-text);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-sm);
  transition: border-color var(--hp-dur) var(--hp-ease),
              background var(--hp-dur) var(--hp-ease),
              color var(--hp-dur) var(--hp-ease),
              box-shadow var(--hp-dur) var(--hp-ease);
}
.hp-swatch:hover {
  border-color: var(--hp-border-strong);
}
.hp-swatch:focus-visible {
  outline: 2px solid var(--hp-gold);
  outline-offset: 2px;
}
/* ONE chip for colours AND sizes (HORIZON-20260927-001, Core 1.41.10): same height, radius, weight and selected
   state, so a product never shows dots, pills and boxes side by side. Selected = the accent fill (set inline by the
   script too, see hpApplySwatchSelection). */
.hp-swatch--chip {
  min-width: 48px;
  height: 44px;
  padding: 0 var(--hp-sp-4);
  border-radius: var(--hp-r-full);
  font-size: var(--hp-text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.hp-swatch--chip.is-selected {
  background: var(--hp-gold) !important;
  border-color: var(--hp-gold) !important;
  color: var(--hp-on-accent) !important;
}
/* The chosen colour, named beside the row label: "COLORS · Solid Pink Blend". */
.hp-swatch-row__value:not(:empty)::before {
  content: '\00B7';
  margin: 0 0.5em;
}
.hp-swatch-row__value {
  text-transform: none;
  letter-spacing: 0;
  color: var(--hp-text);
}
/* WooCommerce's "Clear" link printed as a default blue underlined link under the chips. */
.variations_form .reset_variations {
  font-family: var(--hp-font-body);
  font-size: var(--hp-text-sm);
  color: var(--hp-text-muted);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.variations_form .reset_variations:hover,
.variations_form .reset_variations:focus-visible {
  color: var(--hp-gold);
}
.hp-swatch[disabled] {
  cursor: not-allowed;
  opacity: 0.35;
  position: relative;
}
.hp-swatch[disabled]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--hp-border-strong), transparent calc(50% + 1px));
  border-radius: inherit;
}

/* ── PDP breadcrumb (above the category eyebrow, hp_render_single_product) ── */
.hp-pdp-breadcrumb {
  margin-bottom: var(--hp-sp-4);
}
.hp-pdp-breadcrumb .hp-breadcrumb {
  font-size: var(--hp-text-xs);
  color: var(--hp-text-muted);
}
.hp-pdp-breadcrumb .hp-breadcrumb a {
  color: var(--hp-text-muted);
  text-decoration: none;
}
.hp-pdp-breadcrumb .hp-breadcrumb a:hover {
  color: var(--hp-text);
}

/* ── My Account: clear the fixed header, two-column dashboard, show-password ── */
body.woocommerce-account .woocommerce {
  /* The theme copy has max-width/padding but no header offset, so "Login"
     rendered underneath the fixed header. body-qualified to outrank the
     theme's later `margin: 0 auto` shorthand. */
  margin-top: var(--hp-header-h);
}
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
  display: flex;
  gap: var(--hp-sp-10);
  align-items: flex-start;
}
.password-input {
  position: relative;
  display: block;
}
.show-password-input {
  position: absolute;
  top: 50%;
  right: var(--hp-sp-3);
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: none !important;
  background: transparent !important;
  cursor: pointer;
  padding: 0;
}
.show-password-input::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--hp-text-muted, var(--hp-text));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center / 18px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center / 18px;
}
.woocommerce-MyAccount-content {
  flex: 1;
  font-family: var(--hp-font-body);
  color: var(--hp-text);
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-family: var(--hp-font-display);
  color: var(--hp-text);
}
.woocommerce-MyAccount-content table.shop_table {
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-sm);
}
@media (max-width: 782px) {
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    flex-direction: column;
  }
  .woocommerce-MyAccount-navigation {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* ── Add-to-cart toast (window.hpShowToast in hp-commerce-storefront.js) ──
   Every Horizon theme already styles .hp-toast in its hp-components.css; these
   rules exist so the toast still renders on a theme that does not. Same
   values as the entertainer copy. */
.hp-toast {
  position: fixed;
  bottom: var(--hp-sp-6);
  right: var(--hp-sp-6);
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  gap: var(--hp-sp-3);
  max-width: 360px;
  padding: var(--hp-sp-4) var(--hp-sp-5);
  background: var(--hp-bg-raised);
  border: 1px solid var(--hp-border);
  border-left: 3px solid var(--hp-gold);
  border-radius: var(--hp-r-md);
  color: var(--hp-text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.hp-toast.hp-toast--visible { opacity: 1; transform: none; }
.hp-toast__icon { color: var(--hp-gold); flex: 0 0 auto; margin-top: 2px; }
.hp-toast__icon svg { stroke: currentColor; fill: none; stroke-width: 2; }
.hp-toast__content { flex: 1; }
.hp-toast__title { font-weight: 600; font-size: var(--hp-text-sm); }
.hp-toast__body { font-size: var(--hp-text-sm); color: var(--hp-text-muted); }
.hp-toast__dismiss {
  background: none; border: 0; color: var(--hp-text-muted); cursor: pointer;
  font-size: 18px; line-height: 1; padding: 0; margin-left: var(--hp-sp-2);
}

/* ── Gallery: only the first image paints; the strip above stands in for the
   rest. The four non-commerce theme copies SPACE stacked images
   (`+ .woocommerce-product-gallery__image { margin-top }`) where the commerce
   original HIDES them, so even with the thumb strip styled every gallery image
   still rendered full-size in a column (measured 2026-09-02: 5,602px desktop,
   7,008px phone on a 3-image product). Different property from the theme's
   rule, so load order does not matter. */
.single-product .woocommerce-product-gallery__image + .woocommerce-product-gallery__image {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   STORE POLISH: product page, add-to-cart notice, cart, checkout header
   (Alex, 2026-10-02, a creator's merch review; measured on the live site).

   Every rule is `html body`-prefixed on purpose. This sheet loads BEFORE the five
   theme copies of hp-shop.css, so an equal-specificity theme rule would win.
   Colours, radii and type are tokens only, so a skin keeps its own look.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Header band: ONE quiet treatment on product, cart and checkout ──────
   The product page printed a full-bleed grey band; cart and checkout printed the
   same band BOXED inside the content container (a grey slab with a gap either
   side). Neither carried any design. Both are now an unfilled band: no slab, so
   there is no edge to disagree about, and the title carries a short accent rule. */
html body.woocommerce-cart .hp-page-header,
html body.woocommerce-checkout .hp-page-header,
html body.woocommerce-account .hp-page-header {
  background: transparent;
  border-bottom: 0;
  padding: var(--hp-sp-10) 0 var(--hp-sp-2);
}
html body.woocommerce-cart .hp-page-header__title,
html body.woocommerce-checkout .hp-page-header__title,
html body.woocommerce-account .hp-page-header__title {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  letter-spacing: 0.02em;
  margin-bottom: 0;
}
html body.woocommerce-cart .hp-page-header__title::after,
html body.woocommerce-checkout .hp-page-header__title::after,
html body.woocommerce-account .hp-page-header__title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  margin: var(--hp-sp-4) auto 0;
  background: var(--hp-gold);
  border-radius: var(--hp-r-full);
}

/* My Account joined the band (HORIZON-20261005-024, Core 1.41.109). The band clears the fixed header itself, so the
   account form's own header offset (`body.woocommerce-account .woocommerce { margin-top: var(--hp-header-h) }`, below,
   kept for a page that prints no band) left a gap of a header's height under the title. */
html body.woocommerce-account .hp-page-header + .woocommerce {
  margin-top: var(--hp-sp-6);
}

/* The "Size guide" link under a garment's size picker (hp_size_guide_link(), Core 1.41.107): the same quiet, underlined
   text as the picker's own "Clear" link, not the browser's default blue. Its 44px tap height is inline. */
html body .hp-size-guide-link a {
  color: var(--hp-text);
  font-size: var(--hp-text-sm);
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-underline-offset: 3px;
}
html body .hp-size-guide-link a:hover {
  color: var(--hp-gold);
}

/* Product page: the band is the breadcrumb only (the category moved above the title). */
html body.single-product .hp-page-header {
  background: transparent;
  border-bottom: 1px solid var(--hp-border);
  padding: var(--hp-sp-4) 0;
}
html body.single-product .hp-pdp-breadcrumb {
  margin: 0;
}
html body.single-product .hp-pdp-breadcrumb .hp-breadcrumb {
  font-size: var(--hp-text-sm);
  letter-spacing: 0.02em;
}
html body.single-product .hp-pdp-breadcrumb .hp-breadcrumb a:hover {
  color: var(--hp-gold);
}
html body.single-product .hp-section.product {
  padding-top: var(--hp-sp-10);
}

/* ── 2. Product summary: eyebrow, title, price ───────────────────────────── */
html body.single-product .hp-pdp-eyebrow {
  display: block;
  margin: 0 0 var(--hp-sp-3);
  font-family: var(--hp-font-body);
  font-size: var(--hp-text-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hp-gold);
}
html body.single-product .hp-pdp-eyebrow a {
  color: inherit !important;
  text-decoration: none;
}
html body.single-product .hp-pdp-eyebrow a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
html body.single-product .hp-product-summary .product_title {
  font-size: clamp(1.75rem, 1.1rem + 1.9vw, 2.5rem) !important;
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin-bottom: var(--hp-sp-3) !important;
}
html body.single-product .hp-product-summary .price {
  font-family: var(--hp-font-body);
  font-size: var(--hp-text-xl) !important;
  font-weight: 600;
  color: var(--hp-text) !important;
  margin-bottom: var(--hp-sp-6) !important;
}

/* ── 3. Variations: no grey cells, one rhythm, "Clear" on the label line ─────
   The swatch script inserts its rows INTO <tbody> beside WooCommerce's own <tr>,
   whose cells (8px padding, hairlines, the Clear link) painted as empty grey boxes
   under every row. The table is flattened to blocks; the cells carry nothing but
   the hidden native <select> and the Clear link, which is lifted to the block's
   top right. */
html body.single-product .variations_form table.variations,
html body.single-product .variations_form table.variations tbody,
html body.single-product .variations_form table.variations tr,
html body.single-product .variations_form table.variations th,
html body.single-product .variations_form table.variations td {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
html body.single-product .variations_form table.variations {
  position: relative;
  width: 100%;
  flex: 0 0 100%;
  margin-bottom: var(--hp-sp-2);
}
html body.single-product .variations_form table.variations th.label {
  display: none;
}
html body.single-product .variations_form .hp-swatch-row {
  margin-bottom: var(--hp-sp-6);
}
html body.single-product .variations_form .hp-swatch-row__label {
  font-size: var(--hp-text-sm);
  letter-spacing: 0.1em;
  margin-bottom: var(--hp-sp-3);
}
html body.single-product .variations_form .hp-swatch-group {
  gap: var(--hp-sp-3);
}
html body.single-product .variations_form .hp-swatch--chip {
  min-width: 56px;
  background: var(--hp-bg);
  border-color: var(--hp-border-strong, var(--hp-border));
}
html body.single-product .variations_form .hp-swatch--chip:hover:not(.is-selected):not([disabled]) {
  border-color: var(--hp-text);
}
html body.single-product .variations_form .hp-swatch--chip.is-selected {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hp-gold) 22%, transparent);
}
html body.single-product .variations_form .reset_variations {
  position: absolute;
  top: 2px;
  right: 0;
  font-size: var(--hp-text-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
}
html body.single-product .single_variation_wrap {
  flex: 0 0 100%;
}

/* ── 4. Buy row: stepper + Add to cart on ONE line, trust strip under it ───── */
html body.single-product form.cart:not(.variations_form),
html body.single-product .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--hp-sp-3);
}
html body.single-product form.cart {
  margin-bottom: var(--hp-sp-6) !important;
}
html body.single-product form.cart .single_add_to_cart_button {
  flex: 1 1 170px;
  text-align: center;
  height: 52px !important;
  padding: 0 var(--hp-sp-8);
  border-radius: var(--hp-r-sm);
  font-family: var(--hp-font-body);
  font-size: var(--hp-text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
html body.single-product form.cart .hp-trust-badges {
  flex: 0 0 100%;
  margin-top: var(--hp-sp-2);
}
/* The stepper the script wraps around the quantity input (initQtySteppers). */
html body.single-product form.cart .quantity.hp-stepper {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  height: 52px;
  border: 1px solid var(--hp-border-strong, var(--hp-border));
  border-radius: var(--hp-r-sm);
  background: var(--hp-bg);
  overflow: hidden;
}
html body.single-product form.cart .quantity.hp-stepper input.qty {
  width: 48px;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 1rem;
  font-weight: 600;
}
.hp-stepper__btn {
  flex: 0 0 44px;
  width: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--hp-text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--hp-dur) var(--hp-ease);
}
.hp-stepper__btn:hover:not([disabled]) {
  background: var(--hp-bg-surface);
}
.hp-stepper__btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.hp-stepper__btn:focus-visible {
  outline: 2px solid var(--hp-gold);
  outline-offset: -2px;
}

/* ── 5. Gallery strip: a quiet scrollbar, thumbs that read as a set ────────── */
html body.single-product .hp-gallery-thumbs {
  scrollbar-color: var(--hp-border-strong, var(--hp-border)) transparent;
  gap: var(--hp-sp-2);
  margin-top: var(--hp-sp-3);
  padding-bottom: var(--hp-sp-2);
}
html body.single-product .hp-gallery-thumb {
  border-width: 1px;
  opacity: 0.7;
}
html body.single-product .hp-gallery-thumb:hover,
html body.single-product .hp-gallery-thumb--active {
  opacity: 1;
}
html body.single-product .hp-gallery-thumb--active {
  border-width: 2px;
}

/* ── 6. "Added to cart": a real notice card, not a grey strip ───────────────
   WooCommerce prints a message div holding the "View cart" button and then the sentence, and the theme pinned it
   bottom right as a dark-grey slab with the button jammed mid-sentence. Now: a raised card, a gold check, the
   sentence, and the button in its own right-hand cell. */
html body .woocommerce-notices-wrapper {
  bottom: var(--hp-sp-6) !important;
  right: var(--hp-sp-6) !important;
  max-width: 28rem !important;
}
html body .woocommerce-notices-wrapper .woocommerce-message {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--hp-sp-4);
  padding: var(--hp-sp-4) var(--hp-sp-5) !important;
  background: var(--hp-bg) !important;
  color: var(--hp-text) !important;
  border: 1px solid var(--hp-border) !important;
  border-radius: var(--hp-r-md) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 18px 40px rgba(0, 0, 0, 0.16);
  font-family: var(--hp-font-body);
  font-size: var(--hp-text-sm);
  line-height: 1.45;
  animation: hp-notice-in 0.35s var(--hp-ease, ease) both;
}
html body .woocommerce-notices-wrapper .woocommerce-message::before {
  content: '' !important;
  display: block !important;
  grid-column: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--hp-gold)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 15px no-repeat;
}
html body .woocommerce-notices-wrapper .woocommerce-message .button {
  grid-column: 3;
  grid-row: 1;
  float: none !important;
  margin: 0 !important;
  white-space: nowrap;
  min-height: 40px;
  padding: 0 var(--hp-sp-5);
  display: inline-flex;
  align-items: center;
  border-radius: var(--hp-r-sm);
  font-size: var(--hp-text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html body .woocommerce-notices-wrapper.is-leaving {
  opacity: 0;
  transform: translateY(8px) !important;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none !important;
}
@keyframes hp-notice-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html body .woocommerce-notices-wrapper .woocommerce-message { animation: none; }
  html body .woocommerce-notices-wrapper.is-leaving { transition: none; }
}
/* The AJAX toast (archive "add to cart") matches the notice card. */
.hp-toast {
  background: var(--hp-bg);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-md);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 18px 40px rgba(0, 0, 0, 0.16);
}

/* ── 7. Cart (WooCommerce Blocks) ────────────────────────────────────────── */
/* The stepper's `+` sat outside its own box: WC gives the box a fixed ~107px width and the 44px tap-target buttons
   (set above) no longer fit. The box now sizes to its content and the three parts share one height. */
html body .wc-block-components-quantity-selector {
  display: inline-flex !important;
  align-items: stretch;
  width: auto !important;
  height: 44px;
  background: var(--hp-bg);
  border: 1px solid var(--hp-border-strong, var(--hp-border)) !important;
  border-radius: var(--hp-r-sm) !important;
  overflow: hidden;
}
html body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input {
  width: 44px;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0 !important;
  background: transparent;
  color: var(--hp-text);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  box-shadow: none;
}
html body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px !important;
  height: auto;
  padding: 0;
  opacity: 1;
  font-size: 1.25rem;
  background: transparent;
  border: 0;
  position: static;
}
html body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover:not(:disabled) {
  background: var(--hp-bg-surface);
}
html body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:disabled {
  opacity: 0.35;
}
html body .wc-block-cart-item__quantity {
  display: flex;
  align-items: center;
  gap: var(--hp-sp-4);
  margin-top: var(--hp-sp-3);
}
html body .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
  margin: 0;
  font-size: var(--hp-text-sm);
}
html body .wc-block-cart-items {
  border-collapse: collapse;
}
html body .wc-block-cart-items th {
  padding-bottom: var(--hp-sp-4);
  font-size: var(--hp-text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
  border-bottom: 1px solid var(--hp-border);
}
/* The rule belongs on the ROW: the total cell is display:flex in WC's large layout and ends shorter than the row, so
   a per-cell border drew a second, shorter line under the price. */
html body .wc-block-cart-items .wc-block-cart-items__row {
  border-bottom: 1px solid var(--hp-border);
}
html body .wc-block-cart-items .wc-block-cart-items__row td {
  padding-top: var(--hp-sp-6);
  padding-bottom: var(--hp-sp-6);
  border-top: 0;
  border-bottom: 0;
  vertical-align: top;
}
html body .wc-block-cart-items .wc-block-cart-item__image {
  width: 112px;
  padding-right: var(--hp-sp-5);
}
html body .wc-block-cart-item__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--hp-bg-surface);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-sm);
}
html body .wc-block-cart-item__product .wc-block-components-product-name {
  font-size: var(--hp-text-lg, 1.125rem) !important;
  font-weight: 600 !important;
  line-height: 1.3;
}
html body .wc-block-cart-item__total .wc-block-components-product-price,
html body .wc-block-cart-item__total .wc-block-formatted-money-amount {
  font-size: var(--hp-text-base);
  font-weight: 600;
}
html body .wc-block-cart__sidebar,
html body .wc-block-cart-totals-block .wc-block-components-sidebar {
  background: var(--hp-bg) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 14px 36px rgba(0, 0, 0, 0.07);
}
html body .wc-block-cart__totals-title {
  padding: 0 0 var(--hp-sp-4) !important;
  font-size: var(--hp-text-lg, 1.125rem) !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (min-width: 783px) {
  html body .wc-block-cart__sidebar {
    position: sticky;
    top: calc(var(--hp-header-h, 72px) + var(--hp-sp-4));
  }
}
html body .wc-block-cart__submit-button {
  min-height: 56px;
  font-size: var(--hp-text-sm);
  letter-spacing: 0.08em;
}

/* ── 8. Checkout: the summary was a card inside a second card ─────────────── */
html body .wc-block-checkout__sidebar {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
/* One card, one shadow: it was set on the block AND the summary inside it, which drew a grey band across the items. */
html body .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
  background: var(--hp-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 14px 36px rgba(0, 0, 0, 0.07);
}

/* Breadcrumb: one line, the current product name ellipsised, so a long name never makes a two-line band on a phone. */
html body.single-product .hp-pdp-breadcrumb .hp-breadcrumb {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (max-width: 640px) {
  html body.single-product .hp-page-header {
    padding: var(--hp-sp-3) 0;
  }
  html body.single-product .hp-section.product {
    padding-top: var(--hp-sp-5);
  }
  /* A touch device shows its own overlay scrollbar; the thick grey bar under the thumbnails was that. */
  html body.single-product .hp-gallery-thumbs {
    scrollbar-width: none;
  }
}

/* Phones: the notice spans the width with the button on its own full-width row (three cells left the sentence a
   170px column), and clears the home indicator. */
@media (max-width: 520px) {
  html body .woocommerce-notices-wrapper {
    right: var(--hp-sp-4) !important;
    bottom: calc(var(--hp-sp-4) + env(safe-area-inset-bottom, 0px)) !important;
    width: calc(100% - (var(--hp-sp-4) * 2)) !important;
    max-width: none !important;
  }
  html body .woocommerce-notices-wrapper .woocommerce-message {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: var(--hp-sp-3);
  }
  html body .woocommerce-notices-wrapper .woocommerce-message .button {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
    min-height: 44px;
  }
}

/* Tap floor for the two links -066 made standalone (mobile ratchet, 2026-10-02: 16 new tap-small findings on every
   product page at 375-1024). Same house pattern as `.product_meta .posted_in a` in hp-mobile.css: a 44px box with
   the text centred in it. The eyebrow drops its own bottom margin because the taller link now carries that space,
   so the gap to the title barely moves; "Clear" is lifted by half its extra height so its text stays on the label line. */
html body.single-product .hp-pdp-eyebrow {
  margin-bottom: 0;
}
html body.single-product .hp-pdp-eyebrow a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
}
html body.single-product .variations_form .reset_variations {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 44px;
  min-width: 44px;
  top: -12px;
}

/* ── Add to cart label centred (Alex, 2026-10-02: "left justified ADD TO CART") ────────────────────────────────
   The theme's button is a flex box with its items at the start, so `text-align` never centred the label. */
html body.single-product form.cart .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── The "added to cart" card (hpBuildAddedCard in hp-commerce-storefront.js) ───────────────────────────────────
   Drops in at the top right under the header, clear of the floating My Links button that sat behind the old
   bottom-right notice. WooCommerce's own message is kept, hidden, as the no-JS fallback. */
html body .woocommerce-notices-wrapper.hp-has-added {
  top: calc(var(--hp-header-h, 72px) + var(--hp-sp-4)) !important;
  bottom: auto !important;
  right: var(--hp-sp-6) !important;
  width: 380px !important;
  max-width: calc(100% - (var(--hp-sp-4) * 2)) !important;
}
html body .woocommerce-notices-wrapper .woocommerce-message.hp-added-source {
  display: none !important;
}
/* A product card's add (hpShowAddedForButton) has no notices wrapper, so the card gets its own fixed box at the
   same spot. Under the slide-out cart (9999), which "View cart" opens as the card leaves. */
.hp-added-host {
  position: fixed;
  z-index: 9990;
  top: calc(var(--hp-header-h, 72px) + var(--hp-sp-4));
  right: var(--hp-sp-6);
  width: 380px;
  max-width: calc(100% - (var(--hp-sp-4) * 2));
}
.hp-added-host.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.hp-added {
  position: relative;
  overflow: hidden;
  padding: var(--hp-sp-5);
  background: var(--hp-bg);
  color: var(--hp-text);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-md);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 24px 56px rgba(0, 0, 0, 0.18);
  font-family: var(--hp-font-body);
  animation: hp-added-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes hp-added-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.hp-added__head {
  display: flex;
  align-items: center;
  gap: var(--hp-sp-3);
  margin: calc(var(--hp-sp-2) * -1) calc(var(--hp-sp-3) * -1) var(--hp-sp-3) 0;
}
.hp-added__check {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--hp-gold)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}
.hp-added__title {
  flex: 1 1 auto;
  font-size: var(--hp-text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hp-added__close {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--hp-text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--hp-r-full);
  transition: color var(--hp-dur) var(--hp-ease), background var(--hp-dur) var(--hp-ease);
}
.hp-added__close:hover {
  color: var(--hp-text);
  background: var(--hp-bg-surface);
}
.hp-added__item {
  display: flex;
  align-items: center;
  gap: var(--hp-sp-4);
  padding: var(--hp-sp-3) 0 var(--hp-sp-4);
  border-top: 1px solid var(--hp-border);
}
.hp-added__thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  overflow: hidden;
  background: var(--hp-bg-surface);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-sm);
}
.hp-added__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hp-added__text {
  min-width: 0;
}
.hp-added__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hp-added__qty {
  margin: var(--hp-sp-1) 0 0;
  font-size: 1rem;
  color: var(--hp-text-muted);
}
.hp-added__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hp-sp-3);
}
.hp-added__view,
.hp-added__continue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--hp-sp-4);
  border-radius: var(--hp-r-sm);
  font-family: var(--hp-font-body);
  font-size: var(--hp-text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--hp-dur) var(--hp-ease), border-color var(--hp-dur) var(--hp-ease), color var(--hp-dur) var(--hp-ease);
}
html body .hp-added .hp-added__view {
  background: var(--hp-text);
  border: 1px solid var(--hp-text);
  color: var(--hp-bg);
}
html body .hp-added .hp-added__view:hover {
  background: var(--hp-gold);
  border-color: var(--hp-gold);
  color: var(--hp-on-accent);
}
.hp-added__continue {
  background: transparent;
  border: 1px solid var(--hp-border-strong, var(--hp-border));
  color: var(--hp-text);
}
.hp-added__continue:hover {
  border-color: var(--hp-text);
}
.hp-added__view:focus-visible,
.hp-added__continue:focus-visible,
.hp-added__close:focus-visible {
  outline: 2px solid var(--hp-gold);
  outline-offset: 2px;
}
.hp-added__timer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--hp-gold);
  transform-origin: left center;
  transform: scaleX(0);
}
.hp-added.is-counting .hp-added__timer {
  animation: hp-added-timer 7s linear both;
}
@keyframes hp-added-timer {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hp-added { animation: none; }
  .hp-added.is-counting .hp-added__timer { animation: none; }
  .hp-added-host.is-leaving { transition: none; }
}
@media (max-width: 520px) {
  html body .woocommerce-notices-wrapper.hp-has-added {
    top: calc(var(--hp-header-h, 64px) + var(--hp-sp-2)) !important;
    right: var(--hp-sp-3) !important;
    width: calc(100% - (var(--hp-sp-3) * 2)) !important;
    max-width: none !important;
  }
  .hp-added-host {
    top: calc(var(--hp-header-h, 64px) + var(--hp-sp-2));
    right: var(--hp-sp-3);
    width: calc(100% - (var(--hp-sp-3) * 2));
    max-width: none;
  }
}