@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Fredoka:wght@500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ============================================================
   THE WINWINK TEMPLATE'S COMPETITION PAGE (#1064)

   What is left of WinWink's skin stylesheet (`public/themes/winwink/theme.css`)
   now that the skins are deleted: the rules WinWink's competition page draws
   with (its standard and showcase/pack-drop layouts, `components/templates/
   winwink/`), the WinWink card its "similar competitions", favourites and
   checkout strips use, and the --gt-* / --pk-* token VALUES the games'
   mapping layer (`games.css`, linked right after this file) paints from.
   Loaded only on a store whose site template draws this page
   (`SiteTemplate.competitionPage`), which is WinWink's alone.

   Every rule for the skin's own chrome (sidebar, top bar, header, footer),
   its old homepage blocks and its system-page scopes (account, auth,
   checkout, winners, live draw) was removed mechanically: a rule naming a
   .ww-* class nothing draws any more could not match anything. Everything
   else is unchanged, so the page looks exactly as it did.

   The --ww-* tokens below are WinWink's own values; on a store on the new
   sections, `chromeBridgeCss` (@app/site-theme) points the brand, ink, line
   and surface ones at the store's palette, the faces at its font pairing
   and the radii at its Corners step, so a Branding change reaches this page.

   SAFETY MODEL (do not "simplify" away):
   - Design tokens are prefixed --ww-* and (being fully namespaced)
     live at :root safely: they cannot collide with the platform's.
   - Component classes are prefixed .ww-* so they cannot collide with
     the platform's .btn/.card/etc.
   - The PLATFORM semantic tokens (--primary/--card/--radius/fonts) are
     remapped ONLY inside .ww-scope (the competition page's wrapper), so
     the real widgets that render inside it adopt the WinWink palette
     without globally overriding the store.
   ============================================================ */

/* ---------------------------------------------------------------- TOKENS */
:root {
  /* brand */
  --ww-blue:        #1c7ce5;   /* primary CTA / links / progress */
  /* Blue as WORDS (prices, links, the active nav item) reads --sr-brand-text first (#1236, D452):
     the brand darkened just enough to read 4.5:1, which the theme block sets when it is too faint. */
  --ww-blue-600:    #1668c2;   /* hover */
  --ww-blue-700:    #11538f;
  --ww-blue-tint:   #e9f2fd;
  --ww-grad:        linear-gradient(95deg,#2f6bff 0%,#7b3ff2 38%,#d6249f 72%,#ff5fb0 100%);
  --ww-grad-soft:   linear-gradient(95deg,#5b7bff,#9b5cf0,#e25bb4);

  /* accents */
  --ww-red:         #e5323f;   /* countdown "remains" */
  --ww-red-600:     #c81f2c;
  --ww-orange:      #f59e1b;   /* cash-alt / win badges */
  --ww-on-orange:   #3a2400;   /* dark text on orange */
  --ww-gold:        #e0a019;   /* prize amounts / pools */
  --ww-gold-deep:   #b97e07;
  --ww-gold-tint:   #fdf2dc;   /* amber badge / infochip bg */
  --ww-on-gold:     #3a2700;   /* dark text on gold */
  --ww-green:       #16a34a;   /* credit / completed / verified */
  --ww-green-tint:  #e7f7ee;
  --ww-trust:       #00b67a;   /* trustpilot */

  /* neutrals (light) */
  --ww-ink:         #16181d;   /* headings */
  --ww-ink-2:       #3a414d;   /* body strong */
  --ww-muted:       #687385;   /* secondary text */
  --ww-muted-2:     #98a1b0;   /* tertiary / meta */
  --ww-line:        #e7e9ee;   /* borders */
  --ww-line-2:      #f0f2f5;
  --ww-line-hover:  #cdd2db;   /* hover borders (chips / cards / qty picks) */
  --ww-bg:          #ffffff;   /* page */
  --ww-surface:     #ffffff;   /* cards */
  --ww-muted-bg:    #f4f6f9;   /* muted sections / inputs */
  --ww-media-bg:    #11131a;   /* dark letterbox behind prize imagery */
  --ww-disabled-bg: #cfd4dc;   /* disabled buttons */
  --ww-band:        #101218;   /* dark feature band */
  --ww-band-2:      #181b22;   /* dark elevated */
  --ww-band-line:   #2a2e38;
  --ww-on-band:     #ffffff;
  --ww-on-band-mut: #aab2c0;

  /* radius — single source of truth; everything below derives from these */
  --ww-r-shell: 5px;  /* app-shell panels: sidebar, topbar, content, footer */
  --ww-r-card: 5px;
  --ww-r-md:   5px;
  --ww-r-btn:  5px;
  --ww-r-sm:   5px;
  --ww-r-pill: 999px;

  /* spacing scale */
  --ww-1: 4px;  --ww-2: 8px;  --ww-3: 12px; --ww-4: 16px;
  --ww-5: 20px; --ww-6: 24px; --ww-8: 32px; --ww-10: 40px;
  --ww-12: 48px; --ww-16: 64px; --ww-20: 80px;

  /* shadows */
  --ww-sh-sm:   0 1px 2px rgba(16,24,40,.06);
  --ww-sh-card: 0 1px 3px rgba(16,24,40,.06), 0 8px 22px -12px rgba(16,24,40,.18);
  --ww-sh-pop:  0 12px 34px -10px rgba(16,24,40,.28);
  --ww-sh-blue: 0 8px 20px -8px rgba(28,124,229,.55);

  /* type */
  --ww-font:      'Poppins', system-ui, -apple-system, sans-serif;
  --ww-font-logo: 'Fredoka', 'Poppins', sans-serif;
  --ww-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* layout — ONE content column for the whole shopfront. Themed blocks use it
     via .ww-wrap, and the app-shell section pulls the platform's max-w-7xl
     surfaces (raffle list, winners, account pages) up to the same token.
     1440px rather than winwink.co.uk's 1280: the sidebar shell already eats
     ~275px, so 1280 left wasteful dead margins on wide screens. */
  --ww-maxw: 1440px;

  /* gold ramp (design-bundle grand-prize ticket) — at :root so the raffle
     cards' prize badge can share it, not just the .ww-gpticket-zone */
  --gp-g1:#fff2bf; --gp-g2:#ffe07a; --gp-g3:#ffd24a; --gp-g4:#f0b429;
  --gp-g5:#e8a91d; --gp-g6:#c4860c; --gp-bronze:#8a5e08; --gp-ink:#5a3c05;
}

/* dark token set (opt-in via [data-ww-dark]) */
[data-ww-dark] {
  --ww-ink:      #f3f5f9;
  --ww-ink-2:    #d6dbe5;
  --ww-muted:    #9aa3b2;
  --ww-muted-2:  #6f7888;
  --ww-line:     #2a2e38;
  --ww-line-2:   #21242c;
  --ww-bg:       #0f1115;
  --ww-surface:  #181b22;
  --ww-muted-bg: #1c2029;
  --ww-blue-tint:#13243a;
}

/* ----------------------------------------------------------------
   PLATFORM TOKEN MAP — make the core widgets (add-to-cart, tabs,
   inputs, transparency, trust-footer) adopt the WinWink palette.
   Scoped to themed surfaces only, so the persisted store's :root
   palette is never globally overridden. radius-full stays alone so
   circular elements (avatars, the favourite heart) stay round.
   ---------------------------------------------------------------- */
.cms-block--system_raffle_detail,
.cms-block--system_raffle_list,
.cms-block--testimonials,
.cms-block--text,
.cms-block--gallery,
.cms-block--image_carousel,
.cms-block--contact_form,
.cms-block--trustpilot,
.cms-block--social_feed,
.cms-block--announcement_ticker,
.ww-scope,
.ww-rcard {
  --background: var(--ww-bg);
  --foreground: var(--ww-ink);
  --card: var(--ww-surface);
  --card-foreground: var(--ww-ink);
  --popover: var(--ww-surface);
  --popover-foreground: var(--ww-ink);
  --primary: var(--ww-blue);
  --primary-foreground: #ffffff;
  --secondary: var(--ww-muted-bg);
  --secondary-foreground: var(--ww-ink);
  --muted: var(--ww-muted-bg);
  --muted-foreground: var(--ww-muted);
  --accent: var(--ww-blue-tint);
  --accent-foreground: var(--ww-blue);
  --border: var(--ww-line);
  --input: var(--ww-line);
  --ring: var(--ww-blue);
  /* var-driven block-* classes (block-card/quote/icon/star) read these directly,
     so the niche blocks above adopt WinWink rounding, soft shadow + accents. */
  --shadow: var(--ww-sh-card);
  --warning: var(--ww-orange);
  --success: var(--ww-green);
  --radius: var(--ww-r-md);
  --radius-sm: var(--ww-r-sm);
  --radius-md: var(--ww-r-md);
  --radius-lg: var(--ww-r-md);
  --radius-xl: var(--ww-r-card);
  --radius-2xl: var(--ww-r-card);
  --button-radius: var(--ww-r-btn);
  --card-radius: var(--ww-r-card);
  --input-radius: var(--ww-r-btn);
  --font-family-primary: 'Poppins', system-ui, sans-serif;
  --font-family-heading: 'Poppins', system-ui, sans-serif;
  --font-sans: 'Poppins', system-ui, sans-serif;
  --font-heading: 'Poppins', system-ui, sans-serif;
}

/* ---------------------------------------------------------------- BASE (scoped) */
.ww-scope {
  font-family: var(--ww-font);
  color: var(--ww-ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}
.ww-scope *, .ww-scope *::before, .ww-scope *::after { box-sizing: border-box; }
.ww-scope img { display: block; max-width: 100%; }
/* Neutralise the platform's default <p> margin inside themed scopes.
   margin-BLOCK only: theme.css is unlayered so even a :where() rule beats
   Tailwind's layered utilities — a `margin: 0` shorthand here would also kill
   mx-auto centering on shared views (e.g. the transparency widget). Leaving
   margin-inline undeclared lets mx-* utilities apply; mt-/mb- on a <p> still
   lose — use a theme class for block spacing. */
.ww-scope ::selection { background: var(--ww-blue); color: #fff; }

.ww-wrap { max-width: var(--ww-maxw); margin: 0 auto; padding: 0 24px; }

/* ---------------------------------------------------------------- TYPE HELPERS */
.ww-h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; line-height: 1.08; }
.ww-h3 { font-size: 20px; font-weight: 700; }
.ww-kicker { font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ww-muted); }
.ww-lead { color: var(--ww-muted); font-size: 16px; }
.ww-section { padding: var(--ww-16) 0; }
.ww-section--muted { background: var(--ww-muted-bg); }
/* Centered measure (max-width + auto inline margins) as a THEME class, not the
   Tailwind `max-w-2xl mx-auto` utilities — theme.css is always loaded, whereas
   Tailwind utilities only exist if the last build scanned the theme's blades.
   Prefer .ww-* layout classes in themed blocks so they never depend on a rebuild. */
.ww-measure { max-width: 42rem; margin-inline: auto; }
.ww-muted-txt { color: var(--ww-muted); }

/* ---------------------------------------------------------------- BUTTONS */
.ww-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ww-font); font-weight: 600; font-size: 14.5px;
  padding: 11px 18px; border-radius: var(--ww-r-btn);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .15s, transform .05s, box-shadow .15s, border-color .15s;
}
.ww-btn:active { transform: translateY(1px); }
.ww-btn--primary { background: var(--ww-blue); color: #fff; box-shadow: var(--ww-sh-blue); }
.ww-btn--primary:hover { background: var(--ww-blue-600); }
.ww-btn--dark { background: var(--ww-ink); color: #fff; }
.ww-btn--dark:hover { background: #000; }
.ww-btn--light { background: var(--ww-surface); color: var(--ww-ink); border-color: var(--ww-line); }
.ww-btn--light:hover { border-color: var(--ww-line-hover); }
.ww-btn--ghost { background: transparent; color: var(--ww-ink); border-color: var(--ww-line); }
.ww-btn--ghost:hover { background: var(--ww-muted-bg); }
.ww-btn--disabled,.ww-btn:disabled { background: var(--ww-disabled-bg); color:#fff; box-shadow:none; cursor:not-allowed; }
.ww-btn--block { width: 100%; }
.ww-btn--lg { padding: 14px 24px; font-size: 16px; }
.ww-btn--icon { padding: 11px 0; width: 44px; flex: none; }

/* Split buy CTA — detail-page button beside a basket-icon picker reveal */
.ww-rcard-ctarow { display: flex; gap: 8px; }
.ww-rcard-ctarow .ww-btn:first-child { flex: 1; min-width: 0; }

/* ---------------------------------------------------------------- BADGES / PILLS */
.ww-badge { display:inline-flex; align-items:center; gap:5px; font-size: 11px; font-weight: 700;
  padding: 5px 10px; border-radius: var(--ww-r-pill); letter-spacing:.02em; white-space:nowrap; }
.ww-badge--instant{ background: rgba(16,18,24,.82); color:#fff; backdrop-filter: blur(4px); text-transform: uppercase; letter-spacing:.05em; }
.ww-badge--new    { background: var(--ww-blue); color:#fff; }
.ww-badge--soft   { background: var(--ww-muted-bg); color: var(--ww-muted); }
.ww-badge--green  { background: var(--ww-green-tint); color: var(--ww-green); }
.ww-badge--amber  { background: var(--ww-gold-tint); color: var(--ww-gold-deep); }

/* countdown pill (red) */

/* segmented countdown boxes (detail page) */
.ww-cd-boxes { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.ww-cd-box { background: var(--ww-ink); color:#fff; border-radius: var(--ww-r-sm); padding: 12px; text-align:center; }
.ww-cd-box b { display:block; font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; line-height:1; }
.ww-cd-box span { font-size: 10px; letter-spacing:.1em; text-transform:uppercase; color: var(--ww-on-band-mut); }

/* ---------------------------------------------------------------- PROGRESS */
.ww-progress { position:relative; }
.ww-progress-meta { display:flex; justify-content:space-between; font-size: 11px; color: var(--ww-muted); margin-bottom: 6px; font-weight: 500; white-space:nowrap; gap:8px; }
.ww-track { height: 7px; border-radius: var(--ww-r-pill); background: var(--ww-line); overflow:hidden; }
.ww-fill  { height:100%; border-radius: var(--ww-r-pill); background: var(--ww-blue); }
.ww-fill--gold { background: var(--ww-gold); }
.ww-fill--green { background: var(--ww-green); }
.ww-fill--full { background: var(--ww-muted-2); }

/* ---------------------------------------------------------------- INSTANT WINS */
.ww-iw-head { text-align: center; margin-bottom: var(--ww-8); }
.ww-iw-head .ww-h2 { margin-bottom: 8px; }
.ww-iw-flash {
  display:inline-flex; align-items:center; gap:6px; margin-bottom: 14px;
  background: var(--ww-green); color:#fff; font-weight: 700; font-size: 12.5px;
  letter-spacing:.04em; padding: 6px 14px; border-radius: var(--ww-r-pill);
  text-transform: uppercase;
}
.ww-iw-flash svg { width: 14px; height: 14px; }
.ww-iw-grid { display:grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .ww-iw-grid { grid-template-columns: 1fr 1fr; } }
.ww-iw-card {
  position: relative; display:flex; align-items:center; gap: 16px; padding: 16px;
  border-radius: var(--ww-r-card); border: 1px solid var(--ww-line);
  background: var(--ww-surface); transition: border-color .15s, box-shadow .15s;
}
.ww-iw-card:hover { border-color: var(--ww-line-hover); box-shadow: var(--ww-sh-card); }
.ww-iw-card.is-sold { opacity: .7; }
.ww-iw-thumb { flex: none; width: 64px; height: 64px; border-radius: var(--ww-r-md);
  overflow: hidden; background:var(--ww-surface); box-shadow: var(--ww-sh-sm); }
.ww-iw-thumb__ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background: var(--ww-green-tint); color: var(--ww-green); }
.ww-iw-thumb__ph svg { width: 28px; height: 28px; }
.ww-iw-body { flex: 1; min-width: 0; }
.ww-iw-row { display:flex; align-items:center; justify-content:space-between; gap: 8px; margin-bottom: 4px; }
.ww-iw-left { flex: none; font-size: 12px; font-weight: 600; color: var(--ww-green); white-space: nowrap; }
.ww-iw-left.is-sold { color: var(--ww-muted); }
.ww-iw-name { font-size: 14px; font-weight: 600; color: var(--ww-ink); line-height: 1.3;
  display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ww-iw-alt { font-size: 12px; color: var(--ww-muted); line-height: 1.3; margin-top: 2px; }
.ww-iw-bar { margin-top: 10px; }

/* clickable thumb -> lightbox */
.ww-iw-thumb--zoom { position: relative; padding: 0; border: 0; cursor: zoom-in; appearance: none; font: inherit; }
.ww-iw-thumb__zoom { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, #000 35%, transparent); color:#fff; opacity:0; transition: opacity .15s; }
.ww-iw-thumb__zoom svg { width: 20px; height: 20px; }
.ww-iw-thumb--zoom:hover .ww-iw-thumb__zoom,
.ww-iw-thumb--zoom:focus-visible .ww-iw-thumb__zoom { opacity: 1; }

.ww-iw-lightbox { position: fixed; inset: 0; z-index: 9999; display:flex; align-items:center; justify-content:center;
  padding: 24px; background: color-mix(in srgb, #000 90%, transparent); }

/* ---------------------------------------------------------------- TICKET WIDGETS */

.ww-price { font-size: 26px; font-weight: 800; color: var(--ww-ink); line-height:1; }
.ww-price-lab { font-size: 11.5px; color: var(--ww-muted); text-transform: uppercase; letter-spacing:.06em; font-weight:600; white-space:nowrap; }

/* core add-to-cart widget: the panel already shows the ticket price up top,
   so hide the widget's per-ticket figure on the total row */
.ww-panel .atc-unit-price { display:none; }

/* free entry — EQUAL prominence compliance */
/* margin-bottom lives here, not inline, since the strip is now a shared partial
   that two layouts place at different points (the showcase zeroes it below). */
.ww-entry-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; background:var(--ww-muted-bg); padding:4px; border-radius:var(--ww-r-btn); margin-bottom:16px; }
.ww-entry-tab { display:flex; align-items:center; justify-content:center; gap:7px; padding:10px; border-radius:var(--ww-r-sm);
  font-weight:600; font-size:13.5px; cursor:pointer; color:var(--ww-ink-2); background:transparent; border:0; }
.ww-entry-tab--on { background:#fff; color:var(--ww-ink); box-shadow: var(--ww-sh-sm); }
.ww-free-note { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--ww-green);
  background:var(--ww-green-tint); padding:7px 12px; border-radius:var(--ww-r-sm); }

/* ---------------------------------------------------------------- FEATURE / STAT CARDS */
/* the platform raffle-list section's own py (48/64px) stacks onto whatever
   block sits above it — pull it to the WinWink rhythm at every width
   (the ≤720 block below tightens it further on phones) */
#raffle-list { padding-block: var(--ww-8); }

/* mobile: two stats inline (the third is hidden — a stacked column of three
   ate a full screen of vertical space), card chrome dropped so the strip
   reads as a slim trust line */
@media (max-width: 720px) {
  /* themed sections share the platform's 16px phone gutter (px-4) — the
     24px desktop gutter read as misaligned against the list/banner blocks */
  .ww-wrap { padding: 0 16px; }
  /* extra class: the generic mobile .ww-section 48px rule sits later in the
     file and would win at equal specificity */
  /* the platform raffle-list section's py-12 (48px) stacks onto the stats
     section's bottom padding — half it on phones */
  #raffle-list { padding-block: var(--ww-6); }
}

/* ---------------------------------------------------------------- FOOTER */
.ww-age { width:30px; height:30px; border-radius:var(--ww-r-pill); border:2px solid #7c8595; color:#cfd5df;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex:none; }

/* =============================================================================
   APP SHELL tokens (the skin's sidebar shell itself went with it, #1064).
   ORIGINAL NOTE: fixed left sidebar + floating content panel.
   The WinWink design is a sidebar layout, not a top header. We deliver it
   WITHOUT editing the shared shopfront layout: the header chrome seam
   (themes/winwink/sections/header) renders a position:fixed .ww-sidebar, and
   body:has(.ww-sidebar) shifts the whole page right + turns .shopfront-content
   into the floating rounded panel. Scoped to the WinWink skin only — no other
   theme/store is affected (the default layout has no .ww-sidebar).
   ============================================================================= */
:root { --ww-app-bg:#e9eaee; --ww-side-w:232px; }

/* ---- mobile: sidebar collapses to an app bar + slide-in drawer ----
   Closed: a sticky [☰ + logo] bar (the .ww-mob-menu button drives the
   platform's $store.mobileMenu, which puts .menu-open on <body>).
   Open: the SAME .ww-sidebar element becomes a fixed full-height drawer with
   the complete desktop sidebar inside it — vertical nav with icons, daily
   game, VIP CTA, community buttons, postal link. The platform's floating
   .mobile-menu-toggle is hidden (it slides the standard .header, which this
   theme replaces — under WinWink it overlapped the logo and opened nothing).
   Its .mobile-nav-backdrop is reused for the scrim/click-away. */
@media (max-width: 980px) {
  /* hero banner strip (image_carousel) — kill the dead air: full-bleed
     edges, square corners, hug the trust strip above and the next block */
  /* doubled classes: the base themed-block rules (end of file) set these at
     equal specificity and would otherwise win the cascade */
  .cms-block--image_carousel .block-section.block-section { padding-block: var(--ww-2) 0; padding-inline: 0; }
  .cms-block--image_carousel .block-container.block-container { padding-inline: 0; }
  .cms-block--image_carousel .block-container .rounded-lg { border-radius: 0; }
  /* gallery gets the same full-bleed treatment (stacked section+container
     gutters left a wasteful 32px frame around banner images) */
  .cms-block--gallery .block-section.block-section { padding-block: var(--ww-2) var(--ww-4); padding-inline: 0; }
  .cms-block--gallery .block-container.block-container { padding-inline: 0; }
  .cms-block--gallery .block-container .rounded-lg { border-radius: 0; }
}

/* ---------------------------------------------------------------- UTIL */
.ww-grid { display:grid; gap: 20px; }
.ww-grid-4 { grid-template-columns: repeat(4,1fr); }
.ww-row { display:flex; align-items:center; gap:12px; }
.ww-between { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ww-divider { height:1px; background:var(--ww-line); border:0; margin:0; }

/* =============================================================================
   RAFFLE CARD v2 — tall, image-forward (the approved card)
   ============================================================================= */
/* 3:4 portrait media (the WinWink card look) + FIXED-height foot → the foot
   height is constant in both the collapsed and expanded (buy-panel) states,
   sized to fit BOTH a 2-line title and the in-grid buy panel. Media height
   tracks column width via aspect-ratio, so cards in a row still match. */
/* overflow released so the instants/countdown pills can straddle the media
   edges (centred on the top edge, countdown on the bottom edge) instead of
   sitting on top of the artwork — was mobile-only, now applies at all widths.
   The image takes over the top-corner rounding the card's overflow:hidden
   used to provide. */
.ww-rcard { background:var(--ww-surface); border:1px solid var(--ww-line); border-radius:var(--ww-r-card); overflow:visible;
  box-shadow:var(--ww-sh-card); display:flex; flex-direction:column; transition:box-shadow .18s, transform .18s; }
.ww-rcard:hover { box-shadow:var(--ww-sh-pop); transform:translateY(-3px); }
.ww-rcard-media { position:relative; aspect-ratio:3/4; flex:none; background:var(--ww-media-bg); overflow:visible; }
.ww-rcard-media, .ww-rcard-media img, .ww-rcard-ph { border-radius:var(--ww-r-card) var(--ww-r-card) 0 0; }
.ww-rcard-media img { width:100%; height:100%; object-fit:cover; display:block; }
.ww-rcard.is-sold .ww-rcard-media img { filter: grayscale(.7) opacity(.8); }
.ww-rcard-ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#5b6170; font-weight:600; padding:16px; text-align:center; }
.ww-rcard-tl { position:absolute; top:12px; left:12px; z-index:2; background:var(--ww-gold); color:var(--ww-on-gold);
  font-weight:800; font-size:12px; padding:4px 10px; border-radius:var(--ww-r-pill); box-shadow:var(--ww-sh-sm); white-space:nowrap; }
/* prize-value variant — the grand-prize ticket's gold band, shrunk to a pill:
   same vertical gold ramp, bronze ink, inner bottom shade + sweeping shine.
   (SOLD OUT reuses the base class with its own grey inline background.) */
.ww-rcard-tl--gold {
  overflow:hidden;
  background:linear-gradient(180deg, var(--gp-g2) 0%, var(--gp-g3) 45%, var(--gp-g5) 100%);
  color:var(--gp-ink); text-shadow:0 1px 0 rgba(255,255,255,.4);
  box-shadow:var(--ww-sh-sm), inset 0 -2px 4px rgba(138,94,8,.32);
}
.ww-rcard-tl--gold::after {
  content:""; position:absolute; top:0; left:0; width:34%; height:100%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent);
  animation:wwGpShine 4.5s ease-in-out infinite 1.6s;
}
.ww-rcard-tr { position:absolute; top:12px; right:12px; z-index:2; background:rgba(16,18,24,.82); color:#fff; backdrop-filter:blur(4px);
  font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.04em; padding:4px 10px; border-radius:var(--ww-r-pill); white-space:nowrap; display:inline-flex; align-items:center; gap:5px; }
.ww-rcard-cd { position:absolute; left:12px; bottom:0; transform:translateY(50%); z-index:2; background:var(--ww-red); color:#fff;
  font-weight:800; font-size:11.5px; padding:6px 12px; border-radius:var(--ww-r-pill); display:flex; gap:6px; align-items:center;
  white-space:nowrap; box-shadow:var(--ww-sh-sm); }
.ww-rcard-fav { position:absolute; top:11px; right:12px; z-index:3; display:none; }
.ww-rcard[data-expanded] .ww-rcard-tr { display:none; }
.ww-rcard[data-expanded] .ww-rcard-fav { display:block; }

/* foot holds two GRID-STACKED panels (same cell) that cross-fade on expand —
   the foot sizes to the TALLER face at any width, so neither face can ever be
   clipped when its content wraps on narrow cards (the old fixed 224px box cut
   off the buy panel's details link on mobile). min-height keeps the desktop
   rhythm; the inactive face still paints (visibility delayed) but can't bleed
   through thanks to opacity + pointer-events. */
.ww-rcard-foot { flex:none; min-height:224px; display:grid; position:relative; overflow:hidden; }
.ww-rcard-collapsed, .ww-rcard-buy { grid-area:1/1; min-width:0; padding:24px 16px 16px; display:flex; flex-direction:column;
  will-change:opacity, transform; transition:opacity .32s ease, transform .45s cubic-bezier(.22,1,.36,1); }
.ww-rcard-collapsed { gap:9px; opacity:1; transform:translateY(0); justify-content:space-between; }
.ww-rcard[data-expanded] .ww-rcard-collapsed { opacity:0; pointer-events:none; transform:translateY(-12px); }
.ww-rcard-buy { gap:10px; opacity:0; pointer-events:none; transform:translateY(14px); justify-content:center; }
.ww-rcard[data-expanded] .ww-rcard-buy { opacity:1; pointer-events:auto; transform:translateY(0); }
.ww-rcard-cat { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ww-muted-2); }
.ww-rcard-title { font-size:16px; font-weight:800; line-height:1.2; color:var(--ww-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ww-rcard-price { font-size:24px; font-weight:800; color:var(--sr-brand-text, var(--ww-blue)); line-height:1; }
.ww-rcard-price small { font-size:12px; font-weight:600; color:var(--ww-muted); }
.ww-rcard-cgroup { display:flex; flex-direction:column; gap:11px; margin-top:auto; }
.ww-rcard-prog .ww-track { height:8px; }
.ww-rcard-prog-meta { display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--ww-muted); margin-top:8px; font-weight:500; white-space:nowrap; }
.ww-rcard-prog-meta b { color:var(--sr-brand-text, var(--ww-blue)); font-weight:700; }
.ww-rcard-details { display:block; text-align:center; font-size:11.5px; color:var(--ww-muted); font-weight:600; text-decoration:none; }
.ww-rcard-details:hover { color:var(--ww-ink); text-decoration:underline; }
.ww-rcard-buy-q { font-weight:700; font-size:14.5px; color:var(--ww-ink); }
/* narrow cards (2-up phone grid): compact type so the sold-count row and the
   "How many tickets?" header fit instead of overflowing the card edge */
@media (max-width: 560px) {
  .ww-rcard-foot { min-height: 0; }
  .ww-rcard-collapsed, .ww-rcard-buy { padding: 12px 12px 13px; }
  .ww-rcard-title { font-size: 14.5px; }
  .ww-rcard-price { font-size: 20px; }
  .ww-rcard-price small { font-size: 11px; }
  .ww-rcard-prog-meta { font-size: 11px; flex-wrap: wrap; gap: 2px 8px; }
  .ww-rcard-buy-q { font-size: 13px; }
  .ww-rcard-details { font-size: 11px; }
}

@media (max-width: 720px) {
  /* feet are content-sized — grid stretch slack otherwise lands as a random
     strip below the button, so card bottoms misalign; let the foot grow and
     the collapsed face's space-between absorb the slack above the price */
  .ww-rcard-foot { flex: 1 0 auto; min-height: 0; }
  /* the foot's grid sizes to the TALLER stacked face, so the hidden buy
     panel was propping every foot ~40px past the collapsed content (the gap
     under the title that appears once Livewire hydrates the stepper). On
     mobile only the VISIBLE face stays in flow; the hidden one overlays. */
  .ww-rcard-buy { position: absolute; inset: 0; }
  .ww-rcard[data-expanded] .ww-rcard-buy { position: static; }
  .ww-rcard[data-expanded] .ww-rcard-collapsed { position: absolute; inset: 0; }
  /* narrow cards: "How many tickets?" wraps to three lines and the stepper
     below already says it — drop the label, keep the price */
  .ww-rcard-buy-q { display: none; }
  /* breadcrumbs: a wrapping grey line above the page title on a one-level-deep
     journey — back button covers it; hidden via CSS so links stay in the DOM.
     (nav. qualifier: the base .ww-crumb flex rule sits later in this file) */
  nav.ww-crumb, nav.shopfront-breadcrumbs { display: none; }
  /* instants pill straddles the top edge on small media (full-size top-right
     pill ate too much artwork); desktop keeps it in the top-right corner */
  .ww-rcard-tr { top: 0; right: auto; left: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 12px); }
  /* purchase panel: the desktop-scale countdown + eyebrow ate half a screen.
     The labelled tiles + "Draws …" line make the eyebrow redundant; tiles
     drop to roughly half height and the entry tabs tighten so "Free Postal
     Entry" holds one line (label kept whole — equal-prominence compliance). */
  .ww-cd-kicker { display: none; }
  .ww-panel-pad { padding: 16px; }
  .ww-cd-boxes { gap: 6px; }
  .ww-cd-box { padding: 7px 4px; }
  .ww-cd-box b { font-size: 19px; }
  .ww-cd-box span { font-size: 9px; }
  .ww-entry-tab { padding: 9px 4px; gap: 5px; font-size: 12.5px; white-space: nowrap; }
  .ww-entry-tab svg { width: 14px; height: 14px; flex: none; }
  /* compact pills: 2-up cards are small — full-size pills ate the artwork and
     the countdown's lower half crowded the title below it */
  .ww-rcard-tl { font-size: 10.5px; padding: 4px 9px; }
  .ww-rcard-tr { font-size: 9.5px; padding: 4px 9px; gap: 4px; }
  .ww-rcard-tr svg { width: 10px; height: 10px; }
  .ww-rcard-cd { font-size: 10px; padding: 4px 9px; gap: 5px; }
  .ww-rcard-cd svg { width: 11px; height: 11px; }
  /* carousel rails clip vertical overflow — headroom for the straddling pill */
  /* the platform raffle list is gap-x-6 (24px) between cards but px-4 (16px)
     to the page edge — match the gutters so card width isn't wasted */
  .cms-block--system_raffle_list .grid.items-stretch { column-gap: 16px; row-gap: 24px; }
}

@media (max-width: 1080px) {
  .ww-grid-4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 720px) {
  .ww-grid-4 { grid-template-columns: 1fr; }
  .ww-section { padding: var(--ww-12) 0; }
}

/* ============================================================
   COOKIE CONSENT BANNER — WinWink restyle (only loads on themed pages).
   ============================================================ */
.bc-consent .bc-consent__panel { background: var(--ww-surface); border: 1px solid var(--ww-line); border-radius: var(--ww-r-card); box-shadow: var(--ww-sh-pop); }
.bc-consent .bc-consent__text { font-family: var(--ww-font); color: var(--ww-muted); }
.bc-consent .bc-consent__link { color: var(--sr-brand-text, var(--ww-blue)); }
.bc-consent .bc-consent__btn { font-family: var(--ww-font); border-radius: var(--ww-r-btn); font-weight:600; }
.bc-consent .bc-consent__btn--primary { background: var(--ww-blue); color: #fff; border-color: var(--ww-blue); }
.bc-consent .bc-consent__btn--primary:hover { background: var(--ww-blue-600); }
.bc-consent .bc-consent__btn--solid { background: var(--ww-ink); color: #fff; border-color: var(--ww-ink); }
.bc-consent .bc-consent__btn--link { color: var(--ww-muted); }
.bc-consent .bc-consent__btn--link:hover { color: var(--sr-brand-text, var(--ww-blue)); }

/* ============================================================
   GAMES + WIN MODAL — WinWink token VALUES only.
   The mapping rules live in the shared _shared/games.css (loaded as its own
   <link> after this file). Here we just supply this theme's values at :root,
   so they cascade to every game surface AND the body-teleported win modal.
   A "win" = gold; blue is reserved for actions.
   ============================================================ */
:root {
  /* surfaces */
  --gt-page:          var(--ww-muted-bg);
  --gt-ink:           var(--ww-ink);
  --gt-ink-soft:      var(--ww-muted);
  --gt-ink-faint:     var(--ww-muted-2);
  --gt-board:         var(--ww-band);
  --gt-board-hi:      #1b1f2a;
  --gt-board-lo:      #0a0c11;
  --gt-surface-dark:  var(--ww-band-2);
  --gt-text-on-dark:  var(--ww-on-band);
  --gt-card:          var(--ww-surface);
  --gt-card-2:        var(--ww-muted-bg);
  --gt-hairline:      var(--ww-line);
  --gt-hairline-dark: rgba(255,255,255,.12);
  /* semantic */
  --gt-win:           var(--ww-gold);
  --gt-win-soft:      var(--ww-orange);
  --gt-action:        var(--ww-blue);
  --gt-on-action:     #ffffff;
  --gt-loss:          var(--ww-muted);
  --gt-loss-deep:     var(--ww-ink-2);
  /* type / shape — WinWink titles are upright bold Poppins (Hartwell's shared
     games layer defaults to italic 500 for its Cormorant display; override here
     so the daily-game heading matches the rest of the theme, not slanted serif). */
  --gt-title-font:    var(--ww-font);
  --gt-title-style:   normal;
  --gt-title-weight:  800;
  --gt-label-font:    var(--ww-font-mono);
  --gt-radius:        var(--ww-r-md);
  --gt-card-shadow:   var(--ww-sh-card);

  /* Spin-wheel furniture (read by wheel.js) */
  --wheel-divider:    #ffffff;
  --wheel-label:      #ffffff;
  --wheel-hub:        var(--ww-band);
  /* Scratch foil (read by the scratch view's canvas) */
  --scratch-0:        #4aa3ff;
  --scratch-1:        var(--ww-blue);
  --scratch-2:        var(--ww-blue-700);
  /* Pachinko miss-legend pill (read by the component's inline style) */
  --pk-legend-loss:   var(--ww-muted);
  /* Pachinko canvas palette (read by pachinko.js#resolveTheme) */
  --pk-bg-0:              transparent;
  --pk-peg:               #c3cad6;
  --pk-peg-halo-rgb:      195, 202, 214;
  --pk-ball-0:            #f7d878;
  --pk-ball-1:            var(--ww-gold);
  --pk-ball-2:            var(--ww-gold-deep);
  --pk-ball-glow-rgb:     224, 160, 25;
  --pk-loss-top:          var(--ww-muted);
  --pk-loss-bottom:       var(--ww-ink-2);
  --pk-spark:             #ffd56b;
  --pk-spark-soft:        #fff0c2;
  --pk-loss-spark:        var(--ww-muted-2);
  --pk-win-text:          var(--ww-gold);
  --pk-win-text-glow-rgb: 224, 160, 25;
  --pk-fallback-0-top: #4aa3ff; --pk-fallback-0-bottom: var(--ww-blue-600);
  --pk-fallback-1-top: #f7d878; --pk-fallback-1-bottom: var(--ww-gold-deep);
  --pk-fallback-2-top: #9b5cf0; --pk-fallback-2-bottom: #6321c4;
}

/* =============================================================================
   COMPETITION DETAIL PAGE — bespoke WinWink layout (system_raffle_detail block).
   All --ww-* tokens live at :root, so these classes work without a token-bearing
   ancestor. Layout is done with .ww-* classes (theme.css is always loaded) rather
   than Tailwind utilities that would depend on a build scanning the theme blades.
   ============================================================================= */

/* breadcrumb */
.ww-crumb { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--ww-muted); font-weight:500; }
.ww-crumb a { color:var(--ww-muted); }
.ww-crumb a:hover { color:var(--ww-ink); }
.ww-crumb .ww-crumb-sep { opacity:.5; }
.ww-crumb .ww-crumb-cur { color:var(--ww-ink); font-weight:600; }

/* generic padded panel (purchase + transparency cards) */
.ww-panel { background:var(--ww-surface); border:1px solid var(--ww-line); border-radius:var(--ww-r-card); box-shadow:var(--ww-sh-card); }
.ww-panel-pad { padding:22px; }
.ww-panel-head { font-size:16px; font-weight:700; color:var(--ww-ink); }
.ww-panel-sub { font-size:13px; color:var(--ww-muted); margin-top:2px; }
@media(min-width:1024px){ .ww-panel-pad { padding:26px; } }

/* detail hero grid: gallery | purchase */
.ww-detail-grid { display:grid; grid-template-columns:1.12fr .88fr; gap:34px; align-items:start; }
@media(max-width:980px){ .ww-detail-grid { grid-template-columns:1fr; gap:24px; } }
/* gallery + purchase pin while the other column scrolls — DESKTOP ONLY (a
   class, not inline style, so the single-column mobile flow never pins and
   the panel can't slide over the gallery image) */
@media(min-width:981px){ .ww-detail-sticky { position:sticky; top:18px; } }

/* gallery — defaults to 3:4 (matches the cards) until the active image
   reports its natural ratio; the blade then drives aspect-ratio inline */
.ww-gallery-main { position:relative; aspect-ratio:3/4; border-radius:var(--ww-r-card); overflow:hidden; background:var(--ww-media-bg); }
.ww-gallery-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:40px; height:40px; border-radius:var(--ww-r-pill);
  background:rgba(255,255,255,.92); border:0; display:flex; align-items:center; justify-content:center; color:var(--ww-ink); cursor:pointer; box-shadow:var(--ww-sh-sm); }
.ww-gallery-nav:hover { background:#fff; }
.ww-gallery-nav svg { width:20px; height:20px; }
.ww-gallery-count { position:absolute; bottom:12px; right:12px; z-index:4; background:rgba(16,18,24,.78); color:#fff; font-size:11px; font-weight:700;
  font-variant-numeric:tabular-nums; padding:4px 10px; border-radius:var(--ww-r-pill); }
.ww-gallery-fav { position:absolute; top:12px; right:12px; z-index:4; }
.ww-thumbs { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:12px; }
.ww-gallery-slide { position:absolute; inset:0; opacity:0; transition:opacity .3s ease; z-index:0; }
.ww-gallery-slide.is-on { opacity:1; z-index:1; }
.ww-img-cover { width:100%; height:100%; object-fit:cover; }
.ww-img-contain { width:100%; height:100%; object-fit:contain; }
.ww-thumb { position:relative; aspect-ratio:1/1; border-radius:var(--ww-r-btn); overflow:hidden; background:var(--ww-media-bg); cursor:pointer; border:2px solid transparent; transition:border-color .14s; }
.ww-thumb img { width:100%; height:100%; object-fit:cover; }
.ww-thumb.is-on { border-color:var(--ww-blue); }

/* prize "plate" — blurred backdrop + contained image so any prize photo fills the
   frame without cropping or visible letterbox bars. */
.ww-plate { position:relative; overflow:hidden; background:var(--ww-media-bg); }
.ww-plate__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.18); filter:blur(26px) saturate(1.1); opacity:.55; }
.ww-plate__scrim { position:absolute; inset:0; background:radial-gradient(120% 120% at 50% 38%, transparent 42%, rgba(10,12,17,.5)); }
.ww-plate__img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:1; }
.ww-plate__empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#3b414e; }

/* info chips under gallery */
.ww-infochips { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.ww-infochip { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; padding:8px 13px; border-radius:var(--ww-r-pill); background:var(--ww-muted-bg); color:var(--ww-ink-2); }
.ww-infochip--gold { background:var(--ww-gold-tint); color:var(--ww-gold-deep); }
.ww-infochip--green { background:var(--ww-green-tint); color:var(--ww-green); }
.ww-infochip svg { width:14px; height:14px; }

/* purchase panel meta */
.ww-buy-date { display:flex; align-items:center; gap:8px; color:var(--ww-muted); font-size:13px; }
.ww-buy-date svg { width:15px; height:15px; flex:none; }

/* info tabs (description / transparency) */
.ww-info-tabs { display:flex; gap:6px; border-bottom:1px solid var(--ww-line); }
.ww-info-tab { display:inline-flex; align-items:center; gap:7px; padding:12px 16px; font-weight:600; font-size:14.5px; color:var(--ww-muted);
  background:transparent; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; white-space:nowrap; }
.ww-info-tab svg { width:16px; height:16px; }
.ww-info-tab:hover { color:var(--ww-ink); }
.ww-info-tab.is-active { color:var(--sr-brand-text, var(--ww-blue)); border-bottom-color:var(--ww-blue); }

/* rich description content */
.ww-rich { color:var(--ww-muted); font-size:15px; line-height:1.7; }
.ww-rich > * + * { margin-top:14px; }
.ww-rich h1,.ww-rich h2,.ww-rich h3,.ww-rich h4 { color:var(--ww-ink); font-weight:700; line-height:1.25; margin-top:24px; }
.ww-rich h2 { font-size:22px; } .ww-rich h3 { font-size:18px; } .ww-rich h4 { font-size:15px; }
.ww-rich strong,.ww-rich b { color:var(--ww-ink); font-weight:700; }
.ww-rich a { color:var(--sr-brand-text, var(--ww-blue)); text-decoration:underline; }
.ww-rich ul,.ww-rich ol { padding-left:22px; display:flex; flex-direction:column; gap:7px; }
.ww-rich ul { list-style:disc; } .ww-rich ol { list-style:decimal; }
.ww-rich img { border-radius:var(--ww-r-md); margin:18px 0; max-width:100%; }

/* spec rows (draw details) */
.ww-spec-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--ww-line); font-size:14px; }
.ww-spec-row:last-child { border-bottom:0; }
.ww-spec-row dt { color:var(--ww-muted); font-weight:500; }
.ww-spec-row dd { color:var(--ww-ink); font-weight:700; font-variant-numeric:tabular-nums; }

/* transparency hash + fair steps */
.ww-hash { font-family:var(--ww-font-mono); font-size:12.5px; color:var(--ww-ink-2); word-break:break-all; background:var(--ww-muted-bg); border:1px solid var(--ww-line); border-radius:var(--ww-r-sm); padding:11px 13px; }
.ww-fair-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:560px){ .ww-fair-steps { grid-template-columns:1fr; } }
.ww-fair-step-n { font-family:var(--ww-font-mono); font-size:13px; font-weight:700; color:var(--sr-brand-text, var(--ww-blue)); }
.ww-fair-step-t { font-weight:700; font-size:14px; color:var(--ww-ink); margin-top:4px; }
.ww-fair-step-d { font-size:12.5px; color:var(--ww-muted); margin-top:4px; line-height:1.5; }
.ww-fair-ico { width:42px; height:42px; border-radius:var(--ww-r-btn); flex:none; background:var(--ww-blue-tint); color:var(--sr-brand-text, var(--ww-blue)); display:flex; align-items:center; justify-content:center; }
.ww-fair-ico svg { width:21px; height:21px; }

/* pay / age strip */
.ww-pay-strip { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; padding:24px; color:var(--ww-muted); font-size:13px; }
.ww-pay-chip { background:#fff; border:1px solid var(--ww-line); border-radius:5px; padding:4px 8px; font-weight:800; font-size:11px; color:var(--ww-ink); }

/* grand prize card — "Live Hype Ticket" (design bundle variation C).
   The card is a raffle ticket: gold GRAND PRIZE header band, gold-framed
   hero plate, prize NAME as the headline, then a perforation row with side
   notches and a tear-off stub carrying the value + live-winner pill.
   Gold ramp comes from the design bundle, scoped here as --gp-g*. */
.ww-gpticket-zone {
  position:relative; width:max-content; max-width:100%; margin:0 auto;
}
/* The notches are REAL cutouts: the card paints no background of its own —
   each segment (head/body/perf/stub) paints its own, and the perf row's
   background punches genuinely transparent holes with radial-gradients, so
   the page shows through. The shadow is a drop-shadow FILTER (not a
   box-shadow): it follows the rendered alpha, so it hugs the notched
   silhouette instead of painting a straight edge behind the holes. */
.ww-gpticket {
  position:relative; width:560px; max-width:100%; margin:0 auto;
  border-radius:24px; overflow:hidden; text-align:center;
  filter: drop-shadow(0 16px 18px rgba(196,134,12,.30)) drop-shadow(0 5px 9px rgba(0,0,0,.10));
}

/* gold header band (replaces the floating GRAND PRIZE badge) */
.ww-gpticket__head {
  position:relative; display:flex; align-items:center; justify-content:center; gap:12px;
  padding:15px 16px; overflow:hidden;
  background:linear-gradient(180deg, var(--gp-g2) 0%, var(--gp-g3) 45%, var(--gp-g5) 100%);
  color:var(--gp-ink); font-weight:900; letter-spacing:.16em; font-size:19px;
  box-shadow:inset 0 -3px 6px rgba(138,94,8,.32);
}
.ww-gpticket__head-txt { text-shadow:0 1px 0 rgba(255,255,255,.4); white-space:nowrap; }
.ww-gpticket__head-ico { width:18px; height:18px; flex:none; }
.ww-gpticket__star { font-size:13px; color:var(--gp-bronze); opacity:.85; }
.ww-gpticket__shine {
  position:absolute; top:0; left:0; width:30%; height:100%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent);
  animation:wwGpShine 4.5s ease-in-out infinite 1s;
}

.ww-gpticket__body { padding:16px 16px 14px; background:var(--ww-surface); }
.ww-gpticket__frame {
  border-radius:14px; padding:3px; overflow:hidden;
  background:linear-gradient(135deg, var(--gp-g1), var(--gp-g3) 30%, var(--gp-g6) 55%, var(--gp-g3) 80%, var(--gp-g1));
  box-shadow:0 8px 20px -8px rgba(138,94,8,.55);
}
.ww-gpticket__frame .ww-plate { border-radius:11px; }
/* --fit (image present): the gold frame shrink-wraps the image's real
   shape — the image flows in-line with a height cap, so portrait/square
   art gets a snug tall frame instead of 16:10 blur pillarboxing, while
   landscape art still fills the ticket width. Browsers transfer the
   max-height through the image's aspect ratio when shrink-wrapping. */
.ww-gpticket__frame--fit { width:fit-content; max-width:100%; margin-inline:auto; }
.ww-gpticket__frame--fit .ww-plate__img {
  position:static; display:block; width:auto; height:auto;
  max-width:100%; max-height:360px; margin-inline:auto;
}
/* no media: keep the fixed 16:10 plate for the trophy placeholder */
.ww-gpticket__frame:not(.ww-gpticket__frame--fit) .ww-plate { aspect-ratio:16/10; }
/* doubled class beats the :is(.ww-scope) heading reset at line ~191,
   which otherwise zeroes these margins */
.ww-gpticket .ww-gpticket__name {
  margin:26px 6px 0; font-size:clamp(22px, 4.6vw, 30px); line-height:1.13;
  font-weight:800; letter-spacing:-.01em; color:var(--ww-ink); text-wrap:balance;
}

/* perforation row — side notches are transparent holes in this strip's
   background (two half-width layers so the second can't refill the first
   layer's hole); the body's white runs into it from above */
.ww-gpticket__perf {
  position:relative; display:flex; align-items:center; height:30px;
  background:
    radial-gradient(circle 14.5px at left center, transparent 13.5px, var(--ww-surface) 14.5px) left center / 51% 100% no-repeat,
    radial-gradient(circle 14.5px at right center, transparent 13.5px, var(--ww-surface) 14.5px) right center / 51% 100% no-repeat;
}
.ww-gpticket__dash { flex:1; margin:0 26px; border-top:2px dashed #e3d3a3; }

/* tear-off stub */
.ww-gpticket__stub {
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:14px 26px 20px;
  background:linear-gradient(180deg, #fffaec, #fff3d2);
}
.ww-gpticket__stub--solo { justify-content:center; }
.ww-gpticket__value { display:flex; align-items:center; gap:11px; }
.ww-gpticket__ico {
  display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:11px; color:var(--gp-ink);
  background:linear-gradient(180deg, var(--gp-g1), var(--gp-g3));
  border:1.5px solid var(--gp-g4); box-shadow:inset 0 1px 0 #fff;
}
.ww-gpticket__meta { display:flex; flex-direction:column; line-height:1.05; text-align:left; }
.ww-gpticket__label { font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#9a6a10; }
.ww-gpticket__amt { font-size:29px; font-weight:900; color:var(--gp-bronze); letter-spacing:-.01em; }
.ww-gpticket__live {
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
  font-size:13px; font-weight:700; color:#146c43; background:#e7f7ee; border:1px solid #b8e6cb;
  white-space:nowrap;
}
.ww-gpticket__live-dot {
  width:9px; height:9px; border-radius:50%; background:#22c55e;
  animation:wwGpLivePulse 1.8s ease-out infinite;
}

/* floating gold coins around the ticket */
.ww-gp-coin {
  position:absolute; z-index:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 35% 30%, #fff4c2 0%, #ffd24a 38%, #e8a91d 66%, #c4860c 100%);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.7), inset 0 -3px 6px rgba(138,94,8,.55), 0 6px 14px rgba(0,0,0,.18);
  display:flex; align-items:center; justify-content:center;
  color:#8a5e08; font-weight:900; --gp-rot:0deg;
  animation:wwGpFloat 5s ease-in-out infinite;
}
.ww-gp-coin::after { content:"£"; font-size:.62em; text-shadow:0 1px 0 rgba(255,255,255,.5); }

@keyframes wwGpShine {
  0%   { transform:translateX(-130%) skewX(-20deg); opacity:0; }
  12%  { opacity:.9; }
  35%  { transform:translateX(560%) skewX(-20deg); opacity:0; }
  100% { transform:translateX(560%) skewX(-20deg); opacity:0; }
}
@keyframes wwGpFloat {
  0%,100% { transform:translateY(0) rotate(var(--gp-rot)); }
  50%     { transform:translateY(-14px) rotate(var(--gp-rot)); }
}
@keyframes wwGpLivePulse {
  0%   { box-shadow:0 0 0 0 rgba(34,197,94,.6); }
  70%  { box-shadow:0 0 0 9px rgba(34,197,94,0); }
  100% { box-shadow:0 0 0 0 rgba(34,197,94,0); }
}
@media (prefers-reduced-motion: reduce) {
  .ww-gpticket__shine, .ww-gp-coin, .ww-gpticket__live-dot, .ww-rcard-tl--gold::after { animation:none !important; }
}
.ww-addprize .ww-plate { aspect-ratio:4/3; border-radius:var(--ww-r-sm); }

/* ended state */
.ww-ended { text-align:center; padding:8px 0; }

/* description tab 2-col (prose | draw details) */
.ww-desc-grid { display:grid; grid-template-columns:1.55fr .9fr; gap:34px; align-items:start; }
@media(max-width:900px){ .ww-desc-grid { grid-template-columns:1fr; gap:22px; } }

/* detail section rhythm — block-axis only: these sit on the SAME element as
   .ww-wrap, so a `padding: X 0` shorthand would zero the wrap's side gutters */
.ww-detail-sec { padding-block:46px; }
.ww-detail-sec--tight { padding-block:24px; }
.ww-additional { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media(max-width:760px){ .ww-additional { grid-template-columns:repeat(2,1fr); } }

/* =============================================================================
   NICHE BLOCKS — WinWink language layer (testimonials, text, gallery,
   image_carousel, contact_form, trustpilot, social_feed, announcement_ticker).
   The platform token map above already gives their var-driven block-* classes
   (block-card/quote-card/icon-container/star) WinWink rounding, soft shadow +
   blue/gold accents. This adds the finishing language — Poppins heading weight,
   gradient testimonial avatars, card hover-lift, ticker spacing — so the whole
   catalogue reads as one theme. (Bespoke per-block layouts can replace these.)
   ============================================================================= */
:is(.cms-block--testimonials, .cms-block--text, .cms-block--gallery,
    .cms-block--image_carousel, .cms-block--contact_form, .cms-block--trustpilot,
    .cms-block--social_feed, .cms-block--announcement_ticker) :is(h1, h2, h3) {
  font-family: var(--ww-font); font-weight: 700; letter-spacing: -.01em;
}
/* image blocks: the platform's generic 5rem .block-section padding reads as
   dead air around bare images — pull the block axis down to the WinWink rhythm
   (keeps the platform's inline gutters) */
:is(.cms-block--gallery, .cms-block--image_carousel) .block-section {
  padding-block: var(--ww-12);
}
/* the carousel doubles as a hero banner strip: hug the header, and align its
   container to EXACTLY the .ww-wrap geometry (1440 + 24px gutters) so the
   image edges line up with the bespoke sections. The section's own inline
   padding must go to 0 — .block-section's `padding: 5rem 1.5rem` shorthand
   otherwise stacks a second gutter on top of the container's. */
.cms-block--image_carousel .block-section { padding-block: var(--ww-6); padding-inline: 0; }
.cms-block--image_carousel .block-container { max-width: var(--ww-maxw); padding-inline: var(--ww-6); }
/* card surfaces get the WinWink hover-lift */
:is(.cms-block--testimonials, .cms-block--gallery, .cms-block--image_carousel) .block-card,
.cms-block--testimonials .block-quote-card { transition: box-shadow .18s, transform .18s; }
:is(.cms-block--testimonials, .cms-block--gallery, .cms-block--image_carousel) .block-card:hover,
.cms-block--testimonials .block-quote-card:hover { box-shadow: var(--ww-sh-pop); transform: translateY(-3px); }
/* testimonial author avatar → WinWink gradient circle (matches winner avatars) */
.cms-block--testimonials .block-icon-container {
  background: var(--ww-grad) !important; color: #fff !important; font-weight: 700; border-radius: var(--ww-r-pill);
}
/* announcement ticker → WinWink band feel */
.cms-block--announcement_ticker .ticker-item { letter-spacing: .08em; font-weight: 600; }

/* ---- themed ticker (.ww-ticker, themes/winwink/blocks/announcement_ticker) —
   dark winners strip: gradient INSTANT/WINNER pill + prize + name + time ago.
   Structural marquee classes come from the platform (cms-blocks.css). ---- */
.ww-ticker { background:#0b0d13; padding:12px 0; font-family:var(--ww-font); }
.ww-ticker .ticker-item { text-transform:none; letter-spacing:0; }
.ww-tick { display:inline-flex; align-items:center; gap:11px; padding:0 28px; }
a.ww-tick:hover { text-decoration:none; }
a.ww-tick:hover .ww-tick-prize { text-decoration:underline; }
.ww-tick-badge { display:inline-flex; align-items:center; gap:5px; flex:none;
  background:linear-gradient(90deg,#3db6ff,#8b5cf6 55%,#c14ef8); color:#fff;
  font-weight:800; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  padding:5px 12px; border-radius:var(--ww-r-pill); }
.ww-tick-badge--main { background:linear-gradient(90deg,var(--ww-gold),#d97706); color:var(--ww-on-gold,#3a2c00); }
.ww-tick-ico { width:12px; height:12px; }
.ww-tick-prize { color:#fff; font-weight:800; font-size:13.5px; }
.ww-tick-name { color:#b9c0cd; font-weight:500; font-size:13px; }
.ww-tick-time { color:#fff; font-weight:700; font-size:13px; }
.ww-ticker .ww-tick-txt { color:#e7eaf0; font-weight:600; font-size:13px; }
.ww-ticker .ticker-separator { color:#566070; }

/* =========================================================================
   SHOWCASE COMPETITION LAYOUT (.ww-sc)
   =========================================================================
   Scoped to themes/winwink/blocks/system_raffle_detail--showcase.blade.php,
   selected per competition by RaffleDetailLayout::SHOWCASE. Nothing here
   applies unless that layout is chosen, so the standard competition page is
   untouched. Tokens are the shared --ww-* set at :root.
   ========================================================================= */

.ww-sc-hero { position: relative; overflow: hidden; isolation: isolate; padding: 8px 0 40px; }
.ww-sc-hero__inner { position: relative; z-index: 1; text-align: center; max-width: 780px; }

/* ---- animated colour mesh (docs: "Animated mesh background hero") ----
   Five blurred blobs drifting on three shared tracks, the whole layer blurred
   once and breathing in opacity, then two white masks on top: a vignette that
   pulls the colour into the centre and a vertical fade that lands it on the
   page's white at both ends. Decorative only - the markup is aria-hidden and
   pointer-events are off, so it never intercepts a tap on the product. */
.ww-sc-mesh {
  position: absolute; inset: -4% -6% 8% -6%; z-index: 0; pointer-events: none;
  overflow: hidden; filter: blur(62px) saturate(1.08);
  animation: wwMeshBreathe 11s ease-in-out infinite;
}
.ww-sc-mesh__blob { position: absolute; border-radius: 50%; will-change: transform; }
.ww-sc-mesh__blob--1 { top: 20%; left: 36%; width: 30%; height: 32%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 120, 188, 1), rgba(255, 120, 188, 0) 66%);
  animation: wwMeshA 11s ease-in-out infinite; }
.ww-sc-mesh__blob--2 { top: 30%; left: 22%; width: 28%; height: 34%;
  background: radial-gradient(circle at 50% 50%, rgba(247, 180, 74, .95), rgba(247, 180, 74, 0) 64%);
  animation: wwMeshB 15s ease-in-out infinite; }
.ww-sc-mesh__blob--3 { top: 26%; right: 22%; width: 28%; height: 34%;
  background: radial-gradient(circle at 50% 50%, rgba(160, 132, 250, .95), rgba(160, 132, 250, 0) 64%);
  animation: wwMeshC 13s ease-in-out infinite; }
.ww-sc-mesh__blob--4 { top: 40%; left: 40%; width: 24%; height: 26%;
  background: radial-gradient(circle at 50% 50%, rgba(96, 196, 255, .85), rgba(96, 196, 255, 0) 66%);
  animation: wwMeshA 9s ease-in-out infinite reverse; }
.ww-sc-mesh__blob--5 { top: 12%; left: 44%; width: 22%; height: 24%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 92, 164, .8), rgba(255, 92, 164, 0) 68%);
  animation: wwMeshC 17s ease-in-out infinite; }
.ww-sc-mesh__veil { position: absolute; inset: 0;
  background: radial-gradient(ellipse 46% 42% at 50% 44%, rgba(255,255,255,0) 40%, rgba(255,255,255,.55) 78%, var(--ww-bg) 100%); }
.ww-sc-mesh__fade { position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 18%, rgba(255,255,255,0) 76%, var(--ww-bg) 98%); }

@keyframes wwMeshA {
  0%   { transform: translate3d(-22%, -14%, 0) scale(1); }
  33%  { transform: translate3d(34%, 20%, 0) scale(1.45); }
  66%  { transform: translate3d(-16%, 30%, 0) scale(.75); }
  100% { transform: translate3d(-22%, -14%, 0) scale(1); }
}
@keyframes wwMeshB {
  0%   { transform: translate3d(16%, 18%, 0) scale(1.05); }
  30%  { transform: translate3d(-38%, -22%, 0) scale(.72); }
  70%  { transform: translate3d(28%, -30%, 0) scale(1.5); }
  100% { transform: translate3d(16%, 18%, 0) scale(1.05); }
}
@keyframes wwMeshC {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  25%  { transform: translate3d(-42%, 24%, 0) scale(1.4); }
  55%  { transform: translate3d(30%, -18%, 0) scale(.78); }
  80%  { transform: translate3d(18%, 34%, 0) scale(1.28); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes wwMeshBreathe {
  0%, 100% { opacity: .72; }
  50%      { opacity: 1; }
}

/* Off-screen: stop compositing it entirely. */
.ww-sc-mesh.is-paused,
.ww-sc-mesh.is-paused .ww-sc-mesh__blob { animation-play-state: paused; }

/* Motion is decoration here: hold the mesh still rather than hiding it, so a
   reader who asked for less movement still gets the same page, just calm. */
@media (prefers-reduced-motion: reduce) {
  .ww-sc-mesh, .ww-sc-mesh__blob { animation: none !important; }
  .ww-sc-mesh { opacity: .86; }
}

.ww-sc-flags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 10px; }
.ww-sc-title { font-family: var(--ww-font); font-weight: 800; color: var(--ww-ink);
  font-size: clamp(24px, 4vw, 38px); line-height: 1.14; letter-spacing: -.02em; margin: 0; }
.ww-sc-sub { color: var(--sr-brand-text, var(--ww-blue)); font-weight: 600; font-size: 15.5px; margin: 8px 0 0; }

/* ---- product stage ---- */
/* Height-capped, not a fixed square: the design fits product + tiles + buy bar
   in one viewport, and a 1:1 stage on a wide screen pushes the buy bar under
   the fold. clamp() keeps a portrait product readable on a laptop.
   Single image, so no slide/nav/dot chrome. */
.ww-sc-stage { position: relative; margin: 16px auto 4px; width: 100%; max-width: 560px;
  height: clamp(240px, 42vh, 400px); display: flex; align-items: center; justify-content: center; }
.ww-sc-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; filter: drop-shadow(0 26px 42px rgba(16, 24, 40, .30)); }
.ww-sc-ph { color: var(--ww-muted-2); }

/* ---- quantity fan ----
   Copies of the one pack shot, each further back and further left, so picking
   a bigger quantity visibly hands you more packs. --ww-fan is how many are
   showing (1-5, set by Alpine); --ww-i is a copy's index, 0 = the front one.

   The whole group shifts right by half the spread so the fan stays optically
   centred on the stage as it grows - without it, adding packs walks the
   product off to the left. Front copy keeps the drop shadow; the ones behind
   drop it, because five stacked shadows turn the fan into a grey block. */
/* A CONSTANT scale, not one that tracks the count.

   The room for five rotated copies has to come from somewhere - they are taller
   and wider than the single pack the stage was sized for, and at full size the
   fan pushed up into the title and down over the price. Taking it as a fixed
   0.78 means the packs are always the same size and only their arrangement
   changes.

   It used to scale with the count, and that read as a bug: picking a quantity
   zoomed the whole product out by 22% while each pack simultaneously slid and
   tilted, so the packs appeared to fly in from the bottom right rather than to
   fan out. Two motions with different origins, fighting. One pack size, moving
   apart, is the thing we actually wanted to show. */
.ww-sc-fan { position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  transform: scale(.78); }

/* Each copy is offset from the MIDDLE of the fan, not from the front pack:
   (--ww-i - (--ww-fan - 1) / 2). That keeps the group centred on the stage by
   construction at every quantity.

   Do not go back to offsetting from the front pack and re-centring the
   container. A translateX percentage resolves against the ELEMENT's own width,
   so a shift on .ww-sc-fan is a share of the stage while the copies' offsets
   are shares of the image - two different bases that cannot cancel, and the fan
   lands visibly right of centre. Offsetting every copy in the same unit is
   exact regardless of the image's aspect ratio.

   The ROTATION is centred on the same term, for the same reason: a pack leaning
   left throws its top-left corner outward, so a fan rotated only one way sits
   left of where its translations put it. Centring both keeps it honest, and it
   is what the fan is meant to look like anyway - the front pack tips slightly
   one way, the back pack the other, like a hand of cards. At a quantity of one
   the term is zero, so a single pack hangs straight. */
.ww-sc-fan__pk { position: absolute; top: 50%; left: 50%;
  transform-origin: 50% 92%;
  transform: translate(-50%, -50%)
             translateX(calc((var(--ww-i) - (var(--ww-fan, 1) - 1) / 2) * -11%))
             rotate(calc((var(--ww-i) - (var(--ww-fan, 1) - 1) / 2) * -5.5deg));
  z-index: calc(10 - var(--ww-i));
  /* Which copies are showing, in CSS, from the same variable that places them.
     (--ww-fan - --ww-i) is >= 1 for a copy inside the current quantity and <= 0
     for one past it, so the clamp is an on/off switch that needs no media query
     and no JS.

     This replaced x-show + x-transition on the copies. Alpine's transition sets
     an INLINE transform for the duration of the enter, which outranks the rule
     above and stripped the -50%/-50% centring off every newly shown pack for
     its first two frames - they appeared hanging off the middle of the stage,
     down and right, then jumped into the fan. Keeping opacity here means
     nothing ever writes to transform except this stylesheet, and the fade and
     the slide run as one transition. */
  opacity: clamp(0, calc(var(--ww-fan, 1) - var(--ww-i)), 1);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .2s linear; }
.ww-sc-fan__pk:not(:first-child) { filter: none; }

/* Exact count, since the fan stops being literal above five. */
.ww-sc-fan__x { position: absolute; right: 4px; bottom: 6px; z-index: 20;
  background: var(--ww-ink); color: #fff; font-weight: 800; font-size: 14px;
  letter-spacing: .01em; padding: 5px 12px; border-radius: var(--ww-r-pill);
  box-shadow: 0 6px 16px rgba(16, 24, 40, .28); }

@media (prefers-reduced-motion: reduce) {
  .ww-sc-fan__pk { transition: none; }
}

/* ---- buy panel ---- */
.ww-sc-panel { max-width: 560px; margin: 18px auto 0; text-align: left; }

/* The showcase design puts the entry tabs UNDER the buy bar; the shared entry
   partial emits them there for this layout (entryTabsBelow), so DOM order and
   visual order agree and the tab strip is reachable in the order it is read.
   Both routes keep identical tab sizing, so prominence stays equal. */
.ww-sc .ww-entry-tabs { margin-top: 14px; margin-bottom: 0; }
.ww-sc .ww-entry-pane--postal { padding-top: 16px; }

.ww-sc-price { display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin: 0 0 16px; text-align: center; }
.ww-sc-price__amt { display: inline-flex; align-items: baseline; gap: 10px; }
.ww-sc-price__amt s { color: var(--ww-muted-2); font-size: 17px; }
.ww-sc-price__amt b { color: var(--sr-brand-text, var(--ww-blue)); font-size: 32px; font-weight: 800; letter-spacing: -.02em; }
.ww-sc-price__lab { font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ww-muted); }

.ww-sc-buy { display: flex; flex-direction: column; gap: 12px; }

/* However many tiles there ARE, not however many presets exist. The panel
   filters presets down to what the competition can actually sell (remaining
   stock, per-customer cap), so the hardcoded six-column grid track this
   replaced left a dead cell on the right whenever one was filtered out - the
   tiles stopped short of the Buy now button beneath them.

   FLEX, not grid, and that is the whole point: a grid's last row has as many
   cells as the track declares, so on a phone a five-tile row still ended in a
   hole. Flex items on the final line just share what is left. The x-for
   <template> is display:none per the UA sheet, so it never becomes a flex item
   and never claims a slot of its own. */
.ww-sc-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.ww-sc-tile { position: relative; flex: 1 1 0; min-width: 0;
  border: 1px solid var(--ww-line); padding: 11px 4px; border-radius: var(--ww-r-sm);
  cursor: pointer; background: var(--ww-muted-bg); color: var(--ww-ink);
  font-family: var(--ww-font); font-weight: 700; font-size: 15px; line-height: 1;
  transition: border-color .14s, background .14s, box-shadow .14s; }
.ww-sc-tile:hover { border-color: var(--ww-line-hover); background: #fff; }
.ww-sc-tile.is-on { background: #fff; border-color: var(--ww-blue); color: var(--sr-brand-text, var(--ww-blue));
  box-shadow: 0 0 0 1px var(--ww-blue) inset; }

.ww-sc-cta { display: block; width: 100%; border: 1px solid transparent; cursor: pointer;
  border-radius: var(--ww-r-btn); background: var(--ww-blue); color: #fff; text-align: center;
  font-family: var(--ww-font); font-weight: 700; font-size: 16px; padding: 15px 20px;
  transition: background .16s, box-shadow .16s; }
.ww-sc-cta:hover:not(:disabled) { background: var(--ww-blue-600); box-shadow: var(--ww-sh-blue); }
.ww-sc-cta:disabled { opacity: .55; cursor: not-allowed; }
.ww-sc-cta__in { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
a.ww-sc-cta:hover { text-decoration: none; }
.ww-sc-cta--ghost { background: transparent; border-color: var(--ww-line); color: var(--ww-ink); }
.ww-sc-cta--ghost:hover { background: var(--ww-muted-bg); border-color: var(--ww-line-hover);
  box-shadow: none; }

.ww-sc-notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border-radius: var(--ww-r-md); background: var(--ww-blue-tint); color: var(--ww-ink-2);
  border: 1px solid rgba(28, 124, 229, .18); }
.ww-sc-notice--warn { background: var(--ww-gold-tint); border-color: rgba(224, 160, 25, .3); color: var(--ww-on-gold); }
.ww-sc-notice__t { font-weight: 700; font-size: 14px; margin: 0 0 2px; }
.ww-sc-notice__d { font-size: 13.5px; line-height: 1.5; margin: 0; }
.ww-sc-notice__cap { color: var(--ww-red-600); }

/* ---- seller-written entry note ---- */
.ww-sc-note { display: flex; align-items: center; justify-content: center; gap: 8px;
  max-width: 680px; margin: 18px auto 0; padding: 10px 18px; border-radius: var(--ww-r-pill);
  background: var(--ww-green-tint); color: #12693a; border: 1px solid rgba(22, 163, 74, .18);
  font-size: 13px; font-weight: 700; line-height: 1.45; text-align: center; }
.ww-sc-note svg { flex: none; color: var(--ww-green); }

/* Details tab with no description body: the spec panel takes the full width
   instead of leaving an empty first column. */
.ww-desc-grid--solo { grid-template-columns: minmax(0, 1fr); }

.ww-sc-trust { display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 20px auto 0; font-size: 12px; color: var(--ww-muted); }

/* Per-competition winners ticker, between the hero and the sections below it.
   The bar itself is .ww-ticker (shared with the store-wide announcement ticker);
   this wrapper only positions it, so the two stay identical in appearance. It
   sits full-bleed like the hero, not inside .ww-wrap. */
.ww-sc-winners { margin: 0 0 4px; }

@media (max-width: 640px) {
  .ww-sc-hero { padding-bottom: 28px; }
  /* The blobs are sized in %, so a phone needs proportionally less blur - and
     this is the most expensive paint on the page there. */
  .ww-sc-mesh { filter: blur(38px) saturate(1.08); }
  .ww-sc-stage { max-width: 420px; height: clamp(220px, 38vh, 320px); }
  /* Three to a row on a phone, from the BASIS rather than a column count: the
     leftovers on the last line then stretch to fill it instead of sitting in a
     third of the width with two empty cells beside them. Five tiles read as
     3 + 2, not 3 + 1 + hole. */
  .ww-sc-tile { flex-basis: calc(33.333% - 6px); }

  /* Tighter fan on a phone. The offsets are percentages so they shrink with the
     stage on their own, but .ww-sc-hero clips (overflow: hidden) and a phone has
     no empty hero either side to spill into - a wide product shot would lose its
     outermost packs off the screen edge. Less spread and a smaller constant
     scale keep all five inside 390px. */
  .ww-sc-fan { transform: scale(.70); }
  .ww-sc-fan__pk {
    transform: translate(-50%, -50%)
               translateX(calc((var(--ww-i) - (var(--ww-fan, 1) - 1) / 2) * -8%))
               rotate(calc((var(--ww-i) - (var(--ww-fan, 1) - 1) / 2) * -4deg));
  }
  .ww-sc-fan__x { right: 0; bottom: 2px; font-size: 13px; padding: 4px 10px; }
}

/* ---- "What's Inside This Pack" board (showcase instant-wins variant) ----
   The showcase layout's ONLY prize listing, so it carries the whole pool. It
   fills the page's content column (the section keeps .ww-wrap) rather than the
   viewport - `main` has no max-width, so escaping the wrapper made it wider
   than every other section on the page. */
.ww-pc { background: var(--ww-band); border-radius: var(--ww-r-card); padding: 22px 20px; }
.ww-pc__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.ww-pc__ico { display: flex; width: 28px; height: 28px; align-items: center; justify-content: center;
  border-radius: var(--ww-r-sm); background: var(--ww-band-2); color: var(--ww-gold); flex: none; }
.ww-pc__ico svg { width: 16px; height: 16px; }
/* Scoped, not bare: the platform block styles reach h2 through a .cms-block--…
   ancestor selector and would win, leaving a dark heading on the dark band. */
.ww-pc .ww-pc__title { font-family: var(--ww-font); font-weight: 800; font-size: 19px;
  color: var(--ww-on-band); margin: 0; }
.ww-pc__sub { font-size: 13px; color: var(--ww-on-band-mut); }

.ww-pc__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.ww-pc__card { background: var(--ww-band-2); border: 1px solid var(--ww-band-line);
  border-radius: var(--ww-r-sm); overflow: hidden; }
.ww-pc__card.is-sold { opacity: .45; }
.ww-pc__thumb { position: relative; aspect-ratio: 3 / 4; display: flex; align-items: center;
  justify-content: center; background: #fff; padding: 10px; }
.ww-pc__thumb .ww-pc__img, .ww-pc__thumb img { max-width: 100%; max-height: 100%; width: auto;
  height: auto; object-fit: contain; }
/* The thumb is a <button> when there's an image to zoom; strip the UA chrome so
   it draws identically to the plain <div> used when there isn't. Lightbox itself
   reuses .ww-iw-lightbox, shared with the standard grid. */
.ww-pc__thumb--zoom { width: 100%; border: 0; cursor: zoom-in; appearance: none; font: inherit; }
.ww-pc__zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(11, 13, 19, .35); color: #fff; opacity: 0; transition: opacity .15s ease; }
.ww-pc__zoom svg { width: 22px; height: 22px; }
.ww-pc__thumb--zoom:hover .ww-pc__zoom,
.ww-pc__thumb--zoom:focus-visible .ww-pc__zoom { opacity: 1; }
.ww-pc__ph { color: var(--ww-muted-2); }
.ww-pc__gone { position: absolute; inset: auto 0 0 0; background: rgba(11, 13, 19, .82); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  text-align: center; padding: 5px 0; }
.ww-pc__meta { padding: 10px 12px; }
.ww-pc__name { font-size: 12.5px; font-weight: 700; color: var(--ww-on-band); line-height: 1.35;
  margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.ww-pc__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ww-pc__grade { font-size: 11.5px; font-weight: 700; color: var(--ww-on-band-mut); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ww-pc__value { font-size: 13px; font-weight: 800; color: var(--ww-gold); flex: none; }
.ww-pc__alt { margin-top: 4px; font-size: 11px; line-height: 1.4; color: var(--ww-on-band-mut); }
.ww-pc__demo-wrap { margin-left: auto; }
.ww-pc__demo { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ww-band-line);
  background: var(--ww-band-2); color: var(--ww-on-band); border-radius: var(--ww-r-btn);
  padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ww-pc__demo:hover { background: #232733; }

@media (max-width: 1280px) { .ww-pc__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .ww-pc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .ww-pc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ww-pc { padding: 14px 12px; } }