/* ============================================================================
   HIGHLAND VAULT — WOOCOMMERCE + LOTTERY BRIDGE
   ----------------------------------------------------------------------------
   Restyles the "Giveaway (Lottery) for WooCommerce" plugin surfaces and core
   WooCommerce elements to the new design by *re-skinning* the plugin's own
   classes. We only change appearance — never the class names, IDs or DOM the
   plugin's frontend.js / AJAX rely on (.lty-participate-now, .lty_manual_add_to_cart,
   ticket panels, #lty_lottery_days/hours/minutes/seconds, etc.).

   NOTE: also set the plugin's own colour options (Giveaway → Settings) to the
   palette below so its inline settings-CSS matches; this file layers on top.
   ========================================================================== */

/* Shared stroke-icon (gift) used by the winners line + points note ::before —
   defined once, tinted per-use via mask + background-color. */
body.hv-theme {
  --hv-ico-gift: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="3" y="8" width="18" height="4" rx="1"/%3E%3Cpath d="M12 8v13"/%3E%3Cpath d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/%3E%3Cpath d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/%3E%3C/svg%3E');
}

/* ---- Global WooCommerce buttons → HV primary ---------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.wc-block-components-button {
  background: var(--hv-primary);
  color: var(--hv-primary-ink);
  border-radius: var(--hv-radius-sm);
  font-family: var(--hv-font);
  font-weight: var(--hv-fw-bold);
  padding: 0.85em 1.5em;
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button.alt:hover,
.wc-block-components-button:hover {
  /* explicit background — otherwise WooCommerce core's grey hover bleeds
     through under the white text */
  background: var(--hv-blue-700);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--hv-shadow);
}

/* Primary purchase CTA (Enter Now / Proceed) can opt into orange via .alt on checkout */
.woocommerce #payment #place_order,
.wc-block-cart__submit-button { background: var(--hv-grad-accent); }

/* ---- Prices ------------------------------------------------------------- */
.woocommerce .price, .woocommerce div.product p.price { color: var(--hv-primary); font-weight: var(--hv-fw-black); }
.woocommerce .price del { color: var(--hv-muted); font-weight: var(--hv-fw-regular); }

/* ---- LOTTERY: single-product countdown — FULL-WIDTH white boxes, blue nums,
   ":" separators between units (design). The plugin's "Time Left to End:" label
   is not in the design → hidden. */
.hv-theme .lty-lottery-time-left-label { display: none !important; }
.hv-theme .lty-lottery-date-ranges { margin: 0; }
.hv-theme .lty-lottery-countdown-timer { display: flex !important; width: 100%; gap: var(--hv-space-3); align-items: stretch; }
.hv-theme .lty-lottery-countdown-timer > .lty-lottery-timer {
  position: relative;
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.15em;
  padding: 0.55em 0.4em; text-align: center; float: none;
  background: var(--hv-surface); border: 1px solid var(--hv-line);
  border-radius: var(--hv-radius-sm); box-shadow: var(--hv-shadow-sm);
}
.hv-theme .lty-lottery-countdown-timer > .lty-lottery-timer:not(:last-child)::after {
  content: ":"; position: absolute; top: 50%; right: calc(-0.5 * var(--hv-space-3));
  transform: translate(50%, -55%); font-weight: var(--hv-fw-black); color: var(--hv-muted);
}
.hv-theme .lty-lottery-timer .lty-lottery-timer-content:first-child {
  font-size: var(--hv-fs-h2) !important; font-weight: var(--hv-fw-black) !important; color: #fff !important; line-height: 1 !important;
}
.hv-theme .lty-lottery-timer .lty-lottery-timer-content:last-child {
  font-size: var(--hv-fs-xs); color: var(--hv-muted); text-transform: uppercase; letter-spacing: var(--hv-ls-wide);
}

/* ---- Our loop countdown ("Ends on" label above the bar) ------------------ */
.hv-loop-countdown__label { margin: 0 0 var(--hv-space-2); font-size: var(--hv-fs-xs); color: var(--hv-muted); text-transform: uppercase; letter-spacing: var(--hv-ls-wide); }

/* ---- LOTTERY: progress bars (plugin markup — single product & anywhere it
   renders). The container must NOT be height-clamped; only the track is. The
   fill width lives on the inner span (plugin outputs style="width:X%"). -------- */
.lty-lottery-progress-bar-loop { margin: var(--hv-space-2) 0; }
.lty-progress-bar { position: relative; height: 10px; background: var(--hv-track); border-radius: var(--hv-radius-pill); overflow: hidden; }
.lty-progress-bar > span { display: block; height: 100%; }
.lty-progress-fill { display: block; height: 100%; background: var(--hv-grad-primary); border-radius: inherit; }
.lty-progress-count-loop { display: flex; justify-content: space-between; font-size: var(--hv-fs-xs); color: var(--hv-muted); margin-bottom: 0.35em; }
.lty-progress-remaining-count { margin: 0.35em 0 0; font-size: var(--hv-fs-xs); color: var(--hv-muted); }
.lty-progress-bar-percentage { font-weight: var(--hv-fw-bold); color: var(--hv-ink); }

