/**
 * Horizon Theme — Components
 * Buttons, cards, badges, platform links, social icons, tiles.
 */

/* ==========================================================================
   Skip-to-content link (accessibility)
   ========================================================================== */

.hp-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
  white-space: nowrap;
}
.hp-skip-link:focus {
  position: fixed;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  padding: var(--hp-sp-3) var(--hp-sp-6);
  background: var(--hp-bg-surface);
  color: var(--hp-text);
  font-size: var(--hp-text-base);
  font-weight: 500;
  text-decoration: none;
  border-right: 2px solid var(--hp-gold);
  border-bottom: 2px solid var(--hp-gold);
  outline: none;
  box-shadow: var(--hp-shadow-raised);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 48px;
  padding: 0 1.5rem;
  border-radius: var(--hp-r-sm);
  font-family: var(--hp-font-body);
  font-size: var(--hp-text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background var(--hp-dur) var(--hp-ease),
              color var(--hp-dur) var(--hp-ease),
              transform var(--hp-dur) var(--hp-ease),
              box-shadow var(--hp-dur) var(--hp-ease);
  white-space: nowrap;
}

/* 1.5.19: under a font pack with `display_headings` (see hp-base.css), buttons take the pack's face, weight, case
   and tracking, as her old site's did. Only that body class enables it. */
.hp-display-headings .hp-btn {
  font-family: var(--hp-btn-font, var(--hp-font-body));
  font-weight: var(--hp-btn-weight, 600);
  text-transform: var(--hp-btn-case, none);
  letter-spacing: var(--hp-btn-tracking, 0.04em);
}

.hp-btn:disabled,
.hp-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — gold fill.
   1.5.19 (HORIZON-20260930-034): fill, ink and hover read opt-in tokens that only a colour pack sets (scarlet-ink:
   black, red on hover). Every fallback is the value painted before, so no other tenant changes. */
.hp-btn--primary {
  background: var(--hp-btn-primary-bg, var(--hp-gold));
  color: var(--hp-btn-primary-fg, var(--hp-on-accent));
}

.hp-btn--primary:hover {
  background: var(--hp-btn-primary-hover-bg, var(--hp-gold-light));
  color: var(--hp-btn-primary-hover-fg, var(--hp-on-accent));
  transform: translateY(-1px);
  box-shadow: var(--hp-shadow-gold);
}

.hp-btn--primary:active {
  background: var(--hp-gold-dark);
  transform: translateY(0);
}

/* Secondary — outlined */
.hp-btn--secondary {
  background: transparent;
  color: var(--hp-gold);
  border: 1px solid var(--hp-border-strong);
}

.hp-btn--secondary:hover {
  background: var(--hp-gold-muted);
  color: var(--hp-gold-light);
  border-color: var(--hp-gold);
}

/* Ghost — text only */
.hp-btn--ghost {
  background: transparent;
  color: var(--hp-gold);
  padding: 0;
  height: auto;
}

.hp-btn--ghost:hover {
  color: var(--hp-gold-light);
}

/* Size variants */
.hp-btn--sm {
  height: 36px;
  padding: 0 1rem;
  font-size: var(--hp-text-xs);
}

.hp-btn--lg {
  height: 56px;
  padding: 0 2rem;
  font-size: var(--hp-text-base);
}

/* Loading state */
.hp-btn--loading {
  pointer-events: none;
  opacity: 0.7;
}

.hp-btn--loading::after {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: hp-spin 0.7s linear infinite;
  margin-left: 0.5rem;
}

@keyframes hp-spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   Cards
   ========================================================================== */

/* HORIZON-20261001-023: the card ground and border are opt-in tokens (fallbacks = the values painted before), so a
   colour pack can give a light site white cards that float on a soft shadow (scarlet-ink, one creator's old cards). */
.hp-card {
  background: var(--hp-card-bg, var(--hp-bg-surface));
  border: 1px solid var(--hp-card-border, var(--hp-border));
  border-radius: var(--hp-r-md);
  box-shadow: var(--hp-shadow-card);
  transition: border-color var(--hp-dur) var(--hp-ease),
              box-shadow var(--hp-dur) var(--hp-ease),
              transform var(--hp-dur) var(--hp-ease);
}

.hp-card:hover {
  border-color: var(--hp-border-strong);
  box-shadow: var(--hp-shadow-raised);
  transform: translateY(-2px);
}

/* ==========================================================================
   Badges / Pills
   ========================================================================== */

.hp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 24px;
  padding: 0 0.625rem;
  border-radius: var(--hp-r-full);
  font-family: var(--hp-font-body);
  font-size: var(--hp-text-xs);
  font-weight: 500;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.hp-badge--gold {
  background: var(--hp-gold-muted);
  color: var(--hp-gold);
  border: 1px solid var(--hp-border);
}

.hp-badge--unlocked {
  background: var(--hp-success-muted);
  color: var(--hp-success);
  border: 1px solid rgba(110, 184, 122, 0.3);
}

.hp-badge--locked {
  background: rgba(201, 169, 110, 0.1);
  color: var(--hp-gold);
  border: 1px solid var(--hp-border);
}

.hp-badge--live {
  background: var(--hp-error-muted);
  color: var(--hp-error);
  border: 1px solid rgba(201, 110, 110, 0.3);
}

.hp-badge--live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hp-error);
  animation: hp-pulse 1.5s ease-in-out infinite;
}

