/* ============================================================================
   HIGHLAND VAULT — COMPONENTS
   Reusable UI built to the approved design. All colours/sizes come from tokens.
   These classes are applied by the theme's template overrides and can also be
   dropped into Elementor HTML/shortcode widgets.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   BUTTONS
   --------------------------------------------------------------------------- */
.hv-btn {
  --_bg: var(--hv-primary);
  --_ink: var(--hv-primary-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hv-space-2);
  padding: 0.85em 1.5em;
  font-family: var(--hv-font);
  font-size: var(--hv-fs-body);
  font-weight: var(--hv-fw-bold);
  line-height: 1;
  color: var(--_ink);
  background: var(--_bg);
  border: 1px solid transparent;
  border-radius: var(--hv-radius-sm);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, filter .15s ease;
  text-align: center;
  text-decoration: none !important; /* Elementor kit underlines links */
}
.hv-btn:hover { color: var(--_ink); transform: translateY(-1px); box-shadow: var(--hv-shadow); filter: brightness(1.03); text-decoration: none !important; }
/* Filled buttons LIGHTEN on hover (#065BE0 → #0A6BFF) with a restrained blue shadow */
.hv-btn:not(.hv-btn--outline):not(.hv-btn--ghost):hover {
  background: var(--hv-primary-strong); filter: none; box-shadow: 0 8px 24px rgba(6, 91, 224, .28); }
.hv-btn:active { transform: translateY(0); }
.hv-btn:focus-visible { box-shadow: var(--hv-ring); }