/* ---- LOTTERY: corner badge on shop cards ------------------------------- */
.lty-badge { background: var(--hv-grad-accent); color: #fff; border-radius: var(--hv-radius-pill); font-weight: var(--hv-fw-bold); }

/* ---- LOTTERY: participate form / buy area ------------------------------ */
/* The buy form stacks its blocks (question, slider, button) evenly. */
.hv-theme div.product form.cart.lty-participate-now {
  display: flex; flex-direction: column; gap: var(--hv-space-4);
  width: 100% !important; margin: 0 !important; padding: 0;
}

/* Free Postal Entry view — when the toggle switches to postal (.hv-postal-active
   set by hv.js on the summary), the online buy flow disappears: price row, points
   note and the whole participate form (question, slider, button). Countdown,
   winners line and progress stay — same behaviour as the old site. */
.hv-theme .hv-postal-active .hv-buybox__price,
.hv-theme .hv-postal-active p.wps_wpr_purchase_pro_point,
.hv-theme .hv-postal-active form.cart.lty-participate-now { display: none !important; }

/* Postal instructions panel. Hidden by default; the toggle JS reveals it (it
   sets hidden=false AND adds .hv-postal-active) only under "Free Postal Entry".
   Belt-and-braces: respect the [hidden] attribute AND gate on .hv-postal-active,
   so a bare display:block can never force the address to show under "Online
   Entry" again. */
.hv-theme .hv-postal-note { display: none; text-align: left; }
.hv-theme .hv-postal-note:not([hidden]),
.hv-theme .hv-postal-active .hv-postal-note { display: block; }
.hv-theme .hv-postal-note p { margin: 0 0 var(--hv-space-3); max-width: none; }
.hv-theme .hv-postal-note p:last-child { margin-bottom: 0; }
.hv-theme .hv-postal-note a { color: #6CA8FF; text-decoration: underline; }

/* Question block: the design shows only the bold question + one-row answers —
   the plugin's "Question Answers" <h3> heading is hidden. */
.hv-theme .lty-lottery-question-answer-container > h3 { display: none !important; }
.hv-theme .lty-lottery-question-answer-container { margin: 0; }
.hv-theme p.lty-lottery-question { margin: 0 0 var(--hv-space-3); font-weight: var(--hv-fw-bold); color: var(--hv-ink); max-width: none; }

/* Points-plugin note ("You need extra N Points…") → warm soft note like the design
   ("🎁 You need extra 240 Points…"; !important beats its inline background style). */
.hv-theme p.wps_wpr_purchase_pro_point {
  background: var(--hv-orange-050) !important;
  color: var(--hv-ink) !important;
  border: 1px solid var(--hv-orange-100);
  border-radius: var(--hv-radius);
  padding: 0.9em 1.1em; margin: 0; font-size: var(--hv-fs-body); font-weight: var(--hv-fw-regular);
  max-width: none;
}
.hv-theme p.wps_wpr_purchase_pro_point::before {
  content: ""; display: inline-block; width: 1.1em; height: 1.1em;
  margin-right: 0.5em; vertical-align: -0.18em; background: var(--hv-orange-500);
  -webkit-mask: var(--hv-ico-gift) center / contain no-repeat;
          mask: var(--hv-ico-gift) center / contain no-repeat;
}
.hv-theme p.wps_wpr_purchase_pro_point .wps_wpr_when_variable_pro { color: inherit; font-weight: var(--hv-fw-bold); }

/* Ticket quantity row — design: [−] "10 Ticket(s)" [====slider====] [+].
   The plugin renders a jQuery-UI slider in .lty-quantity-range-slider with the
   value span INSIDE the track div; we re-seat it to the left of the track. */
.hv-theme .lty-lottery-range-slider-wrapper { margin: var(--hv-space-2) 0 0; }
.hv-theme .lty-lottery-range-slider-content { display: flex; align-items: center; gap: var(--hv-space-4); }
.hv-theme .lty-lottery-range-slider-btn {
  flex: 0 0 auto; width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--hv-line) !important; border-radius: var(--hv-radius-sm);
  background: var(--hv-surface) !important;
  /* the −/+ are the inputs' value text — hidden in favour of crisp SVG glyphs
     (inputs can't take pseudo-elements, so these are background images) */
  color: transparent !important;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFFFFF" stroke-width="2.4" stroke-linecap="round"%3E%3Cpath d="M5 12h14"/%3E%3C/svg%3E') !important;
  background-repeat: no-repeat !important; background-position: center !important; background-size: 20px 20px !important;
  font-size: var(--hv-fs-h4); font-weight: var(--hv-fw-bold); line-height: 1; cursor: pointer;
  box-shadow: var(--hv-shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hv-theme .lty-lottery-range-slider-increment { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFFFFF" stroke-width="2.4" stroke-linecap="round"%3E%3Cpath d="M5 12h14"/%3E%3Cpath d="M12 5v14"/%3E%3C/svg%3E') !important; }
.hv-theme .lty-lottery-range-slider-btn:hover {
  border-color: var(--hv-primary) !important; color: transparent !important; box-shadow: var(--hv-shadow);
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230A6BFF" stroke-width="2.4" stroke-linecap="round"%3E%3Cpath d="M5 12h14"/%3E%3C/svg%3E') !important;
}
.hv-theme .lty-lottery-range-slider-increment:hover { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230A6BFF" stroke-width="2.4" stroke-linecap="round"%3E%3Cpath d="M5 12h14"/%3E%3Cpath d="M12 5v14"/%3E%3C/svg%3E') !important; }
.hv-theme .lty-quantity-range-slider {
  flex: 1; height: 8px !important; margin: 0 0 0 120px; position: relative;
  background: var(--hv-line) !important; border: 0 !important; border-radius: var(--hv-radius-pill);
}
.hv-theme .lty-quantity-range-slider .ui-slider-range { background: var(--hv-primary) !important; border-radius: inherit; }
.hv-theme .lty-quantity-range-slider .ui-slider-handle {
  width: 22px !important; height: 22px !important; top: -7px !important; margin-left: -11px;
  background: var(--hv-primary) !important; border: 0 !important; border-radius: 50%;
  cursor: grab; outline: none; box-shadow: var(--hv-shadow-sm);
}
/* Value ("10 Ticket(s)") — re-seated as blue bold text left of the track (design),
   instead of the plugin's pink bubble under the handle. */
.hv-theme .lty-lottery-range-value {
  position: absolute !important; left: -120px !important; top: 50% !important;
  transform: translateY(-50%); width: 108px; text-align: left;
  background: none !important; color: var(--hv-primary) !important;
  font-size: var(--hv-fs-body) !important; font-weight: var(--hv-fw-bold) !important;
  padding: 0 !important; margin: 0 !important; white-space: nowrap;
  bottom: -20px !important;
}
.hv-theme .lty-lottery-range-value::after, .hv-theme .lty-lottery-range-value::before { display: none !important; content: none !important; }
.hv-theme .lty-range-slider-current-value { color: inherit !important; background: none !important; }
/* Small screens: no room for the 120px label gutter — value moves ABOVE the track */
@media (max-width: 560px) {
  .hv-theme .lty-lottery-range-slider-content { position: relative; padding-top: 2.2em; }
  .hv-theme .lty-quantity-range-slider { margin-left: 0; }
  .hv-theme .lty-lottery-range-value { left: 0 !important; top: -2em !important; transform: none; width: auto; }
}

/* Participate / add-to-cart button → brand blue, full width.
   The plugin colours this from its own Settings (was showing pink/pale). !important +
   .hv-theme beats that; also set the button colour in Giveaway → Settings for good. */
.hv-theme .lty-participate-now .lty_manual_add_to_cart,
.hv-theme .lty-participate-now button[type="submit"],
.hv-theme .lty-participate-now .single_add_to_cart_button,
.hv-theme .lty-participate-now-button,
.hv-theme button.lty_manual_add_to_cart {
  display: flex; align-items: center; justify-content: center;
  background: var(--hv-primary) !important;
  color: #fff !important;
  border: 0 !important;
  width: 100% !important; float: none !important; margin: 0 !important;
  border-radius: var(--hv-radius) !important;
  padding: 1.05em 1.5em !important;
  font-size: var(--hv-fs-h4) !important;
  font-weight: var(--hv-fw-bold) !important;
  opacity: 1 !important;
}
.hv-theme .lty-participate-now .single_add_to_cart_button:hover { filter: brightness(1.06); }
/* "Enter now for£50.00" → space before the price + the design's arrow chip on the right */
.hv-theme .lty-participate-now-button .lty-lottery-price { margin-left: 0.35em; }
.hv-theme .lty-participate-now .single_add_to_cart_button { position: relative; }
.hv-theme .lty-participate-now .single_add_to_cart_button::after {
  content: ""; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background-color: rgba(255,255,255,.22);
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="m9 18 6-6-6-6"/%3E%3C/svg%3E');
  background-repeat: no-repeat; background-position: center; background-size: 15px 15px;
  transition: background-color 0.15s ease;
}
.hv-theme .lty-participate-now .single_add_to_cart_button:hover::after { background-color: rgba(255,255,255,.32); }

/* Answer options (skill question) — one row. `ul` only (not the dropdown variant).
   !important + .hv-theme to beat the plugin's frontend.css. */
.hv-theme ul.lty-lottery-answers {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
  gap: var(--hv-space-3) !important;
  list-style: none; margin: 0; padding: 0; float: none;
}
.hv-theme ul.lty-lottery-answers li {
  padding: 0.8em 1em; margin: 0; text-align: center; border: 1px solid var(--hv-line);
  border-radius: var(--hv-radius-sm); background: var(--hv-surface); float: none; width: auto;
  font-weight: var(--hv-fw-bold); color: var(--hv-body); cursor: pointer; list-style: none;
}
.hv-theme ul.lty-lottery-answers li.lty-selected { background: var(--hv-primary) !important; color: #fff !important; border-color: var(--hv-primary) !important; }
.hv-theme ul.lty-lottery-answers li.lty-selected::after {
  content: ""; display: inline-block; width: 0.85em; height: 0.85em;
  margin-left: 0.4em; vertical-align: -0.08em; background: currentColor;
  -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M20 6 9 17l-5-5"/%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 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M20 6 9 17l-5-5"/%3E%3C/svg%3E') center / contain no-repeat;
}

/* Ticket picker states (keep names; recolour) */
.lty-selected-ticket { background: var(--hv-primary) !important; color: #fff !important; }
.lty-booked-ticket, .lty-reserved-ticket { background: var(--hv-line) !important; color: var(--hv-muted) !important; }

/* Predefined bundle buttons */
.lty-predefined-buttons .lty-selected-button { border-color: var(--hv-primary); box-shadow: var(--hv-ring); }

/* Lucky dip */
.lty-lucky-dip-button { background: var(--hv-grad-accent); color: #fff; border-radius: var(--hv-radius-sm); }

/* ---- Product grid → 4 per row, responsive, wrapping (shows all products) - */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hv-space-5); margin: 0; padding: 0; list-style: none; }
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; display: none; }
.woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; }
@media (max-width: 1100px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
/* Mobile: keep TWO cards per row (requested), compacted so the countdown bar,
   price and button all fit inside ~165px-wide cards. */
@media (max-width: 480px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: var(--hv-space-3); }
  body.hv-theme li.product.hv-draw-card .hv-draw-card__body { padding: var(--hv-space-3) !important; gap: var(--hv-space-2); }
  body.hv-theme li.product.hv-draw-card .hv-draw-card__title { font-size: var(--hv-fs-sm) !important; min-height: 0; }
  body.hv-theme li.product.hv-draw-card .hv-draw-card__price .now { font-size: var(--hv-fs-h4) !important; }
  body.hv-theme li.product.hv-draw-card .hv-draw-card__flag { font-size: var(--hv-fs-xs) !important; padding: 0.45em 0.7em; top: -8px; right: -4px; }
  /* ~165px card: shrink the pill and drop the icon so the date still fits
     on one line instead of ellipsing to "Ends 22 Aug…". */
  body.hv-theme li.product.hv-draw-card .hv-draw-card__date { top: -10px; padding: 0.42em 0.7em; gap: 0.35em; font-size: 10px !important; letter-spacing: 0; }
  body.hv-theme li.product.hv-draw-card .hv-draw-card__date svg { display: none; }
  body.hv-theme li.product.hv-draw-card .hv-countdown--bar .hv-countdown__num { font-size: var(--hv-fs-sm) !important; }
  body.hv-theme li.product.hv-draw-card .hv-countdown--bar .hv-countdown__lbl { font-size: 8px !important; letter-spacing: 0; }
  body.hv-theme li.product.hv-draw-card .hv-countdown--bar .hv-countdown__unit { padding: 0.35em 0.1em !important; }
  body.hv-theme li.product.hv-draw-card .hv-draw-card__cta .button { padding: 0.75em 0.5em !important; font-size: var(--hv-fs-sm) !important; }
}

/* =========================================================================
   DRAW CARD — HARDENED / HIGH-PRIORITY STYLING
   Locks every card element to the design and overrides WooCommerce core + the
   lottery plugin's frontend/inline CSS. High-specificity selectors (body.hv-theme
   … li.product.hv-draw-card) + !important only where those stylesheets contest.
   ========================================================================= */
/* Card shell — WHITE card, flat (no shadow), light border, on-white tokens
   re-asserted (the card is in the dark-surface scope in base.css; this wins). */
body.hv-theme ul.products li.product.hv-draw-card {
  --hv-ink: #111827; --hv-body: #4B5563; --hv-muted: #6B7280; --hv-line: #E7EAF0;
  position: relative;
  display: flex !important; flex-direction: column !important; text-align: left !important;
  background: #fff !important; border: 1px solid var(--hv-line) !important;
  border-radius: 16px !important; box-shadow: none !important;
  overflow: visible !important;   /* let the enlarged flag sit slightly outside */
  padding: 0 !important; margin: 0 !important;
  transition: border-color .18s ease;
}
body.hv-theme ul.products li.product.hv-draw-card:hover { border-color: #cbd5e1 !important; box-shadow: none !important; transform: none; }

/* FONT COMPULSION (card) */
body.hv-theme li.product.hv-draw-card,
body.hv-theme li.product.hv-draw-card * { font-family: var(--hv-font) !important; }

/* Media — the (admin-designed) banner image fills the top; rounded top corners. */
body.hv-theme li.product.hv-draw-card .hv-draw-card__media { position: relative; aspect-ratio: 1 / 1; background: #f3f4f6; overflow: hidden; margin: 0; border-radius: 15px 15px 0 0; }
body.hv-theme li.product.hv-draw-card .hv-draw-card__media-link { display: block; width: 100%; height: 100%; }
body.hv-theme li.product.hv-draw-card .hv-draw-card__media img { width: 100% !important; height: 100% !important; object-fit: cover !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; display: block; }

/* Draw date — pill straddling the card's TOP EDGE, centred. Same colour
   treatment as the corner sale flag (brand fill, white ink, blue glow) so the
   two chips on this edge read as one family; only the shape differs — fully
   round here, 10px there — which keeps them distinguishable at a glance.
   Sized in em so it tracks the card's responsive type scale. */
body.hv-theme li.product.hv-draw-card .hv-draw-card__date {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  z-index: 6;                    /* above the flag's shadow, never above a modal */
  display: inline-flex; align-items: center; gap: 0.45em;
  max-width: calc(100% - 24px);  /* never wider than the card it sits on */
  padding: 0.5em 0.95em; border-radius: 999px;
  background: var(--hv-primary); color: #fff !important;
  border: 0;
  font-size: var(--hv-fs-xs) !important; font-weight: var(--hv-fw-black) !important;
  line-height: 1; letter-spacing: 0.02em; white-space: nowrap;
  box-shadow: 0 8px 18px rgba(var(--hv-primary-rgb), .4);
}
body.hv-theme li.product.hv-draw-card .hv-draw-card__date svg {
  width: 13px; height: 13px; flex: 0 0 auto;
  color: #fff;                   /* on the brand fill, same as the prize bar */
}
body.hv-theme li.product.hv-draw-card .hv-draw-card__date > span {
  overflow: hidden; text-overflow: ellipsis;
}
/* Both chips on one top edge — the awkward case, at EVERY width.

   Alone, each chip is fine. Together they were fighting on three axes at once:
   the date sits at top:-13px and the flag at top:-10px (centres 5.7px apart, so
   visibly not level); the date is ~24px tall at 12px type and the flag ~29px at
   14px; and the date is a 999px pill against the flag's 10px corner. On a ~330px
   four-up card the centred date's right edge also landed within a pixel or two
   of the flag, so the two touched — reading as one broken widget rather than two
   tags.

   Fixing all three by matching sizes would mean changing the flag, which is the
   established look on every card that has no date. So instead the pair simply
   stops sharing space: date hard left, flag hard right, 6px outside the corners
   (the overhang the flag already had), and both vertically centred ON the edge
   via top:0 + translateY(-50%), which levels them whatever their heights are.
   Far apart and level, the remaining size difference stops reading as an error.

   Cards with only a date keep the centred pill, unchanged. The max-width cap is
   what guarantees the two can never meet again — the alignment alone would not. */
body.hv-theme li.product.hv-draw-card.hv-draw-card--flagged .hv-draw-card__date,
body.hv-theme li.product.hv-draw-card.hv-draw-card--flagged .hv-draw-card__flag {
  top: 0; transform: translateY(-50%);
}
body.hv-theme li.product.hv-draw-card.hv-draw-card--flagged .hv-draw-card__date {
  left: -6px; right: auto; max-width: 62%;
}
body.hv-theme li.product.hv-draw-card.hv-draw-card--flagged .hv-draw-card__flag {
  right: -6px; left: auto;
}

/* The card only has ~155px at two-up, and "Ends 26 August" + "60% OFF" simply
   cannot both fit — capping the width just ellipsed the date to "Ends 26 Au…".
   So below 480px a flagged card swaps to the abbreviated label and drops the
   flag to the same 10px as the date pill, which also stops the flag looking
   oversized next to it. Cards WITHOUT a flag keep the full month name. */
body.hv-theme li.product.hv-draw-card .hv-draw-card__date-short { display: none; }
@media (max-width: 480px) {
  body.hv-theme li.product.hv-draw-card.hv-draw-card--flagged .hv-draw-card__date-full { display: none; }
  body.hv-theme li.product.hv-draw-card.hv-draw-card--flagged .hv-draw-card__date-short { display: inline; }
  body.hv-theme li.product.hv-draw-card.hv-draw-card--flagged .hv-draw-card__flag {
    font-size: 10px !important; padding: 0.42em 0.7em; letter-spacing: 0.02em;
  }
}

/* Flag — bigger, and sits slightly OUTSIDE the top-right corner (li overflow:visible)
   so it never covers the product image. */
body.hv-theme li.product.hv-draw-card .hv-draw-card__flag {
  position: absolute; top: -10px; right: -6px; z-index: 5;
  padding: 0.55em 1.05em; border-radius: 10px;
  background: var(--hv-primary); color: #fff !important;
  font-size: var(--hv-fs-sm) !important; font-weight: var(--hv-fw-black) !important;
  text-transform: uppercase; letter-spacing: 0.03em; line-height: 1;
  box-shadow: 0 8px 18px rgba(var(--hv-primary-rgb), .4);
}

/* Prize bar — sits BELOW the image (own strip; never cuts the image). One theme
   blue, fading out toward the right where there's no text (low opacity). */
body.hv-theme li.product.hv-draw-card .hv-draw-card__prize {
  display: flex; align-items: center; gap: 0.5em;
  margin: 0; padding: 0.6em var(--hv-space-4);
  background: linear-gradient(90deg, var(--hv-blue-600) 0%, var(--hv-blue-600) 55%, rgba(var(--hv-primary-rgb), .10) 100%);
  color: #fff !important;
  font-size: var(--hv-fs-xs) !important; font-weight: var(--hv-fw-bold) !important;
  text-transform: uppercase; letter-spacing: 0.06em;
}
body.hv-theme li.product.hv-draw-card .hv-draw-card__prize svg { width: 16px; height: 16px; flex: 0 0 auto; color: #fff; }

/* Body */
body.hv-theme li.product.hv-draw-card .hv-draw-card__body { display: flex !important; flex-direction: column; gap: var(--hv-space-3); flex: 1; padding: var(--hv-space-4) !important; margin: 0; background: #fff; border-radius: 0 0 15px 15px; }

/* Title — bold ink, wraps; min-height keeps rows even */
body.hv-theme li.product.hv-draw-card .hv-draw-card__title {
  font-size: var(--hv-fs-h4) !important; font-weight: var(--hv-fw-bold) !important; color: var(--hv-ink) !important;
  line-height: var(--hv-lh-snug) !important; margin: 0; display: block !important;
  overflow: visible; overflow-wrap: anywhere; min-height: calc(2 * 1.3em); max-height: none !important; height: auto !important; padding: 0;
}
body.hv-theme li.product.hv-draw-card .hv-draw-card__title a { color: inherit !important; text-decoration: none !important; }

/* Price — discount-safe: sale price + strikethrough original + "Per Ticket".
   flex-wrap so it never breaks on mobile/tablet whatever the amounts' length. */
body.hv-theme li.product.hv-draw-card .hv-draw-card__price {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.1em 0.5em; margin: 0;
  border-top: 1px solid var(--hv-line); border-bottom: 1px solid var(--hv-line);
  padding: var(--hv-space-3) 0;
}
body.hv-theme li.product.hv-draw-card .hv-draw-card__price .now,
body.hv-theme li.product.hv-draw-card .hv-draw-card__price .now .amount,
body.hv-theme li.product.hv-draw-card .hv-draw-card__price .now .woocommerce-Price-amount { font-size: var(--hv-fs-h3) !important; font-weight: var(--hv-fw-black) !important; color: var(--hv-ink) !important; line-height: 1.05; }
body.hv-theme li.product.hv-draw-card .hv-draw-card__price .was,
body.hv-theme li.product.hv-draw-card .hv-draw-card__price .was .amount { font-size: var(--hv-fs-sm) !important; font-weight: var(--hv-fw-medium) !important; color: var(--hv-muted) !important; text-decoration: line-through; line-height: 1.05; }
body.hv-theme li.product.hv-draw-card .hv-draw-card__price .lbl { font-size: 9px !important; font-weight: var(--hv-fw-bold) !important; color: var(--hv-muted) !important; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.15; }

/* "ENDS IN" + countdown boxes (four separate bordered boxes, blue numbers) */
body.hv-theme li.product.hv-draw-card .hv-loop-countdown { margin: 0; }
body.hv-theme li.product.hv-draw-card .hv-loop-countdown__label { margin: 0 0 6px; text-align: center; font-size: var(--hv-fs-xs); font-weight: var(--hv-fw-bold); color: var(--hv-ink); text-transform: uppercase; letter-spacing: 0.08em; }
body.hv-theme li.product.hv-draw-card .hv-countdown--bar { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; background: none !important; border: 0 !important; border-radius: 0; overflow: visible; }
body.hv-theme li.product.hv-draw-card .hv-countdown--bar .hv-countdown__unit { --hv-muted: #6B7280; padding: 0.5em 0.2em !important; border: 0 !important; border-radius: 8px; text-align: center; background: rgba(var(--hv-primary-rgb), .08) !important; min-width: 0; }
body.hv-theme li.product.hv-draw-card .hv-countdown--bar .hv-countdown__num { display: block; font-size: var(--hv-fs-h4) !important; font-weight: var(--hv-fw-black) !important; color: var(--hv-primary) !important; line-height: 1; }
body.hv-theme li.product.hv-draw-card .hv-countdown--bar .hv-countdown__lbl { display: block; font-size: 8px !important; margin-top: 3px; color: var(--hv-muted) !important; text-transform: uppercase; letter-spacing: 0.03em; }

/* Progress */
body.hv-theme li.product.hv-draw-card .hv-progress { display: flex; flex-direction: column; gap: 0.4em; margin: 0; }
body.hv-theme li.product.hv-draw-card .hv-progress__meta { display: flex; justify-content: space-between; font-size: var(--hv-fs-xs); font-weight: var(--hv-fw-bold); color: var(--hv-ink); text-transform: uppercase; letter-spacing: 0.02em; }
body.hv-theme li.product.hv-draw-card .hv-progress__meta > span:first-child { color: var(--hv-ink); }
/* "Competition Finished" status (not-started / closed / finished draws) */
body.hv-theme li.product.hv-draw-card .hv-draw-card__status { margin: var(--hv-space-2) 0; text-align: center; font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-bold); color: var(--hv-danger); text-transform: uppercase; letter-spacing: 0.04em; }
body.hv-theme li.product.hv-draw-card .hv-progress__pct { font-weight: var(--hv-fw-bold) !important; color: var(--hv-ink) !important; }
body.hv-theme li.product.hv-draw-card .hv-progress__track { height: 8px; background: #EDF0F5; border-radius: var(--hv-radius-pill); overflow: hidden; }
body.hv-theme li.product.hv-draw-card .hv-progress__fill { display: block; height: 100%; background: var(--hv-grad-primary); }

/* CTA — outline by default, filled blue on promo (sale/featured) cards + hover.
   The "Enter the Vault" label comes from WooCommerce; the arrow is a ::after mask. */
body.hv-theme li.product.hv-draw-card .hv-draw-card__cta { margin-top: auto; padding-top: var(--hv-space-2); }
body.hv-theme li.product.hv-draw-card .hv-draw-card__cta a.button,
body.hv-theme li.product.hv-draw-card .hv-draw-card__cta .button {
  display: flex !important; width: 100% !important; align-items: center; justify-content: center; gap: 0.55em;
  margin: 0 !important; padding: 0.9em 1.25em !important;
  background: #fff !important; color: var(--hv-primary) !important;
  border: 1.5px solid var(--hv-primary) !important; border-radius: 10px !important;
  font-family: var(--hv-font); font-size: var(--hv-fs-sm) !important; font-weight: var(--hv-fw-bold) !important;
  text-transform: uppercase !important; letter-spacing: 0.04em; line-height: 1.2; float: none !important; box-shadow: none;
  transition: background .15s ease, color .15s ease;
}
body.hv-theme li.product.hv-draw-card .hv-draw-card__cta .button::after {
  content: ""; width: 15px; height: 15px; flex: 0 0 auto; background: currentColor;
  -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M5 12h14"/%3E%3Cpath d="m12 5 7 7-7 7"/%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 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M5 12h14"/%3E%3Cpath d="m12 5 7 7-7 7"/%3E%3C/svg%3E') center / contain no-repeat;
}
body.hv-theme li.product.hv-draw-card.hv-draw-card--promo .hv-draw-card__cta .button {
  background: var(--hv-primary) !important; color: #fff !important; border-color: var(--hv-primary) !important;
}
/* Outline (non-promo) hover — a subtle blue TINT, not a full fill, so it never
   ends up looking like the filled promo/first-card button. */
body.hv-theme li.product.hv-draw-card .hv-draw-card__cta .button:hover,
body.hv-theme li.product.hv-draw-card .hv-draw-card__cta .button:focus {
  background: rgba(var(--hv-primary-rgb), .08) !important; color: var(--hv-primary) !important; border-color: var(--hv-primary) !important;
}
/* Promo (already filled) hover — stay filled blue, just brighten a touch. */
body.hv-theme li.product.hv-draw-card.hv-draw-card--promo .hv-draw-card__cta .button:hover,
body.hv-theme li.product.hv-draw-card.hv-draw-card--promo .hv-draw-card__cta .button:focus {
  background: var(--hv-primary) !important; color: #fff !important; border-color: var(--hv-primary) !important; filter: brightness(1.08);
}

/* Countdown hit zero (hv.js adds .is-ended) OR a finished/closed/not-started draw
   (.is-finished): disable the CTA. */
body.hv-theme li.product.hv-draw-card.is-ended .hv-draw-card__cta .button,
body.hv-theme li.product.hv-draw-card.is-finished .hv-draw-card__cta .button {
  background: #EDF0F5 !important; color: var(--hv-muted) !important; border-color: var(--hv-line) !important;
  pointer-events: none; filter: none;
}

/* Hide WooCommerce's own "Sale!" flash and any stray plugin/loop title/price on the
   card — we render our own badge + price + title in the designed slots. */
body.hv-theme li.product.hv-draw-card .onsale,
body.hv-theme li.product.hv-draw-card .hv-draw-card__media .onsale,
body.hv-theme li.product.hv-draw-card > .price,
body.hv-theme li.product.hv-draw-card .lty-lottery-short-description { display: none !important; }

/* ---- SYSTEM MESSAGES (unified premium notices) ---------------------------
   Two markups exist in the wild and BOTH get the identical skin:
   • legacy classic notices — div.woocommerce-message / div.woocommerce-info /
     ul.woocommerce-error (WC's icon font is replaced with brand icon chips)
   • WC 8.5+ banner markup — .wc-block-components-notice-banner.is-* (Cart &
     Checkout blocks AND modern classic notice templates; ships an inline SVG
     which is re-tinted onto the same brand chip)
   Status palette flows through local --n-* custom properties (blue/info is
   the base; success/error/warning override it). Success/error/warn tints are
   softened one step from the token tints for a calmer, premium read. */
body.hv-theme .woocommerce-message,
body.hv-theme .woocommerce-info,
body.hv-theme .woocommerce-error,
body.hv-theme .wc-block-components-notice-banner {
  --n-accent: var(--hv-blue-600);
  --n-border: var(--hv-blue-100);
  --n-bg:     var(--hv-blue-050);
  position: relative;
  margin: 0 0 var(--hv-space-5);
  padding: var(--hv-space-4) var(--hv-space-5);
  background: var(--n-bg) !important;
  border: 1px solid var(--n-border) !important;   /* kills WC's grey box + purple top bar */
  border-left: 4px solid var(--n-accent) !important;
  border-radius: var(--hv-radius) !important;
  box-shadow: var(--hv-shadow-sm);
  color: var(--hv-body) !important;
  font-size: var(--hv-fs-sm);
  line-height: 1.55;
  list-style: none !important;
  word-wrap: break-word;
  animation: hv-notice-in 0.35s ease both;
}
@keyframes hv-notice-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.hv-theme .woocommerce-message,
  body.hv-theme .woocommerce-info,
  body.hv-theme .woocommerce-error,
  body.hv-theme .wc-block-components-notice-banner { animation: none; }
}

/* Status palettes (shared by both markups) */
body.hv-theme .woocommerce-message,
body.hv-theme .wc-block-components-notice-banner.is-success {
  --n-accent: var(--hv-green-500); --n-border: rgba(34,197,94,.30); --n-bg: var(--hv-green-100);
}
body.hv-theme .woocommerce-error,
body.hv-theme .wc-block-components-notice-banner.is-error {
  --n-accent: var(--hv-red-500); --n-border: rgba(239,68,68,.30); --n-bg: #2A1416;
}
body.hv-theme .wc-block-components-notice-banner.is-warning {
  --n-accent: var(--hv-orange-500); --n-border: var(--hv-orange-100); --n-bg: var(--hv-orange-050);
}
/* .woocommerce-info + .is-info/.is-default keep the blue base values */

/* Legacy trio: replace WC's icon font with a brand icon chip (white glyph on
   an accent circle, drawn by ::before) and reserve its gutter. */
body.hv-theme .woocommerce-message,
body.hv-theme .woocommerce-info,
body.hv-theme .woocommerce-error {
  padding-left: calc(var(--hv-space-4) + 26px + var(--hv-space-3)) !important;
}
body.hv-theme .woocommerce-message::before,
body.hv-theme .woocommerce-info::before,
body.hv-theme .woocommerce-error::before {
  content: "" !important;               /* kills the WooCommerce icon font */
  position: absolute !important; left: var(--hv-space-4) !important; top: 0.85em !important;
  width: 26px; height: 26px; border-radius: var(--hv-radius-pill);
  background-color: var(--n-accent);
  background-repeat: no-repeat; background-position: center; background-size: 14px 14px;
}
body.hv-theme .woocommerce-message::before { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M20 6 9 17l-5-5"/%3E%3C/svg%3E'); }
body.hv-theme .woocommerce-error::before   { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="m7 7 10 10M17 7 7 17"/%3E%3C/svg%3E'); }
body.hv-theme .woocommerce-info::before    { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 16v-5M12 8h.01"/%3E%3C/svg%3E'); }

/* Multiple errors stack inside one ul.woocommerce-error — divide them cleanly */
body.hv-theme ul.woocommerce-error li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
body.hv-theme ul.woocommerce-error li + li {
  margin-top: var(--hv-space-2) !important;
  padding-top: var(--hv-space-2) !important;
  border-top: 1px solid var(--n-border) !important;
}

/* Banner markup: flex row; re-tint the inline SVG onto the same brand chip */
body.hv-theme .wc-block-components-notice-banner {
  display: flex; align-items: flex-start; gap: var(--hv-space-3);
}
body.hv-theme .wc-block-components-notice-banner > svg {
  flex: 0 0 auto; box-sizing: border-box;
  width: 26px; height: 26px; padding: 4px;
  border-radius: var(--hv-radius-pill);
  fill: #fff !important; background-color: var(--n-accent) !important;
}
body.hv-theme .wc-block-components-notice-banner__content { flex: 1 1 auto; min-width: 0; color: var(--hv-body); }
body.hv-theme .wc-block-components-notice-banner__summary { margin: 0 0 var(--hv-space-2); font-weight: var(--hv-fw-bold); color: var(--hv-ink); }
body.hv-theme .wc-block-components-notice-banner__dismiss {
  flex: 0 0 auto; align-self: flex-start; margin-left: auto; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  color: var(--hv-muted) !important; cursor: pointer;
}
body.hv-theme .wc-block-components-notice-banner__dismiss:hover,
body.hv-theme .wc-block-components-notice-banner__dismiss:focus { color: var(--hv-ink) !important; background: none !important; }

/* Text emphasis + inline links inside any notice */
body.hv-theme .woocommerce-message strong, body.hv-theme .woocommerce-info strong,
body.hv-theme .woocommerce-error strong, body.hv-theme .wc-block-components-notice-banner strong { color: var(--hv-ink); }
body.hv-theme .woocommerce-message a:not(.button), body.hv-theme .woocommerce-info a:not(.button),
body.hv-theme .woocommerce-error a:not(.button), body.hv-theme .wc-block-components-notice-banner a:not(.button) {
  color: #6CA8FF; font-weight: var(--hv-fw-bold);
  text-decoration: underline; text-underline-offset: 2px;
}

/* Action button inside notices ("View cart", "Login", …) — compact brand
   button; every state pinned (Elementor kit paints hovers pink). */
body.hv-theme .woocommerce-message .button, body.hv-theme .woocommerce-info .button,
body.hv-theme .woocommerce-error .button, body.hv-theme .wc-block-components-notice-banner .button {
  float: right; margin: -0.3em 0 0 var(--hv-space-4);
  padding: 0.55em 1.1em !important; border: 0 !important; border-radius: var(--hv-radius-sm) !important;
  background: var(--hv-primary) !important; color: #fff !important;
  font-size: var(--hv-fs-sm) !important; font-weight: var(--hv-fw-bold) !important; line-height: 1.2;
  text-decoration: none !important;
}
body.hv-theme .woocommerce-message .button:hover, body.hv-theme .woocommerce-info .button:hover,
body.hv-theme .woocommerce-error .button:hover, body.hv-theme .wc-block-components-notice-banner .button:hover,
body.hv-theme .woocommerce-message .button:focus, body.hv-theme .woocommerce-info .button:focus,
body.hv-theme .woocommerce-error .button:focus, body.hv-theme .wc-block-components-notice-banner .button:focus {
  background: var(--hv-blue-700) !important; color: #fff !important;
}

/* Small screens: tighter box, smaller chip, action button drops below text */
@media (max-width: 560px) {
  body.hv-theme .woocommerce-message,
  body.hv-theme .woocommerce-info,
  body.hv-theme .woocommerce-error,
  body.hv-theme .wc-block-components-notice-banner {
    padding: var(--hv-space-3) var(--hv-space-4);
    margin-bottom: var(--hv-space-4);
  }
  body.hv-theme .woocommerce-message,
  body.hv-theme .woocommerce-info,
  body.hv-theme .woocommerce-error {
    padding-left: calc(var(--hv-space-3) + 22px + var(--hv-space-2)) !important;
  }
  body.hv-theme .woocommerce-message::before,
  body.hv-theme .woocommerce-info::before,
  body.hv-theme .woocommerce-error::before {
    left: var(--hv-space-3) !important; width: 22px; height: 22px; background-size: 12px 12px;
  }
  body.hv-theme .wc-block-components-notice-banner > svg { width: 22px; height: 22px; }
  body.hv-theme .woocommerce-message .button, body.hv-theme .woocommerce-info .button,
  body.hv-theme .woocommerce-error .button, body.hv-theme .wc-block-components-notice-banner .button {
    float: none; display: inline-block; margin: var(--hv-space-3) 0 0;
  }
}

/* ---- Bonus-tickets plugin banner (self-contained; nudge to new radius) --- */
.lty-bgo-banner { border-radius: var(--hv-radius-lg) !important; }

/* ---- Spend-limit / responsible-gambling banners ------------------------- */
.usl-cart-banner { border-radius: var(--hv-radius); border-left: 4px solid var(--hv-orange-500); }

/* =========================================================================
   SINGLE PRODUCT (competition) LAYOUT
   ========================================================================= */
.hv-product { padding-block: var(--hv-space-6); }
.hv-breadcrumb { color: var(--hv-muted); font-size: var(--hv-fs-sm); margin-bottom: var(--hv-space-4); }
.hv-breadcrumb a { color: var(--hv-muted); }
.hv-breadcrumb a:hover { color: var(--hv-primary); }

.hv-product__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--hv-space-6); align-items: start; }
.hv-product__summary { min-width: 0; }

/* CRITICAL: WooCommerce core layout CSS floats div.summary at width:48%, which
   squeezed the whole buy column into half its grid cell. Force full width. */
body.hv-theme div.product div.summary,
body.hv-theme div.product .hv-product__summary {
  width: auto !important; float: none !important; margin: 0 !important;
}
.hv-product__summary > * + * { margin-top: var(--hv-space-4); }
.hv-product__tabs { margin-top: var(--hv-space-7); }
@media (max-width: 900px) { .hv-product__grid { grid-template-columns: 1fr; } }

/* LEFT column: compact product gallery — the image displays alone at the column
   width and the column ends where the image ends ("short", no stretched panel). */
.hv-product__media { min-width: 0; align-self: start; }
.hv-product__media .woocommerce-product-gallery,
body.hv-theme div.product .hv-product__media div.images { width: 100% !important; margin: 0 !important; float: none !important; }
.hv-product__media .woocommerce-product-gallery__wrapper { margin: 0; }
.hv-product__media .woocommerce-product-gallery__image a { display: block; }
.hv-product__media .woocommerce-product-gallery__image img,
.hv-product__media .woocommerce-product-gallery__wrapper img { width: 100%; height: auto; border-radius: var(--hv-radius-lg); display: block; }
.hv-product__media .woocommerce-product-gallery__trigger { display: none; } /* hide zoom pin */
/* (padding/margin come from the higher-specificity rule below) */
.hv-product__media .flex-control-thumbs { display: flex; gap: var(--hv-space-2); list-style: none; }
.woocommerce div.product div.images .flex-control-thumbs {
  overflow: hidden;
  zoom: 1;
  margin: 0;
  padding: 10px !important;
}
.hv-product__media .flex-control-thumbs li { width: 64px; float: none; }
.hv-product__media .flex-control-thumbs img { border-radius: var(--hv-radius-sm); opacity: .6; cursor: pointer; }
.hv-product__media .flex-control-thumbs img.flex-active { opacity: 1; outline: 2px solid var(--hv-blue-500); }

/* Re-show the product title in the summary (design: h2-size uppercase, 2 lines) */
.hv-product__summary .product_title { display: block; font-size: var(--hv-fs-h2) !important; font-weight: var(--hv-fw-black); text-transform: uppercase; color: var(--hv-ink); line-height: var(--hv-lh-tight); letter-spacing: 0.02em; }
.hv-product__summary p.price { font-size: var(--hv-fs-h2); font-weight: var(--hv-fw-black); color: var(--hv-primary); }

/* Price row (hv_single_price_row): now/was price + "Caps: N" badge pushed right.
   Hardened so plugin/Elementor price colours can't leak in. */
body.hv-theme .hv-product__summary .hv-buybox__price { display: flex; align-items: baseline; gap: var(--hv-space-3); flex-wrap: wrap; }
body.hv-theme .hv-buybox__price .now,
body.hv-theme .hv-buybox__price .now .amount,
body.hv-theme .hv-buybox__price .now .woocommerce-Price-amount { font-size: var(--hv-fs-h1) !important; font-weight: var(--hv-fw-black) !important; color: var(--hv-primary) !important; text-decoration: none !important; }
body.hv-theme .hv-buybox__price .was,
body.hv-theme .hv-buybox__price .was .amount { font-size: var(--hv-fs-h4) !important; font-weight: var(--hv-fw-regular) !important; color: var(--hv-muted) !important; text-decoration: line-through; }
/* Top row: category eyebrow (left) + Caps badge (right) */
.hv-product__summary .hv-buybox__toprow { display: flex; align-items: center; justify-content: space-between; gap: var(--hv-space-3); flex-wrap: wrap; }
/* "Per Ticket" label after the price */
.hv-product__summary .hv-buybox__price .hv-buybox__perticket { align-self: flex-end; margin-bottom: 0.35em; font-size: var(--hv-fs-xs); font-weight: var(--hv-fw-bold); color: var(--hv-muted); text-transform: uppercase; letter-spacing: 0.04em; }
/* Price (left) + "Ends In" countdown (right), on one row — hv.js wraps them in
   .hv-buybox__pricerow. Stacks on small screens. */
.hv-product__summary .hv-buybox__pricerow { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--hv-space-4) var(--hv-space-5); flex-wrap: wrap; }
.hv-product__summary .hv-buybox__pricerow .hv-buybox__price { flex: 0 0 auto; margin: 0; }
.hv-product__summary .hv-buybox__pricerow .lty-lottery-date-ranges { flex: 1 1 auto; min-width: 250px; margin: 0; }
.hv-product__summary .hv-buybox__pricerow .lty-lottery-countdown-timer { justify-content: flex-end; }
.hv-product__summary .hv-buybox__pricerow .lty-lottery-date-ranges::before { text-align: right; }
@media (max-width: 600px) {
  .hv-product__summary .hv-buybox__pricerow { flex-direction: column; align-items: stretch; }
  .hv-product__summary .hv-buybox__pricerow .lty-lottery-countdown-timer { justify-content: flex-start; }
  .hv-product__summary .hv-buybox__pricerow .lty-lottery-date-ranges::before { text-align: left; }
}

/* =========================================================================
   SINGLE COMPETITION — REQUESTED REFINEMENTS (smaller elements, side space,
   narrower tab content, no shadows, font/spacing fixes, highlighted winners
   line, 2-up answers, selected online-entry). All responsive-safe.
   ========================================================================= */

/* Breathing room down both page sides + slightly narrower content column */
.hv-product.hv-container { max-width: 1180px; padding-inline: clamp(var(--hv-space-5), 3vw, var(--hv-space-8)); }

/* Draw name → the body font (Manrope), a touch smaller, spaced from the series */
.hv-product__summary .product_title {
  font-family: var(--hv-font) !important; font-size: var(--hv-fs-h3) !important;
  line-height: var(--hv-lh-snug) !important; margin: var(--hv-space-2) 0 0 !important;
}
/* Space between series (eyebrow) and draw name; bigger Caps badge */
.hv-product__summary .hv-buybox__toprow { margin-bottom: var(--hv-space-1); }
.hv-product__summary .hv-buybox__caps { font-size: var(--hv-fs-sm) !important; padding: 0.5em 1em !important; }

/* Price + countdown a touch smaller */
.hv-product__summary .hv-buybox__price .now,
.hv-product__summary .hv-buybox__price .now .amount,
.hv-product__summary .hv-buybox__price .now .woocommerce-Price-amount { font-size: var(--hv-fs-h2) !important; }
.hv-theme .hv-product__summary .lty-lottery-countdown-timer > .lty-lottery-timer { padding: 0.4em 0.3em; }
.hv-theme .hv-product__summary .lty-lottery-timer .lty-lottery-timer-content:first-child { font-size: var(--hv-fs-h4) !important; }

/* Highlight the "This Draw will have 1 winner" line */
.hv-product__summary .lty-winners-count {
  display: inline-flex; align-items: center; gap: 0.15em; margin: 0 !important;
  background: rgba(var(--hv-primary-rgb), .08); border: 1px solid rgba(var(--hv-primary-rgb), .18);
  border-radius: var(--hv-radius-sm); padding: 0.5em 0.9em !important;
  color: var(--hv-primary) !important; font-weight: var(--hv-fw-medium); font-size: var(--hv-fs-sm);
}
.hv-product__summary .lty-winners-count b { color: var(--hv-primary) !important; }

/* Entry toggle — smaller buttons; the DEFAULT (Online Entry) stays selected/blue */
.hv-theme .hv-product__summary .hv-entry-toggle__btn { padding: 0.6em 0.8em !important; font-size: var(--hv-fs-sm) !important; gap: 0.4em; }
.hv-theme .hv-product__summary .hv-entry-toggle__btn svg { width: 14px; height: 14px; }
body.hv-theme .hv-product__summary .hv-entry-toggle__btn.is-active,
body.hv-theme .hv-product__summary .hv-entry-toggle__btn.is-active:hover,
body.hv-theme .hv-product__summary .hv-entry-toggle__btn.is-active:focus {
  background: var(--hv-primary) !important; color: #fff !important; border-color: var(--hv-primary) !important;
}

/* Skill-question answers → exactly 2 per row */
.hv-theme .hv-product__summary ul.lty-lottery-answers { grid-template-columns: repeat(2, 1fr) !important; }
.hv-theme .hv-product__summary ul.lty-lottery-answers li { padding: 0.65em 0.8em; }

/* Participate button — smaller + no shadow */
.hv-theme .hv-product__inner .single_add_to_cart_button,
.hv-theme .hv-product__inner .lty-participate-now-button { font-size: var(--hv-fs-body) !important; padding: 0.9em 1.25em !important; }

/* Remove box-shadows across the draw page (focus rings are kept — not blanketed) */
body.hv-theme .hv-product__inner .single_add_to_cart_button,
body.hv-theme .hv-product__inner .lty-participate-now-button,
body.hv-theme .hv-product__inner .lty-lottery-range-slider-btn,
body.hv-theme .hv-product__inner .lty-lottery-timer,
body.hv-theme .hv-product__inner .hv-entry-toggle__btn,
body.hv-theme .hv-product__media .woocommerce-product-gallery__image img,
body.hv-theme .hv-product__tabs .lty-frontend-table,
body.hv-theme .hv-prizes .hv-prize-row,
body.hv-theme .hv-prizes .hv-tickets,
body.hv-theme .hv-prizes .hv-ticket { box-shadow: none !important; }
body.hv-theme .hv-product__inner .single_add_to_cart_button:hover,
body.hv-theme .hv-product__inner .lty-participate-now-button:hover { box-shadow: none !important; }

/* Narrower content for the tab sections (Instant Win / Description / Rules / FAQs) */
.hv-product__tabs { max-width: 940px; }

/* Trust badges a touch smaller */
.hv-buybox__trust-item b { font-size: 11px; }
.hv-buybox__trust-item .hv-ico svg { width: 18px; height: 18px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .hv-product.hv-container { padding-inline: var(--hv-space-5); }
  .hv-product__tabs { max-width: none; }
}
@media (max-width: 480px) {
  .hv-product.hv-container { padding-inline: var(--hv-space-4); }
  .hv-product__summary .product_title { font-size: var(--hv-fs-h4) !important; }
  .hv-product__summary .hv-buybox__price .now,
  .hv-product__summary .hv-buybox__price .now .amount { font-size: var(--hv-fs-h3) !important; }
}

/* Winners line under the countdown ("This draw will have 1 winner & N instant winners") */
body.hv-theme .lty-winners-count { margin: 0 !important; color: var(--hv-muted) !important; font-size: var(--hv-fs-body); }
body.hv-theme .lty-winners-count::before {
  content: ""; display: inline-block; width: 1.1em; height: 1.1em;
  margin-right: 0.45em; vertical-align: -0.2em; background: var(--hv-gold-500);
  -webkit-mask: var(--hv-ico-gift) center / contain no-repeat;
          mask: var(--hv-ico-gift) center / contain no-repeat;
}
body.hv-theme .lty-winners-count b, body.hv-theme .lty-winners-count strong { color: var(--hv-ink); }

/* Even spacing between the plugin's stacked summary elements (countdown, winners
   line, entry toggle, notices) inside its wrapper */
.hv-product__summary .lty-lottery-product-summary > * + * { margin-top: var(--hv-space-4); }

/* Progress bar under the participate button (hv_single_progress_bar) */
.hv-product__summary .hv-progress--single { margin-top: var(--hv-space-4); }
.hv-product__summary .hv-progress--single > .hv-progress__pct { text-align: right; font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-bold); color: var(--hv-primary); margin-top: 2px; }

/* =========================================================================
   SINGLE COMPETITION — LIGHT (white) buy box, matching the new design.
   The buy-box surfaces default to the dark theme (base.css scope); here they are
   re-lit to white with blue/ink text. These elements only appear on the single
   product page, so the override is global. (Phase 1 — refine against staging.)
   ========================================================================= */
body.hv-theme .lty-lottery-countdown-timer > .lty-lottery-timer,
body.hv-theme ul.lty-lottery-answers li,
body.hv-theme .hv-entry-toggle__btn,
body.hv-theme .lty-lottery-range-slider-btn,
body.hv-theme p.wps_wpr_purchase_pro_point {
  --hv-ink: #111827; --hv-body: #4B5563; --hv-muted: #6B7280; --hv-line: #E7EAF0;
}

/* Category eyebrow above the title ("VAULT RAID DRAWS") */
.hv-product__summary .hv-buybox__eyebrow {
  display: inline-flex; align-items: center; gap: 0.45em;
  color: var(--hv-primary); font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-bold);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.hv-product__summary .hv-buybox__eyebrow svg { flex: 0 0 auto; }

/* Countdown → white boxes, blue numbers, dark labels */
body.hv-theme .lty-lottery-countdown-timer > .lty-lottery-timer { background: #fff !important; border-color: var(--hv-line) !important; box-shadow: none !important; }
body.hv-theme .lty-lottery-timer .lty-lottery-timer-content:first-child { color: var(--hv-primary) !important; }
body.hv-theme .lty-lottery-timer .lty-lottery-timer-content:last-child { color: var(--hv-muted); }
body.hv-theme .lty-lottery-countdown-timer > .lty-lottery-timer:not(:last-child)::after { color: var(--hv-line); }

/* Skill-question answers → white, blue when selected (selected state kept above) */
body.hv-theme ul.lty-lottery-answers li { background: #fff !important; border-color: var(--hv-line) !important; color: var(--hv-ink); }

/* Entry toggle → white default, light-blue hover */
body.hv-theme .hv-entry-toggle__btn { background: #fff !important; color: var(--hv-body) !important; border-color: var(--hv-line) !important; }
body.hv-theme .hv-entry-toggle__btn:hover,
body.hv-theme .hv-entry-toggle__btn:focus { background: rgba(var(--hv-primary-rgb), .08) !important; color: var(--hv-primary) !important; border-color: var(--hv-primary) !important; }

/* Ticket −/+ buttons → white with dark icons (blue on hover) */
body.hv-theme .lty-lottery-range-slider-btn {
  background: #fff !important; border-color: var(--hv-line) !important; box-shadow: none !important;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23111827" stroke-width="2.4" stroke-linecap="round"%3E%3Cpath d="M5 12h14"/%3E%3C/svg%3E') !important;
}
body.hv-theme .lty-lottery-range-slider-increment { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23111827" stroke-width="2.4" stroke-linecap="round"%3E%3Cpath d="M5 12h14"/%3E%3Cpath d="M12 5v14"/%3E%3C/svg%3E') !important; }
body.hv-theme .lty-lottery-range-slider-btn:hover { border-color: var(--hv-primary) !important;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23065BE0" stroke-width="2.4" stroke-linecap="round"%3E%3Cpath d="M5 12h14"/%3E%3C/svg%3E') !important; }
body.hv-theme .lty-lottery-range-slider-increment:hover { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23065BE0" stroke-width="2.4" stroke-linecap="round"%3E%3Cpath d="M5 12h14"/%3E%3Cpath d="M12 5v14"/%3E%3C/svg%3E') !important; }

/* Points note → soft blue strip (was warm) */
body.hv-theme p.wps_wpr_purchase_pro_point { background: rgba(var(--hv-primary-rgb), .06) !important; border-color: rgba(var(--hv-primary-rgb), .18) !important; color: var(--hv-ink) !important; }
body.hv-theme p.wps_wpr_purchase_pro_point::before { background: var(--hv-primary); }

/* Trust badges row under the buy button (hv_single_trust_badges) */
.hv-buybox__trust {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hv-space-3);
  margin-top: var(--hv-space-4); padding-top: var(--hv-space-4); border-top: 1px solid var(--hv-line);
}
.hv-buybox__trust-item { display: flex; align-items: center; gap: var(--hv-space-2); text-align: left; }
.hv-buybox__trust-item .hv-ico { display: inline-flex; flex: 0 0 auto; color: var(--hv-primary); }
.hv-buybox__trust-item b { display: block; font-size: var(--hv-fs-xs); font-weight: var(--hv-fw-bold); color: var(--hv-ink); line-height: 1.2; }
.hv-buybox__trust-item > span > span { display: block; font-size: var(--hv-fs-xs); color: var(--hv-muted); }
@media (max-width: 560px) { .hv-buybox__trust { grid-template-columns: repeat(2, 1fr); gap: var(--hv-space-3) var(--hv-space-2); } }

/* Restyle WooCommerce single-product tabs → pill buttons like the design.
   High specificity + !important to beat WooCommerce core tab CSS. */
.hv-theme div.product .woocommerce-tabs { margin-top: 0; }
.hv-theme div.product .woocommerce-tabs ul.tabs {
  display: flex !important; flex-wrap: wrap; gap: var(--hv-space-3);
  list-style: none; margin: 0 0 var(--hv-space-5); padding: 0 !important; border: 0 !important;
}
.hv-theme div.product .woocommerce-tabs ul.tabs::before,
.hv-theme div.product .woocommerce-tabs ul.tabs::after { display: none !important; content: none !important; border: 0 !important; }
.hv-theme div.product .woocommerce-tabs ul.tabs li {
  --hv-ink: #111827; --hv-body: #4B5563; --hv-muted: #6B7280; --hv-line: #E7EAF0;
  display: block !important; background: #fff !important;
  border: 1px solid var(--hv-line) !important; border-radius: 10px !important;
  margin: 0 !important; padding: 0 !important;
}
.hv-theme div.product .woocommerce-tabs ul.tabs li::before,
.hv-theme div.product .woocommerce-tabs ul.tabs li::after { display: none !important; content: none !important; border: 0 !important; }
.hv-theme div.product .woocommerce-tabs ul.tabs li a { display: block !important; padding: 0.8em 1.25em !important; font-weight: var(--hv-fw-bold) !important; color: var(--hv-body) !important; text-shadow: none !important; }
.hv-theme div.product .woocommerce-tabs ul.tabs li.active { background: rgba(var(--hv-primary-rgb), .08) !important; border-color: var(--hv-primary) !important; }
.hv-theme div.product .woocommerce-tabs ul.tabs li.active a { color: var(--hv-primary) !important; }

/* Tab icons — one stroke-icon set (SVG data-URI masks tinted by currentColor,
   so they follow the tab text colour — blue when active — and stay crisp on
   retina). WooCommerce puts "{key}_tab" on each li. */
.hv-theme .woocommerce-tabs ul.tabs li.lty_instant_winners_tab a::before,
.hv-theme .woocommerce-tabs ul.tabs li.description_tab a::before,
.hv-theme .woocommerce-tabs ul.tabs li.lty_ticket_logs_tab a::before,
.hv-theme .woocommerce-tabs ul.tabs li.competition_info_tab_tab a::before,
.hv-theme .woocommerce-tabs ul.tabs li.faqs_tab_tab a::before {
  content: ""; display: inline-block; width: 1.05em; height: 1.05em;
  margin-right: 0.5em; vertical-align: -0.16em; background: currentColor;
  -webkit-mask: var(--hv-tab-ico) center / contain no-repeat;
          mask: var(--hv-tab-ico) center / contain no-repeat;
}
.hv-theme .woocommerce-tabs ul.tabs li.lty_instant_winners_tab a::before { --hv-tab-ico: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/%3E%3Cpath d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/%3E%3Cpath d="M4 22h16"/%3E%3Cpath d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/%3E%3Cpath d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/%3E%3Cpath d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/%3E%3C/svg%3E'); }
.hv-theme .woocommerce-tabs ul.tabs li.description_tab a::before        { --hv-tab-ico: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/%3E%3Cpath d="M14 2v4a2 2 0 0 0 2 2h4"/%3E%3Cpath d="M10 9H8"/%3E%3Cpath d="M16 13H8"/%3E%3Cpath d="M16 17H8"/%3E%3C/svg%3E'); }
.hv-theme .woocommerce-tabs ul.tabs li.lty_ticket_logs_tab a::before    { --hv-tab-ico: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M8 2v4"/%3E%3Cpath d="M16 2v4"/%3E%3Crect x="3" y="4" width="18" height="18" rx="2"/%3E%3Cpath d="M3 10h18"/%3E%3C/svg%3E'); }
.hv-theme .woocommerce-tabs ul.tabs li.competition_info_tab_tab a::before { --hv-tab-ico: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/%3E%3C/svg%3E'); }
.hv-theme .woocommerce-tabs ul.tabs li.faqs_tab_tab a::before           { --hv-tab-ico: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="10"/%3E%3Cpath d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/%3E%3Cpath d="M12 17h.01"/%3E%3C/svg%3E'); }

/* Prize rows inside the Instant Win Prizes tab (theme template override).
   Kill any plugin styling on the stock wrapper we kept for AJAX pagination. */
.hv-theme .hv-prizes { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
.hv-theme .hv-prizes .hv-prize-row { margin: 0; }
.hv-theme .hv-prizes .hv-prize-row__title { margin-bottom: 0.35em; }
.hv-theme .hv-prizes .hv-stack > * + * { margin-top: var(--hv-space-3); }

/* Prize group accordion: the plugin's structural classes are kept for its JS
   (header click toggles .lty-hide on the content) — strip its grey chrome. */
.hv-theme .hv-prizes .lty-instant-winner-prize-group-item { background: none !important; border: 0 !important; padding: 0 !important; margin: 5px !important; border-radius: 0; }
.hv-theme .hv-prizes .lty-instant-winner-prize-group-item-header.hv-prize-row { min-height: 0 !important; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.hv-theme .hv-prizes .lty-instant-winner-prize-group-item-header.hv-prize-row:hover { box-shadow: var(--hv-shadow-sm); }

/* Media slot: uploaded prize image and amount-chip fallback share the same
   64px footprint so rows align whichever one a group has. */
.hv-theme .hv-prizes .hv-prize-row__ticket {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px; height: 64px; padding: 0 0.5em; white-space: nowrap;
}
.hv-theme .hv-prizes .hv-prize-row__media {
  flex: 0 0 auto; width: 64px; height: 64px; overflow: hidden;
  border-radius: var(--hv-radius-sm); border: 1px solid var(--hv-line); background: var(--hv-surface-2);
}
.hv-theme .hv-prizes .hv-prize-row__media img {
  display: block; width: 100% !important; height: 100% !important; object-fit: cover;
  padding: 0 !important; margin: 0 !important; border-radius: 0 !important;
}
.hv-theme .hv-prizes .hv-prize-row__body { flex: 1 1 auto; min-width: 0; width: auto; margin: 0; }
.hv-theme .hv-prizes .hv-prize-row__left { flex: 0 0 auto; }

/* Expand/collapse chevron (rotates via :has() when the group is open;
   browsers without :has() still toggle fine, the icon just stays put). */
.hv-theme .hv-prizes .hv-prize-row__caret {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border-radius: var(--hv-radius-pill);
  border: 1px solid var(--hv-line); background: var(--hv-surface-2); color: var(--hv-muted);
  transition: transform 0.25s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.hv-theme .hv-prizes .lty-instant-winner-prize-group-item-header:hover .hv-prize-row__caret { background: var(--hv-blue-050); border-color: var(--hv-primary); color: var(--hv-primary); }
.hv-theme .hv-prizes .lty-instant-winner-prize-group-item:has(> .lty-instant-winner-prize-group-item-content:not(.lty-hide)) .hv-prize-row__caret { transform: rotate(180deg); background: var(--hv-primary); border-color: var(--hv-primary); color: #fff; }
.hv-theme .hv-prizes .lty-instant-winner-prize-group-item:has(> .lty-instant-winner-prize-group-item-content:not(.lty-hide)) .hv-prize-row { border-color: var(--hv-primary); box-shadow: var(--hv-shadow-sm); }

/* Smooth dropdown: the plugin only toggles .lty-hide, so the open/close is
   animated with the grid-rows trick (0fr ⇄ 1fr + clipped inner wrapper).
   Margins/padding stay OFF the animation chain — visuals live on .hv-tickets. */
.hv-theme .hv-prizes .lty-instant-winner-prize-group-item-content {
  display: grid !important; grid-template-rows: 1fr; visibility: visible; opacity: 1;
  background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
  transition: grid-template-rows 0.3s ease, opacity 0.25s ease 0.05s, visibility 0s linear 0s;
}
.hv-theme .hv-prizes .lty-instant-winner-prize-group-item-content.lty-hide {
  grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows 0.3s ease, opacity 0.2s ease, visibility 0s linear 0.3s;
}
.hv-theme .hv-prizes .lty-instant-winner-group-ticket-numbers-wrapper {
  display: block !important; min-height: 0; overflow: hidden;
  width: auto !important; padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  .hv-theme .hv-prizes .lty-instant-winner-prize-group-item-content,
  .hv-theme .hv-prizes .hv-prize-row__caret { transition: none; }
}

/* Ticket numbers panel */
.hv-theme .hv-prizes .hv-tickets {
  margin-top: var(--hv-space-3); padding: var(--hv-space-4);
  background: var(--hv-surface-2); border: 1px solid var(--hv-line); border-radius: var(--hv-radius);
}
.hv-theme .hv-prizes .hv-tickets__header { display: block; width: auto; }
.hv-theme .hv-prizes .hv-tickets__title {
  float: none; margin: 0 0 var(--hv-space-3); font-size: var(--hv-fs-xs);
  font-weight: var(--hv-fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--hv-muted);
}
.hv-theme .hv-prizes .hv-tickets__grid {
  display: flex; flex-wrap: wrap; gap: var(--hv-space-2); margin: 0;
  max-height: 300px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--hv-line) transparent;
  padding: 2px; /* keeps chip borders/shadows from clipping at the scroll edge */
}

/* Ticket chip: number on top, status pill (dot + label) below.
   Available = green · Won = gold. */
.hv-theme .hv-prizes .hv-ticket {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  width: auto !important; min-width: 92px; margin: 0 !important;
  padding: var(--hv-space-2) var(--hv-space-3) !important; text-align: center;
  background: var(--hv-surface); border: 1px solid var(--hv-line); border-radius: var(--hv-radius-sm) !important;
}
.hv-theme .hv-prizes .hv-ticket__num { font-weight: var(--hv-fw-bold); color: var(--hv-ink); font-variant-numeric: tabular-nums; }
.hv-theme .hv-prizes .hv-ticket__status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--hv-radius-pill);
  font-size: 10px; font-weight: var(--hv-fw-bold); letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.6;
}
.hv-theme .hv-prizes .hv-ticket__status::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: var(--hv-radius-pill); background: currentColor; }
.hv-theme .hv-prizes .hv-ticket.is-available .hv-ticket__status { background: var(--hv-green-100); color: var(--hv-green-500); }
.hv-theme .hv-prizes .hv-ticket.is-won { border-color: var(--hv-gold-500); background: rgba(212,175,55,.12); }
.hv-theme .hv-prizes .hv-ticket.is-won .hv-ticket__status { background: rgba(212,175,55,.18); color: var(--hv-gold-500); }

/* =========================================================================
   PHASE 2 — single competition, remaining dark surfaces → the light design.
   Re-lights the Instant Win prize rows / ticket chips, adds the "ENDS IN"
   countdown label, and lights the postal note + ticket-log table, all against
   the live plugin classes.
   ========================================================================= */
.hv-theme .hv-prizes,
.hv-theme .hv-prizes .hv-prize-row,
.hv-theme .hv-prizes .hv-tickets,
.hv-theme .hv-prizes .hv-ticket,
.hv-theme .hv-prizes .hv-badge {
  --hv-ink: #111827; --hv-body: #4B5563; --hv-muted: #6B7280; --hv-line: #E7EAF0;
}
.hv-theme .hv-prizes .hv-prize-row { background: #fff !important; border-color: var(--hv-line) !important; box-shadow: none; }
.hv-theme .hv-prizes .hv-prize-row__media { background: #f3f4f6; border-color: var(--hv-line); }
.hv-theme .hv-prizes .hv-prize-row__caret { background: #fff; border-color: var(--hv-line); color: var(--hv-muted); }
.hv-theme .hv-prizes .lty-instant-winner-prize-group-item-header:hover .hv-prize-row__caret { background: rgba(var(--hv-primary-rgb), .08); border-color: var(--hv-primary); color: var(--hv-primary); }
.hv-theme .hv-prizes .hv-tickets { background: #F4F7FC; border-color: var(--hv-line); }
.hv-theme .hv-prizes .hv-ticket { background: #fff; border-color: var(--hv-line); }
.hv-theme .hv-prizes .hv-prize-row__body .hv-badge--soft { background: #EDF0F5 !important; color: var(--hv-body) !important; }
.hv-theme .hv-prizes .hv-prize-row__body .hv-badge--success { background: rgba(34, 197, 94, .12) !important; color: #15803D !important; }
/* Available = green · Won = amber (design) */
.hv-theme .hv-prizes .hv-ticket.is-available .hv-ticket__status { background: rgba(34, 197, 94, .12); color: #15803D; }
.hv-theme .hv-prizes .hv-ticket.is-won { border-color: rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .07); }
.hv-theme .hv-prizes .hv-ticket.is-won .hv-ticket__status { background: rgba(245, 158, 11, .16); color: #B45309; }

/* "ENDS IN" label above the plugin countdown (its own "Time Left to End:" is hidden) */
.hv-product__summary .lty-lottery-date-ranges::before {
  content: "Ends In"; display: block; margin-bottom: var(--hv-space-2);
  font-size: var(--hv-fs-xs); font-weight: var(--hv-fw-bold); color: var(--hv-ink);
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* Free-postal instructions note → soft blue on white */
.hv-product__summary .hv-postal-note {
  --hv-ink: #111827; --hv-body: #4B5563; --hv-muted: #6B7280; --hv-line: #E7EAF0;
  background: rgba(var(--hv-primary-rgb), .06) !important; border-color: rgba(var(--hv-primary-rgb), .18) !important; color: var(--hv-body);
}
.hv-product__summary .hv-postal-note strong { color: var(--hv-ink); }

/* Draw Details — the ticket-log table on white */
.hv-product__tabs .lty-frontend-table {
  --hv-ink: #111827; --hv-body: #4B5563; --hv-muted: #6B7280; --hv-line: #E7EAF0;
  width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--hv-line); border-radius: var(--hv-radius); overflow: hidden;
}
.hv-product__tabs .lty-frontend-table thead th { background: #F4F7FC; color: var(--hv-muted); text-transform: uppercase; letter-spacing: var(--hv-ls-wide); font-size: var(--hv-fs-xs); }
.hv-product__tabs .lty-frontend-table th,
.hv-product__tabs .lty-frontend-table td { padding: var(--hv-space-3); border-bottom: 1px solid var(--hv-line); color: var(--hv-body); text-align: left; }
.hv-product__tabs .lty-frontend-table tbody tr:last-child td { border-bottom: 0; }
.hv-product__tabs .lty-ticket-logs-wrapper .lty-pagination-wrapper nav ul,
.hv-product__tabs .lty-frontend-table .woocommerce-pagination ul { display: flex; gap: 6px; justify-content: center; list-style: none; margin: var(--hv-space-3) 0 0; padding: 0; }
.hv-product__tabs .lty-frontend-table .lty-pagination { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--hv-line); border-radius: var(--hv-radius-sm); color: var(--hv-body); text-decoration: none; }
.hv-product__tabs .lty-frontend-table .lty-pagination.current { background: var(--hv-primary); border-color: var(--hv-primary); color: #fff; }

/* Caps badge (in the price row) → light chip on white */
.hv-product__summary .hv-buybox__caps { background: rgba(var(--hv-primary-rgb), .08) !important; color: var(--hv-primary) !important; }
/* Winners line ("This Draw will have 1 winner") → blue icon */
.hv-product__summary .lty-winners-count::before { background: var(--hv-primary); }

/* Ticket pagination (plugin markup) restyled to brand pills */
.hv-theme .hv-prizes .lty-pagination-wrapper { margin-top: var(--hv-space-3); }
.hv-theme .hv-prizes .lty-pagination-wrapper nav ul li a {
  padding: 0.35em 0.8em; border-radius: var(--hv-radius-sm);
  background: var(--hv-surface); border: 1px solid var(--hv-line); color: var(--hv-body); font-weight: var(--hv-fw-bold);
}
.hv-theme .hv-prizes .lty-pagination-wrapper nav ul li a:hover,
.hv-theme .hv-prizes .lty-pagination-wrapper nav ul li a.current { background: var(--hv-primary); border-color: var(--hv-primary); color: #fff; }

/* Small screens: tighter row, kind label dropped (it repeats the title) */
@media (max-width: 560px) {
  .hv-theme .hv-prizes .hv-prize-row { gap: var(--hv-space-3); padding: var(--hv-space-3); }
  .hv-theme .hv-prizes .hv-prize-row__media { width: 52px; height: 52px; }
  .hv-theme .hv-prizes .hv-prize-row__ticket { min-width: 52px; height: 52px; }
  .hv-theme .hv-prizes .hv-prize-row__ticket { font-size: var(--hv-fs-sm); }
  .hv-theme .hv-prizes .hv-prize-row__left { display: none; }
  .hv-theme .hv-prizes .hv-prize-row__caret { width: 30px; height: 30px; }
  .hv-theme .hv-prizes .hv-tickets { padding: var(--hv-space-3); }
  .hv-theme .hv-prizes .hv-tickets__grid { max-height: 260px; }
  .hv-theme .hv-prizes .hv-ticket { min-width: calc(50% - var(--hv-space-2)); flex: 1 1 auto; }
}
.hv-theme .woocommerce-tabs .panel { padding: 0; margin: 0; }
.hv-theme .woocommerce-tabs .panel h2:first-child { margin-top: 0; }

/* =========================================================================
   THANK-YOU / ORDER RECEIVED (classic thankyou.php)
   ========================================================================= */
.hv-thankyou { padding-block: var(--hv-space-6); }
.hv-thankyou-canvas .hv-thankyou { padding-top: var(--hv-space-5); }
/* Chrome-less canvas: never allow a horizontal scrollbar. */
.hv-thankyou-canvas { overflow-x: clip; }

/* Icon chips (facts strip + What's Next) — one consistent Lucide-style line-icon
   set in a soft chip, with a subtle hover lift. Replaces the old emoji icons. */
.hv-thankyou .hv-ico {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--hv-surface); border: 1px solid var(--hv-line);
  border-radius: var(--hv-radius); color: var(--hv-primary);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.hv-thankyou .hv-ico svg { width: 20px; height: 20px; display: block; }
.hv-thankyou__next-items .hv-ico { border-color: var(--hv-blue-100); }
.hv-thankyou .hv-meta-row__item:hover .hv-ico,
.hv-thankyou .hv-trust__item:hover .hv-ico {
  transform: translateY(-2px); box-shadow: var(--hv-shadow-sm); border-color: var(--hv-primary);
}
.hv-thankyou__check svg { display: block; }
.hv-thankyou__cta .hv-btn svg { display: block; flex: 0 0 auto; }
.hv-thankyou__details { margin-top: var(--hv-space-6); display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--hv-space-5) var(--hv-space-6); align-items: start; }
@media (max-width: 900px) {
  .hv-thankyou__details { grid-template-columns: 1fr; }
  /* Reset the desktop 3-row span; in one column it left empty tracks + gaps. */
  .hv-thankyou__details .woocommerce-order-details { grid-row: auto; }
}

/* Order details spans the left; right column stacks in the DESIGN order:
   billing address → green instant-win note → additional info. */
.hv-thankyou__details > * { order: 4; min-width: 0; }
.hv-thankyou__details .woocommerce-order-details { grid-row: span 3; order: 1; }
.hv-thankyou__details .woocommerce-customer-details { order: 2; }
.hv-thankyou__details .lty-instant-win-better-luck-message-wrapper { order: 3; }
.hv-thankyou__details .woocommerce-order-details,
.hv-thankyou__details .woocommerce-customer-details,
.hv-thankyou__details .lty-order-instant-winners,
.hv-thankyou__details .lty-thankyou-instant-winners {
  background: var(--hv-surface); border: 1px solid var(--hv-line);
  border-radius: var(--hv-radius-lg); box-shadow: var(--hv-shadow-sm);
  padding: var(--hv-space-5); margin: 0;
}
.hv-thankyou__details h2 { font-size: var(--hv-fs-h3); margin-top: 0; display: flex; align-items: center; gap: var(--hv-space-3); }
/* Blue icon chips before the section headings (design) */
.hv-thankyou__details .woocommerce-order-details h2::before,
.hv-thankyou__details .woocommerce-customer-details h2::before,
.hv-thankyou__details .woocommerce-customer-details ~ * h2::before {
  content: ""; width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: var(--hv-radius-pill);
  background: var(--hv-blue-050) center / 18px 18px no-repeat;
}
.hv-thankyou__details .woocommerce-order-details h2::before { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230A6BFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect width="8" height="4" x="8" y="2" rx="1" ry="1"/%3E%3Cpath d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/%3E%3Cpath d="M12 11h4"/%3E%3Cpath d="M12 16h4"/%3E%3Cpath d="M8 11h.01"/%3E%3Cpath d="M8 16h.01"/%3E%3C/svg%3E'); }
.hv-thankyou__details .woocommerce-customer-details h2::before { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230A6BFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/%3E%3Ccircle cx="12" cy="10" r="3"/%3E%3C/svg%3E'); }
/* Later headings in the right column ("Additional information") get an info icon */
.hv-thankyou__details .woocommerce-customer-details h2:not(:first-of-type)::before,
.hv-thankyou__details .woocommerce-customer-details ~ * h2::before { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230A6BFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="10"/%3E%3Cpath d="M12 16v-4"/%3E%3Cpath d="M12 8h.01"/%3E%3C/svg%3E'); }

/* Clean table: kill WooCommerce's cell borders/boxes, keep only row dividers */
.hv-thankyou__details table,
.hv-thankyou__details table th,
.hv-thankyou__details table td { border: 0 !important; background: none; }
.hv-thankyou__details table { width: 100%; border-collapse: collapse; }
/* PRODUCT / TOTAL header strip (design) */
.hv-thankyou__details table thead th {
  background: var(--hv-surface-2) !important; padding: var(--hv-space-3);
  font-size: var(--hv-fs-xs); text-transform: uppercase; letter-spacing: var(--hv-ls-wide);
  color: var(--hv-muted);
}
.hv-thankyou__details table th,
.hv-thankyou__details table td { padding: var(--hv-space-3); border-bottom: 1px solid var(--hv-line) !important; text-align: left; vertical-align: top; }
.hv-thankyou__details table td:last-child, .hv-thankyou__details table th:last-child { text-align: right; white-space: nowrap; }
.hv-thankyou__details table tfoot th { color: var(--hv-body); font-weight: var(--hv-fw-medium); }
.hv-thankyou__details table tfoot tr:last-child th,
.hv-thankyou__details table tfoot tr:last-child td { border-bottom: 0 !important; }
.hv-thankyou__details table tfoot tr:last-child th { color: var(--hv-ink); font-weight: var(--hv-fw-bold); font-size: var(--hv-fs-h4); }
.hv-thankyou__details table tfoot tr:last-child .amount { font-size: var(--hv-fs-h4); }
.hv-thankyou__details .woocommerce-table--order-details .amount { color: var(--hv-primary); font-weight: var(--hv-fw-bold); white-space: nowrap; }
/* Product name: ink, bold, no underline (WC renders it as a link) */
.hv-thankyou__details .hv-oi-name a,
.hv-thankyou__details td.woocommerce-table__product-name a { color: var(--hv-ink) !important; font-weight: var(--hv-fw-bold); text-decoration: none !important; overflow-wrap: anywhere; }

/* Meta strip amounts on one line */
/* Only AMOUNTS stay on one line — emails/payment titles must wrap in their column */
.hv-meta-row__item { min-width: 0; }
.hv-meta-row__item b { overflow-wrap: anywhere; }
.hv-meta-row__item b .amount { white-space: nowrap; }

/* "No Instant Win Prize…" → the design's soft green 🍀 card (plugin paints it
   red by default) */
.hv-thankyou__details .lty-instant-win-better-luck-message-wrapper {
  background: #10251C; border: 1px solid rgba(34, 197, 94, .25);
  border-radius: var(--hv-radius-lg); box-shadow: var(--hv-shadow-sm);
  padding: var(--hv-space-4) var(--hv-space-5);
  display: flex; align-items: flex-start; gap: var(--hv-space-3);
}
.hv-thankyou__details .lty-instant-win-better-luck-message-wrapper::before {
  content: ""; flex: 0 0 auto; width: 26px; height: 26px;
  background: center / contain no-repeat;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2316A34A"%3E%3Ccircle cx="12" cy="8" r="3.6"/%3E%3Ccircle cx="8" cy="13.5" r="3.6"/%3E%3Ccircle cx="16" cy="13.5" r="3.6"/%3E%3Cpath d="M12 13c.4 3 .1 5.5-1.2 8h2.4C11.9 18.5 11.6 16 12 13z"/%3E%3C/svg%3E');
}
.hv-thankyou__details .lty-instant-win-better-luck-message {
  color: var(--hv-green-500) !important; font-size: var(--hv-fs-body) !important;
  font-weight: var(--hv-fw-bold); margin: 0; line-height: var(--hv-lh-normal);
}

/* Item row: thumbnail + name + meta ("Chosen Answer", "Ticket Number(s)") +
   "N Ticket(s)" badge (markup from hv_order_item_* filters in functions.php) */
.hv-oi-thumb { float: left; margin: 0 var(--hv-space-3) var(--hv-space-2) 0; }
.hv-oi-thumb img { width: 72px; height: auto; border-radius: var(--hv-radius-sm); display: block; }
.hv-oi-name { font-weight: var(--hv-fw-bold); color: var(--hv-ink); overflow-wrap: anywhere; }
.hv-oi-qty { margin-top: var(--hv-space-2); }
.hv-thankyou__details .wc-item-meta { list-style: none; margin: var(--hv-space-1) 0 0; padding: 0; font-size: var(--hv-fs-sm); color: var(--hv-muted); overflow: hidden; }
.hv-thankyou__details .wc-item-meta p { display: inline; margin: 0; }

/* Billing address: icons on phone/email lines */
.hv-thankyou__details .woocommerce-customer-details address { border: 0; padding: 0; margin: 0; font-style: normal; line-height: 1.7; color: var(--hv-body); }
.hv-thankyou__details .woocommerce-customer-details--phone::before,
.hv-thankyou__details .woocommerce-customer-details--email::before {
  /* content/font-family forced so WooCommerce core's own icon-font glyph on
     this same ::before is fully suppressed — otherwise its glyph overlaps our
     SVG (the "conflicting icons"). */
  content: "" !important; font-family: inherit !important;
  display: inline-block; width: 15px; height: 15px;
  margin-right: var(--hv-space-2); vertical-align: -2px;
  background: center / contain no-repeat;
}
.hv-thankyou__details .woocommerce-customer-details--phone::before { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238B949E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92Z"/%3E%3C/svg%3E'); }
.hv-thankyou__details .woocommerce-customer-details--email::before { background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238B949E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect width="20" height="16" x="2" y="4" rx="2"/%3E%3Cpath d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/%3E%3C/svg%3E'); }
.hv-thankyou__details .woocommerce-customer-details--phone,
.hv-thankyou__details .woocommerce-customer-details--email { margin: var(--hv-space-2) 0 0; }

/* Instant-win result panel → soft green (design: "No Instant Win Prize…" note) */
.hv-thankyou__details .lty-order-instant-winners,
.hv-thankyou__details .lty-thankyou-instant-winners {
  background: #10251C; border-color: rgba(34, 197, 94, .25);
}

/* ===== Instant-Win WINNERS → "Competition Celebration" (approved concept) ===
   Presentational reskin of the plugin's default winners table. Markup comes from
   lottery-for-woocommerce/thankyou/instant-winners-layout.php (theme override) —
   identical data/functions, cards instead of a table. Pulled full-width to the
   top of the details grid (order:-1) so the win sits right below the order-
   summary strip: navy→blue ground, subtle confetti, gold headline, floating
   white prize cards. Card stacking is container-query driven (genuine mobile
   layout, not a shrunk desktop). */
.hv-thankyou__details .hv-iw--celebrate {
  order: -1; grid-column: 1 / -1;
  position: relative; overflow: hidden;
  padding: clamp(1.5rem, 4vw, 2.15rem) clamp(1.25rem, 3vw, 1.9rem);
  border: 0 !important; border-radius: var(--hv-radius-lg);
  background:
    radial-gradient(120% 90% at 15% -20%, rgba(255, 255, 255, .16), transparent 55%),
    linear-gradient(135deg, #0A0A0A 0%, var(--hv-blue-700) 62%, var(--hv-primary-strong) 100%) !important;
  color: #fff; box-shadow: var(--hv-shadow-lg);
  container-type: inline-size;
}
.hv-iw--celebrate .hv-iw__confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hv-iw--celebrate .hv-iw__confetti i {
  position: absolute; top: -16px; width: 8px; height: 8px; border-radius: 2px; opacity: .85;
  animation: hv-iw-fall 4.6s linear infinite;
}
@keyframes hv-iw-fall { to { transform: translateY(380px) rotate(340deg); } }
@media (prefers-reduced-motion: reduce) {
  .hv-iw--celebrate .hv-iw__confetti i { animation: none; opacity: .45; }
}
.hv-iw--celebrate .hv-iw__inner { position: relative; text-align: center; }
.hv-iw--celebrate .hv-iw__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: var(--hv-radius-pill);
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
  font-size: var(--hv-fs-xs); font-weight: var(--hv-fw-bold);
  letter-spacing: var(--hv-ls-wide); text-transform: uppercase; color: #fff;
}
.hv-iw--celebrate .hv-iw__eyebrow svg { flex: 0 0 auto; color: #F4DA95; }
.hv-thankyou__details .hv-iw--celebrate .hv-iw__title.lty-order-instant-winners-heading {
  margin: var(--hv-space-3) auto var(--hv-space-1); max-width: 32ch;
  font-size: var(--hv-fs-h3) !important; font-weight: var(--hv-fw-black) !important;
  line-height: 1.14; letter-spacing: -.01em; text-wrap: balance;
  color: #F7E4A8 !important; /* fallback where background-clip:text is unsupported */
  background: linear-gradient(135deg, #F7E4A8 0%, #E4B953 55%, #C79328 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hv-iw--celebrate .hv-iw__cards {
  display: flex; flex-direction: column; gap: var(--hv-space-3);
  margin-top: var(--hv-space-4); text-align: left;
}
.hv-iw-card {
  display: flex; align-items: center; gap: var(--hv-space-4); padding: var(--hv-space-4);
  background: rgba(255, 255, 255, .97); color: #33415A; /* white card keeps dark ink on the dark theme */
  border-radius: var(--hv-radius); box-shadow: 0 16px 36px rgba(0, 0, 0, .34);
}
.hv-iw-card__img { flex: 0 0 auto; display: grid; place-items: center; }
.hv-iw-card__img img {
  display: block; width: 66px; height: 66px; object-fit: contain;
  border-radius: var(--hv-radius-sm); filter: drop-shadow(0 6px 12px rgba(169, 118, 30, .32));
}
.hv-iw-card__img--fallback {
  width: 66px; height: 66px; border-radius: var(--hv-radius-sm);
  background: linear-gradient(135deg, #F7E4A8, #C79328); color: #5A3A10;
}
.hv-iw-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hv-iw-card__prize { font-size: var(--hv-fs-h4); font-weight: var(--hv-fw-black); color: #0F2143; line-height: 1.12; }
.hv-iw-card__prize .amount,
.hv-iw-card__prize .woocommerce-Price-amount { color: #0F2143 !important; font-weight: var(--hv-fw-black); }
.hv-iw-card__sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: var(--hv-fs-sm); }
.hv-iw-card__prod,
.hv-iw-card__prod a { color: #64748B !important; text-decoration: none !important; overflow-wrap: anywhere; }
.hv-iw-card__prod a:hover { color: var(--hv-primary) !important; }
.hv-iw-card__ticket {
  flex: 0 0 auto; white-space: nowrap; font-weight: var(--hv-fw-bold);
  color: var(--hv-primary); font-variant-numeric: tabular-nums;
}
.hv-iw--celebrate .hv-iw__pager { margin-top: var(--hv-space-4); }
.hv-iw--celebrate .hv-iw__pager ul { display: flex; justify-content: center; }
/* Narrow container → prize card stacks (separate mobile layout, not a shrink) */
@container (max-width: 430px) {
  .hv-iw-card { flex-direction: column; text-align: center; gap: var(--hv-space-2); }
  .hv-iw-card__body { align-items: center; }
  .hv-iw-card__sub { justify-content: center; }
}

/* What's Next strip: copy left, icon trio right */
.hv-thankyou__next-inner { display: flex; align-items: center; gap: var(--hv-space-6); flex-wrap: wrap; }
.hv-thankyou__next-copy { display: flex; flex-direction: column; gap: 4px; min-width: 220px; }
.hv-thankyou__next-copy b { color: var(--hv-primary); font-size: var(--hv-fs-h4); }
.hv-thankyou__next-copy span { color: var(--hv-muted); font-size: var(--hv-fs-sm); }
.hv-thankyou__next-items { flex: 1; }
.hv-thankyou__next { background: var(--hv-blue-050); }
.hv-thankyou__next.hv-card { border-color: var(--hv-blue-100); }

/* Keep the excitement going! — centred heading + CTA pair */
.hv-thankyou__keep .hv-card__body { text-align: center; }
.hv-thankyou__keep h2 { margin: 0 0 var(--hv-space-2); font-size: var(--hv-fs-h3); }
.hv-thankyou__keep p { margin: 0 0 var(--hv-space-4); }
.hv-thankyou__cta { display: flex; gap: var(--hv-space-4); flex-wrap: wrap; justify-content: center; }
.hv-thankyou__cta .hv-btn { flex: 0 0 auto; min-width: 220px; }

/* Head: gift-box illustration on the right (decorative) */
.hv-thankyou__head { position: relative; }
.hv-thankyou__copy { flex: 1; min-width: 0; }
.hv-thankyou__email { color: var(--hv-primary); overflow-wrap: anywhere; }
.hv-thankyou__gift { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; transform: rotate(3deg); }
.hv-thankyou__gift-note {
  background: var(--hv-surface); border: 1px solid var(--hv-line); border-radius: var(--hv-radius-sm);
  box-shadow: var(--hv-shadow); padding: 0.6em 1em; text-align: center;
  font-size: var(--hv-fs-xs); font-weight: var(--hv-fw-bold); letter-spacing: var(--hv-ls-wide);
  color: var(--hv-ink); transform: rotate(-6deg); z-index: 1;
}
.hv-thankyou__gift-note .stars { display: block; font-size: var(--hv-fs-sm); }
.hv-thankyou__gift-box { font-size: 64px; line-height: 1; margin-top: -8px; }
@media (max-width: 760px) { .hv-thankyou__gift { display: none; } }

/* ---- Thank-you: mobile ---------------------------------------------------
   Tighter rhythm, comfy card padding, readable order table, smaller success
   ring + icon chips, and full-width stacked CTAs. */
@media (max-width: 640px) {
  .hv-thankyou { padding-block: var(--hv-space-4); }
  .hv-thankyou-canvas .hv-thankyou { padding-top: var(--hv-space-4); }
  .hv-thankyou__head { gap: var(--hv-space-3); }
  .hv-thankyou__check { width: 60px; height: 60px; border-width: 2px; }
  .hv-thankyou__check svg { width: 30px; height: 30px; }
  .hv-thankyou__details { margin-top: var(--hv-space-5); gap: var(--hv-space-4); }
  .hv-thankyou__details .woocommerce-order-details,
  .hv-thankyou__details .woocommerce-customer-details,
  .hv-thankyou__details .lty-order-instant-winners,
  .hv-thankyou__details .lty-thankyou-instant-winners { padding: var(--hv-space-4); }
  .hv-thankyou__details h2 { font-size: var(--hv-fs-h4); }
  .hv-thankyou__details table th,
  .hv-thankyou__details table td { padding: var(--hv-space-2); }
  .hv-oi-thumb img { width: 56px; }
  .hv-thankyou__next-inner { gap: var(--hv-space-4); }
  .hv-thankyou__next-copy { min-width: 0; }
  .hv-thankyou .hv-ico { width: 36px; height: 36px; }
  .hv-thankyou .hv-ico svg { width: 18px; height: 18px; }
  .hv-thankyou__cta { flex-direction: column; gap: var(--hv-space-3); }
  .hv-thankyou__cta .hv-btn { width: 100%; min-width: 0; }
}
@media (max-width: 640px) {
  .hv-theme div.product .woocommerce-tabs ul.tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .hv-theme div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
  .hv-theme div.product .woocommerce-tabs ul.tabs li { flex: 0 0 auto; }
}

/* =========================================================================
   THANK-YOU — LIGHT REDESIGN (approved mockup)
   The order-received page is a light surface: on-white tokens are re-asserted
   on .hv-thankyou so every existing rule (cards, tables, icons) resolves
   dark-on-white. New sections: navy facts strip, Your Tickets, Additional
   Information, You're In!, promise strip, dark Keep banner, trust footbar.
   The instant-win celebrate card (winners) is self-contained and unchanged.
   ========================================================================= */
body.hv-canvas { background: #F6F8FC; }
.hv-thankyou {
  --hv-surface: #fff; --hv-surface-2: #F4F7FC;
  --hv-ink: #111827; --hv-body: #4B5563; --hv-muted: #6B7280; --hv-line: #E7EAF0;
  --hv-blue-050: #EAF1FE; --hv-blue-100: #DDE9FE; --hv-green-100: #E7F6EC; --hv-track: #E7EAF0;
  --hv-shadow-sm: 0 4px 16px rgba(16, 24, 40, .06);
  --hv-shadow: 0 12px 30px rgba(16, 24, 40, .10);
  --hv-shadow-lg: 0 20px 44px rgba(16, 24, 40, .16);
}
/* Whole page reads in the UI font (the global h1-h6 serif rule would set the
   headings in the serif face; the mockup is sans throughout). */
body.hv-theme .hv-thankyou :is(h1, h2, h3) { font-family: var(--hv-font) !important; }

/* ---- Head ---- */
.hv-thankyou__head { display: flex; align-items: center; gap: var(--hv-space-5); }
.hv-thankyou__check {
  width: 84px; height: 84px; flex: 0 0 auto; display: grid; place-items: center;
  border: 3px solid #22C55E; border-radius: 50%; background: #fff; color: #22C55E;
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .08);
}
.hv-thankyou__check svg { display: block; }
body.hv-theme .hv-thankyou__title {
  margin: 0; font-family: var(--hv-font) !important;
  font-size: var(--hv-fs-h1); font-weight: var(--hv-fw-black); color: var(--hv-ink); line-height: 1.1;
}
.hv-thankyou__sub { margin: var(--hv-space-2) 0 0; color: var(--hv-body); font-size: var(--hv-fs-lead); }
.hv-thankyou__mail { margin: 2px 0 0; color: var(--hv-muted); font-size: var(--hv-fs-sm); }
.hv-thankyou__email { color: var(--hv-primary); overflow-wrap: anywhere; }
.hv-thankyou__mascot { flex: 0 0 auto; margin-left: auto; width: clamp(110px, 14vw, 180px); height: auto; }
@media (max-width: 760px) { .hv-thankyou__mascot { display: none; } }

/* ---- Facts strip (dark navy) ---- */
.hv-thankyou__facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--hv-space-4);
  margin-top: var(--hv-space-5); padding: var(--hv-space-4) var(--hv-space-5);
  background: #0A1A33; border-radius: var(--hv-radius-lg); box-shadow: var(--hv-shadow);
}
.hv-ty-fact { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hv-ty-fact:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, .1); padding-right: var(--hv-space-4); }
.hv-ty-fact__ico {
  width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: var(--hv-radius-sm); background: rgba(108, 168, 255, .14); color: #6CA8FF;
}
.hv-ty-fact__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hv-ty-fact__txt > span { font-size: 10px; font-weight: var(--hv-fw-bold); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.hv-ty-fact__txt b { color: #fff; font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-bold); overflow-wrap: anywhere; }
.hv-ty-fact__txt b .amount { color: #fff; white-space: nowrap; }

/* ---- Details grid: columns + order ---- */
.hv-thankyou__details { margin-top: var(--hv-space-5); }
.hv-thankyou__details > * { order: 0; }
.hv-thankyou__details .woocommerce-order-details { order: 1; grid-column: 1; grid-row: span 3; border-top: 3px solid var(--hv-primary); }
.hv-thankyou__details .woocommerce-customer-details { order: 2; grid-column: 2; }
.hv-thankyou__details .hv-ty-updates { order: 3; grid-column: 2; }
.hv-thankyou__details .hv-ty-yourein { order: 4; grid-column: 2; }
.hv-thankyou__details .hv-ty-tickets { order: 2; grid-column: 1; }
.hv-thankyou__details .hv-iw--celebrate { order: -1; grid-column: 1 / -1; grid-row: auto; }
/* The plugin's "no instant win" note is superseded by the You're In! card. */
.hv-thankyou__details .lty-instant-win-better-luck-message-wrapper { display: none !important; }

/* Card shells (order/customer) resolve white via the token override; give the
   theme cards the same shell. */
.hv-ty-tickets, .hv-ty-updates {
  background: #fff; border: 1px solid var(--hv-line); border-radius: var(--hv-radius-lg);
  box-shadow: var(--hv-shadow-sm); padding: var(--hv-space-5); min-width: 0;
}

/* Section headings with a blue icon chip */
.hv-ty-h { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--hv-space-2); font-size: var(--hv-fs-h4); font-weight: var(--hv-fw-black); color: var(--hv-ink); }
.hv-ty-h__ico { display: inline-flex; color: var(--hv-primary); }

/* "Verified" chip on the billing heading */
.hv-thankyou__details .woocommerce-customer-details > h2:first-of-type::after {
  content: "\2713  Verified"; margin-left: auto; flex: 0 0 auto;
  padding: 0.3em 0.85em; border-radius: var(--hv-radius-pill);
  background: var(--hv-green-100); color: #15803D;
  font-size: var(--hv-fs-xs); font-weight: var(--hv-fw-bold); letter-spacing: .02em;
}

/* Ticket-count badge in the order table -> light blue chip */
.hv-thankyou .hv-badge--soft { background: #EAF1FE !important; color: var(--hv-primary) !important; border: 0; }

/* ---- Your Tickets ---- */
.hv-ty-tickets__sub { margin: 0 0 var(--hv-space-4); color: var(--hv-muted); font-size: var(--hv-fs-sm); }
.hv-ty-ticketbox { border: 1px solid var(--hv-line); border-radius: var(--hv-radius); overflow: hidden; }
.hv-ty-ticketbox + .hv-ty-ticketbox { margin-top: var(--hv-space-3); }
.hv-ty-ticketbox__main { display: flex; align-items: center; gap: var(--hv-space-4); padding: var(--hv-space-4); }
.hv-ty-ticketbox__ico {
  width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 50%; background: var(--hv-blue-050); color: var(--hv-primary);
}
.hv-ty-ticketbox__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hv-ty-ticketbox__label { font-size: var(--hv-fs-xs); color: var(--hv-muted); font-weight: var(--hv-fw-medium); }
.hv-ty-ticketbox__name { color: var(--hv-ink); font-size: var(--hv-fs-body); font-weight: var(--hv-fw-bold); line-height: var(--hv-lh-snug); overflow-wrap: anywhere; }
.hv-ty-ticketbox__nums { color: var(--hv-primary); font-weight: var(--hv-fw-bold); font-size: var(--hv-fs-sm); overflow-wrap: anywhere; }
.hv-ty-ticketbox__count {
  flex: 0 0 auto; width: 72px; height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px solid var(--hv-blue-100); border-radius: 50%; text-align: center;
}
.hv-ty-ticketbox__count b { font-size: var(--hv-fs-h3); font-weight: var(--hv-fw-black); color: var(--hv-primary); line-height: 1; }
.hv-ty-ticketbox__count span { font-size: 8.5px; font-weight: var(--hv-fw-bold); letter-spacing: .06em; color: var(--hv-muted); margin-top: 2px; }
.hv-ty-ticketbox__foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  padding: var(--hv-space-3) var(--hv-space-4); background: var(--hv-surface-2);
  border-top: 1px solid var(--hv-line); font-size: var(--hv-fs-sm); color: var(--hv-muted);
}
.hv-ty-ticketbox__foot b { color: var(--hv-ink); font-weight: var(--hv-fw-bold); }
.hv-ty-ticketbox__foot em { font-style: normal; font-weight: var(--hv-fw-bold); }
.hv-ty-ticketbox__foot em.is-active { color: #16A34A; }
.hv-ty-ticketbox__foot em.is-ended { color: var(--hv-muted); }

/* ---- Additional Information ---- */
.hv-ty-updates__note {
  display: flex; align-items: flex-start; gap: 10px;
  padding: var(--hv-space-3) var(--hv-space-4); margin-top: var(--hv-space-3);
  background: var(--hv-green-100); border: 1px solid rgba(22, 163, 74, .2);
  border-radius: var(--hv-radius); color: #166534; font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-medium);
}
.hv-ty-updates__check {
  width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 50%; background: #22C55E; color: #fff; margin-top: 1px;
}
.hv-ty-updates__row {
  display: flex; align-items: center; gap: 10px; margin-top: var(--hv-space-4);
  color: var(--hv-body); font-size: var(--hv-fs-sm);
}
.hv-ty-updates__row > span:first-child { flex: 1 1 auto; min-width: 0; }
.hv-ty-updates__row b { color: var(--hv-ink); font-size: var(--hv-fs-sm); }
.hv-ty-toggle {
  position: relative; flex: 0 0 auto; width: 40px; height: 22px;
  border-radius: var(--hv-radius-pill); background: var(--hv-track); transition: background .15s ease;
}
.hv-ty-toggle i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s ease; }
.hv-ty-toggle.is-on { background: var(--hv-primary); }
.hv-ty-toggle.is-on i { transform: translateX(18px); }

/* ---- You're In! ---- */
.hv-ty-yourein {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--hv-space-4);
  padding: var(--hv-space-5); background: #ECFBF1; border: 1px solid rgba(22, 163, 74, .22);
  border-radius: var(--hv-radius-lg); box-shadow: var(--hv-shadow-sm); min-width: 0;
}
.hv-ty-yourein__ico {
  width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center;
  border-radius: 50%; background: #D3F5DE; color: #16A34A;
}
.hv-ty-yourein__txt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; }
.hv-ty-yourein__txt b { color: #166534; font-size: var(--hv-fs-h4); font-weight: var(--hv-fw-black); }
.hv-ty-yourein__txt span { color: #3F7A55; font-size: var(--hv-fs-sm); line-height: var(--hv-lh-normal); }
.hv-ty-yourein__trophy { position: absolute; right: 10px; bottom: -8px; color: rgba(22, 163, 74, .18); pointer-events: none; }

/* ---- Promise strip ---- */
.hv-ty-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hv-space-4);
  margin-top: var(--hv-space-5); padding: var(--hv-space-5);
  background: #fff; border: 1px solid var(--hv-line); border-radius: var(--hv-radius-lg); box-shadow: var(--hv-shadow-sm);
}
.hv-ty-strip__item { display: flex; align-items: flex-start; gap: var(--hv-space-3); min-width: 0; }
.hv-ty-strip__item:not(:last-child) { border-right: 1px solid var(--hv-line); padding-right: var(--hv-space-4); }
.hv-ty-strip__ico { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--hv-blue-050); color: var(--hv-primary); }
.hv-ty-strip__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hv-ty-strip__txt b { color: var(--hv-ink); font-size: var(--hv-fs-body); font-weight: var(--hv-fw-bold); }
.hv-ty-strip__txt span { color: var(--hv-muted); font-size: var(--hv-fs-sm); line-height: var(--hv-lh-normal); }

/* ---- Keep the excitement going! (dark banner) ---- */
.hv-ty-keep {
  position: relative; overflow: hidden; margin-top: var(--hv-space-5);
  border-radius: var(--hv-radius-lg); box-shadow: var(--hv-shadow);
  background: linear-gradient(120deg, #0A1A33 0%, #101F3F 55%, #0A1A33 100%);
  background-size: cover; background-position: center;
}
.hv-ty-keep::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 14, 33, .88) 0%, rgba(7, 14, 33, .72) 45%, rgba(7, 14, 33, .88) 100%); }
.hv-ty-keep__inner { position: relative; z-index: 1; text-align: center; padding: clamp(2rem, 5vw, 3.25rem) var(--hv-space-5); }
.hv-ty-keep__stag { display: block; font-size: 30px; line-height: 1; margin-bottom: var(--hv-space-3); filter: sepia(1) saturate(3) hue-rotate(-12deg); }
body.hv-theme .hv-ty-keep h2 { margin: 0 0 var(--hv-space-2); font-family: var(--hv-font) !important; font-size: var(--hv-fs-h2); font-weight: var(--hv-fw-black); color: #fff; }
.hv-ty-keep p { margin: 0 0 var(--hv-space-5); color: rgba(255, 255, 255, .78); }
.hv-ty-keep__cta { display: flex; justify-content: center; gap: var(--hv-space-4); flex-wrap: wrap; }
.hv-ty-keep__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 220px; padding: 0.85em 1.4em; border-radius: var(--hv-radius);
  border: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .06);
  color: #fff !important; font-weight: var(--hv-fw-bold); font-size: var(--hv-fs-sm); text-decoration: none !important;
  transition: background .15s ease, border-color .15s ease;
}
.hv-ty-keep__btn:hover { background: rgba(255, 255, 255, .14); }
.hv-ty-keep__btn.is-primary { background: var(--hv-primary); border-color: var(--hv-primary); box-shadow: 0 8px 20px rgba(var(--hv-primary-rgb), .35); }
.hv-ty-keep__btn.is-primary:hover { filter: brightness(1.08); background: var(--hv-primary); }
.hv-ty-keep__btn svg { flex: 0 0 auto; }

/* ---- Trust footbar ---- */
.hv-ty-footbar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hv-space-4);
  margin-top: var(--hv-space-5); padding: var(--hv-space-4) var(--hv-space-5);
  background: #fff; border: 1px solid var(--hv-line); border-radius: var(--hv-radius-lg); box-shadow: var(--hv-shadow-sm);
}
.hv-ty-footbar__item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hv-ty-footbar__item:not(:last-child) { border-right: 1px solid var(--hv-line); padding-right: var(--hv-space-4); }
.hv-ty-footbar__ico { flex: 0 0 auto; display: inline-flex; color: var(--hv-primary); }
.hv-ty-footbar__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hv-ty-footbar__txt b { color: var(--hv-ink); font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-bold); }
.hv-ty-footbar__txt span { color: var(--hv-muted); font-size: var(--hv-fs-xs); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .hv-ty-strip, .hv-ty-footbar { grid-template-columns: 1fr 1fr; }
  .hv-ty-strip__item:not(:last-child), .hv-ty-footbar__item:not(:last-child) { border-right: 0; padding-right: 0; }
  .hv-ty-strip__item:nth-child(odd), .hv-ty-footbar__item:nth-child(odd) { border-right: 1px solid var(--hv-line); padding-right: var(--hv-space-4); }
}
@media (max-width: 900px) {
  .hv-thankyou__details .woocommerce-order-details,
  .hv-thankyou__details .woocommerce-customer-details,
  .hv-thankyou__details .hv-ty-updates,
  .hv-thankyou__details .hv-ty-yourein,
  .hv-thankyou__details .hv-ty-tickets,
  .hv-thankyou__details .hv-iw--celebrate { grid-column: auto; grid-row: auto; }
  /* Stack order: order details, tickets, billing, info, you're in */
  .hv-thankyou__details .woocommerce-order-details { order: 1; }
  .hv-thankyou__details .hv-ty-tickets { order: 2; }
  .hv-thankyou__details .woocommerce-customer-details { order: 3; }
  .hv-thankyou__details .hv-ty-updates { order: 4; }
  .hv-thankyou__details .hv-ty-yourein { order: 5; }
  .hv-thankyou__details .hv-iw--celebrate { order: -1; }
}
@media (max-width: 640px) {
  .hv-thankyou__head { flex-direction: column; align-items: flex-start; gap: var(--hv-space-3); }
  .hv-thankyou__check { width: 64px; height: 64px; }
  .hv-thankyou__check svg { width: 30px; height: 30px; }
  .hv-thankyou__facts { grid-template-columns: 1fr; gap: 0; padding: var(--hv-space-2) var(--hv-space-4); }
  .hv-ty-fact { padding-block: var(--hv-space-3); }
  .hv-ty-fact:not(:last-child) { border-right: 0; padding-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .hv-ty-strip, .hv-ty-footbar { grid-template-columns: 1fr; gap: 0; }
  .hv-ty-strip__item, .hv-ty-footbar__item { padding-block: var(--hv-space-3); }
  .hv-ty-strip__item:nth-child(odd), .hv-ty-footbar__item:nth-child(odd) { border-right: 0; padding-right: 0; }
  .hv-ty-strip__item:not(:last-child), .hv-ty-footbar__item:not(:last-child) { border-bottom: 1px solid var(--hv-line); }
  .hv-ty-ticketbox__main { flex-wrap: wrap; }
  .hv-ty-ticketbox__count { width: 62px; height: 62px; }
  .hv-ty-keep__cta { flex-direction: column; }
  .hv-ty-keep__btn { width: 100%; min-width: 0; }
}

/* Failed-order card (the only .hv-card left on this page) stays light. */
.hv-thankyou .hv-card { --hv-ink: #111827; --hv-body: #4B5563; --hv-muted: #6B7280; --hv-line: #E7EAF0; background: #fff; }

/* =========================================================================
   INSTANT WIN — pagination made VISIBLE on the light design.
   The plugin paginates each prize group's ticket list (per its "tickets per
   page" setting); those pagination links were still carrying the old dark
   token scope, rendering white-on-white — so only page 1's ticket(s) seemed
   to exist. Styled as bordered chips, current page in brand blue. Covers both
   the per-group ticket pagination and the prize-group list pagination.
   ========================================================================= */
.hv-theme .hv-prizes .lty-pagination-wrapper { margin-top: var(--hv-space-3); }
.hv-theme .hv-prizes .lty-pagination-wrapper nav ul {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  list-style: none; margin: 0; padding: 0;
}
.hv-theme .hv-prizes .lty-pagination-wrapper nav ul li { margin: 0; }
.hv-theme .hv-prizes .lty-pagination-wrapper nav ul li a,
.hv-theme .hv-prizes .lty-pagination-wrapper .lty-pagination {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 10px;
  background: #fff !important; border: 1px solid #E7EAF0 !important;
  border-radius: var(--hv-radius-sm); color: #4B5563 !important;
  font-size: var(--hv-fs-sm); font-weight: var(--hv-fw-bold);
  text-decoration: none !important; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.hv-theme .hv-prizes .lty-pagination-wrapper nav ul li a:hover,
.hv-theme .hv-prizes .lty-pagination-wrapper .lty-pagination:hover {
  border-color: var(--hv-primary) !important; color: var(--hv-primary) !important;
}
.hv-theme .hv-prizes .lty-pagination-wrapper nav ul li a.current,
.hv-theme .hv-prizes .lty-pagination-wrapper nav ul li a.active,
.hv-theme .hv-prizes .lty-pagination-wrapper .lty-pagination.current,
.hv-theme .hv-prizes .lty-pagination-wrapper .lty-pagination.active {
  background: var(--hv-primary) !important; border-color: var(--hv-primary) !important; color: #fff !important;
}