@keyframes hp-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ==========================================================================
   Platform Links
   ========================================================================== */

.hp-platform-bar {
  background: var(--hp-bg);
  border-top: 1px solid var(--hp-border);
  border-bottom: 1px solid var(--hp-border);
  padding: var(--hp-sp-6) 0;
}

.hp-platform-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--hp-sp-8);
  overflow-x: auto;
  padding: var(--hp-sp-2) var(--hp-content-pad);
  max-width: var(--hp-content-max);
  margin: 0 auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hp-platform-bar__inner::-webkit-scrollbar { display: none; }

.hp-platform-bar__label {
  flex-shrink: 0;
  font-size: var(--hp-text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
}

.hp-platform-links {
  display: flex;
  gap: var(--hp-sp-3);
  flex-shrink: 0;
}

.hp-platform-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hp-sp-1);
  padding: var(--hp-sp-3);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-md);
  background: var(--hp-bg-surface);
  text-decoration: none;
  transition: border-color var(--hp-dur) var(--hp-ease),
              box-shadow var(--hp-dur) var(--hp-ease);
  min-width: 80px;
}

.hp-platform-link:hover {
  border-color: var(--hp-border-strong);
  box-shadow: var(--hp-shadow-gold);
}

.hp-platform-link__icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: brightness(0.8);
  transition: filter var(--hp-dur) var(--hp-ease);
}

.hp-platform-link svg {
  width: 28px;
  height: 28px;
  fill: var(--hp-text-muted);
  transition: fill var(--hp-dur) var(--hp-ease);
}

.hp-platform-link:hover .hp-platform-link__icon,
.hp-platform-link:hover svg {
  filter: brightness(1);
  fill: var(--hp-text);
}

/* An OUTLINE icon here (fill="none": the globe fallback for Mynx, JOI, Cash App, Slushy, Clapper, Throne, Fanbase) was
   filled by the two rules above and, with hp-responsive.css stripping every platform icon's stroke, drew as a solid
   blob. HORIZON-20261001-013 let a pack opt out (one creator site); HORIZON-20261001-018 (Alex: "Fix for every site
   fleet wide") makes the outline the DEFAULT: no fill, stroked in the same ink as the filled brand marks beside it
   (`.hp-platform-link .hp-icon--brand` in hp-responsive.css: --hp-text, accent on hover). Filled brand marks are
   unaffected (they carry no fill="none"). A pack can still set --hp-platform-outline-fill / --hp-platform-outline-stroke. */
.hp-platform-link svg[fill="none"] {
  fill: var(--hp-platform-outline-fill, none);
  stroke: var(--hp-platform-outline-stroke, var(--hp-text));
}
.hp-platform-link:hover svg[fill="none"] {
  fill: var(--hp-platform-outline-fill, none);
  stroke: var(--hp-platform-outline-stroke, var(--hp-gold));
}

.hp-platform-link__name {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hp-text-muted);
}

/* ==========================================================================
   Social Links
   ========================================================================== */