.hv-btn--accent   { --_bg: var(--hv-grad-accent);  --_ink: var(--hv-accent-ink); }
.hv-btn--raid     { --_bg: var(--hv-grad-raid);     --_ink: #fff; }
.hv-btn--jackpot  { --_bg: var(--hv-grad-accent);   --_ink: #fff; }

.hv-btn--outline {
  --_bg: transparent;
  --_ink: var(--hv-ink);
  border-color: var(--hv-line); /* scoped: grey hairline on the white ground, white-alpha on dark */
}
.hv-btn--outline:hover { background: var(--hv-blue-050); color: var(--hv-primary-strong); border-color: var(--hv-primary); }

.hv-btn--ghost { --_bg: transparent; --_ink: var(--hv-body); border-color: var(--hv-line); }
.hv-btn--block { display: flex; width: 100%; }
.hv-btn--lg    { padding: 1.05em 1.75em; font-size: var(--hv-fs-h4); border-radius: var(--hv-radius); }
.hv-btn--sm    { padding: 0.6em 1em; font-size: var(--hv-fs-sm); }

/* ---------------------------------------------------------------------------
   BADGES / PILLS / CHIPS
   --------------------------------------------------------------------------- */
.hv-badge {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.35em 0.7em;
  font-size: var(--hv-fs-xs);
  font-weight: var(--hv-fw-bold);
  line-height: 1;
  border-radius: var(--hv-radius-pill);
  text-transform: uppercase;
  letter-spacing: var(--hv-ls-wide);
}
.hv-badge--new     { background: var(--hv-blue-600);   color: #fff; }
.hv-badge--sale    { background: var(--hv-grad-accent); color: #fff; }
.hv-badge--raid    { background: var(--hv-purple-500); color: #fff; }
.hv-badge--jackpot { background: var(--hv-grad-accent); color: #fff; }
.hv-badge--soft    { background: var(--hv-blue-100);   color: #fff; }
.hv-badge--success { background: var(--hv-green-100);  color: var(--hv-green-500); }

/* "1 Ticket" chip used on cart / order rows */
.hv-chip {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.3em 0.6em; border-radius: var(--hv-radius-sm);
  background: var(--hv-blue-050); color: var(--hv-primary-strong);
  font-size: var(--hv-fs-xs); font-weight: var(--hv-fw-medium);
}

/* ---------------------------------------------------------------------------
   CARD SHELL
   --------------------------------------------------------------------------- */
.hv-card {
  background: var(--hv-surface);
  border: 1px solid var(--hv-line);
  border-radius: var(--hv-radius-lg);
  box-shadow: var(--hv-shadow-sm);
  overflow: hidden;
}
.hv-card__body { padding: var(--hv-space-5); }

/* ---------------------------------------------------------------------------
   DRAW / COMPETITION CARD  (home grids, shop, related)
   --------------------------------------------------------------------------- */
.hv-draw-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--hv-surface);
  border: 1px solid var(--hv-line);
  border-radius: var(--hv-radius-lg);
  box-shadow: none;
  overflow: hidden;
  transition: border-color .18s ease;
}
.hv-draw-card:hover { border-color: var(--hv-primary); }

.hv-draw-card__media { position: relative; aspect-ratio: 1 / 1; background: var(--hv-surface-2); }
/* cover/no-padding matches the hardened live rule in woocommerce.css:254 */
.hv-draw-card__media img { width: 100%; height: 100%; object-fit: cover; padding: 0; }

.hv-draw-card__badges { position: absolute; inset: var(--hv-space-3) var(--hv-space-3) auto auto; display: flex; gap: var(--hv-space-2); }
.hv-draw-card__body { padding: var(--hv-space-4); display: flex; flex-direction: column; gap: var(--hv-space-2); flex: 1; }
.hv-draw-card__title { font-size: var(--hv-fs-h4); font-weight: var(--hv-fw-bold); color: var(--hv-ink); line-height: var(--hv-lh-snug); }
.hv-draw-card__cap { font-size: var(--hv-fs-xs); color: var(--hv-muted); text-transform: uppercase; letter-spacing: var(--hv-ls-wide); }
.hv-draw-card__price { font-size: var(--hv-fs-h3); font-weight: var(--hv-fw-black); color: var(--hv-primary); }
.hv-draw-card__price small { font-size: var(--hv-fs-xs); font-weight: var(--hv-fw-medium); color: var(--hv-muted); display: block; }
.hv-draw-card__cta { margin-top: auto; }

/* Category theming: add .is-raid / .is-jackpot / .is-weekly to the card */
.hv-draw-card.is-raid    .hv-btn { --_bg: var(--hv-grad-raid); --_ink:#fff; }
.hv-draw-card.is-jackpot .hv-btn { --_bg: var(--hv-grad-accent); --_ink:#fff; }
.hv-draw-card.is-weekly  .hv-btn { --_bg: var(--hv-primary); --_ink:#fff; }

/* ---------------------------------------------------------------------------
   COUNTDOWN TIMER  (pills of DAYS : HRS : MINS : SECS)
   --------------------------------------------------------------------------- */
.hv-countdown { display: inline-flex; align-items: stretch; gap: var(--hv-space-2); }
.hv-countdown__unit {
  min-width: 3.25em; padding: 0.5em 0.4em;
  text-align: center; background: var(--hv-surface-2);
  border: 1px solid var(--hv-line); border-radius: var(--hv-radius-sm);
}
.hv-countdown__num { display: block; font-size: var(--hv-fs-h3); font-weight: var(--hv-fw-black); color: var(--hv-ink); line-height: 1; }
.hv-countdown__lbl { display: block; margin-top: 0.35em; font-size: var(--hv-fs-xs); color: var(--hv-muted); text-transform: uppercase; letter-spacing: var(--hv-ls-wide); }
.hv-countdown__sep { align-self: center; color: var(--hv-muted); font-weight: var(--hv-fw-bold); }

/* Compact variant used inside draw cards */
.hv-countdown--compact .hv-countdown__unit { min-width: 0; padding: 0.35em 0.5em; background: var(--hv-surface-2); }
.hv-countdown--compact .hv-countdown__num { font-size: var(--hv-fs-body); }

/* Buy-box variant: FULL-WIDTH row of white boxes with blue numbers (single-product design) */
.hv-countdown--primary { display: flex; width: 100%; }
.hv-countdown--primary .hv-countdown__unit { flex: 1; background: var(--hv-surface); border-color: var(--hv-line); box-shadow: var(--hv-shadow-sm); }
.hv-countdown--primary .hv-countdown__sep { flex: 0 0 auto; }
.hv-countdown--primary .hv-countdown__num { color: var(--hv-primary); }

/* Card variant: ONE continuous light bar with segments (Days : Hrs : Mins), full width.
   Matches the timer on the draw cards in the design. */
.hv-countdown--bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; width: 100%; background: var(--hv-surface-2); border: 1px solid var(--hv-line); border-radius: var(--hv-radius-sm); overflow: hidden; }
.hv-countdown--bar .hv-countdown__unit { min-width: 0; padding: 0.45em 0.25em; background: transparent; border: 0; border-right: 1px solid var(--hv-line); border-radius: 0; }
.hv-countdown--bar .hv-countdown__unit:last-child { border-right: 0; }
.hv-countdown--bar .hv-countdown__num { font-size: var(--hv-fs-body); font-weight: var(--hv-fw-black); color: var(--hv-ink); }
.hv-countdown--bar .hv-countdown__lbl { font-size: 9px; margin-top: 0.15em; }
.hv-countdown--bar .hv-countdown__sep { display: none; }

/* ---------------------------------------------------------------------------
   PROGRESS BAR (tickets sold)
   --------------------------------------------------------------------------- */
.hv-progress { display: flex; flex-direction: column; gap: 0.4em; }
.hv-progress__meta { display: flex; justify-content: space-between; font-size: var(--hv-fs-xs); color: var(--hv-muted); }
.hv-progress__track { position: relative; height: 10px; border-radius: var(--hv-radius-pill); background: var(--hv-track); overflow: hidden; }
.hv-progress__fill  { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--hv-grad-primary); transition: width .4s ease; }
.hv-progress__pct   { font-weight: var(--hv-fw-bold); color: var(--hv-ink); }
.hv-progress--blue  .hv-progress__fill { background: var(--hv-grad-primary); }
.hv-progress--amber .hv-progress__fill { background: var(--hv-grad-accent); }

/* ---------------------------------------------------------------------------
   SINGLE PRODUCT — DARK SHOWCASE PANEL (left column of the buy area)
   --------------------------------------------------------------------------- */
.hv-showcase {
  position: relative;
  background:
    radial-gradient(70% 60% at 62% 42%, rgba(59,130,246,.28), transparent 70%),
    var(--hv-grad-navy);
  color: #fff;
  border-radius: var(--hv-radius-xl);
  padding: var(--hv-space-6);
  overflow: hidden;
}
.hv-showcase__sale { position: absolute; top: var(--hv-space-4); left: var(--hv-space-4); z-index: 2; }

/* Inner 2-column: stats/prizes aside  +  bottle figure */
.hv-showcase__grid { display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); gap: var(--hv-space-5); align-items: center; }
.hv-showcase__figure { display: grid; place-items: center; min-height: 260px; }
.hv-showcase__figure img { max-height: 420px; width: auto; filter: drop-shadow(0 24px 40px rgba(0,0,0,.45)); }

.hv-showcase__stat { display: flex; align-items: center; gap: var(--hv-space-3); margin-bottom: var(--hv-space-5); }
.hv-showcase__stat .hv-ico { width: 42px; height: 42px; display: grid; place-items: center; background: rgba(59,130,246,.18); border-radius: var(--hv-radius-pill); color: var(--hv-blue-500); flex: 0 0 auto; }
.hv-showcase__stat b { display: block; font-size: var(--hv-fs-h3); font-weight: var(--hv-fw-black); line-height: 1; }
.hv-showcase__stat span { font-size: var(--hv-fs-xs); color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: var(--hv-ls-wide); }

/* "INSTANT PRIZES" list in the dark panel */
.hv-showcase__prizes h4 { color: rgba(255,255,255,.7); font-size: var(--hv-fs-xs); text-transform: uppercase; letter-spacing: var(--hv-ls-wider); margin-bottom: var(--hv-space-3); }
.hv-showcase__prize { display: flex; align-items: center; gap: var(--hv-space-3); padding: var(--hv-space-1) 0; }
.hv-showcase__prize .hv-ico { color: var(--hv-gold-500); flex: 0 0 auto; }
.hv-showcase__prize b { color: #fff; font-weight: var(--hv-fw-bold); min-width: 3.5em; }
.hv-showcase__prize span { color: rgba(255,255,255,.6); font-size: var(--hv-fs-sm); text-transform: uppercase; letter-spacing: var(--hv-ls-wide); }

/* Bottom trust row (spans full width of the panel) */
.hv-showcase__trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hv-space-3); margin-top: var(--hv-space-6); padding-top: var(--hv-space-5); border-top: 1px solid rgba(255,255,255,.12); }
.hv-showcase__trust div { display: flex; flex-direction: column; align-items: center; gap: var(--hv-space-2); text-align: center; font-size: var(--hv-fs-xs); color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: var(--hv-ls-wide); }
.hv-showcase__trust .hv-ico { color: var(--hv-blue-500); }

@media (max-width: 640px) {
  .hv-showcase__grid { grid-template-columns: 1fr; }
  .hv-showcase__trust { grid-template-columns: repeat(2, 1fr); gap: var(--hv-space-4); }
}

/* (The single-product page shows the gallery alone in .hv-product__media — see
   woocommerce.css. The showcase panel classes above remain for the homepage
   hero card and design-preview.html.) */

/* ---------------------------------------------------------------------------
   BUY BOX (right column)
   --------------------------------------------------------------------------- */
/* NOTE: on live pages the hardened block in woocommerce.css (body.hv-theme …) wins;
   this copy exists so design-preview.html (which only loads tokens/base/components)
   keeps rendering. Keep values in sync with woocommerce.css. */
.hv-buybox__price { display: flex; align-items: baseline; gap: var(--hv-space-3); }
.hv-buybox__price .now { font-size: var(--hv-fs-h1); font-weight: var(--hv-fw-black); color: var(--hv-primary); }
.hv-buybox__price .was { font-size: var(--hv-fs-h4); color: var(--hv-muted); text-decoration: line-through; }

/* Online / Postal entry toggle.
   !important on every state: Elementor's global kit styles target `button:hover`
   (the old site's pink) and would otherwise win on hover/focus. */
.hv-entry-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hv-space-3); }
.hv-entry-toggle__btn {
  display: flex; align-items: center; justify-content: center; gap: var(--hv-space-2);
  padding: 0.9em 1em; border-radius: var(--hv-radius-sm);
  border: 1px solid var(--hv-line) !important; background: var(--hv-surface) !important;
  font-weight: var(--hv-fw-bold) !important; color: var(--hv-body) !important; cursor: pointer;
}
.hv-entry-toggle__btn svg { flex: 0 0 auto; }
.hv-entry-toggle__btn:hover,
.hv-entry-toggle__btn:focus {
  background: var(--hv-blue-050) !important; color: var(--hv-primary-strong) !important;
  border-color: var(--hv-primary) !important; outline: none;
}
.hv-entry-toggle__btn.is-active,
.hv-entry-toggle__btn.is-active:hover,
.hv-entry-toggle__btn.is-active:focus {
  background: var(--hv-primary) !important; color: #fff !important; border-color: var(--hv-primary) !important;
}

/* Points nudge banner */
.hv-note {
  display: flex; align-items: center; gap: var(--hv-space-3);
  padding: var(--hv-space-3) var(--hv-space-4);
  background: var(--hv-orange-050); border: 1px solid var(--hv-orange-100);
  border-radius: var(--hv-radius); color: var(--hv-body); font-size: var(--hv-fs-sm);
}
.hv-note--success { background: var(--hv-green-100); border-color: transparent; color: var(--hv-green-500); }
.hv-note--info    { background: var(--hv-blue-050);  border-color: var(--hv-blue-100); color: var(--hv-primary-strong); }

/* Skill-question answer options — one row (fills the width; wraps only if needed) */
.hv-answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--hv-space-3); }
.hv-answers__opt {
  display: flex; align-items: center; justify-content: center; gap: var(--hv-space-2);
  padding: 0.8em 1em; border-radius: var(--hv-radius-sm);
  border: 1px solid var(--hv-line); background: var(--hv-surface);
  font-weight: var(--hv-fw-bold); color: var(--hv-body); cursor: pointer;
}
.hv-answers__opt.is-selected { background: var(--hv-primary); color: #fff; border-color: var(--hv-primary); }

/* Quantity stepper + slider */
.hv-qty { display: inline-flex; align-items: center; border: 1px solid var(--hv-line); border-radius: var(--hv-radius-sm); overflow: hidden; }
.hv-qty button { width: 2.6em; height: 2.6em; border: 0; background: var(--hv-surface-2); color: var(--hv-ink); font-size: var(--hv-fs-h4); cursor: pointer; }
.hv-qty input { width: 3.5em; text-align: center; border: 0; border-inline: 1px solid var(--hv-line); font-size: var(--hv-fs-body); font-weight: var(--hv-fw-bold); }

/* Ticket quantity row — [−]  10 Ticket(s)  [====slider====]  [+]  (single-product design) */
.hv-qty-row { display: flex; align-items: center; gap: var(--hv-space-3); }
.hv-qty-btn { width: 2.8em; height: 2.8em; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--hv-line); border-radius: var(--hv-radius-sm); background: var(--hv-surface-2); color: var(--hv-ink); font-size: var(--hv-fs-h4); line-height: 1; cursor: pointer; }
.hv-qty-btn:hover { background: var(--hv-blue-050); color: var(--hv-primary); border-color: var(--hv-primary); }
.hv-range { -webkit-appearance: none; appearance: none; flex: 1; height: 6px; border-radius: var(--hv-radius-pill); background: var(--hv-line); outline: none; }
.hv-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--hv-primary); border: 3px solid #fff; box-shadow: var(--hv-shadow); cursor: pointer; }
.hv-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--hv-primary); border: 3px solid #fff; box-shadow: var(--hv-shadow); cursor: pointer; }
.hv-qty-count { font-weight: var(--hv-fw-bold); color: var(--hv-primary); white-space: nowrap; }

