/*
Theme Name: PrizePals
Template: storefront
Description: PrizePals competition platform, built on Storefront and WooCommerce, light theme with red and gold accents taken from the logo.
Version: 0.3.0
*/

:root {
  --pp-bg: #FFFFFF;
  /* Warm parchment rather than cool grey. The old #F6F6F7 read as "another
     white" next to #FFFFFF, which is why the site felt colourless. Tinted
     towards the logo's gold (hue ~44) and kept low in saturation, so the
     bands separate sections without reading as orange or yellow. */
  --pp-surface: #FBF8EF;
  --pp-surface-deep: #F5EDD6;
  --pp-ink: #14141A;
  --pp-ink-soft: #20202A;
  --pp-on-ink: #F3F3F5;
  --pp-on-ink-muted: #A9A9B4;
  --pp-card: #FFFFFF;
  /* Brand colours, sampled from the logo (red wordmark #EB0402, gold
     coins #F7AA05). The logo red is near neon at page scale, so fills and
     buttons use a slightly deeper red. White text measures 5.59:1 on
     --pp-red and 7.77:1 on --pp-red-dark. --pp-red-bright is the exact
     logo red, for thin accents only (the header rule). Gold is the
     secondary accent: badges with ink text (9.35:1) and states on the dark
     header and footer. Never gold text on white (1.96:1). */
  --pp-red: #D10A0A;
  --pp-red-dark: #A80808;
  --pp-red-bright: #EB0402;
  --pp-gold: #F7AA05;
  --pp-border: #EAEAEC;
  --pp-text: #17171A;
  --pp-text-muted: #6B6B70;
  --pp-radius-card: 16px;
  --pp-radius-pill: 999px;
  --pp-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

body {
  background: var(--pp-bg);
  color: var(--pp-text);
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, .site-title {
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

#page {
  background: var(--pp-bg);
}

.site-header,
.storefront-primary-navigation {
  background: var(--pp-ink);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: var(--pp-on-ink);
}

.storefront-primary-navigation {
  box-shadow: none;
}

.site-header {
  border-bottom: none;
}

.storefront-primary-navigation {
  border-bottom: 3px solid var(--pp-red-bright);
}

/* Colour comes from the storefront_header_link_color theme mod, see the
   dark header block below. Only the weight is ours. */
.main-navigation ul li a {
  font-weight: 500;
}



a {
  color: var(--pp-red);
}

a:hover {
  color: var(--pp-red-dark);
}

/* ---------- Hero ---------- */
/* ---------- Hero banner ----------
   One full width slide, image at 100% width and natural height, as on the
   reference site. No padding, no band and no overlay: the artwork carries
   the headline and the call to action itself. */
.pp-hero-banner {
  padding: 0;
  /* Break out of Storefront's content column at every width, so the image
     itself runs edge to edge as on the reference site. On desktop 100vw
     includes the scrollbar; #page clips that overhang (see below). */
  width: 100vw;
  max-width: none;
  margin: 0 calc(50% - 50vw);
  background: var(--pp-ink);   /* shows for a frame before the image paints */
  line-height: 0;
}
/* overflow-x: clip hides the ~15px scrollbar overhang of a 100vw child
   without turning #page into a scroll container (which `hidden` would). */
#page {
  overflow-x: clip;
}
.pp-hero-link {
  display: block;
}
.pp-hero-banner picture,
.pp-hero-banner img {
  display: block;
  width: 100%;
  height: auto;
}
.pp-hero-link:focus-visible {
  outline: 3px solid var(--pp-red);
  outline-offset: -3px;
}

/* ---------- Trust strip ---------- */
.pp-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px 24px;
  border-top: 1px solid var(--pp-border);
  border-bottom: 1px solid var(--pp-border);
}

.pp-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.pp-trust-num {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--pp-red);
}

.pp-trust-label {
  font-size: .82rem;
  color: var(--pp-text-muted);
  max-width: 22ch;
  line-height: 1.4;
}

.pp-trust-divider {
  width: 1px;
  height: 36px;
  background: var(--pp-border);
}

@media (max-width: 640px) {
  .pp-trust-strip { flex-direction: column; gap: 20px; }
  .pp-trust-divider { width: 60px; height: 1px; }
}

/* ---------- Games section ---------- */
.pp-games-section {
  padding: 56px 24px 64px;
  background: #fff;
  max-width: 1240px;
  margin: 0 auto;
}

.pp-section-title {
  text-align: center;
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--pp-text);
  margin: 0 0 36px;
}

.pp-game-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* Storefront/WooCommerce ship a legacy float grid (width:29.4%; float:left) on
   li.product. That width survives inside a CSS grid parent and squeezes every
   card down to a fraction of its real column, which is what was breaking the
   layout. Reset it explicitly so grid-template-columns is the only thing
   controlling card width. */
.pp-game-grid li.product,
.woocommerce ul.products.pp-game-grid li.product {
  width: auto !important;
  float: none !important;
  /* margin-right alone was not enough: the inherited 67.8px margin-bottom
     ADDS to the grid gap, which is why the homepage rows sat ~92px apart
     while the gap was set to 24px. The homepage grid is not inside a
     .woocommerce body class, so the generic reset does not reach it. */
  margin: 0 !important;
}

/* Storefront also puts a `:before`/`:after { content:""; display:table }`
   clearfix on ul.products for its float grid. Inside a CSS Grid container
   those pseudo-elements still generate real boxes and become anonymous
   grid items, occupying cell 1 and pushing every real card over by one
   slot (confirmed: forcing grid-column-start:1 on the first card put it
   back in column 1). Clearfix serves no purpose once floats are gone. */
.pp-game-grid::before,
.pp-game-grid::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 860px) {
  .pp-game-grid { grid-template-columns: 1fr 1fr; }
}

/* Two games per row on phones, at the client's request. The card is dense
   (tabs, four countdown columns, progress row, button), so at 2-up every
   piece of chrome steps down together rather than the layout being left
   to squash itself. Verified at 320, 360 and 412. Applies wherever the
   grid is used (homepage Live Games and the shop) so the two never
   disagree; the featured carousel is a different container and unchanged. */
@media (max-width: 560px) {
  .pp-game-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  /* A grid child defaults to min-width:auto and will refuse to shrink below
     its content, which is how a 4-column countdown forces the whole grid
     wider than the phone. */
  .pp-game-grid > li {
    min-width: 0;
  }
  .pp-game-grid .pp-game-body {
    padding: 10px 10px 12px;
  }
  .pp-game-grid .pp-game-tabs {
    gap: 6px;
  }
  .pp-game-grid .pp-game-type {
    font-size: .56rem;
    padding: 5px 8px;
    letter-spacing: .04em;
  }
  .pp-game-grid .pp-game-price {
    font-size: .8rem;
    padding: 5px 9px;
  }
  .pp-game-grid .pp-badge-instant {
    width: 44px;
    height: 44px;
    font-size: .46rem;
    top: 8px;
    right: 8px;
  }
  .pp-game-grid .pp-game-flag {
    font-size: .54rem;
    padding: 4px 9px;
    top: 8px;
  }
  .pp-game-grid .pp-countdown-sm {
    gap: 2px;
    margin-bottom: 10px;
  }
  .pp-game-grid .pp-countdown-sm .pp-cd-num {
    font-size: .88rem;
  }
  .pp-game-grid .pp-countdown-sm .pp-cd-label {
    font-size: .46rem;
    letter-spacing: .04em;
  }
  .pp-game-grid .pp-progress {
    height: 8px;
  }
  .pp-game-grid .pp-progress-knob {
    width: 16px;
    height: 16px;
    border-width: 3px;
  }
  .pp-game-grid .pp-progress-label {
    font-size: .64rem;
    margin-top: 9px;
  }
  .pp-game-grid .pp-enter-btn {
    padding: 11px 8px;
    font-size: .86rem;
  }
}

/* ---------------------------------------------------------------
   Game card

   Follows the reference the client supplied: artwork with a round instant
   win badge, a type tab and a price tab welded to the card edges, a bare
   countdown row, a thick progress bar with a knob, and a full width Enter
   button welded to the bottom. Used on the homepage grid, the featured
   carousel and the WooCommerce shop loop, so it is defined once here.
   --------------------------------------------------------------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.pp-game-card {
  background: var(--pp-card);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-card);
  padding: 0;
  /* Clipping is what gives the artwork its top corners and the Enter button
     its bottom ones, so nothing needs its own radius. */
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
  transition: box-shadow .2s var(--pp-ease), transform .2s var(--pp-ease);
}

.pp-game-card:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, .09);
  transform: translateY(-3px);
}

.pp-game-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.pp-game-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--pp-surface);
}

.pp-game-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pp-game-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--pp-red) 0%, var(--pp-red-dark) 100%);
  color: #fff;
  font-weight: 800;
  text-align: center;
  padding: 16px;
}

/* Round badge, top right, as in the reference. */
.pp-badge-instant {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 58px;
  height: 58px;
  border-radius: var(--pp-radius-pill);
  background: var(--pp-ink);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: .56rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.2;
  text-align: center;
}

/* Urgency pill. The reference straddles the card's top edge, but both the
   card and the carousel track clip (a track with overflow-x: auto cannot
   keep overflow-y visible), so it sits inside the artwork instead. */
.pp-game-flag {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: var(--pp-red-text);
  font-size: .66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 5px 14px;
  border-radius: var(--pp-radius-pill);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  white-space: nowrap;
}

/* Type and price tabs, flush to the card edges under the artwork. */
.pp-game-tabs {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 10px;
}

.pp-game-type,
.pp-game-price {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  padding: 7px 14px;
}

.pp-game-type {
  background: #fff;
  color: var(--pp-red-text);
  border-radius: 0 12px 12px 0;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.pp-game-price,
.pp-game-price * {
  color: var(--pp-ink);
}

.pp-game-price {
  background: var(--pp-gold);
  border-radius: 12px 0 0 12px;
  font-size: .95rem;
  white-space: nowrap;
}

.pp-game-body {
  padding: 14px 16px 16px;
}

.pp-progress {
  position: relative;
  background: var(--pp-surface-deep);
  border-radius: var(--pp-radius-pill);
  height: 10px;
  /* No overflow clipping here: the knob sits proud of the bar. */
}

.pp-progress-bar {
  background: var(--pp-red);
  height: 100%;
  border-radius: var(--pp-radius-pill);
}

.pp-progress-knob {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: var(--pp-radius-pill);
  background: #fff;
  border: 4px solid var(--pp-red);
  transform: translate(-50%, -50%);
  /* `left` is set inline and clamped so the knob stays inside the bar at
     both 0% and 100%. */
}

.pp-progress-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--pp-text-muted);
  margin: 12px 0 0;
}

.pp-enter-btn {
  display: block;
  text-align: center;
  background: var(--pp-red);
  color: #fff;
  font-weight: 800;
  padding: 14px;
  transition: background .18s var(--pp-ease);
}

.pp-game-card:hover .pp-enter-btn {
  background: var(--pp-red-dark);
}

.woocommerce ul.products li.product .price {
  color: var(--pp-red);
  font-weight: 700;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--pp-red);
  color: #fff;
  border-radius: var(--pp-radius-pill);
  font-weight: 700;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--pp-red-dark);
  color: #fff;
}

/* ---------------------------------------------------------------
   Footer. This is a DARK band: an ink links block above an ink-soft
   credit strip. It reads light at a glance because the brand tokens
   are warm, so check --pp-on-ink* before changing a colour here.

   `footer.site-footer` rather than `.site-footer` for the background:
   Storefront's own footer rules are type qualified and beat a bare
   class. See also the specificity block near the end of this file,
   which exists because Storefront styles footer links at (0,3,1).
   --------------------------------------------------------------- */
footer.site-footer {
  background: var(--pp-ink-soft);
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: var(--pp-on-ink-muted);
}

.site-footer a {
  color: var(--pp-on-ink);
}

.pp-footer-links {
  background: var(--pp-ink);
  border-top: 0;
  padding: 48px 24px 40px;
}

.pp-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  max-width: 1160px;
  margin: 0 auto;
}

.pp-footer-logo a {
  /* The logo is now wrapped in a home link. Left inline it sits on a text
     baseline and drops a few pixels of descender space under the image. */
  display: inline-block;
  line-height: 0;
}

.pp-footer-logo img,
.pp-footer-logo .custom-logo {
  max-width: 150px;
  height: auto;
  display: block;
  margin: 0 0 14px;
}

.pp-footer-wordmark {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 14px;
}

.pp-footer-blurb {
  font-size: .85rem;
  line-height: 1.6;
  color: var(--pp-on-ink-muted);
  margin: 0 0 16px;
  max-width: 38ch;
}

.pp-footer-age {
  font-size: .82rem;
  color: var(--pp-on-ink-muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pp-age-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--pp-gold);
  color: var(--pp-ink);
  font-weight: 800;
  font-size: .78rem;
  flex: 0 0 auto;
}

.pp-footer-heading {
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #fff;
  margin: 0 0 14px;
}

.pp-footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pp-footer-links a {
  color: var(--pp-on-ink);
  font-size: .87rem;
  text-decoration: none;
}

.pp-footer-links a:hover {
  color: var(--pp-gold);
}

@media (max-width: 900px) {
  .pp-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .pp-footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .pp-footer-links { padding: 36px 20px 28px; }
  .pp-footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .pp-footer-blurb { max-width: none; }
}

/* ---------------------------------------------------------------
   Featured competitions carousel

   The track is a native scroll-snap list: swipe, momentum and keyboard
   scrolling are the browser's, not ours. carousel.js only adds arrows,
   dots and autoplay, and sets `is-ready`, which is what reveals the
   controls. With JS off this stays a usable scrollable row.
   --------------------------------------------------------------- */
.pp-carousel {
  position: relative;
}

.pp-carousel-track {
  /* Slides snap to the track's centre, so the neighbours peek at both
     edges, and the side padding is what lets the first and last slide
     reach the centre.

     The width MUST be a length, not a percentage. A percentage flex-basis
     resolves against the content box, which this padding has already
     shrunk, so the two fed each other: at 1440px a nominal 30% slide came
     out 91px wide. One min() also removes the need for breakpoints, since
     the track's own width decides how many fit. */
  --pp-slide: min(300px, 78vw);
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 4px max(16px, calc(50% - var(--pp-slide) / 2)) 10px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pp-carousel-track::-webkit-scrollbar {
  display: none;
}

/* The padding stays the centring value at every width. An earlier version
   dropped it to 16px above 901px to kill the blank gutter before the first
   card, but that clamps scrolling at 0, which breaks the seamless loop: the
   fold lands outside the scrollable range and the strip visibly snaps. The
   gutter is instead solved in carousel.js, which starts in the middle of a
   tripled strip so there is always a card either side. */

/* WooCommerce ships `ul.products li.product { margin-bottom: 2.992em }` at
   (0,2,2), which beat a plain `.pp-carousel-track > li` and left 68px of
   dead space under the cards. The second selector is (0,3,1) so it wins
   outright rather than relying on source order. */
.pp-carousel-track > li,
.pp-carousel-track.products > li.product {
  flex: 0 0 var(--pp-slide);
  scroll-snap-align: center;
  margin: 0;
}

/* A slide scrolled out of the track is clipped by the scroll container, so
   the reveal observer never reports it as intersecting and it would sit at
   opacity 0 until the 3 second fallback in reveal.js. Inside the carousel
   the cards are always shown. */
.pp-carousel-track .pp-reveal {
  opacity: 1;
  transform: none;
}

.pp-carousel-nav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
}

.pp-carousel.is-ready .pp-carousel-nav {
  display: flex;
}

.pp-carousel-arrow {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--pp-radius-pill);
  background: var(--pp-red);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pp-carousel-arrow svg {
  width: 22px;
  height: 22px;
  display: block;
}

.pp-carousel-arrow:hover {
  background: var(--pp-red-dark);
}

.pp-carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* A flex item defaults to min-width:auto and will not shrink below its
     content, so ten 24px dots plus two 44px arrows (396px) pushed the row
     past a 360px screen. Let the dots take what is left between the arrows
     and wrap into a second row when that is not enough. */
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 2px;
}

/* The visible dot is 10px, but the button stays 24px so it is a real touch
   target. background-clip keeps the padding transparent. */
.pp-carousel-dot {
  width: 24px;
  height: 24px;
  padding: 7px;
  border: 0;
  border-radius: var(--pp-radius-pill);
  background: #C9C3BA;
  background-clip: content-box;
  cursor: pointer;
}

.pp-carousel-dot.is-active {
  background: var(--pp-red);
  background-clip: content-box;
}

.pp-view-more {
  display: block;
  width: max-content;
  margin: 22px auto 0;
  padding: 13px 34px;
  border-radius: var(--pp-radius-pill);
  background: var(--pp-red);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.pp-view-more:hover {
  background: var(--pp-red-dark);
  color: #fff;
}

.pp-carousel-track:focus-visible,
.pp-carousel-arrow:focus-visible,
.pp-carousel-dot:focus-visible,
.pp-view-more:focus-visible {
  outline: 2px solid var(--pp-ink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .pp-carousel-track { scroll-behavior: auto; }
}


/* ---------------------------------------------------------------
   Testimonials
   Sits in the Recent Winners slot for now. The content is placeholder
   until real quotes arrive, see front-page.php. No review schema is
   emitted for this section, and none should be added while it is.
   --------------------------------------------------------------- */
/* Reviews ride the same scroll-snap track as the games. Quotes need more
   room than a game card, so the slide is wider, and equal heights come from
   the flex track stretching every card to the tallest quote. */
.pp-testimonial-track {
  --pp-slide: min(360px, 84vw);
  align-items: stretch;
}

.pp-testimonial {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--pp-card);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-card);
  padding: 26px 22px 22px;
  margin: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

/* Opening quote mark as a quiet brand accent, decorative only. */
.pp-testimonial::before {
  content: "\201C";
  position: absolute;
  top: 6px;
  left: 18px;
  font-size: 3.4rem;
  line-height: 1;
  font-weight: 800;
  color: var(--pp-red);
  opacity: .35;
}

.pp-testimonial-quote {
  position: relative;
  flex: 1 1 auto;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  font-size: .98rem;
  line-height: 1.6;
  color: var(--pp-text);
  font-style: normal;
}

.pp-testimonial-by {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 14px;
  border-top: 1px solid var(--pp-border);
}

.pp-testimonial-name {
  font-weight: 800;
  font-size: .9rem;
  color: var(--pp-text);
}

.pp-testimonial-detail {
  font-size: .8rem;
  color: var(--pp-text-muted);
}


/* Storefront gives .site-main a 2.6em bottom margin on every page. On the
   homepage the last section is a full bleed cream band, so that margin
   showed as a 42px white strip between the band and the dark footer. Other
   pages end on white and keep the default. */
.pp-home .site-main {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------
   Slide-in basket
   Right hand drawer, matching the reference site. Sits above the mobile
   menu drawer (10000) so the two can never interleave.
   --------------------------------------------------------------- */
.pp-basket-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .28s ease;
  z-index: 10010;
}
.pp-basket-backdrop.is-open { opacity: 1; }

.pp-basket {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  /* Leaves a strip of the page visible behind it on a phone, so it reads as
     a panel over the site rather than a new full screen page. */
  width: min(420px, 88vw);
  background: #fff;
  color: var(--pp-text);
  z-index: 10011;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .28s var(--pp-ease), visibility .28s;
  box-shadow: -12px 0 40px rgba(0, 0, 0, .18);
}
.pp-basket.is-open {
  transform: translateX(0);
  visibility: visible;
}
body.pp-basket-open { overflow: hidden; }

.pp-basket-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--pp-border);
}
.pp-basket-head h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
}
/* Storefront's generic button padding (36px each side) was beating the width
   here and stretching the circle into a 72x44 pill, the same way it did to
   the menu drawer's close button. Zero the padding and size it explicitly. */