/* HORIZON-20261001-005: the legacy-style chip (a creator's old site): a solid disc, no border, a filled brand mark,
   and the disc fills with the accent on hover. Scope D1 (36px disc, 16px logo, 8px apart), D3, Plan P4 (logo in the
   full text colour).
   ⛔ The LINK stays 44 x 44: the signed site threshold (2026-09-24) is taps >= 44px and hz-mobile-ratchet.mjs measures
   the anchor's box. The 36px disc is its background clipped to the content box inside 4px of tappable padding, and
   the row has no gap, so the visible space between discs is still 8px (4 + 4). Alex chose this over 36/32px links
   on 2026-10-01, which dropped Plan P5: nine chips wrap 7 + 2 on a 375px phone.
   Tokens only: the disc is the text colour at 20% over the page ground (legacy #333 on black is exactly 20% white),
   so light skins get a pale disc and dark skins a dark one. --hp-chip-bg / --hp-chip-fg are opt-in pack overrides.
   Contrast on every skin, pack and live tenant: docs/research/social-icon-brand-marks-2026-10-01/chip-contrast.mjs.
   The logo's fill comes from Core (hp-mobile.css): this theme's .hp-icon rule would otherwise draw it as an outline. */
.hp-social-links {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}

.hp-social-link {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 4px;
  border-radius: 50%;
  border: 0;
  /* one box value in the shorthand sets background-origin AND background-clip; every background on this chip repeats it */
  background: var(--hp-chip-bg, color-mix(in srgb, var(--hp-text) 20%, var(--hp-bg))) content-box;
  color: var(--hp-chip-fg, var(--hp-text));
  transition: background-color var(--hp-dur) var(--hp-ease),
              color var(--hp-dur) var(--hp-ease);
}

.hp-social-link:hover,
.hp-social-link:focus-visible {
  background: var(--hp-gold) content-box;
  color: var(--hp-on-accent);
}

.hp-social-link svg {
  width: 16px;
  height: 16px;
}

/* Without color-mix() the whole var() declaration becomes transparent (invalid at computed-value time); it does NOT
   fall back to an earlier line, so the fallback has to be its own rule. */
@supports not (background: color-mix(in srgb, red 20%, blue)) {
  .hp-social-link {
    background: var(--hp-chip-bg, var(--hp-bg-raised)) content-box;
  }
}

/* Windows high contrast removes backgrounds; give the chip back the edge the old border gave it. */
@media (forced-colors: active) {
  .hp-social-link {
    border: 1px solid CanvasText;
  }
}

/* ==========================================================================
   Subscribe Tier Cards
   ========================================================================== */

.hp-tiers {
  display: flex;
  gap: var(--hp-sp-6);
  justify-content: center;
  flex-wrap: wrap;
}

.hp-tier-card {
  background: var(--hp-bg-surface);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-lg);
  padding: var(--hp-sp-8);
  flex: 1;
  min-width: 280px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: var(--hp-sp-6);
  transition: border-color var(--hp-dur) var(--hp-ease),
              box-shadow var(--hp-dur) var(--hp-ease);
}

.hp-tier-card--featured {
  border-color: var(--hp-border-strong);
  box-shadow: var(--hp-shadow-gold);
  transform: scale(1.02);
  position: relative;
}

.hp-tier-card__featured-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--hp-gold);
  color: var(--hp-on-accent);
  font-size: var(--hp-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 1rem;
  border-radius: var(--hp-r-full);
  white-space: nowrap;
}

.hp-tier-card__name {
  font-family: var(--hp-font-body);
  font-size: var(--hp-text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hp-gold);
  margin-bottom: 0;
}

.hp-tier-card__price-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.hp-tier-card__price {
  font-family: var(--hp-font-display);
  font-size: var(--hp-text-4xl);
  font-weight: 600;
  color: var(--hp-text);
  line-height: 1;
}

.hp-tier-card__period {
  font-size: var(--hp-text-sm);
  color: var(--hp-text-muted);
}

.hp-tier-card__benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--hp-sp-3);
  flex: 1;
}

.hp-tier-card__benefits li {
  display: flex;
  align-items: flex-start;
  gap: var(--hp-sp-3);
  font-size: var(--hp-text-sm);
  color: var(--hp-text-muted);
}