/* Full-width CTA with a circular arrow on the right (Enter Now for £X) */
.hv-btn--cta { position: relative; padding-right: 3.25em; }
.hv-btn--cta::after { content: "\203A"; position: absolute; right: 0.5em; top: 50%; transform: translateY(-50%); width: 1.9em; height: 1.9em; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.18); font-size: 1.1em; line-height: 1; }

/* ---------------------------------------------------------------------------
   TABS (Instant Win Prizes | Description | Draw Details | Rules | FAQs)
   --------------------------------------------------------------------------- */
.hv-tabs { display: flex; flex-wrap: wrap; gap: var(--hv-space-3); }
.hv-tabs__tab {
  display: inline-flex; align-items: center; gap: var(--hv-space-2);
  padding: 0.8em 1.25em; border-radius: var(--hv-radius);
  border: 1px solid var(--hv-line); background: var(--hv-surface);
  font-weight: var(--hv-fw-bold); color: var(--hv-body); cursor: pointer;
}
.hv-tabs__tab.is-active { color: var(--hv-primary); border-color: var(--hv-primary); box-shadow: var(--hv-shadow-sm); }

/* Horizontal scroll on small screens (no wrap, hidden scrollbar) */
@media (max-width: 640px) {
  .hv-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .hv-tabs::-webkit-scrollbar { display: none; }
  .hv-tabs__tab { flex: 0 0 auto; }
}

