/**
 * Commerce chrome: the merch parts that can appear on ANY page. Horizon Core.
 *
 * HORIZON-20261009-057 (scope: docs/fleet-stylesheet-scope-2026-10-09.md). Split out of
 * hp-commerce-storefront.css, VERBATIM and in the original order: trust badges (incl. the home band), the slide-out
 * cart drawer + header cart/account/search icons, the predictive search overlay, the add-to-cart toast, the
 * "added to cart" card a product card's add opens, and the fleet card-button default.
 *
 * Enqueued on EVERY page of a merch tenant (the drawer is a wp_footer overlay opened from the header everywhere).
 * hp-commerce-storefront.css (shop, product, cart, checkout, account) loads only on WooCommerce pages and the
 * commerce home, ALWAYS AFTER this file, so rules keep their original relative order.
 *
 * ⛔ A rule for something a non-shop page can show belongs HERE, not in the storefront file, or it silently
 * vanishes off the shop. Measured with Chrome CSS rule-usage on 19 non-shop pages of 9 merch tenants:
 * docs/research/fleet-css-audit-2026-10-09/.
 *
 * @package Horizon_Core
 */

/* ══ 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);
}

/* ══ 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;
}

/* ══ 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; }
}

/* ── 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);
}
/* 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);
}
/* ── 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;
  }
}
/* ══ Fleet shop defaults (HORIZON-20261008-071) ═════════════════════════════════════════════════════════════════
   Alex, 2026-10-08: ship them to every merch store. Each store's own skin colours; a store's look sheet may restyle.
   The shell's hp-shop.css forces card buttons with !important, so the overridden properties carry it here too. */

/* Card button: quiet outline ONLY where the card leads to a page (options to choose, or an outside shop). A simple
   product keeps its solid "Add to cart". */
.woocommerce ul.products li.product a.button.product_type_variable,
.woocommerce ul.products li.product a.button.product_type_external {
	background: transparent !important;
	border: 1px solid var(--hp-border-strong, rgba(255, 255, 255, 0.28)) !important;
	color: var(--hp-text) !important;
	height: 44px !important;
	font-size: 14px;
}
.woocommerce ul.products li.product a.button.product_type_variable:hover,
.woocommerce ul.products li.product a.button.product_type_external:hover {
	background: transparent !important;
	border-color: var(--hp-gold) !important;
	color: var(--hp-gold) !important;
}