.hp-tier-card__benefits li::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background-color: var(--hp-gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 3.5 6 11 2.5 7.5l-1 1 4.5 4.5 8.5-8.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 3.5 6 11 2.5 7.5l-1 1 4.5 4.5 8.5-8.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.hp-tier-card__cta {
  width: 100%;
  justify-content: center;
}

.hp-tier-card__trust {
  font-size: var(--hp-text-xs);
  color: var(--hp-text-subtle);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

/* ==========================================================================
   Email Signup
   ========================================================================== */

.hp-email-signup {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

.hp-email-signup h2 {
  margin-bottom: var(--hp-sp-3);
}

.hp-email-signup__body {
  color: var(--hp-text-muted);
  margin-bottom: var(--hp-sp-6);
}

.hp-email-signup__form {
  display: flex;
  gap: var(--hp-sp-3);
}

.hp-email-signup__input {
  flex: 1;
  background: var(--hp-bg-surface);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-sm);
  color: var(--hp-text);
  font-family: var(--hp-font-body);
  font-size: var(--hp-text-sm);
  padding: 0 1rem;
  height: 48px;
  transition: border-color var(--hp-dur) var(--hp-ease);
}

.hp-email-signup__input:focus {
  outline: none;
  border-color: var(--hp-border-strong);
}

.hp-email-signup__privacy {
  font-size: var(--hp-text-xs);
  color: var(--hp-text-subtle);
  margin-top: var(--hp-sp-3);
}

/* ==========================================================================
   Toast notification
   ========================================================================== */

.hp-toast {
  position: fixed;
  bottom: var(--hp-sp-6);
  right: var(--hp-sp-6);
  z-index: 9999;
  width: 340px;
  background: var(--hp-bg-raised);
  border: 1px solid var(--hp-border-strong);
  border-radius: var(--hp-r-md);
  box-shadow: var(--hp-shadow-raised);
  padding: var(--hp-sp-4) var(--hp-sp-6);
  display: flex;
  gap: var(--hp-sp-4);
  align-items: flex-start;
  transform: translateX(calc(100% + 2rem));
  opacity: 0;
  transition: transform 0.4s var(--hp-ease), opacity 0.4s var(--hp-ease);
  border-left: 4px solid var(--hp-gold);
}

.hp-toast.hp-toast--visible {
  transform: translateX(0);
  opacity: 1;
}

.hp-toast__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--hp-gold-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hp-gold);
}

.hp-toast__content { flex: 1; }

.hp-toast__title {
  font-weight: 600;
  font-size: var(--hp-text-sm);
  color: var(--hp-text);
  margin-bottom: var(--hp-sp-1);
}

.hp-toast__body {
  font-size: var(--hp-text-sm);
  color: var(--hp-text-muted);
}

.hp-toast__dismiss {
  background: none;
  border: none;
  color: var(--hp-text-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.hp-toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--hp-gold);
  border-radius: 0 0 0 var(--hp-r-md);
  animation: hp-toast-progress 6s linear forwards;
}

@keyframes hp-toast-progress {
  from { width: 100%; }
  to   { width: 0; }
}

/* ==========================================================================
   Subscribe CTA banner (inline)
   ========================================================================== */

.hp-subscribe-cta {
  background: var(--hp-bg);
  padding: var(--hp-sp-24) 0;
  position: relative;
  overflow: hidden;
}

.hp-subscribe-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 70% 50%, rgba(201,169,110,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.hp-subscribe-cta__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--hp-sp-16);
  align-items: center;
}

.hp-subscribe-cta__photo {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--hp-r-lg);
  box-shadow: var(--hp-shadow-raised), 0 0 60px rgba(201,169,110,0.15);
}

.hp-subscribe-cta__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.9) saturate(0.9) sepia(0.1);
}

.hp-subscribe-cta__content { position: relative; z-index: 1; }

.hp-subscribe-cta__tier-pill {
  display: inline-block;
  margin-bottom: var(--hp-sp-4);
}

.hp-subscribe-cta__price {
  font-family: var(--hp-font-body);
  font-size: var(--hp-text-4xl);
  font-weight: 600;
  color: var(--hp-gold);
  line-height: 1;
  margin-bottom: var(--hp-sp-2);
}

.hp-subscribe-cta__price-period {
  font-size: var(--hp-text-lg);
  color: var(--hp-text-muted);
}

.hp-subscribe-cta__benefits {
  list-style: none;
  margin: var(--hp-sp-6) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--hp-sp-3);
}

.hp-subscribe-cta__benefits li {
  display: flex;
  align-items: center;
  gap: var(--hp-sp-3);
  font-size: var(--hp-text-sm);
  color: var(--hp-text-muted);
}