/* ---------------------------------------------------------------------------
   INSTANT-WIN PRIZE ROWS
   --------------------------------------------------------------------------- */
.hv-prize-row {
  display: flex; align-items: center; gap: var(--hv-space-4);
  padding: var(--hv-space-4);
  border: 1px solid var(--hv-line); border-left: 4px solid var(--_tier, var(--hv-tier-4));
  border-radius: var(--hv-radius); background: var(--hv-surface);
}
.hv-prize-row__ticket {
  min-width: 56px; padding: 0.5em; text-align: center; border-radius: var(--hv-radius-sm);
  background: var(--_tier, var(--hv-tier-4)); color: #fff; font-weight: var(--hv-fw-black);
}
.hv-prize-row__title { font-weight: var(--hv-fw-bold); color: var(--hv-ink); }
.hv-prize-row__left  { margin-left: auto; font-size: var(--hv-fs-sm); color: var(--hv-muted); }
.hv-prize-row.is-tier-1 { --_tier: var(--hv-tier-1); }
.hv-prize-row.is-tier-2 { --_tier: var(--hv-tier-2); }
.hv-prize-row.is-tier-3 { --_tier: var(--hv-tier-3); }
.hv-prize-row.is-tier-4 { --_tier: var(--hv-tier-4); }

/* ---------------------------------------------------------------------------
   ORDER SUMMARY / CART TOTALS CARD  (cart + checkout sidebars)
   --------------------------------------------------------------------------- */