.pp-basket-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--pp-radius-pill);
  background: var(--pp-surface);
  color: var(--pp-text);
  font-size: 1.5rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pp-basket-close:hover { background: var(--pp-surface-deep); }

.pp-basket-notices { padding: 0 20px; }
.pp-basket-notice {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: .86rem;
  background: var(--pp-surface);
  color: var(--pp-text);
  border-left: 4px solid var(--pp-red);
}
.pp-basket-notice-error {
  border-left-color: #B3261E;
  background: #FCEBEA;
}

.pp-basket-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 20px 20px;
}
.pp-basket-empty {
  margin: 40px 0;
  text-align: center;
  color: var(--pp-text-muted);
}
.pp-basket-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pp-basket-item {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  padding: 16px 32px 16px 0;
  border-bottom: 1px solid var(--pp-border);
}
.pp-basket-thumb img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.pp-basket-info { min-width: 0; }
.pp-basket-name {
  display: block;
  font-weight: 800;
  color: var(--pp-text);
  text-decoration: none;
  font-size: .95rem;
}
.pp-basket-meta {
  font-size: .78rem;
  color: var(--pp-text-muted);
  margin: 2px 0 8px;
}
.pp-basket-meta dl,
.pp-basket-meta dt,
.pp-basket-meta dd { margin: 0; padding: 0; display: inline; }
.pp-basket-meta dt { font-weight: 600; }
.pp-basket-meta dd::after { content: " "; }
.pp-basket-meta p { display: inline; margin: 0; }
.pp-basket-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pp-basket-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-pill);
}
.pp-basket-step {
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  color: var(--pp-text);
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  border-radius: var(--pp-radius-pill);
}
.pp-basket-step:hover { background: var(--pp-surface); }
.pp-basket-num {
  min-width: 28px;
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pp-basket-line {
  font-weight: 800;
  color: var(--pp-red-text);
}
.pp-basket-remove {
  position: absolute;
  top: 12px;
  right: 0;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  color: var(--pp-text-muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--pp-radius-pill);
}
.pp-basket-remove:hover { color: var(--pp-text); background: var(--pp-surface); }

.pp-basket-foot {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--pp-border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: #fff;
}
.pp-basket-subtotal {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  font-size: .95rem;
  margin-bottom: 4px;
}
.pp-basket-subtotal strong { font-weight: 800; }
.pp-basket-btn {
  display: block;
  text-align: center;
  padding: 13px 10px;
  border-radius: var(--pp-radius-pill);
  font-weight: 800;
  text-decoration: none;
  font-size: .95rem;
}
.pp-basket-btn-primary {
  background: var(--pp-red);
  color: #fff;
}
.pp-basket-btn-primary:hover { background: var(--pp-red-dark); color: #fff; }
.pp-basket-btn-secondary {
  background: var(--pp-surface);
  color: var(--pp-text);
  border: 1px solid var(--pp-border);
}
.pp-basket-btn-secondary:hover { background: var(--pp-surface-deep); color: var(--pp-text); }

.pp-basket :focus-visible,
.pp-basket-btn:focus-visible {
  outline: 2px solid var(--pp-ink);
  outline-offset: 2px;
}

/* The product page button while the request is in flight. */
.single_add_to_cart_button.is-busy {
  opacity: .6;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .pp-basket,
  .pp-basket-backdrop { transition: none; }
}

/* Order review table on a phone.
   Storefront's 22.65px cell padding left the product cell only ~111px of
   content width at 393px, so "Double Dabble x 1" broke onto two lines and
   every row was 71px tall for one line of text. */
@media (max-width: 560px) {
  .woocommerce-checkout-review-order-table th,
  .woocommerce-checkout-review-order-table td {
    padding: 14px 12px;
  }
  .woocommerce-checkout-review-order-table .product-name {
    line-height: 1.4;
  }
  /* Keep the quantity with the name it belongs to. */
  .woocommerce-checkout-review-order-table .product-quantity {
    white-space: nowrap;
  }
}

/* ---------- Scroll reveal ---------- */
.pp-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s var(--pp-ease), transform .5s var(--pp-ease);
}

.pp-reveal.pp-revealed {
  opacity: 1;
  transform: translateY(0);
}

.pp-game-grid .pp-reveal:nth-child(2) { transition-delay: .05s; }
.pp-game-grid .pp-reveal:nth-child(3) { transition-delay: .1s; }
.pp-game-grid .pp-reveal:nth-child(4) { transition-delay: .15s; }
.pp-game-grid .pp-reveal:nth-child(5) { transition-delay: .2s; }
.pp-game-grid .pp-reveal:nth-child(6) { transition-delay: .25s; }

@media (prefers-reduced-motion: reduce) {
  .pp-reveal,
  .pp-game-card {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ---------------------------------------------------------------
   Customer dashboard tables
   A 4 or 5 column table cannot survive a 375px screen. Below the
   tablet breakpoint each row becomes a card and every cell carries
   its own label, so nothing is clipped and nothing needs sideways
   scrolling to read.
   --------------------------------------------------------------- */
.pp-result-won {
  color: var(--pp-win-green);
}

@media (max-width: 768px) {
  .pp-ticket-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .pp-ticket-table,
  .pp-ticket-table tbody,
  .pp-ticket-table tr,
  .pp-ticket-table td {
    display: block;
    width: 100%;
  }
  .pp-ticket-table tr {
    border: 1px solid var(--pp-border, #EAEAEC);
    border-radius: 12px;
    padding: 4px 0;
    margin-bottom: 14px;
    background: #fff;
  }
  .pp-ticket-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    text-align: right;
    border: 0;
    padding: 10px 16px;
  }
  .pp-ticket-table td + td {
    border-top: 1px solid var(--pp-border, #EAEAEC);
  }
  .pp-ticket-table td::before {
    content: attr(data-label);
    font-weight: 700;
    text-align: left;
    color: var(--pp-text-muted, #6B6B70);
    flex: 0 0 auto;
  }
}

/* ---------------------------------------------------------------
   Per competition skill question, sits above Add To Basket
   --------------------------------------------------------------- */
.pp-skill-question {
  border: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 0 0 24px;
  background: var(--pp-surface);
}
.pp-skill-question h3 {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.pp-skill-q {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 14px;
}
.pp-skill-options {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pp-skill-options li {
  margin: 0;
  flex: 1 1 auto;
}
.pp-skill-options label {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 999px;
  padding: 12px 20px;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  min-height: 48px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pp-skill-options label:hover {
  border-color: var(--pp-red, #D10A0A);
}
.pp-skill-options input:checked + span {
  color: var(--pp-red, #D10A0A);
}
.pp-skill-options label:has(input:checked) {
  border-color: var(--pp-red, #D10A0A);
  box-shadow: 0 0 0 2px rgba(209, 10, 10, .18);
}
.pp-skill-options input[type="radio"] {
  accent-color: var(--pp-red, #D10A0A);
  width: 18px;
  height: 18px;
  margin: 0;
}
.pp-skill-note {
  font-size: 0.8rem;
  color: var(--pp-text-muted, #6B6B70);
  margin: 0;
}
@media (max-width: 480px) {
  .pp-skill-options { flex-direction: column; }
  .pp-skill-options li { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------
   Competition stat strip, draw date and countdown
   --------------------------------------------------------------- */
.pp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}
.pp-stat {
  flex: 1 1 100px;
  border: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 12px;
  padding: 10px 14px;
  text-align: center;
  background: var(--pp-surface);
}
.pp-stat-num {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--pp-red, #D10A0A);
  line-height: 1.2;
}
.pp-stat-label {
  display: block;
  font-size: 0.72rem;
  color: var(--pp-text-muted, #6B6B70);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pp-draw-date {
  margin: 0 0 18px;
  font-size: 0.9rem;
}
.pp-draw-label {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--pp-text-muted, #6B6B70);
}
.pp-draw-done {
  font-weight: 700;
}
.pp-countdown {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.pp-cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 54px;
  border: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 10px;
  padding: 8px 6px;
  background: var(--pp-surface);
}
.pp-cd-num {
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.pp-cd-label {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted, #6B6B70);
}
.pp-cd-live {
  font-weight: 800;
  color: var(--pp-red, #D10A0A);
}

/* ---------------------------------------------------------------
   Mobile header

   Storefront splits the header into two separate .col-full wrappers,
   branding in one and nav + cart in the other, so they always stack as
   two rows. It also hides the cart on mobile on the assumption its fixed
   handheld footer bar carries the basket, and that bar is now removed,
   which would leave the basket unreachable on a phone.

   Flatten the header into a single row: logo left, basket and menu right,
   with the opened menu dropping full width underneath.
   --------------------------------------------------------------- */
@media (max-width: 767px) {
  .site-header {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* Row 1 wrapper: just the logo. */
  .site-header > .col-full {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    margin: 0;
    padding-right: 8px;
  }
  .site-branding {
    margin: 0;
    padding: 0;
    float: none;
    width: auto;
    min-width: 0;
  }
  .site-branding .custom-logo-link,
  .site-branding img.custom-logo {
    display: block;
    max-width: 124px;
    width: 124px;
    height: auto;
    margin: 0;
  }
  .site-header .site-search {
    display: none;
  }

  /* Row 2 wrapper: pulled onto the same line, holds basket + menu button. */
  .storefront-primary-navigation {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 0;
    background: transparent;
  }
  .storefront-primary-navigation > .col-full {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    width: auto;
  }
  .main-navigation {
    margin: 0;
    width: auto;
    float: none;
  }
  .site-header .menu-toggle {
    margin: 0;
    padding: 10px 14px;
    width: auto;
    min-height: 44px;
    font-size: 0.85rem;
    border-radius: 999px;
  }

  /* Basket back in the header, link only, never the dropdown panel. */
  .site-header .site-header-cart {
    display: block !important;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .site-header .site-header-cart li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .site-header .site-header-cart .cart-contents {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .22);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .site-header .site-header-cart .widget_shopping_cart {
    display: none;
  }

  /* Menu is an off canvas drawer sliding in from the left. It stays in the
     DOM and is moved off screen with transform, so the slide can animate;
     visibility keeps it out of the tab order while closed. */
  .main-navigation .primary-navigation { display: none; }
  .handheld-navigation {
    display: block;
    max-height: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 84vw);
    background: var(--pp-ink);
    z-index: 10000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .28s ease, visibility .28s;
    box-shadow: 0 0 40px rgba(0, 0, 0, .18);
    padding: 0 0 24px;
  }
  .handheld-navigation.is-open {
    transform: translateX(0);
    visibility: visible;
  }
  .handheld-navigation ul.menu {
    background: transparent;
    margin: 0;
    padding: 0 20px;
  }
  .handheld-navigation ul.menu li {
    border-bottom: 1px solid rgba(255, 255, 255, .10);
  }
  .handheld-navigation ul.menu li:last-child {
    border-bottom: none;
  }
  .handheld-navigation ul.menu a {
    display: block;
    padding: 15px 4px;
    font-weight: 600;
  }

  .pp-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px 12px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    margin-bottom: 6px;
  }
  .pp-drawer-logo {
    display: block;
    line-height: 0;
  }
  .pp-drawer-logo img {
    width: 120px;
    height: auto;
    display: block;
  }
  /* Storefront's generic button padding was inflating this into a wide pill;
     zeroing it and sizing it explicitly gives the 44px circle intended. */
  .pp-drawer-close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
    color: var(--pp-on-ink);
    font-size: 1.5rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .pp-drawer-close:hover,
  .pp-drawer-close:focus-visible {
    background: rgba(255, 255, 255, .18);
    color: var(--pp-gold);
  }

  .pp-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
    z-index: 9999;
  }
  .pp-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  /* Stop the page scrolling behind the open drawer. */
  body.pp-drawer-open {
    overflow: hidden;
  }
}

/* ---------------------------------------------------------------
   Footer credit
   The three parts are separate spans, so without layout they run into
   one another and read as a single sentence ("Privacy Policy PrizePals
   competitions are games of skill"). Give each its own line.
   --------------------------------------------------------------- */
.pp-site-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--pp-on-ink-muted);
  line-height: 1.5;
}
.pp-site-info .pp-credit-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 18px;
}
.pp-site-info .pp-credit-links a {
  color: var(--pp-on-ink);
  text-decoration: underline;
  padding: 4px 0;
}
.pp-site-info .pp-credit-links a:hover {
  color: var(--pp-gold, #F7AA05);
}
.pp-site-info .pp-credit-note {
  font-size: 0.78rem;
  max-width: 44ch;
}

/* The header's own .col-full loses its gutter once it is flexed, which
   puts the logo hard against the screen edge. */
@media (max-width: 767px) {
  .site-header > .col-full {
    padding-left: 16px;
  }
  .storefront-primary-navigation > .col-full {
    padding-right: 16px;
  }
}

/* ---------------------------------------------------------------
   Draw countdown on the game cards
   --------------------------------------------------------------- */
.pp-card-draw {
  margin: 0 0 12px;
}
.pp-card-draw-label {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pp-text-muted, #6B6B70);
  margin-bottom: 5px;
}
.pp-card-drawn {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pp-text-muted, #6B6B70);
}
.pp-countdown-sm {
  display: flex;
  gap: 4px;
  margin: 0 0 14px;
}
/* The reference prints the countdown as bare numbers with a small label,
   not as bordered tiles, so the shared .pp-cd-unit chrome is stripped back
   here. The product page keeps the tiles. */
.pp-countdown-sm .pp-cd-unit {
  min-width: 0;
  flex: 1 1 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
}
.pp-countdown-sm .pp-cd-num {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--pp-text);
}
.pp-countdown-sm .pp-cd-label {
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pp-text-muted);
}

/* ---------------------------------------------------------------
   Desktop header
   Storefront stacks an oversized logo row above the nav row, burning
   roughly 260px before any content appears. Tighten both rows and pull
   the search box onto the logo's baseline.
   --------------------------------------------------------------- */
@media (min-width: 768px) {
  .site-header {
    padding-top: 20px;
    padding-bottom: 0;
  }
  .site-header > .col-full {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .site-branding {
    margin: 0;
    padding: 0;
    width: auto;
  }
  .site-branding img.custom-logo {
    max-width: 170px;
    height: auto;
    display: block;
  }
  .site-header .site-search {
    margin: 0;
    width: auto;
    min-width: 260px;
    float: none;
  }
  .storefront-primary-navigation {
    margin-top: 8px;
  }
  .storefront-primary-navigation > .col-full {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .main-navigation {
    width: auto;
    float: none;
    margin: 0;
  }
  .site-header .site-header-cart {
    width: auto;
    margin: 0;
    float: none;
  }
}

/* ---------------------------------------------------------------
   My Account
   WooCommerce ships these screens unstyled, so they were bare forms
   with square grey inputs while the rest of the site uses rounded
   cards and pill buttons. Bring them onto the same design language.
   --------------------------------------------------------------- */
.woocommerce-account .woocommerce {
  max-width: 1100px;
  margin: 0 auto;
}

/* Login / register side by side, each in its own card. */
.woocommerce-account .u-column1.col-1,
.woocommerce-account .u-column2.col-2,
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  background: #fff;
  border: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 16px;
  padding: 28px;
}
.woocommerce-account .u-column1.col-1 .woocommerce-form-login,
.woocommerce-account .u-column2.col-2 .woocommerce-form-register {
  border: 0;
  padding: 0;
  background: transparent;
}
.woocommerce-account .u-columns > .col-1,
.woocommerce-account .u-columns > .col-2 {
  box-sizing: border-box;
}
/* Scoped to the account content, not the body class. As
   `.woocommerce-account h2` this also matched the footer headings, which
   live outside the account region, so footer headings rendered at 22px on
   account pages and 12px everywhere else. */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .u-column1 h2,
.woocommerce-account .u-column2 h2,
.woocommerce-account .woocommerce-form-login h2,
.woocommerce-account .woocommerce-form-register h2 {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 0 18px;
}

/* Inputs: rounded, consistent, with a red focus ring. */
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="date"],
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
/* Selects were missing from this list, so the Country dropdown on checkout
   kept the browser default height: 24px next to 52px inputs. */
.woocommerce-account select,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-container .select2-selection--single {
  border: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 10px;
  background: #fff;
  padding: 12px 14px;
  min-height: 46px;
  box-shadow: none;
}
/* A native select needs its own arrow once appearance is removed. */
.woocommerce-account select,
.woocommerce form .form-row select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317171A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
}
.woocommerce-account input:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-account select:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--pp-red, #D10A0A);
  box-shadow: 0 0 0 3px rgba(209, 10, 10, .16);
  outline: none;
}

/* Checkout labels had no gap to their field, unlike the account pages. */
.woocommerce form .form-row label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}
.woocommerce-account label {
  font-weight: 600;
  margin-bottom: 6px;
  display: inline-block;
}

/* Buttons match the site's pill CTAs. */
.woocommerce-account .woocommerce-button,
.woocommerce-account button.button,
.woocommerce-account input.button,
.woocommerce-account .button {
  background: var(--pp-red, #D10A0A);
  color: #fff;
  font-weight: 700;
  border: 0;
  border-radius: 999px;
  padding: 13px 30px;
  min-height: 46px;
  box-shadow: 0 6px 16px rgba(209, 10, 10, .24);
  transition: transform .15s ease, box-shadow .15s ease;
}
.woocommerce-account .woocommerce-button:hover,
.woocommerce-account button.button:hover,
.woocommerce-account input.button:hover,
.woocommerce-account .button:hover {
  background: var(--pp-red-dark, #A80808);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(209, 10, 10, .3);
}

/* Account navigation as a clean card list rather than loose links. */
.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 26%;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
  border-bottom: 1px solid var(--pp-border, #EAEAEC);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
  border-bottom: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 14px 18px;
  font-weight: 600;
  color: var(--pp-text, #17171A);
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--pp-surface, #FBF8EF);
  color: var(--pp-red-dark, #A80808);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--pp-red, #D10A0A);
  color: #fff;
}
.woocommerce-account .woocommerce-MyAccount-content {
  width: 70%;
}
.woocommerce-account .woocommerce-MyAccount-content h3 {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 14px;
}

@media (max-width: 767px) {
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;
    float: none;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation {
    margin-bottom: 24px;
  }
  .woocommerce-account .u-column1.col-1,
  .woocommerce-account .u-column2.col-2 {
    width: 100%;
    float: none;
    margin-bottom: 20px;
    padding: 22px;
  }
}

/* WooCommerce renders the remember-me checkbox and the Log in button as
   inline siblings, so they collide on one line. Stack them. */
.woocommerce-account .woocommerce-form-login__rememberme {
  display: block;
  margin: 0 0 16px;
  font-weight: 500;
}
.woocommerce-account .woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register button.woocommerce-form-register__submit {
  display: block;
  float: none;
  margin: 0 0 14px;
}
.woocommerce-account .woocommerce-LostPassword {
  margin: 0;
}

/* WooCommerce lays the account screen out with floats, which drops the
   content well below the nav card here. Use flex so the two columns
   actually sit side by side and share a top edge. */
@media (min-width: 768px) {
  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content {
    float: none;
  }
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    display: flex;
    align-items: flex-start;
    gap: 32px;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation {
    flex: 0 0 26%;
    width: 26%;
  }
  .woocommerce-account .woocommerce-MyAccount-content {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
}

/* ---------------------------------------------------------------
   Header details that only show up on a real handset
   --------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Storefront draws the hamburger as an absolutely positioned ::before
     at left:13.6px inside the button. Without room reserved for it, the
     icon sits on top of the word "Menu". */
  .site-header .menu-toggle {
    padding-left: 40px;
    padding-right: 16px;
    position: relative;
  }
  /* The basket link is two spans separated only by a whitespace text node,
     which flex collapses, rendering "£0.000 items". */
  .site-header .site-header-cart .cart-contents {
    gap: 6px;
  }
}

/* The red rule is a bottom border on .storefront-primary-navigation.
   That element is shrunk to the width of the basket+menu cluster on mobile,
   so the line only spanned the right hand portion of the screen. Move it
   onto the header, which is full width. */
@media (max-width: 767px) {
  .storefront-primary-navigation {
    border-bottom: 0 !important;
  }
  .site-header {
    border-bottom: 3px solid var(--pp-red-bright, #EB0402);
  }
}

/* ---------------------------------------------------------------
   Dark header

   The header is ink, matching the footer, so the page is bookended
   rather than fading out at both ends. The wordmark here is the white
   tagline variant; the black tagline one stays in the
   `prizepals_logo_on_light` option for email, where the card is white.

   The bar itself, the nav links, the menu toggle and its three
   hamburger bars all come from Storefront's own customizer output,
   driven by three theme mods so the parent theme stays the single
   source of truth:

     storefront_header_background_color  #14141A
     storefront_header_link_color        #F3F3F5
     storefront_header_text_color        #A9A9B4

   Everything below is only what those three do not reach.
   --------------------------------------------------------------- */

/* Storefront derives hover and "you are here" as link colour + 65
   brightness, which clamps to #ffffff against our near white links, so
   the current page became indistinguishable. Logo gold reads as a state
   and measures 9.35:1 on ink (the red is only 3.3, too dark for text). Its rule is `.site-header ul.menu
   li.current-menu-item > a` at (0,3,3), so this has to go higher. */
.site-header .main-navigation ul.menu li.current-menu-item > a,
.site-header .main-navigation ul.menu li.current_page_item > a {
  color: var(--pp-gold);
}

/* The nav row is a sibling of .site-header, so the background mod above
   does not reach it. */
.storefront-primary-navigation {
  background: var(--pp-ink);
}

/* Product search. A light input on an ink bar looks bolted on, and the
   placeholder needs its own colour or it inherits an unreadable grey. */
.site-header .search-field {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--pp-on-ink);
}
.site-header .search-field::placeholder {
  color: var(--pp-on-ink-muted);
  opacity: 1;
}
.site-header .search-field:focus {
  background: rgba(255, 255, 255, .10);
  border-color: var(--pp-gold);
}
.site-header .woocommerce-product-search button[type="submit"] {
  background: var(--pp-red);
  color: #fff;
  border: 0;
}
.site-header .woocommerce-product-search button[type="submit"]:hover {
  background: var(--pp-red-dark);
  color: #fff;
}

/* The basket. Its colour comes from Storefront's `ul.menu li a` rule; the
   pill border lives in the max-width:767px block with the rest of the pill,
   because on desktop the basket is a plain link and a border there drew a
   stray rectangle round the price. */
.site-header .site-header-cart .cart-contents:hover {
  color: var(--pp-gold);
}

/* A focus ring has to be visible against ink, not against white. */
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-header input:focus-visible {
  outline: 2px solid var(--pp-gold);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Cookie notice
   Accept and Reject are deliberately the same size, weight and
   colour. The ICO expects rejecting to be as easy as accepting, so
   no "Accept" primary button with a faint text link beside it.
   --------------------------------------------------------------- */
.pp-cookie-notice {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  max-width: 660px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .16);
  padding: 20px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}
.pp-cookie-body {
  flex: 1 1 300px;
  min-width: 0;
}
.pp-cookie-title {
  font-weight: 800;
  font-size: .95rem;
  margin: 0 0 6px;
}
.pp-cookie-text {
  font-size: .82rem;
  line-height: 1.55;
  color: var(--pp-text-muted, #6B6B70);
  margin: 0 0 6px;
}
.pp-cookie-link {
  font-size: .8rem;
  color: var(--pp-red-dark, #A80808);
  text-decoration: underline;
}
.pp-cookie-actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}
.pp-cookie-btn {
  font-family: inherit;
  font-weight: 700;
  font-size: .84rem;
  border-radius: 999px;
  padding: 12px 18px;
  min-height: 46px;
  cursor: pointer;
  border: 1px solid var(--pp-text, #17171A);
  background: #fff;
  color: var(--pp-text, #17171A);
  transition: background .15s ease, color .15s ease;
}
.pp-cookie-btn:hover {
  background: var(--pp-text, #17171A);
  color: #fff;
}
@media (max-width: 560px) {
  .pp-cookie-actions { width: 100%; }
  .pp-cookie-btn { flex: 1 1 0; padding: 12px 10px; }
}

.pp-cookie-prefs {
  text-align: center;
  margin: 12px 0 0;
}
.pp-cookie-prefs-btn {
  background: none;
  border: 0;
  padding: 6px 4px;
  font-family: inherit;
  font-size: .8rem;
  color: var(--pp-on-ink-muted);
  text-decoration: underline;
  cursor: pointer;
}
.pp-cookie-prefs-btn:hover {
  color: var(--pp-gold, #F7AA05);
}

/* ---------------------------------------------------------------
   Product page: quantity, tabs, notices
   --------------------------------------------------------------- */

/* The quantity box was a square grey field sitting next to a rounded
   red pill, which looked like two different design systems. */
.woocommerce div.product form.cart .quantity {
  margin-right: 12px;
}
.woocommerce div.product form.cart .quantity input.qty,
.woocommerce .quantity input.qty {
  border: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 999px;
  background: #fff;
  min-height: 46px;
  height: 46px;
  width: 74px;
  text-align: center;
  font-weight: 700;
  box-shadow: none;
}
.woocommerce div.product form.cart .quantity input.qty:focus {
  border-color: var(--pp-red, #D10A0A);
  box-shadow: 0 0 0 3px rgba(209, 10, 10, .16);
  outline: none;
}
.woocommerce div.product form.cart {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.woocommerce div.product form.cart .button {
  border-radius: 999px;
  min-height: 46px;
  padding: 12px 28px;
  font-weight: 700;
}

/* Storefront's tab strip uses heavy dark rules that read as a stray
   coloured line on a phone. Quieter border, red active tab. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--pp-border, #EAEAEC);
  padding: 0;
  margin: 0 0 20px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border: 0;
  background: transparent;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin: 0 18px 0 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  padding: 12px 2px;
  font-weight: 700;
  color: var(--pp-text-muted, #6B6B70);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--pp-red, #D10A0A);
  background: transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--pp-text, #17171A);
}
/* The tab is already labelled "Description", so the panel's own
   "Description" heading is the same word twice in a row. */
.woocommerce div.product .woocommerce-Tabs-panel > h2:first-child {
  display: none;
}

/* Notices in the site's own language rather than WooCommerce defaults. */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  border-radius: 14px;
  border: 1px solid var(--pp-border, #EAEAEC);
  border-top: 0;
  padding: 16px 18px 16px 52px;
  font-size: .9rem;
  line-height: 1.5;
}
.woocommerce-message {
  background: #F1FAF3;
  border-color: #BFE6C8;
}
.woocommerce-error {
  background: #FDF1EE;
  border-color: #F3C9BC;
  color: #8A2F14;
}
.woocommerce-info {
  background: var(--pp-surface, #FBF8EF);
  border-color: #EADFC2;
}

/* "Have a coupon?" is an offer, not a problem. It was carrying the amber
   notice treatment and the same (!) glyph as a real error, which on a
   checkout is the wrong signal entirely. Dropping the icon and the height
   is enough; the cream stays, because the block further down forces notice
   backgrounds with !important and that rule is the fix for the invisible
   white-on-near-white notices that once hid the payment methods warning.
   Not worth weakening a safety net for a shade. */
.woocommerce-form-coupon-toggle .woocommerce-info {
  padding: 12px 16px;
  font-size: .86rem;
}
.woocommerce-form-coupon-toggle .woocommerce-info::before {
  content: none;
}
.woocommerce-form-coupon-toggle .woocommerce-info a {
  color: var(--pp-red-text);
  font-weight: 700;
}

/* ---------------------------------------------------------------
   Trust strip was very tall on a phone, each item separated by a
   full divider. Tighten it into a compact three across row.
   --------------------------------------------------------------- */
@media (max-width: 640px) {
  .pp-trust-strip {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 20px 14px;
    align-items: stretch;
  }
  .pp-trust-item {
    flex: 1 1 0;
    min-width: 0;
    gap: 2px;
  }
  .pp-trust-num {
    font-size: 1.1rem;
  }
  .pp-trust-label {
    font-size: .68rem;
    max-width: none;
  }
  .pp-trust-divider {
    width: 1px;
    height: auto;
    align-self: stretch;
    background: var(--pp-border, #EAEAEC);
  }
}

/* Quantity and Add to cart must be the same height or the pair looks
   misaligned. Storefront's button padding made it 50px against 46px. */
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart button.single_add_to_cart_button {
  height: 46px;
  min-height: 46px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------
   Focus rings
   Storefront focuses form controls with a 2px solid #7F54B3 outline,
   its stock purple accent. On the skill question that paints a purple
   square around the round radio, inside a pill that is already
   highlighted red, so the option reads as double selected.

   The outline is removed only on the skill radios, where the pill
   itself carries the focus indication, and recoloured to the brand
   everywhere else. Focus stays visible for keyboard users either way.
   --------------------------------------------------------------- */
.pp-skill-options input[type="radio"]:focus,
.pp-skill-options input[type="radio"]:focus-visible {
  outline: none;
}
/* :focus-within rather than :has(:focus-visible), which did not apply here
   and left keyboard focus with no visible indicator at all. */
.pp-skill-options label:focus-within {
  border-color: var(--pp-red, #D10A0A);
  box-shadow: 0 0 0 3px rgba(209, 10, 10, .35);
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline-color: var(--pp-red, #D10A0A);
}

/* Storefront paints a 2px solid #7F54B3 outline on :focus, so tapping any
   link or button (the Description tab being the obvious one) leaves a purple
   box behind. A tap is :focus but not :focus-visible, which is why only
   recolouring :focus-visible earlier did not catch it.

   Standard accessible pattern: no ring for pointer focus, red ring for
   keyboard focus. Focus is never removed outright. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus:not(:focus-visible) {
  outline: none;
}

a:focus-visible,
button:focus-visible,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus-visible {
  outline: 2px solid var(--pp-red, #D10A0A);
  outline-offset: 2px;
}

/* Storefront also targets `.button.alt:focus` with the purple outline colour.
   WooCommerce puts `alt` on the primary buttons (Add to cart, Place order),
   and `.button.alt:focus` (0,3,0) outranks `button:focus-visible` (0,1,1),
   so those kept their purple ring after the generic fix. Match the class
   pattern so the specificity actually wins. */
button.button.alt:focus:not(:focus-visible),
a.button.alt:focus:not(:focus-visible),
input.button.alt:focus:not(:focus-visible),
.woocommerce button.button.alt:focus:not(:focus-visible),
.woocommerce a.button.alt:focus:not(:focus-visible),
.woocommerce input.button.alt:focus:not(:focus-visible) {
  outline: none;
}

button.button.alt:focus-visible,
a.button.alt:focus-visible,
input.button.alt:focus-visible,
.woocommerce button.button.alt:focus-visible,
.woocommerce a.button.alt:focus-visible,
.woocommerce input.button.alt:focus-visible {
  outline: 2px solid var(--pp-red, #D10A0A);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------
   Mobile header, centred logo
   Requested layout: menu left, logo centred, basket right.

   Storefront nests the basket and the menu button inside
   .storefront-primary-navigation > .col-full, a sibling of the
   branding wrapper, so the three cannot be ordered against each
   other directly. `display: contents` dissolves those two wrappers
   so nav and basket become direct flex children of the header and
   can be ordered around the logo. Giving the two side slots an equal
   flex basis is what actually keeps the logo centred, rather than
   absolute positioning, which would overlap on a 320px screen.
   --------------------------------------------------------------- */
@media (max-width: 767px) {
  .site-header .storefront-primary-navigation,
  .site-header .storefront-primary-navigation > .col-full {
    display: contents;
  }

  .site-header > .col-full {
    order: 2;
    flex: 0 0 auto;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }

  .site-header .main-navigation {
    order: 1;
    flex: 1 1 0;
    display: flex;
    justify-content: flex-start;
    padding-left: 14px;
  }

  .site-header .site-header-cart {
    order: 3;
    flex: 1 1 0;
    display: flex !important;
    justify-content: flex-end;
    padding-right: 14px;
  }

  /* A compact basket keeps both side slots narrow enough for the logo
     to stay centred at 320px. */
  .site-header .site-header-cart .cart-contents {
    padding: 0 12px;
    font-size: .78rem;
  }
  .site-header .site-header-cart .cart-contents .amount {
    display: none;
  }
  .site-header .site-header-cart .cart-contents:hover {
    border-color: var(--pp-gold);
  }
}

/* The drawer is a mobile pattern only; above the breakpoint the normal
   horizontal nav is used and none of the drawer chrome should exist. */
@media (min-width: 768px) {
  .pp-drawer-close,
  .pp-drawer-backdrop {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .handheld-navigation,
  .pp-drawer-backdrop {
    transition: none !important;
  }
}


/* The drawer panel now lives on <body>, so it must be explicitly hidden
   above the mobile breakpoint where the horizontal nav is used instead. */
@media (min-width: 768px) {
  .handheld-navigation {
    display: none !important;
  }
}

/* Relocating the panel to <body> took it out of scope of Storefront's
   `.main-navigation ul` reset, so the menu rendered with default bullets
   and indent. Reset explicitly now that it stands alone. */
.handheld-navigation ul,
.handheld-navigation ul.menu,
.handheld-navigation ul.menu li {
  list-style: none !important;
  margin-left: 0;
  padding-left: 0;
}
.handheld-navigation ul.menu {
  padding: 0 20px;
}
.handheld-navigation ul.menu li::marker {
  content: none;
}

/* ---------------------------------------------------------------
   Mobile type scale and top spacing

   Storefront ships a desktop type scale that it does not step down for
   small screens, so every h1 rendered at ~42px on a 412px handset. It
   also puts 16px padding plus ~26px margin under .storefront-breadcrumb,
   which is 42px of dead space between the breadcrumb and the content on
   every page.
   --------------------------------------------------------------- */
@media (max-width: 767px) {
  h1,
  .entry-title,
  .woocommerce div.product .product_title,
  .woocommerce-products-header__title,
  .page-title {
    font-size: clamp(1.5rem, 6.4vw, 1.95rem);
    line-height: 1.2;
    margin-bottom: 12px;
  }

  h2 {
    font-size: clamp(1.25rem, 5.2vw, 1.55rem);
    line-height: 1.25;
  }

  h3 {
    font-size: clamp(1.05rem, 4.4vw, 1.25rem);
    line-height: 1.3;
  }

  .storefront-breadcrumb {
    padding-top: 10px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    font-size: .82rem;
  }

  /* Notices were inheriting generous desktop margins on top of that. */
  .woocommerce-error,
  .woocommerce-info,
  .woocommerce-message {
    margin-top: 0;
    margin-bottom: 16px;
  }

  /* The gallery sat a full line-height away from the summary. */
  .woocommerce div.product .woocommerce-product-gallery {
    margin-bottom: 20px;
  }
  .woocommerce div.product .summary {
    margin-bottom: 20px;
  }
  .woocommerce div.product .summary .price {
    margin-top: 10px;
    margin-bottom: 16px;
  }
}

/* ---------------------------------------------------------------
   Product loops everywhere, not just the homepage grid

   The shop archive and the related products loop were still on
   Storefront's default block layout while the homepage used our grid,
   so card spacing differed between pages. Worse, `li.product` carries
   a 67.8px margin-bottom which, inside a grid, ADDS to the gap, so the
   homepage rows were ~92px apart instead of 24px.

   Apply the same grid to every ul.products and let the gap be the only
   thing spacing the cards.
   --------------------------------------------------------------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
}

/* Storefront's float-grid clearfix generates anonymous grid items that
   push every card over one slot. Suppress it on every product loop, not
   only the homepage one. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 860px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

@media (max-width: 560px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Keep the homepage grid gap in step with the shop grid on small screens. */
@media (max-width: 860px) {
  .pp-game-grid { gap: 16px; }
}

/* ---------------------------------------------------------------
   Notice contrast

   Storefront styles notices as white text on a dark/coloured bar. The
   earlier restyle changed the backgrounds to light brand tints but left
   Storefront's white text in place, giving white on #F6F6F7 at a 1.08
   contrast ratio, i.e. invisible. That hid the coupon toggle and, worse,
   the "no available payment methods" warning on checkout.

   Set text colour explicitly alongside every background, including the
   links inside notices, and use selectors specific enough to win.
   --------------------------------------------------------------- */
.woocommerce .woocommerce-info,
.woocommerce-page .woocommerce-info,
.woocommerce-info {
  background: #FBF8EF !important;
  border-color: #EADFC2 !important;
  color: #4A3D14 !important;
}

.woocommerce .woocommerce-message,
.woocommerce-page .woocommerce-message,
.woocommerce-message {
  background: #F1FAF3 !important;
  border-color: #BFE6C8 !important;
  color: #14532D !important;
}

.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-error,
.woocommerce-error {
  background: #FDF1EE !important;
  border-color: #F3C9BC !important;
  color: #7A2A12 !important;
}

.woocommerce-info a,
.woocommerce-message a,
.woocommerce-error a,
.woocommerce-info .showcoupon,
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
  color: inherit !important;
}

.woocommerce-info a,
.woocommerce-message a,
.woocommerce-error a {
  text-decoration: underline;
  font-weight: 700;
}

/* ---------------------------------------------------------------
   Accessible link colour

   Small text links (dashboard body links, "Add Billing address",
   "Browse products") use a deeper red than the button fill so they keep
   a comfortable margin over 4.5:1 on every light background the site
   uses: #B00A0A is 7.26 on white, 6.83 on the parchment surface and
   6.21 on the deeper surface. (This block dates from the orange accent,
   which only managed 2.35:1 as text.)
   --------------------------------------------------------------- */
:root {
  /* Must pass on BOTH white and the parchment surface, see above. */
  --pp-red-text: #B00A0A;
  --pp-win-green: #177535;   /* 5.78:1 on white */
}

.woocommerce-MyAccount-content a:not(.button):not(.pp-enter-btn),
.woocommerce-account .woocommerce-MyAccount-content a:not(.button),
.entry-content a:not(.button),
.woocommerce-address-fields a:not(.button),
.woocommerce-MyAccount-navigation li a {
  color: var(--pp-red-text);
}
/* Footer links stay muted grey. #6B6B70 on white is 5.3:1, which already
   passes, so recolouring them in the brand colour was unnecessary and
   turned the footer into a wall of colour. */

.woocommerce-MyAccount-navigation li a {
  color: var(--pp-text, #17171A);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  color: #fff;
}

/* Hover states need to pass contrast too: #B00A0A is 6.83:1 on the
   parchment hover background. */
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li a:focus {
  color: #B00A0A; /* 6.83:1 on the parchment hover background */
}

/* Buttons inside notices were inheriting the notice's text colour via the
   `color: inherit` rule. Buttons are white on red (5.59:1). */
.woocommerce-info a.button,
.woocommerce-message a.button,
.woocommerce-error a.button,
.woocommerce-info .button,
.woocommerce-message .button,
.woocommerce-error .button {
  color: #fff !important;
}

/* WooCommerce prints the sorting dropdown and the "Showing all N results"
   count both above AND below the loop. On a phone, with the whole shop
   being one column, that duplicate pair below the last card is just noise.
   Keep the pair at the top where it is actually useful. */
@media (max-width: 767px) {
  /* Both copies live in a .storefront-sorting wrapper; the second one is
     the sibling that follows ul.products. */
  .site-main ul.products ~ .storefront-sorting {
    display: none;
  }
}

/* ---------------------------------------------------------------
   Basket pill icon

   The Menu pill is an icon plus a label (Storefront draws the burger as
   a ::before), while the basket pill was text only, so the two sat next
   to each other reading differently. Give the basket a matching icon.
   Inline SVG rather than an icon font so it does not depend on
   Storefront's font loading.
   --------------------------------------------------------------- */
@media (max-width: 767px) {
  .site-header .site-header-cart .cart-contents::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3F3F5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8h15l-1.15 10.7a2 2 0 0 1-2 1.8H7.65a2 2 0 0 1-2-1.8L4.5 8z'/%3E%3Cpath d='M8.75 8V6.25a3.25 3.25 0 0 1 6.5 0V8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
}

/* ---------------------------------------------------------------
   Very narrow phones (<=380px)

   Menu pill (93px) + logo (124px) + basket pill (92px) + gutters is
   337px, which does not fit a 320px screen, so the logo ran into the
   basket and clipped it. Shrink all three on the narrowest tier.
   --------------------------------------------------------------- */
@media (max-width: 380px) {
  .site-branding .custom-logo-link,
  .site-branding img.custom-logo {
    max-width: 100px;
    width: 100px;
  }
  .site-header > .col-full { padding-left: 10px; }
  .storefront-primary-navigation > .col-full { padding-right: 10px; }
  .site-header .main-navigation { padding-left: 10px; }
  .site-header .site-header-cart { padding-right: 10px; }

  .site-header .menu-toggle {
    padding-left: 34px;
    padding-right: 10px;
    font-size: .78rem;
  }
  .site-header .site-header-cart .cart-contents {
    padding: 0 9px;
    gap: 5px;
    font-size: .72rem;
  }
  .site-header .site-header-cart .cart-contents::before {
    width: 16px;
    height: 16px;
  }
}

/* ---------------------------------------------------------------
   Footer credit block

   The credit sat inside ~153px of stacked vertical padding on mobile
   (footer 25.9 top / 59.3 bottom, plus 34.3 top and bottom on the
   credit itself) for three short lines of text.
   --------------------------------------------------------------- */
@media (max-width: 767px) {
  footer.site-footer {
    padding-top: 18px;
    padding-bottom: 22px;
  }
  .pp-site-info {
    padding-top: 14px;
    padding-bottom: 6px;
    gap: 8px;
  }
  .pp-cookie-prefs {
    margin-top: 4px;
  }
  .pp-footer-links {
    padding-bottom: 20px;
  }
}

/* ---------------------------------------------------------------
   Trust strip, mobile presentation

   Three bare values separated by hairlines read as sparse on a phone.
   Give each one a soft card so the row looks deliberate, and drop the
   dividers which are redundant once the cards have edges.
   --------------------------------------------------------------- */
@media (max-width: 640px) {
  .pp-trust-strip {
    gap: 8px;
    padding: 18px 14px;
    border-top: 1px solid var(--pp-border, #EAEAEC);
    border-bottom: 1px solid var(--pp-border, #EAEAEC);
  }
  .pp-trust-divider {
    display: none;
  }
  .pp-trust-item {
    background: var(--pp-surface, #FBF8EF);
    border: 1px solid var(--pp-border, #EAEAEC);
    border-radius: 12px;
    padding: 10px 6px;
    justify-content: center;
  }
  .pp-trust-num {
    font-size: 1.05rem;
    line-height: 1.1;
  }
  .pp-trust-label {
    font-size: .66rem;
    line-height: 1.3;
  }
}

/* ---------------------------------------------------------------
   Homepage sections: Ending Soon, How It Works, Recent Winners
   --------------------------------------------------------------- */
.pp-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 44px 24px;
}

.pp-section-head {
  text-align: center;
  margin-bottom: 28px;
}

.pp-section-sub {
  color: var(--pp-text-muted, #6B6B70);
  margin: 8px auto 0;
  max-width: 56ch;
  font-size: .95rem;
  line-height: 1.55;
}

.pp-section-cta {
  text-align: center;
  margin: 24px 0 0;
}

.pp-link-btn {
  display: inline-block;
  border: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 999px;
  padding: 12px 26px;
  font-weight: 700;
  text-decoration: none;
  color: var(--pp-text, #17171A);
  min-height: 46px;
  line-height: 22px;
}
.pp-link-btn:hover {
  border-color: var(--pp-red, #D10A0A);
  color: var(--pp-red-dark, #A80808);
}

/* How it works */
.pp-how {
  background: var(--pp-surface, #FBF8EF);
  max-width: none;
}
.pp-steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.pp-step {
  background: #fff;
  border: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 16px;
  padding: 24px 22px;
  margin: 0;
}
.pp-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--pp-gold, #F7AA05);
  color: #17171A;
  font-weight: 800;
  margin-bottom: 12px;
}
.pp-step-title {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 6px;
}
.pp-step p {
  margin: 0;
  color: var(--pp-text-muted, #6B6B70);
  font-size: .9rem;
  line-height: 1.55;
}
.pp-how-note {
  text-align: center;
  margin: 24px 0 0;
  font-size: .9rem;
  color: var(--pp-text-muted, #6B6B70);
}
.pp-how-note a {
  color: var(--pp-red-text, #B00A0A);
  font-weight: 700;
}

.pp-recent-winners .pp-winners-archive {
  max-width: 900px;
  margin: 0 auto;
}

@media (max-width: 860px) {
  .pp-steps { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 767px) {
  .pp-section { padding: 30px 16px; }
  .pp-section-head { margin-bottom: 18px; }
  .pp-section-sub { font-size: .88rem; }
  .pp-step { padding: 18px 16px; }
  .pp-step-num { width: 32px; height: 32px; margin-bottom: 10px; }
}

/* ---------------------------------------------------------------
   Colour pass

   The site was white on white: #FFFFFF page, #F6F6F7 "surface", with
   the brand colour only as an accent. Bands of warm parchment now separate the
   sections, and the footer becomes a dark anchor so the page has a
   bottom edge instead of fading out.
   --------------------------------------------------------------- */

/* Alternating bands: cream, white, cream. */
.pp-featured {
  background: var(--pp-surface);
  max-width: none;
}
.pp-featured .pp-game-grid {
  max-width: 1200px;
  margin-inline: auto;
}
.pp-recent-winners,
.pp-testimonials {
  background: var(--pp-surface);
  max-width: none;
}

/* Trust strip sits between hero and the first cream band, so keep it
   white with cream cards for separation. */
.pp-trust-strip {
  background: #fff;
}

/* ---- Product page warmth --------------------------------------- */
.pp-skill-question {
  border-color: var(--pp-surface-deep);
  border-left: 4px solid var(--pp-red);
}
.pp-stat {
  border-color: var(--pp-surface-deep);
}
.pp-cd-unit {
  border-color: var(--pp-surface-deep);
}
.pp-card-draw .pp-cd-unit {
  background: var(--pp-surface);
}

/* Storefront styles footer links with `.site-footer a:not(.button):not(
   .components-button)`, which is specificity (0,3,1) thanks to the two
   :not() classes and beat the earlier (0,2,1) rule. On the new dark
   footer that left #333 text on a #20202A background at 1.28:1, i.e.
   invisible. Match the specificity so the light colour actually applies. */
.site-footer .pp-site-info .pp-credit-links a:not(.button),
footer.site-footer .pp-site-info .pp-credit-links a:not(.button) {
  color: var(--pp-on-ink);
}
.site-footer .pp-site-info .pp-credit-links a:not(.button):hover,
footer.site-footer .pp-site-info .pp-credit-links a:not(.button):hover {
  color: var(--pp-gold);
}
.site-footer .pp-site-info,
.site-footer .pp-site-info .pp-credit-note,
footer.site-footer .pp-site-info span {
  color: var(--pp-on-ink-muted);
}
.site-footer .pp-cookie-prefs-btn,
footer.site-footer .pp-cookie-prefs-btn {
  color: var(--pp-on-ink-muted);
}
.site-footer .pp-cookie-prefs-btn:hover,
footer.site-footer .pp-cookie-prefs-btn:hover {
  color: var(--pp-gold);
}

/* The big display numerals ("6", "Free", "Fair", "5,000") are
   16.8-18.4px bold, under the 18.66px WCAG large-text threshold, so they
   need the full 4.5 on the parchment cards. The text red gives 6.83. */
.pp-trust-num,
.pp-stat-num {
  color: var(--pp-red-text);
}

/* ---------------------------------------------------------------
   Mobile section spacing and full-bleed bands

   Two Storefront defaults were fighting the new design:
   - .site-header carries margin-bottom: 67.8px, which left a dead white
     band between the header rule and the hero with nothing in it.
   - .site-content > .col-full has a 22.65px side margin, so every
     coloured band stopped short of the screen edges and read as a
     floating panel rather than a band.

   The gutter is kept for text, but the coloured sections break out of
   it. 100vw is safe here because this only applies below 768px, where
   there is no desktop scrollbar to make 100vw wider than the viewport.
   --------------------------------------------------------------- */
@media (max-width: 767px) {
  .site-header {
    margin-bottom: 0;
  }

  .pp-hero,
  .pp-trust-strip,
  .pp-featured,
  .pp-how,
  .pp-games-section,
  .pp-recent-winners,
  .pp-testimonials {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
  }

  /* Now that the bands are edge to edge, they own their own gutter. */
  .pp-games-section {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .pp-trust-strip {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Storefront adds an extra 4.2358em below the header specifically on the
   home page via `.home.page:not(.page-template-template-homepage)
   .site-header`, specificity (0,4,0). A media query adds no specificity,
   so the plain `.site-header` override above never won. Match the
   selector so the dead band under the header actually collapses. */
/* Not inside a media query: the hero is now a full bleed image at every
   width, so on desktop that band showed as a white strip between the red
   header rule and the artwork. It was only ever invisible before because
   the old hero had a cream background of its own. */
.home.page:not(.page-template-template-homepage) .site-header {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------
   Section headings on mobile

   .pp-section-title was rendering at 30.4px, LARGER than the page h1
   at 26px, which inverts the hierarchy, and it inherited Storefront's
   36px heading margin so a 44px hole opened between the heading and
   its own subtitle.
   --------------------------------------------------------------- */
@media (max-width: 767px) {
  .pp-section-title {
    font-size: clamp(1.3rem, 5.6vw, 1.5rem);
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 8px;
  }
  .pp-section-sub {
    margin-top: 0;
  }
  .pp-section-head {
    margin-bottom: 16px;
  }
  .pp-section {
    padding-top: 26px;
    padding-bottom: 26px;
  }
}

/* ---------------------------------------------------------------
   Shop archive

   The sorting control was a bare native <select> next to plain text,
   which did not match the pill-and-card language used everywhere else,
   and the two stacked blocks ate 68px before a single game appeared.
   --------------------------------------------------------------- */
.woocommerce-products-header {
  text-align: center;
}
.pp-shop-sub {
  text-align: center;
  margin: 0 auto 4px;
}

.storefront-sorting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.woocommerce .woocommerce-result-count {
  margin: 0;
  font-size: .85rem;
  color: var(--pp-text-muted, #6B6B70);
}
.woocommerce .woocommerce-ordering {
  margin: 0;
}
.woocommerce .woocommerce-ordering select.orderby {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 999px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317171A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding: 10px 38px 10px 16px;
  min-height: 44px;
  font-weight: 600;
  font-size: .85rem;
  color: var(--pp-text, #17171A);
  cursor: pointer;
}
.woocommerce .woocommerce-ordering select.orderby:focus {
  border-color: var(--pp-red, #D10A0A);
  box-shadow: 0 0 0 3px rgba(209, 10, 10, .16);
  outline: none;
}

@media (max-width: 767px) {
  .woocommerce-products-header {
    margin-bottom: 8px;
  }
  /* Keep the sort control on one line with the count beside it. Stacking
     them full width made the block taller (82px) than the unstyled
     original (68px), which defeated the point. */
  .storefront-sorting {
    margin-bottom: 16px !important;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .woocommerce .woocommerce-ordering select.orderby {
    min-height: 42px;
    padding: 8px 34px 8px 14px;
    font-size: .8rem;
  }
  .woocommerce .woocommerce-result-count {
    font-size: .78rem;
    white-space: nowrap;
  }
  .pp-shop-sub {
    font-size: .85rem;
    line-height: 1.45;
    margin-bottom: 2px;
  }
}

/* At 320px "Showing all N results" plus the sort control cannot share a
   line, and the nowrap count pushed past the viewport. The count is the
   less useful of the two, so it goes on the narrowest tier. */
@media (max-width: 380px) {
  .woocommerce .woocommerce-result-count {
    display: none;
  }
  .woocommerce .woocommerce-ordering,
  .woocommerce .woocommerce-ordering select.orderby {
    width: 100%;
  }
}

/* ---------------------------------------------------------------
   Full-bleed colour bands on desktop

   The coloured sections sit inside .col-full, which is capped at
   1064px, so on a wide screen the cream stopped short and each band
   read as an inset panel with white strips either side, while the dark
   footer (outside that container) ran edge to edge. Inconsistent.

   Uses box-shadow + clip-path rather than the 100vw trick used on
   mobile: it paints the colour beyond the element without adding any
   layout width, so it cannot produce horizontal overflow from the
   desktop scrollbar. clip-path trims the shadow vertically so it only
   spreads sideways.
   --------------------------------------------------------------- */
@media (min-width: 768px) {
  .pp-featured,
  .pp-recent-winners,
  .pp-testimonials {
    box-shadow: 0 0 0 100vmax var(--pp-surface);
    clip-path: inset(0 -100vmax);
  }
  .pp-how {
    box-shadow: 0 0 0 100vmax var(--pp-surface);
    clip-path: inset(0 -100vmax);
  }
  .pp-games-section,
  .pp-trust-strip {
    box-shadow: 0 0 0 100vmax #fff;
    clip-path: inset(0 -100vmax);
  }
}

/* Statutory company line under the copyright. Full width so it never sits
   inline with the copyright on a wide footer, and quiet, it is a legal
   disclosure not a message. */
.pp-footer-company {
	display: block;
	width: 100%;
	margin-top: 6px;
	font-size: 0.8em;
	opacity: 0.75;
}

/* Free postal entry box on competition pages. Quiet but clearly there:
   a soft panel, readable body text, the address set apart. */
.pp-free-entry {
	margin: 20px 0 8px;
	padding: 14px 16px;
	border: 1px solid rgba(20, 20, 26, .12);
	border-radius: 12px;
	background: #FAF8F5;
	color: #2A2A33;
	font-size: .9rem;
	line-height: 1.5;
}
.pp-free-entry p { margin: 0 0 8px; }
.pp-free-entry p:last-child { margin-bottom: 0; }
.pp-free-entry-title { font-weight: 700; color: #14141A; }
.pp-free-entry-address { font-weight: 600; color: #14141A; }
.pp-free-entry a { color: #14141A; text-decoration: underline; }

/* Opening hours banner for time limited competitions (Night Owl). */
.pp-open-hours {
	margin: 16px 0 4px;
	padding: 10px 14px;
	border-radius: 12px;
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.45;
	color: #14141A;
}
.pp-open-hours.is-open { background: #E8F6EC; border: 1px solid #BFE3C9; }
.pp-open-hours.is-closed { background: #FBF8EF; border: 1px solid #EADFC2; }

/* Policy tables stack into one card per row on phones. Three or four
   columns of prose cannot fit at 360px, and #page clips overflow, so a
   wide table is cut off rather than scrollable. */
.pp-stack-table td:first-child { word-break: break-word; }
@media (max-width: 600px) {
	.pp-stack-table thead { display: none; }
	.pp-stack-table, .pp-stack-table tbody, .pp-stack-table tr, .pp-stack-table td { display: block; width: 100%; }
	.pp-stack-table tr { padding: 12px 0; border-bottom: 1px solid rgba(20, 20, 26, .12); }
	.pp-stack-table td { padding: 2px 0; border: 0; background: none; }
	.pp-stack-table td::before {
		content: attr(data-label);
		display: block;
		font-size: .78em;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .03em;
		color: #5A5A66;
	}
}

/* Online Entry / Free Postal Entry tabs beside the ticket selector. Until
   entry-tabs.js marks the bar ready it stays hidden, so with JavaScript off
   the page simply shows both routes in turn. */
.pp-entry-tabs { display: none; }
.pp-entry-tabs.is-ready {
	display: flex;
	gap: 6px;
	margin: 18px 0 14px;
	padding: 4px;
	border-radius: 999px;
	background: #F1EEE9;
}
.pp-entry-tab {
	flex: 1 1 0;
	min-height: 44px;
	padding: 8px 12px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #2A2A33;
	font-weight: 700;
	font-size: .92rem;
	line-height: 1.2;
	cursor: pointer;
}
.pp-entry-tab.is-active { background: #14141A; color: #FFFFFF; }
.pp-entry-tab:focus-visible { outline: 2px solid var(--pp-red, #D10A0A); outline-offset: 2px; }
.pp-free-entry ul { margin: 0 0 10px 1.1em; padding: 0; }
.pp-free-entry li { margin: 0 0 4px; }

/* The add to basket form carries its own display value, which beats the
   browser's [hidden] rule, so the tabs could not hide it. */
.summary [hidden] { display: none !important; }

/* Prize list on competition pages: main draw prizes, then the instant win
   grid with each winning ticket number, like the operators it is modelled
   on. Open prizes are bright, won ones step back and show the winner. */
.pp-prizes { margin: 32px 0 8px; }
.pp-prizes-title { font-size: 1.35rem; margin: 0 0 8px; }
.pp-prizes-note { color: #55555F; font-size: .92rem; line-height: 1.5; margin: 0 0 14px; max-width: 760px; }
.pp-draw-prizes { margin-bottom: 28px; }
.pp-draw-list { margin: 0 0 8px 1.2em; padding: 0; font-weight: 600; }
.pp-draw-list li { margin: 0 0 4px; }
.pp-instant-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 10px;
}
.pp-instant-card {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 14px 10px;
	border-radius: 12px;
	background: #F6F4F1;
	border: 1px solid rgba(20, 20, 26, .08);
	text-align: center;
}
.pp-instant-status {
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #14141A;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pp-instant-prize { font-size: 1.05rem; font-weight: 700; color: #14141A; }
.pp-instant-ticket {
	display: inline-block;
	min-width: 84px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--pp-gold, #F7AA05);
	color: #17171A;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.pp-instant-card.is-won { background: #EFEFF2; }
.pp-instant-card.is-won .pp-instant-ticket { background: #C9C9D1; color: #2A2A33; }
@media (max-width: 480px) {
	.pp-instant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* WooCommerce prints the product image at opacity:0 and relies on its
   wc-single-product script to fade it in. The theme dequeues that script
   (no zoom, lightbox or slider), so the image downloaded but never showed.
   !important is needed to beat the inline style attribute. */
.woocommerce div.product .woocommerce-product-gallery {
	opacity: 1 !important;
}

/* ---------------------------------------------------------------
   Ticket picker (competition page)
   [number] [-] [slider with "25 tickets · £5.00" bubble] [+]
   then a full width Add to basket and the sold bar under it.
   --p (0 to 1) is set inline by PHP and kept current by
   ticket-picker.js; it drives the track fill and the bubble.
   --------------------------------------------------------------- */
.woocommerce div.product form.cart .pp-picker-title,
.woocommerce div.product form.cart .pp-picker,
.woocommerce div.product form.cart .pp-sold,
.woocommerce div.product form.cart .pp-skill-question {
  flex: 0 0 100%;
}
.pp-picker-title {
  margin: 18px 0 0;
  font-size: 1.05rem;
}
.pp-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 14px;
}
.woocommerce div.product form.cart .pp-picker .quantity {
  flex: 0 0 76px;
  margin: 0;
}
.woocommerce div.product form.cart .pp-picker .quantity input.qty {
  width: 100%;
  height: 48px;
  min-height: 48px;
  border: 2px solid var(--pp-red, #D10A0A);
  border-radius: 12px;
  font-size: 1.1rem;
  color: var(--pp-ink, #14141A);
  -moz-appearance: textfield;
}
.pp-picker .quantity input.qty::-webkit-outer-spin-button,
.pp-picker .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pp-picker-btn {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pp-red, #D10A0A);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.pp-picker-btn:hover { background: var(--pp-red-dark, #A80808); }
.pp-picker-btn:focus-visible { outline: 3px solid rgba(209, 10, 10, .35); outline-offset: 2px; }

.pp-picker-slider {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding: 40px 0 20px;
}
/* Bubble follows the thumb but never leaves the slider: it is anchored on
   the thumb centre and shifted left by its own width times --p, so it is
   left aligned at the start, centred mid way and right aligned at the end. */
.pp-picker-bubble {
  position: absolute;
  top: 0;
  left: calc(14px + (100% - 28px) * var(--p, 0));
  transform: translateX(calc(var(--p, 0) * -100%));
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--pp-ink, #14141A);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}
.pp-picker-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: clamp(10px, calc(var(--p, 0) * 100%), calc(100% - 10px));
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--pp-ink, #14141A);
}
.pp-picker-min,
.pp-picker-max {
  position: absolute;
  bottom: 0;
  font-size: .75rem;
  color: var(--pp-text-muted, #6B6B70);
}
.pp-picker-min { left: 8px; }
.pp-picker-max { right: 0; }

.pp-picker-range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.pp-picker-range::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--pp-red, #D10A0A) calc(var(--p, 0) * 100%), var(--pp-surface-deep, #F5EDD6) calc(var(--p, 0) * 100%));
}
.pp-picker-range::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  background: var(--pp-surface-deep, #F5EDD6);
}
.pp-picker-range::-moz-range-progress {
  height: 10px;
  border-radius: 999px;
  background: var(--pp-red, #D10A0A);
}
.pp-picker-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -9px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid var(--pp-red, #D10A0A);
  box-shadow: 0 2px 6px rgba(20, 20, 26, .25);
}
.pp-picker-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid var(--pp-red, #D10A0A);
  box-shadow: 0 2px 6px rgba(20, 20, 26, .25);
}
.pp-picker-range:focus-visible { outline: none; }
.pp-picker-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(209, 10, 10, .3); }
.pp-picker-range:disabled { cursor: default; opacity: .6; }

.woocommerce div.product form.cart .pp-picker ~ button.single_add_to_cart_button {
  flex: 0 0 100%;
  width: 100%;
  height: 52px;
  min-height: 52px;
  font-size: 1.05rem;
}
.pp-sold {
  margin-top: 18px;
}
.pp-sold .pp-progress-label { margin-top: 10px; }

@media (max-width: 380px) {
  .pp-picker { gap: 6px; }
  .woocommerce div.product form.cart .pp-picker .quantity { flex-basis: 62px; }
  .pp-picker-btn { flex-basis: 40px; width: 40px; height: 40px; }
  .pp-picker-bubble { font-size: .75rem; padding: 5px 8px; }
}
/* The site wide focus ring drew a square box round the whole slider on
   click; keyboard focus is shown on the thumb instead (rule above). */
.woocommerce div.product form.cart .pp-picker-range:focus,
.woocommerce div.product form.cart .pp-picker-range:focus-visible {
  outline: none;
  box-shadow: none;
}

/* ===============================================================
   Essentials build, October 2026: close time, coming soon, rules
   tab and prize claims. Appended last so it wins over the rules
   above without editing them.
   =============================================================== */

/* Entries close countdown, with the draw time underneath it. */
.pp-draw-when {
  margin: 10px 0 0;
  font-size: 0.9rem;
}

/* Coming soon banner: gold tint so it reads as "not yet", not "closed". */
.pp-open-hours.pp-coming-soon {
  background: #FFF6DE;
  border-color: #F3D78A;
}
.pp-card-opens {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pp-ink, #14141A);
}

/* Rules tab. */
.pp-rules h2 { margin-bottom: 12px; }
.pp-rules h3 { margin: 20px 0 8px; font-size: 1.05rem; }
.pp-rules-list {
  margin: 0 0 16px 1.1em;
  padding: 0;
}
.pp-rules-list li {
  margin: 0 0 8px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.pp-rules-links { margin: 12px 0 0; }
.pp-rules-links a { text-decoration: underline; }

/* My Wins: claim column and the claim form. */
.pp-claim-intro { margin: 0 0 20px; }
.pp-wins-table .pp-claim-btn,
.pp-claim-submit {
  background: var(--pp-red, #D10A0A);
  color: #fff;
  border-radius: var(--pp-radius-pill, 999px);
  padding: 8px 18px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.pp-wins-table .pp-claim-btn:hover,
.pp-claim-submit:hover {
  background: var(--pp-red-dark, #A80808);
  color: #fff;
}
.pp-claim-status { font-weight: 600; }
.pp-claim-status.is-paid { color: var(--pp-win-green, #177535); }
.pp-claim {
  max-width: 640px;
}
.pp-claim-summary {
  background: var(--pp-surface, #FBF8EF);
  border: 1px solid var(--pp-surface-deep, #F5EDD6);
  border-radius: 12px;
  padding: 14px 16px;
  overflow-wrap: anywhere;
}
.pp-claim-form .input-text {
  width: 100%;
  box-sizing: border-box;
}
.pp-claim-form .description {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--pp-text-muted, #6B6B70);
}
.pp-claim-choice {
  border: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 0 18px;
}
.pp-claim-choice legend { font-weight: 700; padding: 0 6px; }
.pp-claim-choice label { display: block; margin: 6px 0; }
.pp-claim-secure {
  font-weight: 600;
  margin: 4px 0 14px;
}
.pp-claim-confirm label { display: flex; gap: 10px; align-items: flex-start; }
.pp-claim-confirm input { margin-top: 4px; flex: 0 0 auto; }
/* With the cash alternative picked there is nothing to post, and with the
   prize picked nothing to pay, so hide the field that does not apply. The
   server checks the same thing, so a browser without :has() just shows both. */
.pp-claim-form.is-physical:has(input[name="pp_choice"][value="cash"]:checked) .pp-claim-address,
.pp-claim-form.is-physical:has(input[name="pp_choice"][value="prize"]:checked) .pp-claim-payee {
  display: none;
}
@media (max-width: 768px) {
  .pp-wins-table td { align-items: center; }
  .pp-wins-table .pp-claim-status { text-align: right; }
}

/* ---------------------------------------------------------------
   Desktop header, one row (Oct 2026)

   Storefront's default desktop header is two rows: logo and a large
   product search on top, then a separate strip with the menu and a
   plain text basket. It left a lot of empty ink and no clear basket
   button. Here it becomes a single sticky row: logo, centred menu,
   account and a red basket pill. Same `display: contents` approach as
   the mobile header, so the four pieces can be ordered as siblings.
   Search is dropped on desktop: ten competitions do not need it, and
   mobile already hides it.
   --------------------------------------------------------------- */
@media (min-width: 768px) {
  .site-header {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px);
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 84px;
    margin: 0;
    padding: 10px max(24px, calc((100% - 1200px) / 2)) !important;
    background: var(--pp-ink);
    border-bottom: 3px solid var(--pp-red-bright, #EB0402);
  }
  .site-header > .col-full,
  .site-header .storefront-primary-navigation,
  .site-header .storefront-primary-navigation > .col-full {
    display: contents;
  }
  .site-header .site-branding {
    order: 1;
    flex: 0 0 auto;
    float: none;
    width: auto;
    margin: 0;
  }
  .site-header .site-branding img.custom-logo {
    width: 150px;
    max-width: 150px;
  }
  .site-header .site-search {
    display: none !important;
  }
  .site-header .menu-toggle {
    display: none !important;
  }
  .site-header .main-navigation {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
    float: none;
    width: auto;
    margin: 0;
  }
  .site-header .main-navigation .primary-navigation {
    display: block;
  }
  .site-header .main-navigation ul.menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
  }
  .site-header .main-navigation ul.menu > li {
    float: none;
    margin: 0;
  }
  .site-header .main-navigation ul.menu > li > a {
    display: block;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--pp-on-ink);
    transition: background-color .15s ease, color .15s ease;
  }
  .site-header .main-navigation ul.menu > li > a:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
  }
  .site-header .main-navigation ul.menu > li.current-menu-item > a,
  .site-header .main-navigation ul.menu > li.current_page_item > a {
    background: rgba(247, 170, 5, .12);
    color: var(--pp-gold);
  }
  /* My Account has its own button on the right; it stays in the mobile drawer. */
  .site-header .main-navigation ul.menu > li.menu-item-39 {
    display: none;
  }

  .pp-header-account {
    order: 3;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    color: var(--pp-on-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
  }
  .pp-header-account:hover {
    border-color: var(--pp-gold);
    color: var(--pp-gold);
  }

  .site-header .site-header-cart {
    order: 4;
    flex: 0 0 auto;
    display: block;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .site-header .site-header-cart li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .site-header .site-header-cart .cart-contents {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: 999px;
    background: var(--pp-red);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
  }
  .site-header .site-header-cart .cart-contents:hover {
    background: var(--pp-red-dark);
    color: #fff;
  }
  .site-header .site-header-cart .cart-contents .amount,
  .site-header .site-header-cart .cart-contents .count {
    color: #fff;
  }
  .site-header .site-header-cart .cart-contents .count {
    font-weight: 600;
    opacity: .9;
  }
  .site-header .site-header-cart .cart-contents::after {
    float: none;
    order: -1;
    margin: 0;
    line-height: 1;
    color: #fff;
  }
  /* The basket opens the slide out drawer, so Storefront's hover mini
     basket would just be a second, competing panel. */
  .site-header .site-header-cart .widget_shopping_cart {
    display: none !important;
  }
}
/* Tablet and small laptop: keep it on one row. */
@media (min-width: 768px) and (max-width: 1100px) {
  .site-header {
    gap: 14px;
  }
  .site-header .site-branding img.custom-logo {
    width: 124px;
    max-width: 124px;
  }
  .site-header .main-navigation ul.menu {
    gap: 0;
  }
  .site-header .main-navigation ul.menu > li > a {
    padding: 8px 10px;
    font-size: 14px;
  }
  .pp-header-account {
    padding: 10px 12px;
  }
  .pp-header-account span,
  .site-header .site-header-cart .cart-contents .amount {
    display: none;
  }
}
@media (max-width: 767px) {
  .pp-header-account {
    display: none !important;
  }
}

/* ---------------------------------------------------------------
   Footer bottom bar (Oct 2026)

   Was five centred lines with the cookie link stranded underneath.
   Now copyright left and legal links right on one row, then the age
   and company lines as small print. Stacks and centres on phones.
   --------------------------------------------------------------- */
.pp-site-info {
  align-items: stretch;
  gap: 12px;
  text-align: left;
}
.pp-site-info .pp-bottom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.pp-site-info .pp-credit-links {
  justify-content: flex-end;
  gap: 6px 20px;
}
.pp-site-info .pp-legal {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .78rem;
}
.pp-site-info .pp-credit-note {
  max-width: none;
}
.pp-site-info .pp-footer-company {
  margin-top: 0;
}
.site-footer .pp-site-info .pp-cookie-prefs-btn,
footer.site-footer .pp-site-info .pp-cookie-prefs-btn {
  padding: 4px 0;
  font-size: inherit;
  color: var(--pp-on-ink);
}
.site-footer .pp-site-info .pp-cookie-prefs-btn:hover,
footer.site-footer .pp-site-info .pp-cookie-prefs-btn:hover {
  color: var(--pp-gold);
}
@media (min-width: 768px) {
  footer.site-footer {
    padding-top: 22px;
    padding-bottom: 26px;
  }
}
@media (max-width: 767px) {
  .pp-site-info {
    text-align: center;
  }
  .pp-site-info .pp-bottom-row {
    flex-direction: column;
    justify-content: center;
  }
  .pp-site-info .pp-credit-links {
    justify-content: center;
  }
  .pp-site-info .pp-legal {
    align-items: center;
  }
}
/* Storefront sizes these three with `.woocommerce-active .site-header ...`
   percentage widths (73.9% / 21.7%) and right margins, which beat the
   single row header above and squeezed the menu off screen. */
@media (min-width: 768px) {
  .woocommerce-active .site-header .site-branding,
  .woocommerce-active .site-header .main-navigation,
  .woocommerce-active .site-header .site-header-cart {
    width: auto !important;
    max-width: none;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
  }
  .woocommerce-active .site-header .main-navigation {
    flex: 1 1 auto;
  }
}
@media (min-width: 768px) {
  /* Storefront's clearfix ::before/::after on the header and its .col-full
     wrappers become empty flex items once the row is flexed, and with the
     gap they pushed the logo ~110px in from the edge. */
  .site-header::before,
  .site-header::after,
  .site-header .col-full::before,
  .site-header .col-full::after,
  .site-header .storefront-primary-navigation::before,
  .site-header .storefront-primary-navigation::after {
    display: none !important;
    content: none !important;
  }
}
@media (min-width: 768px) and (max-width: 1100px) {
  /* The logo already links home; dropping the word keeps one row at 768px. */
  .site-header .main-navigation ul.menu > li.menu-item-home {
    display: none;
  }
}

/* ---------------------------------------------------------------
   My Account polish (Oct 2026)
   --------------------------------------------------------------- */

/* Storefront zeroes the side padding of the account menu links with
   `.hentry .entry-content .woocommerce-MyAccount-navigation ul li
   .woocommerce-MyAccount-navigation-link a` (0,5,3), so the earlier
   card styling lost and every label sat hard against the edge. */
.woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul {
  padding: 8px;
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(20, 20, 26, .04);
}
.woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link {
  border-bottom: 0;
  margin: 0 0 2px;
}
.woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 600;
  line-height: 1.3;
}
.woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a::before {
  order: 2;
  float: none;
  margin: 0;
  opacity: .45;
}
.woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.is-active a::before {
  opacity: 1;
}
.woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a,
.woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--delete-account a {
  font-weight: 500;
  color: var(--pp-text-muted, #6B6B70);
}
.woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--pp-border, #EAEAEC);
}

/* Less dead space between breadcrumb, title and content on account pages. */
.woocommerce-account .storefront-breadcrumb {
  margin-bottom: 18px;
}
.woocommerce-account .hentry .entry-header {
  margin: 0 0 28px;
  padding: 0;
}
.woocommerce-account .hentry .entry-header .entry-title {
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  margin: 0;
}

/* Dashboard */
.pp-dash-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 32px;
  border-radius: 20px;
  background: radial-gradient(circle at 85% 20%, rgba(209, 10, 10, .45), transparent 55%), var(--pp-ink, #14141A);
  color: var(--pp-on-ink, #F3F3F5);
}
.pp-dash-eyebrow {
  margin: 0 0 6px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pp-gold, #F7AA05);
}
.woocommerce-account .woocommerce-MyAccount-content h2.pp-dash-title {
  margin: 0 0 6px;
  font-size: 1.9rem;
  line-height: 1.15;
  color: #fff;
}
.pp-dash-sub {
  margin: 0;
  color: var(--pp-on-ink-muted, #A9A9B4);
}
.pp-dash-sub strong {
  color: #fff;
}
.woocommerce-account .pp-dash-hero .pp-dash-cta {
  flex: 0 0 auto;
  white-space: nowrap;
}
.pp-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  margin: 22px 0 18px;
}
.woocommerce-account .woocommerce-MyAccount-content a.pp-dash-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 16px;
  background: #fff;
  color: var(--pp-text, #17171A);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.woocommerce-account .woocommerce-MyAccount-content a.pp-dash-tile:hover,
.woocommerce-account .woocommerce-MyAccount-content a.pp-dash-tile:focus-visible {
  border-color: var(--pp-red, #D10A0A);
  box-shadow: 0 10px 24px rgba(20, 20, 26, .08);
  transform: translateY(-2px);
  color: var(--pp-text, #17171A);
}
.pp-dash-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: rgba(209, 10, 10, .08);
  color: var(--pp-red, #D10A0A);
}
.pp-dash-tile-title {
  font-weight: 800;
  font-size: 1.02rem;
}
.pp-dash-tile-desc {
  font-size: .88rem;
  line-height: 1.45;
  color: var(--pp-text-muted, #6B6B70);
}
.pp-dash-logout {
  margin: 0;
  font-size: .88rem;
  color: var(--pp-text-muted, #6B6B70);
}
@media (max-width: 767px) {
  .pp-dash-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px;
  }
  .pp-dash-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .woocommerce-account .woocommerce-MyAccount-content a.pp-dash-tile {
    padding: 16px;
  }
  .pp-dash-tile-desc {
    display: none;
  }
}

/* Empty states (no orders yet) as a calm card, button on its own line. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 22px 24px;
  border-radius: 16px;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button {
  float: none;
  order: 2;
  margin: 0;
}

/* Login and register: two equal cards, centred, with a clear lead. */
@media (min-width: 768px) {
  .woocommerce-account #customer_login.u-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-width: 980px;
    margin: 0 auto;
  }
  .woocommerce-account #customer_login.u-columns::before,
  .woocommerce-account #customer_login.u-columns::after {
    display: none;
  }
  .woocommerce-account #customer_login .u-column1.col-1,
  .woocommerce-account #customer_login .u-column2.col-2 {
    width: auto;
    float: none;
    margin: 0;
    padding: 32px;
  }
}
.woocommerce-account #customer_login .u-column1.col-1,
.woocommerce-account #customer_login .u-column2.col-2 {
  border-radius: 20px;
  box-shadow: 0 2px 14px rgba(20, 20, 26, .05);
}
.woocommerce-account #customer_login .u-column2.col-2 {
  background: var(--pp-surface, #FBF8EF);
  border-color: #F0E6C8;
}
.woocommerce-account #customer_login h2 {
  font-size: 1.5rem;
  margin: 0 0 6px;
}
.woocommerce-account #customer_login .pp-login-lead {
  margin: 0 0 20px;
  color: var(--pp-text-muted, #6B6B70);
  font-size: .95rem;
}
.woocommerce-account #customer_login .woocommerce-form-login__submit,
.woocommerce-account #customer_login .woocommerce-form-register__submit {
  width: 100%;
}
.woocommerce-account #customer_login .woocommerce-LostPassword {
  text-align: center;
}

/* Account sections (My Tickets, My Wins, Orders, Spending Controls):
   section headings with breathing room and styled empty states, so the
   screens read as designed rather than as loose paragraphs. */
.woocommerce-account .woocommerce-MyAccount-content > h3,
.woocommerce-account .woocommerce-MyAccount-content .pp-rg h3 {
  margin: 30px 0 12px;
  font-size: 1.15rem;
  font-weight: 800;
}
.woocommerce-account .woocommerce-MyAccount-content > h3:first-child,
.woocommerce-account .woocommerce-MyAccount-content > .pp-claim-intro + h3 {
  margin-top: 0;
}
.woocommerce-account .woocommerce-MyAccount-content .pp-claim-intro {
  margin: 0 0 26px;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--pp-surface, #FBF8EF);
  border: 1px solid #F0E6C8;
  color: var(--pp-text, #17171A);
}
.woocommerce-account .woocommerce-MyAccount-content .pp-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 20px 22px;
  border: 1px dashed #DCD3BC;
  border-radius: 14px;
  background: #fff;
  color: var(--pp-text-muted, #6B6B70);
}
.woocommerce-account .woocommerce-MyAccount-content .pp-empty::before {
  content: "";
  flex: 0 0 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(209, 10, 10, .08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D10A0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9V7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2a2 2 0 0 0 0 6v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 0 0 0-6z'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* ---------------------------------------------------------------
   Desktop design fixes from the October 2026 review
   --------------------------------------------------------------- */

/* Header edges line up with the page content (.col-full is 1280px wide since Oct 2026). */
@media (min-width: 768px) {
  .site-header {
    padding-left: max(24px, calc((100% - 1280px) / 2)) !important;
    padding-right: max(24px, calc((100% - 1280px) / 2)) !important;
  }
}

/* Card status pill sat centred over the PrizePals logo baked into each
   artwork; anchor it top right instead. */
.pp-game-flag {
  left: auto;
  right: 10px;
  transform: none;
}
/* "Entries close in" so the countdown is not mistaken for an opening time. */
.pp-card-cd-label {
  margin: 0 0 4px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pp-text-muted, #6B6B70);
}

/* Keyboard focus: the link fills a card with overflow hidden, so its own
   outline was clipped away and nothing showed. */
.pp-game-card:focus-within {
  box-shadow: 0 0 0 3px var(--pp-red, #D10A0A);
}
.pp-game-card-link:focus-visible {
  outline: none;
}

/* Grid: centre a short last row instead of leaving one card on its own
   at the left with two empty cells. */
@media (min-width: 861px) {
  .pp-game-grid,
  .woocommerce ul.products.pp-game-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .pp-game-grid > li,
  .woocommerce ul.products.pp-game-grid > li.product {
    flex: 0 1 calc((100% - 48px) / 3);
    max-width: calc((100% - 48px) / 3);
  }
}

/* Carousel: neighbours fade out at the edges rather than being cut off
   mid card, with no red slivers at the sides. */
@media (min-width: 768px) {
  .pp-carousel-track {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
}

/* Trust strip: the 1000px wide rule floated above the full width cream band. */
.pp-trust-strip {
  border-bottom: 0;
}

/* Readable line length on information pages (was ~133 characters). */
/* Paragraphs, lists and headings only: the account, basket and checkout
   pages hold WooCommerce layouts inside .entry-content and must keep their
   full width. */
.page:not(.home):not(.woocommerce-page):not(.woocommerce-account):not(.woocommerce-cart):not(.woocommerce-checkout) .entry-content > :is(p, ul, ol, h2, h3, h4, blockquote) {
  max-width: 72ch;
}
.page:not(.home):not(.woocommerce-page) .hentry .entry-header {
  margin-bottom: 28px;
}

/* Cookie table: names broke mid word on desktop; only allow that on phones. */
.pp-stack-table td:first-child {
  word-break: normal;
  white-space: nowrap;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .88em;
}
@media (max-width: 600px) {
  .pp-stack-table td:first-child {
    white-space: normal;
    word-break: break-word;
  }
}

/* Winners page empty state. */
.pp-winners-empty {
  max-width: 560px;
  margin: 10px auto 30px;
  padding: 34px 28px;
  text-align: center;
  border: 1px dashed #DCD3BC;
  border-radius: 20px;
  background: var(--pp-surface, #FBF8EF);
}
.pp-winners-empty .pp-winners-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: rgba(209, 10, 10, .08);
  color: var(--pp-red, #D10A0A);
}
.pp-winners-empty h2 {
  margin: 0 0 8px;
  font-size: 1.35rem;
}
.pp-winners-empty p {
  margin: 0 0 18px;
  color: var(--pp-text-muted, #6B6B70);
}

/* 404 page. */
.pp-404 {
  max-width: 640px;
  margin: 20px auto 40px;
  text-align: center;
}
.pp-404-code {
  margin: 0;
  font-size: clamp(4rem, 10vw, 7rem);
  font-weight: 800;
  line-height: 1;
  color: var(--pp-red, #D10A0A);
}
.pp-404 h1 {
  margin: 10px 0 10px;
}
.pp-404 p {
  color: var(--pp-text-muted, #6B6B70);
}
.pp-404-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}
.pp-404-actions .button.pp-btn-ghost {
  background: transparent;
  color: var(--pp-text, #17171A);
  border: 1px solid var(--pp-border, #EAEAEC);
  box-shadow: none;
}

/* Competition page polish */
.woocommerce-Tabs-panel,
.pp-prizes,
#tab-description,
#tab-pp_rules,
#tab-pp_entry_list {
  scroll-margin-top: 120px;
}
.pp-prizes {
  margin: 24px 0 64px;
}
.single-product div.product .product_meta {
  display: none;
}
ol.pp-draw-list:has(> li:only-child) {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.pp-price-per {
  margin-left: 6px;
  font-size: .5em;
  font-weight: 600;
  color: var(--pp-text-muted, #6B6B70);
  vertical-align: middle;
}
.single-product div.product .woocommerce-product-details__short-description p {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--pp-ink, #14141A);
}
/* Image and summary share the row 50/50 on desktop (client request,
   Oct 2026), with the remaining 4% as the gutter. The selectors match
   Storefront's full width layout rule (.storefront-full-width-content
   .single-product ...), which outranked the plain .single-product one and
   kept the image at 39%. Gallery margin is zeroed because the summary
   floats right, so 48 + 4.35 + 48 would wrap. */
@media (min-width: 1024px) {
  .storefront-full-width-content.single-product div.product .woocommerce-product-gallery,
  .single-product div.product .woocommerce-product-gallery {
    width: 48%;
    margin-right: 0;
  }
  .storefront-full-width-content.single-product div.product .summary,
  .single-product div.product .summary {
    width: 48%;
  }
}

/* ---------------------------------------------------------------
   Account and forms polish (account review, Oct 2026)
   --------------------------------------------------------------- */

/* Form controls and buttons use the site font (they inherited Storefront's). */
input, select, textarea, button, .button {
  font-family: inherit;
}

/* Active item stays white on red, including the muted Log out / Delete rows. */
.woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.is-active a {
  color: #fff;
}

/* Section icons in the account menu, matching the dashboard tiles. */
.woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--my-tickets a::before { content: "\f3ff"; }
.woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--my-wins a::before { content: "\f091"; }
.woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--spending-controls a::before { content: "\f017"; }
.woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--delete-account a::before { content: "\f2ed"; }

/* Page title sits over the content column on signed in account pages. */
@media (min-width: 768px) {
  .woocommerce-account.logged-in .hentry .entry-header {
    text-align: left;
    padding-left: calc(26% + 32px);
  }
}

/* Show / hide password toggle sits inside the rounded field. */
.woocommerce form .password-input,
.woocommerce-account .password-input {
  position: relative;
  display: block;
  max-width: 100%;
}
.woocommerce form .show-password-input,
.woocommerce-account .show-password-input {
  top: 1px;
  bottom: 1px;
  right: 1px;
  height: auto;
  width: 46px;
  background: transparent;
  border-radius: 0 10px 10px 0;
}
.woocommerce form .show-password-input:hover,
.woocommerce-account .show-password-input:hover {
  background: rgba(20, 20, 26, .05);
}

/* Delete account: a normal width field and a clearly destructive button. */
.woocommerce-account .pp-delete-row {
  max-width: 420px;
}
.woocommerce-account .pp-delete-row .password-input,
.woocommerce-account .pp-delete-row input[type="password"] {
  width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-content .button.pp-btn-danger {
  background: #fff;
  color: var(--pp-red-text, #B00A0A);
  border: 1.5px solid var(--pp-red, #D10A0A);
  box-shadow: none;
}
.woocommerce-account .woocommerce-MyAccount-content .button.pp-btn-danger:hover {
  background: var(--pp-red, #D10A0A);
  color: #fff;
}

/* Checkboxes and radios in brand red and a comfortable size. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--pp-red, #D10A0A);
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.woocommerce-form-login__rememberme {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

/* Orders empty state: icon centred against the text. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
  position: relative;
  padding-left: 58px;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before {
  top: 50%;
  left: 22px;
  transform: translateY(-50%);
}

/* Password change box styled like the other cards. */
.woocommerce-account .woocommerce-MyAccount-content fieldset {
  margin: 24px 0;
  padding: 18px 22px 6px;
  border: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 16px;
  background: #fff;
}
.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
  margin: 0;
  padding: 0 8px;
  background: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--pp-text, #17171A);
}
#account_display_name_description {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: .85rem;
  color: var(--pp-text-muted, #6B6B70);
}

/* Address cards side by side, equal size, with a text label on the edit link. */
.woocommerce-account .woocommerce-Addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after {
  display: none;
}
.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
  float: none;
  width: auto;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 16px;
  background: #fff;
}
.woocommerce-account .woocommerce-Address-title .edit {
  font-size: .9rem;
  font-weight: 700;
  text-indent: 0;
}
@media (max-width: 600px) {
  .woocommerce-account .woocommerce-Addresses {
    grid-template-columns: 1fr;
  }
}

/* First and last name fields the same width. */
@media (min-width: 768px) {
  .woocommerce-account .woocommerce-MyAccount-content .form-row-first,
  .woocommerce-account .woocommerce-MyAccount-content .form-row-last {
    width: calc(50% - 10px);
  }
}

/* Register: spacing under the date of birth hint. */
.woocommerce-account .woocommerce-form-register .pp-dob-note,
.woocommerce-account .woocommerce-form-register input[type="date"] + small,
.woocommerce-account .woocommerce-form-register input[type="date"] + .description {
  display: block;
  margin-top: 8px;
}

/* Breadcrumbs removed: keep a little air between the header and the page title. */
.site-content {
  padding-top: 32px;
}
@media (max-width: 767px) {
  .site-content {
    padding-top: 20px;
  }
}
.home .site-content,
.pp-home .site-content {
  padding-top: 0;
}

/* ---------------------------------------------------------------
   Competition page redesign (Oct 2026)
   --------------------------------------------------------------- */
.single-product div.product .woocommerce-product-gallery img {
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(20, 20, 26, .14);
}
.single-product div.product .summary .product_title {
  margin: 0 0 12px;
  font-size: clamp(2rem, 3.2vw, 2.7rem);
  line-height: 1.1;
}
/* Prize headline: the reason to enter, right under the title. */
.single-product div.product .summary .woocommerce-product-details__short-description {
  margin: 0 0 18px;
}
.single-product div.product .summary .woocommerce-product-details__short-description p {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(247, 170, 5, .16), rgba(247, 170, 5, .04));
  border-left: 4px solid var(--pp-gold, #F7AA05);
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--pp-ink, #14141A);
}
.single-product div.product .summary .woocommerce-product-details__short-description p::before {
  content: "";
  flex: 0 0 26px;
  height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B00A0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0V4z'/%3E%3Cpath d='M17 5h3v2a3 3 0 0 1-3 3M7 5H4v2a3 3 0 0 0 3 3'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Price */
.single-product div.product .summary p.price {
  margin: 0 0 16px;
  font-size: 2rem;
  font-weight: 800;
  color: var(--pp-red-text, #B00A0A);
}
.single-product div.product .summary .pp-price-per {
  font-size: .9rem;
  font-weight: 600;
  margin-left: 4px;
}
/* Progress */
.single-product div.product .summary .pp-progress {
  height: 12px;
  margin-top: 16px;
}
.single-product div.product .summary .pp-progress-label {
  margin: 8px 0 16px;
  font-size: .85rem;
  font-weight: 600;
}
/* Dates card: entries close, countdown, draw. */
.single-product div.product .summary .pp-draw-date {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(20, 20, 26, .04);
}
.single-product div.product .summary .pp-draw-date > .pp-draw-label,
.single-product div.product .summary .pp-draw-date > strong {
  grid-column: 1;
}
.single-product div.product .summary .pp-draw-date > .pp-draw-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pp-text-muted, #6B6B70);
}
.single-product div.product .summary .pp-draw-date > strong {
  margin-top: -8px;
  font-size: 1rem;
}
.single-product div.product .summary .pp-draw-date .pp-countdown {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
}
.single-product div.product .summary .pp-draw-date .pp-draw-when {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--pp-border, #EAEAEC);
  font-size: .95rem;
}
@media (max-width: 480px) {
  .single-product div.product .summary .pp-draw-date {
    grid-template-columns: 1fr;
  }
  .single-product div.product .summary .pp-draw-date .pp-countdown {
    grid-column: 1;
    grid-row: auto;
  }
}
/* Trust points */
.pp-trust-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-size: .88rem;
  font-weight: 600;
  color: var(--pp-text, #17171A);
}
.pp-trust-points li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.pp-trust-points svg {
  color: #177535;
}
.pp-trust-points a {
  color: inherit;
  text-decoration: underline;
}

/* Prize section: main draw as a highlight card, then the instant grid. */
.single-product .pp-prizes {
  clear: both;
  margin: 48px 0 56px;
}
.single-product .pp-prizes .pp-draw-prizes {
  position: relative;
  margin-bottom: 36px;
  padding: 26px 28px 24px 96px;
  border-radius: 20px;
  background: radial-gradient(circle at 92% 20%, rgba(209, 10, 10, .45), transparent 55%), var(--pp-ink, #14141A);
  color: var(--pp-on-ink, #F3F3F5);
}
.single-product .pp-prizes .pp-draw-prizes::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 26px;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: rgba(247, 170, 5, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7AA05' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0V4z'/%3E%3Cpath d='M17 5h3v2a3 3 0 0 1-3 3M7 5H4v2a3 3 0 0 0 3 3'/%3E%3C/svg%3E") center / 28px no-repeat;
}
.single-product .pp-prizes .pp-draw-prizes .pp-prizes-title {
  margin: 0 0 6px;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pp-gold, #F7AA05);
}
.single-product .pp-prizes .pp-draw-prizes .pp-draw-list {
  margin: 0 0 8px;
  padding-left: 1.2em;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
}
.single-product .pp-prizes .pp-draw-prizes .pp-draw-list:has(> li:only-child) {
  padding-left: 0;
}
.single-product .pp-prizes .pp-draw-prizes .pp-prizes-note {
  margin: 0;
  color: var(--pp-on-ink-muted, #A9A9B4);
  font-size: .92rem;
}
.single-product .pp-prizes .pp-instant > .pp-prizes-title {
  margin: 0 0 6px;
  font-size: 1.5rem;
}
.single-product .pp-prizes .pp-instant > .pp-prizes-note {
  max-width: 72ch;
  margin: 0 0 18px;
  color: var(--pp-text-muted, #6B6B70);
}
.pp-instant-card .pp-instant-status:empty {
  display: none;
}
@media (max-width: 600px) {
  .single-product .pp-prizes .pp-draw-prizes {
    padding: 82px 20px 20px;
  }
  .single-product .pp-prizes .pp-draw-prizes::before {
    left: 20px;
    top: 20px;
  }
}

/* Description, Rules and Entry List as stacked collapsible sections
   (client request, Oct 2026, replacing the pill tabs). Markup is native
   <details>/<summary> from woocommerce/single-product/tabs/tabs.php, so it
   opens and closes without JavaScript. Bars span the content width; the
   text inside stays at a readable measure. */
.single-product.woocommerce div.product .pp-accs {
  clear: both;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 8px 0 56px;
}
.single-product.woocommerce div.product .pp-acc {
  margin: 0;
  background: #fff;
  border: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 16px;
}
.single-product.woocommerce div.product .pp-acc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  margin: 0;
  padding: 16px 20px 16px 24px;
  list-style: none;
  border-radius: 15px;
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--pp-ink, #14141A);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.single-product.woocommerce div.product .pp-acc > summary::-webkit-details-marker {
  display: none;
}
.single-product.woocommerce div.product .pp-acc > summary::marker {
  content: "";
}
.single-product.woocommerce div.product .pp-acc[open] > summary {
  border-bottom: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 15px 15px 0 0;
}
.single-product.woocommerce div.product .pp-acc > summary:focus:not(:focus-visible) {
  outline: none;
}
.single-product.woocommerce div.product .pp-acc > summary:focus-visible {
  outline: 2px solid var(--pp-red, #D10A0A);
  outline-offset: 2px;
}
/* Plus that turns into a minus, red when the section is open. */
.single-product.woocommerce div.product .pp-acc-icon {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #F4F4F6;
  color: var(--pp-ink, #14141A);
  transition: background-color .2s ease, color .2s ease;
}
.single-product.woocommerce div.product .pp-acc-icon::before,
.single-product.woocommerce div.product .pp-acc-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .2s ease;
}
.single-product.woocommerce div.product .pp-acc-icon::after {
  transform: rotate(90deg);
}
.single-product.woocommerce div.product .pp-acc > summary:hover .pp-acc-icon {
  color: var(--pp-red, #D10A0A);
}
.single-product.woocommerce div.product .pp-acc[open] .pp-acc-icon {
  background: var(--pp-red, #D10A0A);
  color: #fff;
}
.single-product.woocommerce div.product .pp-acc[open] .pp-acc-icon::after {
  transform: rotate(0deg);
}
.single-product.woocommerce div.product .pp-acc-body {
  box-sizing: border-box;
  max-width: 908px;
  margin: 0;
  padding: 20px 24px 26px;
}
.single-product.woocommerce div.product .pp-acc-body > :last-child {
  margin-bottom: 0;
}
/* The bar already says "Entry List", so the list's own heading is the
   same words twice (the Description heading is hidden the same way). */
.single-product.woocommerce div.product .pp-acc .pp-el-title {
  display: none;
}
/* Smooth open and close where the browser can animate to auto height
   (current Chrome and Edge). Elsewhere sections simply snap open. */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .single-product.woocommerce div.product .pp-accs {
      interpolate-size: allow-keywords;
    }
    .single-product.woocommerce div.product .pp-acc::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size .25s ease, content-visibility .25s allow-discrete;
    }
    .single-product.woocommerce div.product .pp-acc[open]::details-content {
      block-size: auto;
    }
  }
}
@media (max-width: 480px) {
  .single-product.woocommerce div.product .pp-accs {
    gap: 10px;
  }
  .single-product.woocommerce div.product .pp-acc {
    border-radius: 14px;
  }
  .single-product.woocommerce div.product .pp-acc > summary {
    min-height: 58px;
    padding: 14px 14px 14px 18px;
    font-size: 1.05rem;
    border-radius: 13px;
  }
  .single-product.woocommerce div.product .pp-acc[open] > summary {
    border-radius: 13px 13px 0 0;
  }
  .single-product.woocommerce div.product .pp-acc-body {
    padding: 16px 18px 22px;
  }
}

/* ---------------------------------------------------------------
   Wallet (site credit), Oct 2026
   --------------------------------------------------------------- */
.woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--wallet a::before { content: "\f555"; }
.pp-wallet-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
  padding: 22px 24px;
  border-radius: 18px;
  background: radial-gradient(circle at 90% 10%, rgba(209, 10, 10, .45), transparent 60%), var(--pp-ink, #14141A);
  color: var(--pp-on-ink, #F3F3F5);
}
.pp-wallet-card .pp-wallet-label {
  margin: 0 0 4px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pp-gold, #F7AA05);
}
.pp-wallet-card .pp-wallet-balance {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
}
.pp-wallet-card.is-negative .pp-wallet-balance {
  color: #FF8A8A;
}
.pp-wallet-card .pp-wallet-cta {
  border-radius: 999px;
}
.pp-wallet-table .pp-amount-in {
  color: #177535;
  font-weight: 700;
}
.pp-wallet-table .pp-amount-out {
  font-weight: 700;
}
a.pp-claim-status {
  text-decoration: none;
}
/* Checkout: the "use my credit" row in the order review. */
.woocommerce-checkout-review-order-table .pp-wallet-row td {
  text-align: right;
}
.pp-wallet-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
}
.pp-wallet-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--pp-red, #D10A0A);
}
/* Wallet tile spans the dashboard grid, so the other six stay 3 by 2. */
.woocommerce-account .woocommerce-MyAccount-content a.pp-dash-tile.pp-dash-tile--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  row-gap: 2px;
  align-items: center;
}
.pp-dash-tile.pp-dash-tile--wide .pp-dash-icon {
  grid-row: 1 / span 2;
  margin: 0;
}
.pp-dash-tile.pp-dash-tile--wide .pp-dash-tile-title,
.pp-dash-tile.pp-dash-tile--wide .pp-dash-tile-desc {
  margin: 0;
}

/* Cookie notice as a compact corner card (Oct 2026), not a wide
   centred panel. Accept and Reject stay equal, side by side. */
.pp-cookie-notice {
  left: 16px;
  right: auto;
  bottom: 16px;
  width: calc(100% - 32px);
  max-width: 360px;
  margin: 0;
  padding: 14px 16px;
  gap: 10px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
}
.pp-cookie-notice .pp-cookie-body {
  flex: 1 1 100%;
}
.pp-cookie-notice .pp-cookie-title {
  font-size: .88rem;
  margin: 0 0 4px;
}
.pp-cookie-notice .pp-cookie-text {
  font-size: .78rem;
  line-height: 1.45;
  margin: 0 0 4px;
}
.pp-cookie-notice .pp-cookie-link {
  font-size: .76rem;
}
.pp-cookie-notice .pp-cookie-actions {
  width: 100%;
  gap: 8px;
}
.pp-cookie-notice .pp-cookie-btn {
  flex: 1 1 0;
  min-height: 38px;
  padding: 8px 10px;
  font-size: .8rem;
}

/* ---------------------------------------------------------------
   Wider page (Oct 2026). Storefront caps .col-full at 1064px, which
   left big empty margins on laptops and desktops. Reference sites run
   about 1270px (Royalux) and 1190 to 1320px (Enchanted Wishes), so the
   page and the inner section caps now share one 1280px width. The
   header padding above uses the same number so its edges line up.
   --------------------------------------------------------------- */
@media (min-width: 768px) {
  .col-full {
    max-width: 1280px;
  }
  .pp-games-section,
  .pp-game-grid,
  .pp-section,
  .pp-featured .pp-game-grid,
  .pp-footer-grid,
  .woocommerce-account .woocommerce {
    max-width: 1280px;
  }
}
/* Four cards a row from small laptops up (client request). At 1024 the
   cards are ~220px, at 1366 ~300px, close to Royalux's 295px. */
@media (min-width: 1024px) {
  .pp-game-grid,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* "More Competitions" shows four cards (functions.php). Between 861 and
   1179px the grid is three a row, so the fourth card would sit alone on a
   second row; hide it there. Phones keep all four (two by two, or stacked). */
@media (min-width: 861px) and (max-width: 1179px) {
  .single-product section.related.products ul.products > li.product:nth-child(n+4) {
    display: none;
  }
}

/* Footer social icons (Oct 2026). The link columns sit outside
   footer.site-footer, so these key off .pp-footer-links and outrank its
   `.pp-footer-links ul` column list. */
.pp-footer-links ul.pp-footer-social {
  flex-direction: row;
  gap: 10px;
  margin: 18px 0 0;
}
.pp-footer-links ul.pp-footer-social li {
  margin: 0;
}
.pp-footer-links ul.pp-footer-social a:not(.button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.pp-footer-links ul.pp-footer-social a:not(.button):hover,
.pp-footer-links ul.pp-footer-social a:not(.button):focus-visible {
  background: var(--pp-red, #D10A0A);
  border-color: var(--pp-red, #D10A0A);
  color: #fff;
}

/* Collapsible sections: slimmer bars (client request), all closed on load. */
.single-product.woocommerce div.product .pp-acc > summary {
  min-height: 0;
  padding: 12px 16px 12px 20px;
  font-size: 1rem;
}
.single-product.woocommerce div.product .pp-acc-icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
}
.single-product.woocommerce div.product .pp-accs {
  gap: 10px;
}
/* The bar already names the section, so a panel's own opening heading
   ("Competition Rules" under "Rules") is the same thing twice. */
.single-product.woocommerce div.product .pp-acc-body > :is(h2, h3):first-child {
  display: none;
}

/* ---------------------------------------------------------------
   Info and policy pages (Oct 2026). Markup from
   prizepals_info_page_layout() in functions.php.
   --------------------------------------------------------------- */
.pp-info-page .hentry .entry-header {
  margin: 0 0 24px;
  padding: 36px 40px;
  border-radius: 20px;
  background: radial-gradient(circle at 92% 10%, rgba(209, 10, 10, .4), transparent 55%), var(--pp-ink, #14141A);
  text-align: left;
}
.pp-info-page .hentry .entry-header .entry-title {
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  line-height: 1.1;
  color: #fff;
}
.pp-info-page .hentry .entry-content {
  max-width: none;
}
.pp-info-intro {
  max-width: 820px;
  margin: 0 0 28px;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--pp-text, #17171A);
}
.pp-info-intro > :last-child {
  margin-bottom: 0;
}
.pp-info-card {
  padding: 26px 28px;
  border: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(20, 20, 26, .04);
  scroll-margin-top: 120px;
}
.pp-info-card > :is(h2, h3):first-child {
  margin: 0 0 12px;
  font-size: 1.2rem;
  line-height: 1.3;
}
.pp-info-card > :last-child {
  margin-bottom: 0;
}
.pp-info-card p,
.pp-info-card li {
  line-height: 1.6;
}
.pp-info-card ul,
.pp-info-card ol {
  margin: 0 0 1em 1.2em;
}
/* Short pages: cards two to a row; long sections and a lone last card span the row. */
.pp-info-grid {
  display: grid;
  gap: 18px;
}
@media (min-width: 900px) {
  .pp-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pp-info-grid > .pp-info-card--wide,
  .pp-info-grid > .pp-info-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
/* The address to post to, and the email to write to, are what people came for. */
.pp-info-card--where-to-send-it,
.pp-info-card--postal-address-including-free-postal-entries,
.pp-info-card--email {
  border-color: rgba(247, 170, 5, .55);
  background: linear-gradient(180deg, rgba(247, 170, 5, .10), #fff 70%);
}
.pp-info-card--where-to-send-it p strong {
  font-size: 1.05rem;
}
.pp-info-card--email a {
  font-size: 1.1rem;
  font-weight: 700;
}
/* Long policies: sticky contents list beside the sections. */
.pp-info-sections {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.pp-info-toc {
  display: none;
}
@media (min-width: 1024px) {
  .pp-info-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 860px);
    gap: 32px;
    align-items: start;
  }
  .pp-info-toc {
    display: block;
    position: sticky;
    top: 110px;
    padding: 20px 22px;
    border: 1px solid var(--pp-border, #EAEAEC);
    border-radius: 18px;
    background: var(--pp-surface, #FBF8EF);
  }
  .pp-info-toc-title {
    margin: 0 0 10px;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pp-text-muted, #6B6B70);
  }
  .pp-info-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .pp-info-toc li {
    margin: 0;
  }
  .pp-info-toc a {
    display: block;
    padding: 6px 0;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--pp-text, #17171A);
    text-decoration: none;
  }
  .pp-info-toc a:hover {
    color: var(--pp-red-text, #B00A0A);
  }
}
/* Wide tables (Cookie Policy) scroll inside their card on phones. */
.pp-info-card table {
  width: 100%;
}
@media (max-width: 767px) {
  .pp-info-page .hentry .entry-header {
    padding: 26px 22px;
    border-radius: 16px;
  }
  .pp-info-card {
    padding: 20px;
  }
  .pp-info-card table {
    display: block;
    overflow-x: auto;
  }
}
/* Free Postal Entry: the three steps side by side, rules underneath. */
@media (min-width: 1100px) {
  .page-id-29 .pp-info-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.pp-info-page .hentry .entry-content .pp-info-toc a {
  color: var(--pp-text, #17171A);
  text-decoration: none;
}
.pp-info-page .hentry .entry-content .pp-info-toc a:hover {
  color: var(--pp-red-text, #B00A0A);
}

/* ---------------------------------------------------------------
   Account area fixes (account audit, Oct 2026)
   --------------------------------------------------------------- */
@media (min-width: 768px) {
  /* Storefront's 5.88% nav margin stacked on the 32px flex gap, so content
     and the title sat on different lines. */
  .woocommerce-account .woocommerce-MyAccount-navigation {
    margin-right: 0;
    flex: 0 0 max(26%, 220px);
    width: max(26%, 220px);
  }
  .woocommerce-account.logged-in .hentry .entry-header {
    padding-left: calc(max(26%, 220px) + 32px);
  }
  /* Storefront's 7.69% margin on the first name pushed Last name a row down. */
  .woocommerce-account .woocommerce-MyAccount-content .form-row-first {
    margin-right: 0;
  }
  /* The login cards were floated by Storefront, so auto margins could not centre them. */
  .woocommerce-account #customer_login.u-columns {
    float: none;
    align-items: start;
  }
}
/* Comfortable form length on wide screens. */
.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields {
  max-width: 680px;
}
#account_display_name_description em {
  font-style: normal;
}
/* Dashboard hero stacks until there is room for text and button side by side. */
@media (max-width: 1023px) {
  .woocommerce-account .pp-dash-hero {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* The wide Wallet tile keeps its balance line on phones. */
@media (max-width: 767px) {
  .woocommerce-account .pp-dash-tile--wide .pp-dash-tile-desc {
    display: block;
  }
}
/* Addresses overview: title and its Add / Edit link on one line. */
.woocommerce-account .woocommerce-Address-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.woocommerce-account .woocommerce-Address-title::before,
.woocommerce-account .woocommerce-Address-title::after {
  display: none;
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
  margin: 0;
}
.woocommerce-account .addresses .woocommerce-Address-title a.edit {
  position: static;
  float: none;
  width: auto;
  height: auto;
  overflow: visible;
  text-indent: 0;
  font-size: .9rem;
  font-weight: 700;
  color: var(--pp-red-text, #B00A0A);
}
.woocommerce-account .addresses .woocommerce-Address-title a.edit::before,
.woocommerce-account .addresses .woocommerce-Address-title a.edit::after {
  content: none;
  display: none;
}
/* Lost password: a card like the sign in and register ones. */
.woocommerce-account .woocommerce-ResetPassword {
  max-width: 480px;
  margin: 0 auto;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 20px;
  box-shadow: 0 2px 14px rgba(20, 20, 26, .05);
}
.woocommerce-account .woocommerce-ResetPassword .form-row-first {
  width: 100%;
  float: none;
}
.woocommerce-account .woocommerce-ResetPassword button[type="submit"] {
  width: 100%;
}
/* Phones: the account menu becomes one row of swipeable pills instead of a
   550px stack above every page. Pure CSS, no script. */
@media (max-width: 767px) {
  .woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation {
    margin-bottom: 18px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
  .woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
    padding: 2px 0 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border: 0;
  }
  .woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
    display: none;
  }
  .woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link {
    flex: 0 0 auto;
    margin: 0;
    border: 0;
  }
  .woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a {
    display: block;
    padding: 9px 16px;
    border: 1px solid var(--pp-border, #EAEAEC);
    border-radius: 999px;
    background: #fff;
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link a::before {
    display: none;
  }
  .woocommerce-account .hentry .entry-content .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.is-active a {
    background: var(--pp-red, #D10A0A);
    border-color: var(--pp-red, #D10A0A);
    color: #fff;
  }
}
/* Storefront's clearfix ::before/::after became flex items in the address
   title and pushed the heading in; and the spending card headings kept a
   30px top margin from the general .pp-rg h3 rule. */
.woocommerce-account .addresses header.woocommerce-Address-title::before,
.woocommerce-account .addresses header.woocommerce-Address-title::after {
  content: none;
  display: none;
}
.woocommerce-account .woocommerce-MyAccount-content .pp-rg .pp-rg-card > h3:first-child {
  margin-top: 0;
}

/* ---------------------------------------------------------------
   Basket and checkout redesign (cart audit, Oct 2026). These pages
   were stock Storefront: grey bands, square boxes, purple radio,
   oversized buttons and a floated layout.
   --------------------------------------------------------------- */
body.storefront-full-width-content.woocommerce-cart .hentry .entry-header,
body.storefront-full-width-content.woocommerce-checkout .hentry .entry-header {
  padding-bottom: 24px;
  text-align: left;
}
.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td,
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
  background: #fff;
}
.woocommerce-cart table.shop_table.cart {
  border: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 18px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.woocommerce-cart table.cart .product-remove { width: 48px; }
.woocommerce-cart table.cart .product-thumbnail { width: 96px; }
.woocommerce-cart table.cart .product-thumbnail img {
  max-width: 72px;
  border-radius: 10px;
}
.woocommerce-cart table.cart td.product-name a {
  color: var(--pp-text, #17171A);
  font-weight: 700;
  text-decoration: none;
}
.woocommerce-cart table.cart td.product-name a:hover {
  color: var(--pp-red-text, #B00A0A);
}
.woocommerce-cart table.cart a.remove::before {
  color: var(--pp-red-text, #B00A0A);
}
.woocommerce-cart table.shop_table_responsive tr td {
  vertical-align: middle;
}
.woocommerce-cart table.cart td.actions .coupon .input-text {
  min-height: 46px;
  width: 220px;
  padding: 10px 14px;
  border: 1px solid var(--pp-border-strong, #C9C9CF);
  border-radius: 12px;
  background: #fff;
}
/* One red call to action per page: coupon and update are secondary. */
.woocommerce-cart button[name="update_cart"],
.woocommerce-cart button[name="apply_coupon"] {
  background: #fff;
  color: var(--pp-text, #17171A);
  border: 1px solid var(--pp-border-strong, #C9C9CF);
  box-shadow: none;
}
.woocommerce-cart button[name="update_cart"]:disabled {
  opacity: .6 !important;
}
.woocommerce-cart .wc-proceed-to-checkout .button.checkout-button,
.woocommerce-checkout #payment .place-order .button {
  font-size: 1.05rem;
  padding: 14px 28px;
}
/* Basket: items left, sticky totals right, from small laptops up. */
@media (min-width: 1024px) {
  .woocommerce-cart .entry-content > .woocommerce:has(.cart-collaterals) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
    align-items: start;
  }
  .woocommerce-cart .entry-content > .woocommerce:has(.cart-collaterals)::before,
  .woocommerce-cart .entry-content > .woocommerce:has(.cart-collaterals)::after {
    display: none;
  }
  .woocommerce-cart .entry-content > .woocommerce > .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
  }
  .woocommerce-cart .cart-collaterals {
    width: auto;
    margin: 0;
  }
  .woocommerce-cart .cart-collaterals .cart_totals {
    width: auto;
    float: none;
    position: sticky;
    top: 120px;
  }
}
.woocommerce-cart .cart-collaterals .cart_totals {
  padding: 22px;
  border: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 18px;
  background: var(--pp-surface, #FBF8EF);
}
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table th,
.woocommerce-cart .cart-collaterals .cart_totals table.shop_table td {
  background: transparent;
}
/* Checkout: one column until there is room for two. */
@media (max-width: 1023px) {
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review {
    width: 100%;
    float: none;
  }
}
@media (min-width: 1024px) {
  .woocommerce-checkout #order_review {
    position: sticky;
    top: 120px;
  }
}
.woocommerce-checkout #order_review {
  padding: 22px;
  border-radius: 18px;
  background: var(--pp-surface, #FBF8EF);
}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
  background: transparent;
}
.woocommerce-checkout #payment,
.woocommerce-checkout #payment .payment_methods,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  background: none;
}
body #payment .payment_methods li label::before,
body #payment .payment_methods li input[type="radio"]:first-child:checked + label::before {
  color: var(--pp-red, #D10A0A);
}
.woocommerce-checkout #payment a,
.woocommerce-checkout .woocommerce-privacy-policy-text a {
  color: var(--pp-red-text, #B00A0A);
}
.woocommerce form .form-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
}
/* Empty basket: a calm card, then live competitions to browse. */
.woocommerce-cart .cart-empty.woocommerce-info {
  padding: 28px;
  border: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 18px;
  background: #fff;
  text-align: center;
  font-weight: 700;
}
.woocommerce-cart .cart-empty.woocommerce-info::before {
  display: none;
}
.woocommerce-cart .return-to-shop {
  text-align: center;
}
.pp-empty-basket-picks {
  margin-top: 40px;
}
.pp-empty-basket-picks > h2 {
  margin: 0 0 18px;
  font-size: 1.5rem;
  text-align: center;
}
/* Basket drawer: steppers and remove sized by us, not Storefront's button padding. */
.pp-basket .pp-basket-step,
.pp-basket .pp-basket-remove {
  padding: 0;
  display: grid;
  place-items: center;
  line-height: 1;
}
.admin-bar .pp-basket {
  top: var(--wp-admin--admin-bar--height, 32px);
}
/* Footer columns share the page gutter (they had 24px extra inside it). */
.pp-footer-links {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 480px) {
  .pp-footer-links { padding-left: 0; padding-right: 0; }
}
@media (min-width: 481px) and (max-width: 900px) {
  .pp-footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Header edges match the content gutter (Storefront's 2.617924em) once there is room. */
@media (min-width: 900px) {
  .site-header {
    padding-left: max(2.617924rem, calc((100% - 1280px) / 2)) !important;
    padding-right: max(2.617924rem, calc((100% - 1280px) / 2)) !important;
  }
}
/* Phones: header stays in view, so the basket and menu are always reachable. */
@media (max-width: 767px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 200;
  }
  .admin-bar .site-header {
    top: var(--wp-admin--admin-bar--height, 46px);
  }
}
@media (max-width: 600px) {
  .admin-bar .site-header { top: 0; }
}
.woocommerce-cart table.cart td.actions {
  padding: 14px 18px;
  background: var(--pp-surface, #FBF8EF);
}
.woocommerce-checkout #payment .payment_methods > li,
.woocommerce-checkout #payment .payment_box {
  background: #fff;
  border-radius: 12px;
}
.woocommerce-checkout #payment .payment_box::before {
  display: none;
}

/* ---------------------------------------------------------------
   Homepage, shop, search, 404 and drawer fixes (home audit, Oct 2026)
   --------------------------------------------------------------- */
/* The centring flex grid above ignored the 4 column rule: four a row from
   1024 on every competition grid, short last row still centred. */
@media (min-width: 1024px) {
  .pp-game-grid > li,
  .woocommerce ul.products.pp-game-grid > li.product {
    flex-basis: calc((100% - 72px) / 4);
    max-width: calc((100% - 72px) / 4);
  }
}
/* Shop and search match the homepage on phones: two cards a row. */
@media (max-width: 860px) {
  .woocommerce-page ul.products.pp-game-grid {
    grid-template-columns: 1fr 1fr;
  }
}
/* Storefront left ~96px of padding under the shop title. */
@media (min-width: 768px) {
  .storefront-full-width-content .woocommerce-products-header {
    padding-bottom: 32px;
  }
  /* Section subtitles sit with their heading, not 44px below it. */
  .pp-section-head .pp-section-title {
    margin-bottom: 10px;
  }
  .pp-section-head .pp-section-sub {
    margin-top: 0;
  }
  /* Homepage sections share the page gutter (they sat 24px inside it). */
  .pp-section,
  .pp-games-section {
    padding-left: 0;
    padding-right: 0;
  }
  .pp-steps {
    max-width: none;
  }
}
.pp-step p {
  text-wrap: pretty;
}
/* 404: red code, pill buttons like the rest of the site. */
.pp-404 .pp-404-code {
  color: var(--pp-red, #D10A0A);
}
.pp-404 h1 {
  color: var(--pp-text, #17171A);
}
.pp-404-actions .button {
  border-radius: 999px;
  background: var(--pp-red, #D10A0A);
  border: 1px solid var(--pp-red, #D10A0A);
  color: #fff;
  padding: 12px 24px;
}
.pp-404-actions .button.pp-btn-ghost {
  background: #fff;
  color: var(--pp-text, #17171A);
  border-color: var(--pp-border-strong, #C9C9CF);
}
/* Empty basket drawer: no subtotal or Checkout for nothing, a way on instead. */
.pp-basket:has(.pp-basket-empty) .pp-basket-foot {
  display: none;
}
.pp-basket-empty-wrap {
  display: grid;
  gap: 16px;
  justify-items: center;
  padding: 40px 8px;
  text-align: center;
}
.pp-basket-empty-wrap .pp-basket-empty {
  margin: 0;
  font-weight: 700;
}
/* Visible the moment it opens, so focus can move into it. */
.pp-basket.is-open {
  transition: transform .28s ease, visibility 0s;
}
/* Carousel dots fit on one row on phones. */
@media (max-width: 480px) {
  .pp-carousel-dots {
    gap: 2px;
    flex-wrap: nowrap;
  }
  .pp-carousel-dot {
    width: 20px;
    height: 20px;
    padding: 5px;
  }
}
/* Wider fade on the carousel edges so cut cards read as a peek, not a bug. */
@media (min-width: 1024px) {
  .pp-carousel-track {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  }
}

/* Card name and prize line (Oct 2026). Two lines each at most, with a
   fixed block height so every card in a row keeps its countdown and button
   level. */
.pp-game-card .pp-game-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 4px;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
  color: var(--pp-ink, #14141A);
}
.pp-game-card .pp-game-prize {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  margin: 0 0 10px;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  color: var(--pp-text-muted, #6B6B70);
}
@media (max-width: 560px) {
  .pp-game-card .pp-game-title {
    font-size: .9rem;
  }
  .pp-game-card .pp-game-prize {
    font-size: .76rem;
  }
}

/* Homepage closing band (Oct 2026). */
.pp-cta-band {
  margin: 8px 0 64px;
  padding: 44px 40px;
  border-radius: 24px;
  background: radial-gradient(circle at 85% 15%, rgba(209, 10, 10, .45), transparent 55%), var(--pp-ink, #14141A);
  color: var(--pp-on-ink, #F3F3F5);
  text-align: center;
}
.pp-cta-band .pp-cta-title {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: #fff;
}
.pp-cta-band .pp-cta-text {
  max-width: 620px;
  margin: 0 auto 24px;
  color: var(--pp-on-ink-muted, #A9A9B4);
  line-height: 1.6;
}
.pp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.pp-cta-band .button.pp-cta-primary,
.pp-cta-band .button.pp-cta-ghost {
  border-radius: 999px;
  padding: 13px 26px;
  font-weight: 700;
}
.pp-cta-band .button.pp-cta-primary {
  background: var(--pp-red, #D10A0A);
  border: 1px solid var(--pp-red, #D10A0A);
  color: #fff;
}
.pp-cta-band .button.pp-cta-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
}
.pp-cta-band .button.pp-cta-ghost:hover {
  border-color: #fff;
}
@media (max-width: 600px) {
  .pp-cta-band {
    padding: 32px 22px;
    border-radius: 18px;
  }
}
/* Checkout wallet row: tick box right beside its label (a general input
   rule was stretching the box across the cell). */
.woocommerce-checkout-review-order-table .pp-wallet-row td {
  text-align: right;
}
.woocommerce-checkout-review-order-table .pp-wallet-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  max-width: 100%;
  text-align: left;
  line-height: 1.35;
}
.woocommerce-checkout-review-order-table .pp-wallet-toggle input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
}
.woocommerce-checkout-review-order-table .pp-wallet-row td {
  text-align: left;
}
.woocommerce-checkout-review-order-table .pp-wallet-toggle {
  justify-content: flex-start;
  align-items: flex-start;
}
.woocommerce-checkout-review-order-table .pp-wallet-toggle input[type="checkbox"] {
  margin-top: 1px;
}

/* ---------------------------------------------------------------
   Game Overview card under the competition title (Oct 2026).
   Content is edited per competition in the Game Overview box; the
   first paragraph is the headline.
   --------------------------------------------------------------- */
.single-product div.product .summary .pp-overview {
  margin: 0 0 18px;
  padding: 26px 24px 22px;
  border-radius: 18px;
  background: radial-gradient(circle at 90% 0%, rgba(209, 10, 10, .4), transparent 55%), var(--pp-ink, #14141A);
  color: var(--pp-on-ink, #F3F3F5);
  text-align: center;
}
.single-product div.product .summary .pp-overview > :last-child {
  margin-bottom: 0;
}
.single-product div.product .summary .pp-overview p {
  margin: 0 0 12px;
  line-height: 1.5;
  color: var(--pp-on-ink, #F3F3F5);
}
.single-product div.product .summary .pp-overview > p:first-child {
  margin-bottom: 10px;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.25;
  text-transform: uppercase;
  color: #fff;
}
.single-product div.product .summary .pp-overview strong {
  color: var(--pp-gold, #F7AA05);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.single-product div.product .summary .pp-overview ul,
.single-product div.product .summary .pp-overview ol {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.single-product div.product .summary .pp-overview li {
  margin: 0 0 4px;
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
}
.single-product div.product .summary .pp-overview > p:last-child:not(:first-child) {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .88rem;
  color: var(--pp-on-ink-muted, #A9A9B4);
}
.single-product div.product .summary .pp-overview a {
  color: var(--pp-gold, #F7AA05);
}

/* ---------------------------------------------------------------
   Instant wins grouped by prize tier (Oct 2026): one card per tier
   with its winning numbers as chips. Won numbers turn grey and show
   the winner's first name and initial.
   --------------------------------------------------------------- */
.pp-instant-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pp-instant-group {
  margin: 0;
  padding: 16px 18px 18px;
  border: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 16px;
  background: #fff;
}
.pp-instant-group.is-all-won {
  background: #F6F6F8;
}
.pp-instant-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
}
.pp-instant-group-prize {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--pp-ink, #14141A);
}
.pp-instant-group-left {
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--pp-text-muted, #6B6B70);
}
.pp-instant-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pp-instant-number {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--pp-gold, #F7AA05);
  font-size: .85rem;
  font-weight: 800;
  color: var(--pp-ink, #14141A);
}
.pp-instant-number.is-won {
  background: #E4E4E9;
  color: #55555E;
}
.pp-instant-number.is-won .pp-instant-ticket {
  text-decoration: line-through;
}
.pp-instant-winner {
  font-size: .75rem;
  font-weight: 700;
  color: #177535;
}
@media (max-width: 560px) {
  .pp-instant-groups {
    grid-template-columns: 1fr;
  }
}
/* The number inside a chip drops the old single tile pill styling. */
.pp-instant-groups .pp-instant-number .pp-instant-ticket {
  display: inline;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.2;
  color: inherit;
}
.pp-instant-groups {
  align-items: start;
}

/* Tablets: six menu items since Free Games was added, so tighter links
   keep a clear gap before the account and basket buttons. */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header .main-navigation ul.menu > li > a {
    padding-left: 7px !important;
    padding-right: 7px !important;
    font-size: .82rem;
  }
  .site-header .site-branding img,
  .site-header .custom-logo-link img {
    max-width: 104px;
    height: auto;
  }
}

/* ---------------------------------------------------------------
   Competition page extras (Oct 2026)
   --------------------------------------------------------------- */
/* Desktop: the image stays in view while the details scroll past. */
@media (min-width: 1024px) {
  .single-product div.product .woocommerce-product-gallery {
    position: sticky;
    top: 120px;
  }
}
/* Quick pick ticket buttons. */
.pp-picker-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
}
.pp-picker-quick .pp-picker-quick-btn {
  flex: 1 1 0;
  min-width: 56px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--pp-border-strong, #C9C9CF);
  border-radius: 999px;
  background: #fff;
  font-weight: 800;
  color: var(--pp-ink, #14141A);
  cursor: pointer;
}
.pp-picker-quick .pp-picker-quick-btn:hover,
.pp-picker-quick .pp-picker-quick-btn.is-active {
  border-color: var(--pp-red, #D10A0A);
  background: var(--pp-red, #D10A0A);
  color: #fff;
}
/* Share row. */
.pp-share {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
}
.pp-share-label {
  margin-right: 4px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--pp-text-muted, #6B6B70);
}
.single-product .pp-share .pp-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 50%;
  background: #fff;
  color: var(--pp-ink, #14141A);
  text-decoration: none;
  cursor: pointer;
}
.single-product .pp-share .pp-share-btn:hover {
  border-color: var(--pp-red, #D10A0A);
  color: var(--pp-red, #D10A0A);
}
.single-product .pp-share .pp-share-copy.is-done {
  border-color: #177535;
  background: #177535;
  color: #fff;
}
/* Phones: sticky Enter bar. */
.pp-sticky-enter {
  display: none;
}
.pp-enter-anchor {
  display: block;
  scroll-margin-top: 100px;
}
@media (max-width: 767px) {
  .pp-sticky-enter {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--pp-ink, #14141A);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .18);
    transition: transform .2s ease;
  }
  .pp-sticky-enter.is-hidden {
    transform: translateY(110%);
  }
  .pp-sticky-enter-price {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
  }
  .pp-sticky-enter-price small {
    font-size: .75rem;
    font-weight: 600;
    color: var(--pp-on-ink-muted, #A9A9B4);
  }
  .pp-sticky-enter .button.pp-sticky-enter-btn {
    flex: 0 0 auto;
    margin: 0;
    padding: 12px 26px;
    border-radius: 999px;
    background: var(--pp-red, #D10A0A);
    border: 1px solid var(--pp-red, #D10A0A);
    color: #fff;
    font-weight: 800;
  }
  body.has-sticky-enter .site-footer {
    padding-bottom: 76px;
  }
}
@media (min-width: 1024px) {
  /* overflow:hidden (a float container) stops sticky; flow-root contains
     the floats the same way without clipping. */
  .single-product div.product.type-product {
    overflow: visible;
    display: flow-root;
  }
}
.single-product div.product .pp-product-top {
  display: flow-root;
}

/* Storefront's own "You're viewing" add to basket bar (desktop): it slid in
   over the sticky site header and was plain white. Now it sits under the
   header in the site's dark style. */
@media (min-width: 768px) {
  .storefront-sticky-add-to-cart {
    top: 98px;
    background: var(--pp-ink, #14141A);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    color: var(--pp-on-ink, #F3F3F5);
  }
  .admin-bar .storefront-sticky-add-to-cart {
    top: calc(98px + var(--wp-admin--admin-bar--height, 32px));
  }
  .storefront-sticky-add-to-cart .storefront-sticky-add-to-cart__content-title {
    color: var(--pp-on-ink-muted, #A9A9B4);
  }
  .storefront-sticky-add-to-cart .storefront-sticky-add-to-cart__content-title strong {
    color: #fff;
  }
  .storefront-sticky-add-to-cart .storefront-sticky-add-to-cart__content-price,
  .storefront-sticky-add-to-cart .storefront-sticky-add-to-cart__content-price .amount {
    color: var(--pp-gold, #F7AA05);
    font-weight: 800;
  }
  .storefront-sticky-add-to-cart .storefront-sticky-add-to-cart__content-price .pp-price-per {
    color: var(--pp-on-ink-muted, #A9A9B4);
  }
  .storefront-sticky-add-to-cart img {
    border-radius: 10px;
    border: 0;
  }
  .storefront-sticky-add-to-cart .storefront-sticky-add-to-cart__content-button.button {
    border-radius: 999px;
    background: var(--pp-red, #D10A0A);
    color: #fff;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .storefront-sticky-add-to-cart {
    top: 85px;
  }
  .admin-bar .storefront-sticky-add-to-cart {
    top: calc(85px + var(--wp-admin--admin-bar--height, 32px));
  }
}

/* ==========================================================================
   Homepage: How It Works folded into one bar at the end of the page,
   opened on click (client, 23 Oct). Same plus/minus as the competition page.
   ========================================================================== */
.pp-how.pp-how-fold {
  padding-top: 40px;
  padding-bottom: 48px;
}
.pp-how-acc {
  max-width: 1100px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 16px;
}
.pp-how-acc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 16px 20px 16px 24px;
  list-style: none;
  border-radius: 15px;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--pp-ink, #14141A);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pp-how-acc > summary::-webkit-details-marker {
  display: none;
}
.pp-how-acc > summary::marker {
  content: "";
}
.pp-how-acc > summary:focus:not(:focus-visible) {
  outline: none;
}
.pp-how-acc > summary:focus-visible {
  outline: 2px solid var(--pp-red, #D10A0A);
  outline-offset: 2px;
}
.pp-how-acc[open] > summary {
  border-bottom: 1px solid var(--pp-border, #EAEAEC);
  border-radius: 15px 15px 0 0;
}
.pp-how-acc-icon {
  position: relative;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #F4F4F6;
  transition: background-color .2s ease, color .2s ease;
}
.pp-how-acc-icon::before,
.pp-how-acc-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .2s ease;
}
.pp-how-acc-icon::after {
  transform: rotate(90deg);
}
.pp-how-acc[open] .pp-how-acc-icon {
  background: var(--pp-red, #D10A0A);
  color: #fff;
}
.pp-how-acc[open] .pp-how-acc-icon::after {
  transform: rotate(0deg);
}
.pp-how-acc-body {
  padding: 20px;
}
.pp-how-acc-body .pp-step {
  background: var(--pp-surface, #FBF8EF);
}
.pp-how-acc-body .pp-how-note {
  margin-top: 18px;
}
@media (max-width: 767px) {
  .pp-how.pp-how-fold {
    padding-top: 28px;
    padding-bottom: 32px;
  }
  .pp-how-acc > summary {
    font-size: 1.1rem;
    padding-left: 18px;
  }
  .pp-how-acc-body {
    padding: 14px;
  }
}

/* ==========================================================================
   Competition page, phone and tablet: title between the image and the
   overview card. Centred to line up with the card, a short gold bar under
   it, and a tighter image shadow so no grey band bleeds behind the title.
   ========================================================================== */
@media (max-width: 1023px) {
  .single-product div.product .woocommerce-product-gallery img {
    box-shadow: 0 6px 18px rgba(20, 20, 26, .10);
  }
  .single-product.woocommerce div.product .summary .product_title {
    margin: 22px 0 18px;
    font-size: clamp(1.9rem, 7.4vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: -.01em;
    text-align: center;
  }
  .single-product.woocommerce div.product .summary .product_title::after {
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    margin: 12px auto 0;
    border-radius: 4px;
    background: var(--pp-gold, #F7AA05);
  }
}

/* ==========================================================================
   Instant wins: one card per winning number (client, 24 Oct, like the
   reference sites). "Win Now" band on top, then the winner's name once won;
   prize in the middle; ticket number along the bottom.
   ========================================================================== */
.pp-iw-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 600px) {
  .pp-iw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .pp-iw-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
}
.pp-iw-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--pp-border, #EAEAEC);
  text-align: center;
}
.pp-iw-status {
  padding: 7px 8px;
  background: var(--pp-red, #D10A0A);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp-iw-prize {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 12px 8px;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--pp-ink, #14141A);
}
.pp-iw-ticket {
  padding: 6px 8px;
  background: var(--pp-gold, #F7AA05);
  color: var(--pp-ink, #14141A);
  font-size: .8rem;
  font-weight: 800;
}
.pp-iw-card.is-won {
  background: #F4F4F6;
  border-color: #E4E4E8;
}
.pp-iw-card.is-won .pp-iw-status {
  background: var(--pp-ink, #14141A);
  color: var(--pp-gold, #F7AA05);
  letter-spacing: .02em;
  text-transform: none;
}
.pp-iw-card.is-won .pp-iw-prize,
.pp-iw-card.is-won .pp-iw-ticket {
  color: #8A8A92;
}
.pp-iw-card.is-won .pp-iw-prize {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.pp-iw-card.is-won .pp-iw-ticket {
  background: #E4E4E8;
}

/* My Tickets: instant win result under the ticket numbers. */
.pp-ticket-nums {
  display: block;
}
.pp-instant-note {
  display: block;
  margin-top: 4px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--pp-text-muted, #6B6B70);
}
.pp-instant-note.is-win {
  color: #177535;
}

/* Emoji ticket competitions: the emoji replaces the ticket number on the
   instant win cards. */
.pp-iw-ticket.pp-iw-emoji {
  font-size: 1.5rem;
  line-height: 1.2;
  padding-top: 5px;
  padding-bottom: 5px;
  background: #FFF8E6;
  border-top: 1px solid #F1E4BF;
}
.pp-iw-card.is-won .pp-iw-ticket.pp-iw-emoji {
  background: #EDEDF0;
  opacity: .6;
}

/* Mystery prize instant win cards ("5 x 🎃"): the emoji large, any words small under it. */
.pp-iw-card.is-mystery .pp-iw-prize {
  flex-direction: column;
  gap: 2px;
}
.pp-iw-mystery {
  font-size: 2.1rem;
  line-height: 1;
}
.pp-iw-mystery img.emoji {
  width: 1em !important;
  height: 1em !important;
}
.pp-iw-card.is-mystery .pp-iw-prize small {
  font-size: .78rem;
  font-weight: 700;
  color: var(--pp-muted, #6B6B70);
}
.pp-iw-card.is-won .pp-iw-mystery {
  opacity: .45;
}

/* Instant wins unlock at % sold (instant-ladder.php): locked cards keep the
   "Instant Win" band in the header colour and show no ticket number. */
.pp-iw-card.is-locked .pp-iw-status {
  background: var(--pp-ink, #14141A); /* the header colour (client, 29 Oct) */
  color: #fff;
}
/* Locked cards have no ticket band, so the prize fills the card. */
.pp-iw-card.is-locked .pp-iw-prize { flex: 1; }

/* Price tab on the artwork's bottom right corner (client picked option A,
   29 Oct): with the type tab gone, a row holding only the price left a
   blank strip under the image. */
.pp-game-card .pp-game-tabs {
  position: relative;
  height: 0;
  z-index: 2;
}
.pp-game-card .pp-game-price {
  position: absolute;
  right: 0;
  bottom: 0;
  border-radius: 12px 0 0 0;
}