.hp-subscribe-cta__benefits li::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: var(--hp-gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 3.5 6 11 2.5 7.5l-1 1 4.5 4.5 8.5-8.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 3.5 6 11 2.5 7.5l-1 1 4.5 4.5 8.5-8.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.hp-subscribe-cta__actions {
  display: flex;
  align-items: center;
  gap: var(--hp-sp-4);
  flex-wrap: wrap;
  margin-top: var(--hp-sp-6);
}

.hp-subscribe-cta__trust {
  font-size: var(--hp-text-xs);
  color: var(--hp-text-subtle);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: var(--hp-sp-4);
}

/* Subscribe sticky footer bar */
.hp-subscribe-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--hp-bg-raised);
  border-top: 1px solid var(--hp-border);
  height: 64px;
  display: flex;
  align-items: center;
  transform: translateY(100%);
  transition: transform 0.35s var(--hp-ease);
}

.hp-subscribe-bar.hp-subscribe-bar--visible {
  transform: translateY(0);
}

.hp-subscribe-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hp-sp-4);
  width: 100%;
}

.hp-subscribe-bar__text {
  font-size: var(--hp-text-sm);
  color: var(--hp-text-muted);
}

/* ==========================================================================
   Icon SVG helper class
   ========================================================================== */

.hp-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .hp-subscribe-cta__inner {
    grid-template-columns: 1fr;
  }

  .hp-subscribe-cta__photo {
    max-height: 360px;
  }

  .hp-email-signup__form {
    flex-direction: column;
  }

  .hp-tiers {
    flex-direction: column;
    align-items: center;
  }

  .hp-tier-card--featured {
    transform: none;
  }

  .hp-toast {
    width: calc(100vw - 2rem);
    right: 1rem;
    bottom: 1rem;
  }
}

/* ==========================================================================
   Hero (shared component)
   Used by the front page and several page templates (about, subscribe,
   collabs, live, best-sellers). Lives here so it loads on every page — it was
   previously in hp-home.css, which only enqueues on the front page, leaving
   the hero unstyled (and content pushed below the fold) everywhere else.
   ========================================================================== */

.hp-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

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

.hp-hero__bg img,
.hp-hero__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hp-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Canonical "About fade" — a vertical gradient that melts the hero image into
     the page background at the bottom. Shared by every full-image hero (home,
     about, subscribe, collabs, live, best-sellers, shows) for a consistent,
     luxury look. Per-page inline overlay overrides were removed so they all
     inherit this. */
  background: var(--hp-hero-overlay);
}

.hp-hero__inner {
  position: relative;
  z-index: 2;
  padding: 0 var(--hp-content-pad) var(--hp-sp-24);
  max-width: var(--hp-content-max);
  width: 100%;
  margin: 0 auto;
}

.hp-hero__eyebrow {
  display: inline-block;
  font-size: var(--hp-text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* HORIZON-20261001-023: opt-in (scarlet-ink: her ink, as her old site's eyebrow). Fallback = before. */
  color: var(--hp-hero-eyebrow-color, var(--hp-gold));
  margin-bottom: var(--hp-sp-4);
}

.hp-hero__title {
  font-family: var(--hp-font-display);
  font-size: var(--hp-text-hero);
  font-weight: 400;
  /* Falls back to --hp-text, so this is a no-op unless a colour pack opts in.
     HORIZON-20260821-031. */
  color: var(--hp-hero-title-color, var(--hp-text));
  margin-bottom: var(--hp-sp-4);
  line-height: 1.0;
  max-width: 14ch;
}

/* 1.5.19: under a display-headings font pack the hero name takes the pack's hero weight and case (her old site:
   Montserrat 900, capitals). (0,2,0) beats the (0,1,1) heading rule in hp-base.css. */
.hp-display-headings .hp-hero__title {
  font-weight: var(--hp-hero-weight, 400);
  text-transform: var(--hp-display-case, none);
  letter-spacing: var(--hp-display-tracking, normal);
}

.hp-hero__tagline {
  font-family: var(--hp-font-display);
  font-style: italic;
  font-size: var(--hp-text-2xl);
  color: var(--hp-text-muted);
  margin-bottom: var(--hp-sp-8);
}

/* 1.5.22 (HORIZON-20261001-007): under a display-headings font pack the tagline takes the pack's style, weight, size,
   case and tracking (her old site: upright Montserrat 14px 700, capitals, 2px). Every fallback is today's value, and
   hp-responsive.css mirrors its two phone steps the same way, so a pack without these tokens looks as before.
   (0,2,0) beats those (0,1,0) phone rules, which is why the size is a token here. */
.hp-display-headings .hp-hero__tagline {
  font-style: var(--hp-tagline-style, italic);
  font-weight: var(--hp-tagline-weight, 400);
  font-size: var(--hp-tagline-size, var(--hp-text-2xl));
  text-transform: var(--hp-display-case, none);
  letter-spacing: var(--hp-tagline-tracking, normal);
}

/* 1.5.22: link-card titles (Core's quick_links, `.hp-quick-link__title`) take the display face, case and tracking
   under the same class. Weight and colour are tokens in the span's own inline style (Core 1.41.45). */
.hp-display-headings .hp-quick-link__title {
  font-family: var(--hp-font-display);
  text-transform: var(--hp-display-case, none);
  letter-spacing: var(--hp-card-title-tracking, normal);
}

.hp-hero__cta {
  display: flex;
  gap: var(--hp-sp-4);
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .hp-hero__inner {
    padding-bottom: var(--hp-sp-16);
  }

  .hp-hero__title {
    max-width: 100%;
  }

  .hp-hero__cta {
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
  }

  .hp-hero__cta .hp-btn {
    flex: 1;
    min-width: 0;
    justify-content: center;
  }
}

/* ==========================================================================
   Merch grid + product card (shared component)
   Used by the home "Store" preview (front-page.php) and the Best Sellers page
   (page-best-sellers.php). Previously lived in hp-home.css (home-only enqueue),
   so the Best Sellers merch cards rendered unstyled.
   ========================================================================== */

.hp-merch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--hp-sp-4);
}