.hv-summary { position: sticky; top: var(--hv-space-5); }
.hv-summary__row { display: flex; justify-content: space-between; padding: var(--hv-space-2) 0; font-size: var(--hv-fs-body); }
.hv-summary__row--total { border-top: 1px solid var(--hv-line); margin-top: var(--hv-space-2); padding-top: var(--hv-space-3); font-size: var(--hv-fs-h4); font-weight: var(--hv-fw-black); color: var(--hv-ink); }
.hv-summary__row--total b { color: var(--hv-primary); }
.hv-summary__points { display: flex; justify-content: space-between; align-items: center; padding: var(--hv-space-3); background: var(--hv-blue-050); border-radius: var(--hv-radius-sm); color: var(--hv-primary-strong); font-weight: var(--hv-fw-medium); }
.hv-summary__discount { color: var(--hv-green-500); }

/* ---------------------------------------------------------------------------
   BONUS-CREDIT NUDGE (amber banner with progress) — cart & checkout
   --------------------------------------------------------------------------- */
.hv-bonus-nudge {
  display: flex; align-items: center; gap: var(--hv-space-4);
  padding: var(--hv-space-3) var(--hv-space-4);
  background: var(--hv-orange-050); border: 1px solid var(--hv-orange-100);
  border-radius: var(--hv-radius); color: #6CA8FF; font-weight: var(--hv-fw-medium);
}
.hv-bonus-nudge b { color: #6CA8FF; font-weight: var(--hv-fw-bold); }
.hv-bonus-nudge .hv-progress { flex: 1; min-width: 120px; margin-left: auto; }

/* ---------------------------------------------------------------------------
   CHECKOUT — numbered step blocks & payment options
   --------------------------------------------------------------------------- */
.hv-step { display: flex; align-items: center; gap: var(--hv-space-3); margin-bottom: var(--hv-space-4); }
.hv-step__num { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--hv-radius-pill); background: var(--hv-primary); color: #fff; font-weight: var(--hv-fw-bold); font-size: var(--hv-fs-sm); }
.hv-step__title { font-size: var(--hv-fs-h4); font-weight: var(--hv-fw-bold); color: var(--hv-ink); }

.hv-pay-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hv-space-3); }
.hv-pay-option {
  position: relative; padding: var(--hv-space-4); text-align: left;
  border: 1px solid var(--hv-line); border-radius: var(--hv-radius); background: var(--hv-surface); cursor: pointer;
}
.hv-pay-option.is-active { border-color: var(--hv-primary); box-shadow: var(--hv-ring); }
.hv-pay-option b { display: block; color: var(--hv-ink); font-size: var(--hv-fs-sm); }
.hv-pay-option span { font-size: var(--hv-fs-xs); color: var(--hv-muted); }