.hp-product-card {
  background: var(--hp-bg-surface);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-r-md);
  overflow: hidden;
  transition: border-color var(--hp-dur) var(--hp-ease),
              box-shadow var(--hp-dur) var(--hp-ease),
              transform var(--hp-dur) var(--hp-ease);
  position: relative;
}

.hp-product-card:hover {
  border-color: var(--hp-border-strong);
  box-shadow: var(--hp-shadow-raised);
  transform: translateY(-2px);
}

.hp-product-card__image-wrap {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
}

.hp-product-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--hp-ease);
}

.hp-product-card:hover .hp-product-card__image-wrap img {
  transform: scale(1.04);
}

.hp-product-card__hover-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--hp-sp-3);
  background: var(--hp-card-veil);
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--hp-dur) var(--hp-ease),
              transform var(--hp-dur) var(--hp-ease);
}

.hp-product-card:hover .hp-product-card__hover-btn {
  opacity: 1;
  transform: translateY(0);
}

.hp-product-card__info {
  padding: var(--hp-sp-4);
}

.hp-product-card__name {
  font-weight: 600;
  font-size: var(--hp-text-sm);
  color: var(--hp-text);
  margin-bottom: var(--hp-sp-2);
}

.hp-product-card__name a {
  color: inherit;
  text-decoration: none;
  transition: color var(--hp-dur) var(--hp-ease);
}

.hp-product-card__name a:hover {
  color: var(--hp-gold);
}

.hp-product-card__price {
  font-size: var(--hp-text-sm);
  font-weight: 600;
  color: var(--hp-gold);
}

.hp-product-card__price a {
  color: inherit;
  text-decoration: none;
}

.hp-product-card__badge {
  position: absolute;
  top: var(--hp-sp-3);
  left: var(--hp-sp-3);
}

@media (max-width: 1024px) {
  .hp-merch-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .hp-merch-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--hp-sp-3);
  }
}

/* ==========================================================================
   Utilities
   ========================================================================== */

/* ── Pitch TILE (HORIZON-20261001-013) ──
   Core's pitch_panel layout 'tile' (only `links-first` names it; one creator's custom-requests card): one landscape card,
   the image filling it, a dark wash from the left, the words and button bottom left, the slot's badge top right. Every
   class here is new, so no existing markup is affected. */