/* ---------------------------------------------------------------------------
   TRUST BADGES ROW
   --------------------------------------------------------------------------- */
.hv-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hv-space-4); }
.hv-trust__item { display: flex; align-items: center; gap: var(--hv-space-3); }
.hv-trust__item .hv-ico { color: var(--hv-primary); flex: 0 0 auto; }
.hv-trust__item b { display: block; color: var(--hv-ink); font-size: var(--hv-fs-sm); }
.hv-trust__item span { font-size: var(--hv-fs-xs); color: var(--hv-muted); }

/* ---------------------------------------------------------------------------
   THANK-YOU / ORDER RECEIVED
   --------------------------------------------------------------------------- */
.hv-thankyou__head { display: flex; align-items: center; gap: var(--hv-space-4); }
.hv-thankyou__check { width: 84px; height: 84px; flex: 0 0 auto; display: grid; place-items: center; border: 3px solid var(--hv-green-500); border-radius: var(--hv-radius-pill); color: var(--hv-green-500); }
.hv-meta-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--hv-space-4); }
.hv-meta-row__item { display: flex; align-items: center; gap: var(--hv-space-3); }
.hv-meta-row__item .hv-ico { color: var(--hv-primary); }
.hv-meta-row__item span { display: block; font-size: var(--hv-fs-xs); color: var(--hv-muted); text-transform: uppercase; letter-spacing: var(--hv-ls-wide); }
.hv-meta-row__item b { color: var(--hv-ink); }

/* ---------------------------------------------------------------------------
   RESPONSIVE COLLAPSES (grids → stacks). Single breakpoint set, kept minimal.
   --------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .hv-pay-options,
  .hv-showcase__trust { grid-template-columns: repeat(2, 1fr); }
  .hv-meta-row { grid-template-columns: repeat(2, 1fr); }
  .hv-trust    { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .hv-entry-toggle { grid-template-columns: 1fr; }
  .hv-meta-row { grid-template-columns: 1fr; }
}