.hp-pitch-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(300px, 36vw, 460px);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--hp-r-md);
  background: var(--hp-band-bg, #121212);
}
.hp-pitch-tile__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hp-pitch-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0.06) 100%);
}
.hp-pitch-tile--plain::after { display: none; }
.hp-pitch-tile__badge {
  position: absolute;
  top: var(--hp-sp-5);
  right: var(--hp-sp-5);
  padding: 0.5rem 0.9rem;
  background: var(--hp-band-bg, #121212);
  color: var(--hp-band-fg, #ffffff);
  font-family: var(--hp-font-display);
  font-size: var(--hp-text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hp-pitch-tile__body {
  max-width: 36rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  color: #ffffff;
}
.hp-pitch-tile__title {
  margin: 0 0 var(--hp-sp-1);
  color: #ffffff;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.05;
}
.hp-pitch-tile__eyebrow {
  display: block;
  margin-bottom: var(--hp-sp-5);
  color: #ffffff;
  font-family: var(--hp-font-display);
  font-size: var(--hp-text-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hp-pitch-tile__text {
  margin: 0 0 var(--hp-sp-6);
  color: rgba(255, 255, 255, 0.9);
}

/* ── Portrait wrap utilities ── */
.hp-portrait-wrap {
  position: relative;
}
.hp-portrait-glow {
  position: absolute;
  inset: var(--hp-portrait-glow-bleed, -12px);
  /* HORIZON-20261001-013: opt-in token, fallback today's; scarlet-ink sets it transparent (no pink halo). */
  background: var(--hp-portrait-glow-bg, var(--hp-gold-muted));
  filter: blur(40px);
  border-radius: var(--hp-r-lg);
  pointer-events: none;
}
.hp-portrait-img {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--hp-r-md);
  border: 1px solid var(--hp-border-strong);
}

/* ── Icon badge ── */
.hp-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: var(--hp-r-md);
  /* HORIZON-20261001-023: opt-in tile and glyph colours (scarlet-ink: her grey tile). Fallbacks = before. */
  background: var(--hp-icon-badge-bg, var(--hp-gold-muted));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hp-icon-badge-fg, var(--hp-gold));
  flex-shrink: 0;
}
.hp-icon-badge--lg {
  width: 48px;
  height: 48px;
}

/* ── Centred section heading ── */
.hp-section-head--center {
  text-align: center;
  margin-bottom: var(--hp-sp-10);
}

/* ── Benefit list ── */
.hp-benefit-list {
  list-style: none;
  margin: 0 0 var(--hp-sp-8);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--hp-sp-3);
}
.hp-benefit-list__item {
  display: flex;
  align-items: center;
  gap: var(--hp-sp-3);
  color: var(--hp-text);
}
.hp-benefit-list__check {
  color: var(--hp-gold);
  flex-shrink: 0;
}

/* ── Empty state icon ring ── */
.hp-empty-state__icon-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--hp-bg-surface);
  border: 1px solid var(--hp-border);
  margin: 0 auto var(--hp-sp-4);
}

/* ── Section divider (adds top border to tight sections) ── */
.hp-section--divider {
  border-top: 1px solid var(--hp-border);
}

/* ── Hero bg fallback gradient ── */
.hp-hero__bg--fallback {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--hp-bg-raised), var(--hp-bg-surface));
}


/* ══ Predictive search overlay ═══════════════════════════════════════
   Ported verbatim from horizon-theme-commerce at HORIZON-20260827-050. See
   inc/search-overlay.php. 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, AND THAT IS WHY IT PORTED WITH NO COLOUR CHANGES. Every token
   below was checked as defined in this theme before the port; the only literal
   is the scrim's rgba(0,0,0,.55). It must read on every skin in assets/css/skins/
   — derive that list, never count it here. */

.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; }
}

/* ⛔⛔ THEME-LOCAL OVERRIDE - NOT IN THE COMMERCE COPY, AND NOT OPTIONAL HERE.
   GeneratePress's dynamic CSS styles every text input as one long selector list
   including `input[type="search"]`, at specificity 0-1-1:

     input[type="text"],...,input[type="search"],...
       { color: var(--contrast); background-color: var(--base-2); border-color: var(--base); }

   `.hp-search-form__input` above is 0-1-0, so GP wins all three properties. On
   a tenant that rendered the search field #f7f8f9 background with #222222 text
   inside the #0d0b09 panel - A WHITE BOX IN A DARK OVERLAY, which is the exact
   defect -037 shipped when it enabled GP's own nav_search, arriving by a
   different route. Measured in the browser after deploy; the ported block is
   token-correct and every other element in the overlay resolved to the copper
   palette on its own.

   ⭐ Two classes (0-2-0) beat 0-1-1, so no !important is needed. LONGHANDS, not
   the `background`/`border` shorthands the ported rule uses - GP sets longhands,
   and a shorthand at losing specificity does not reset them.

   ⚠️ Do not "tidy" this into the block above by editing the ported rule: keeping
   the port diffable against commerce is the point, and the divergence is real. */
.hp-search-overlay .hp-search-form__input {
  color: var(--hp-text);
  background-color: transparent;
  border-color: transparent;
}

/* ── Mobile header tool row (HORIZON-20260828-001 search, -002 account + cart) ──
   Rendered into .inside-header by hp_render_mobile_header_tools(), so it survives
   GeneratePress collapsing #site-navigation behind the hamburger.

   ⛔ HIDDEN BY DEFAULT. Above the breakpoint the tools are the nav items from
   hp_inject_header_tools(); this row takes over below it, and hp-responsive.css
   hides the nav items there. Each tool is visible exactly once at any width -
   change one breakpoint and you must change the other. */
.hp-header-tools { display: none; }

/* ── Cart count badge — ONE appearance, TWO placements (HORIZON-20260828-003) ──
   Mirrors hp_header_tools(): the count is one thing rendered in two contexts, so
   it gets one appearance rule here and a placement rule per context. The mobile
   placement lives in hp-responsive.css beside the row it belongs to.

   ⛔ WHY THE NAV ONE EXISTS AT ALL. `.hp-nav-tool__count` had NO CSS: it rendered
   as a bare 14px number after the cart icon and, because it was in flow, it made
   the nav item 8px wider the moment a cart was non-empty. Measured 2026-08-28 by
   injecting the markup the PHP emits — 58px to 66px. So this is a LAYOUT SHIFT
   fix, not only a cosmetic one. Absolute positioning takes it out of flow and the
   item stays 58px whatever the count.

   ⭐ `--zero` variant since G1 R1 (HORIZON-20260927-007): the cart span is now ALWAYS printed so Core's
   add-to-cart fragment has an element to replace; at 0 it carries `--zero` and is hidden here. */
.hp-nav-tool__count,
.hp-header-tool__count {
  position: absolute;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--hp-r-full);
  background: var(--hp-gold);
  color: var(--hp-on-accent);
  font-family: var(--hp-font-body);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}

.hp-nav-tool__count--zero,
.hp-header-tool__count--zero {
  display: none;
}

/* Nav placement. The anchor is the containing block; `left: 50%` is the icon's
   horizontal centre whatever the nav padding happens to be, because the icon is
   the anchor's only content and the padding is symmetric — that is why this is
   not written as an offset from the 20px padding, which a skin could change.
   The -15px lifts it onto the icon's top edge: measured, that leaves 7px of
   overlap, the same proportion the mobile badge has in its 44px box. */
.hp-nav-tool > a { position: relative; }
.hp-nav-tool__count {
  top: 50%;
  left: 50%;
  transform: translate(1px, -15px);
}

/* ---------------------------------------------------------------------------
   Email signup: consent row  (HORIZON-20260831-114, handoff item 2c)

   These declarations were INLINE style= attributes on the form and the consent
   label, shipped by -20260831-098 to fix a live layout break quickly. Moving
   them here changes no rendering: it makes them overridable by a skin, and
   visible to anyone reading the stylesheet rather than only to someone reading
   the template.

   flex-wrap on the form is the load-bearing one. Without it the consent label
   becomes a third flex item beside the input and the button, and the input
   collapses to nothing. That is exactly what happened on ten live sites, while
   presence checks, php -l and end-to-end submits were all green - it took a
   browser to see it (memory feedback-presence-is-not-layout).
   --------------------------------------------------------------------------- */

.hp-email-signup__form {
  flex-wrap: wrap;
}

.hp-email-signup__consent {
  flex: 0 0 100%;
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  margin-top: .75rem;
  text-align: left;
  font-size: .85em;
  line-height: 1.4;
}

/* 1.5.19 (HORIZON-20260930-034): an optional badge over a pitch panel's image (Core 1.41.40: the slot's `badge` copy,
   e.g. "18+ ONLY", as one creator's old panel carried). Printed only when that copy exists. */
.hp-portrait-badge {
  position: absolute;
  top: var(--hp-sp-4);
  right: var(--hp-sp-4);
  z-index: 2;
  padding: 6px 12px;
  background: var(--hp-band-bg, var(--hp-text));
  color: var(--hp-band-fg, var(--hp-bg));
  font-family: var(--hp-btn-font, var(--hp-font-body));
  font-size: var(--hp-text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
}