/*
 * RobloxPets - Game Category Page
 *
 * Scoped under .rbp-gcp. Self-contained: every aspect of the card, the
 * slider strip, the arrows, the price, the add-to-cart button and the
 * out-of-stock / sale badges is defined here. Nothing inherits from the
 * Breakdance / WooCommerce defaults, which is the only way to keep the
 * layout from drifting when sibling modules change.
 */

.rbp-gcp-body {
  /* Browsing-page atmosphere — base layer. Two soft auroras and a top
     white glow sit on a deep navy gradient. The previous pass tried to
     paint the *shop texture* (orb dots / shelf lines) here too, but at
     real-world alpha they were invisible behind every panel and the
     <main>'s own backdrop. The visible shop texture now lives on
     .rbp-gcp::before (see below) where it can be tuned without
     fighting the page-level body background. */
  background:
    radial-gradient(900px 540px at 50% -10%, rgba(96, 165, 250, 0.12), transparent 65%),
    radial-gradient(900px 600px at 0% 0%, rgba(59, 130, 246, 0.11), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(96, 165, 250, 0.09), transparent 60%),
    linear-gradient(180deg, #050913 0%, #060c1c 40%, #050913 100%);
  background-attachment: fixed;
  color: #e6edf7;
}

/* Header offset ownership — matches the pattern at header.css:2817 where
   .rbp-header-root is collapsed to height:0 and each injected page
   surface owns its own padding-top equal to the fixed header stack
   height plus a little air. Without this rule, the fixed sub+main
   header overlays the top of the hero card. */
.rbp-header-root + .rbp-gcp,
body.rbp-gcp-body main.rbp-gcp {
  padding-top: calc(var(--rbp-fixed-main-h, var(--rbp-h-main-d, 88px)) + var(--rbp-fixed-sub-h, 0px) + clamp(20px, 2.4vw, 36px)) !important;
}

.rbp-gcp {
  --rbp-gcp-radius: 18px;
  --rbp-gcp-radius-sm: 12px;
  --rbp-gcp-border: rgba(148, 163, 184, 0.16);
  --rbp-gcp-border-strong: rgba(96, 165, 250, 0.32);
  --rbp-gcp-panel: rgba(11, 24, 45, 0.62);
  --rbp-gcp-panel-strong: rgba(11, 24, 45, 0.84);
  --rbp-gcp-accent: #3b82f6;
  --rbp-gcp-accent-soft: rgba(59, 130, 246, 0.22);
  --rbp-gcp-text: rgba(230, 237, 247, 0.96);
  --rbp-gcp-text-dim: rgba(170, 188, 215, 0.78);
  --rbp-gcp-text-mute: rgba(140, 158, 185, 0.62);
  --rbp-gcp-card-bg: url("https://robloxpets.com/wp-content/uploads/2026/01/ProductBackgroundImage.webp");
  --rbp-gcp-card-w: clamp(168px, 14vw, 208px);
  --rbp-gcp-card-pad: clamp(10px, 0.9vw, 14px);
  --rbp-gcp-card-gap: clamp(9px, 0.7vw, 12px);

  position: relative;
  /* Bottom padding only — top padding is owned by the .rbp-header-root + .rbp-gcp
     rule above (matches the rest of the plugin's injected pages).
     Kept small: the custom footer sits flush (margin-top:0) and supplies its own
     top padding for breathing room, and the fixed mobile bottom nav is cleared by
     body.rbp-header-active's padding-bottom (below the footer). A larger value here
     just exposed the page background/texture as a gap above the footer. */
  padding-bottom: clamp(14px, 1.4vw, 22px);
  color: var(--rbp-gcp-text);
  font-family: inherit;

  /* Shop-themed browsing texture lives directly on the main element
     (not on a fixed pseudo-element — iOS Safari has known issues with
     position:fixed under elastic-bounce scroll, which made the texture
     jump). Layers, back-to-front:
       1. Two soft loot-cluster radial glows so different scroll
          positions pick up a different ambient tint.
       2. Sparse "item orb" dot field on an offset double lattice so the
          pattern reads as a scatter, not a regular blueprint grid.
       3. Faint diagonal shop-shelf lines at a 96px cadence.
     Alpha values are deliberately higher than the previous pass — the
     texture is meant to be perceptible at desktop screenshot fidelity
     without competing with product cards. Cards / panels paint their
     own opaque-enough backgrounds on top, so the texture only reads in
     gutters and between sections. */
  background:
    radial-gradient(900px 700px at 18% 22%, rgba(59, 130, 246, 0.10), transparent 60%),
    radial-gradient(820px 620px at 82% 78%, rgba(96, 165, 250, 0.09), transparent 60%),
    radial-gradient(circle at 18px 18px, rgba(147, 197, 253, 0.22) 1.6px, transparent 2.4px),
    radial-gradient(circle at 78px 78px, rgba(96, 165, 250, 0.13) 1.2px, transparent 2px),
    repeating-linear-gradient(135deg, rgba(96, 165, 250, 0.045) 0 1px, transparent 1px 96px);
  background-size:
    auto, auto,
    120px 120px,
    120px 120px,
    auto;
  background-position:
    0 0, 0 0,
    0 0,
    60px 60px,
    0 0;
  background-attachment: fixed, fixed, scroll, scroll, scroll;
}

.rbp-gcp-shell {
  /* Browsing width tracks the viewport so the product grid fills whole rows
     as you zoom out / on wide monitors (the grid already auto-fills columns;
     the old 1640px cap was what left empty margin instead of adding columns).
     Capped high to avoid an absurdly wide layout at extreme zoom-out.
     Mobile is unaffected — the viewport is always well below the cap. */
  width: min(100%, 2600px);
  margin: 0 auto;
  padding: 0 clamp(16px, 2.6vw, 40px);
  box-sizing: border-box;
}
/* Keep the game-landing hero from over-stretching in the now-wider shell;
   the product grid + browsing sections still fill the full width. */
.rbp-gcp-hero {
  max-width: 1680px;
  margin-inline: auto;
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

.rbp-gcp-hero {
  padding-bottom: clamp(10px, 1.1vw, 14px);
}

.rbp-gcp-hero__grid {
  position: relative;
  display: grid;
  /* Tighter than the previous pass: the hero is a browsing page header,
     not a landing-page banner — copy / media / stats columns are close to
     equal weight and the grid pads in tightly so the first product row
     stays close to the fold. */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(220px, 260px);
  grid-template-areas: "copy media stats";
  gap: clamp(12px, 1.4vw, 22px);
  align-items: center;
  /* Un-boxed / "loose" hero — no card frame (matches the homepage). The page
     gutter comes from .rbp-gcp-shell; the hero just needs a little vertical
     breathing room. overflow is left visible so the decorative orbit ring can
     extend past the media cell like it does on the homepage. */
  padding: clamp(4px, 0.6vw, 10px) 0;
  overflow: visible;
}

.rbp-gcp-hero__grid > * {
  position: relative;
  z-index: 1;
}

.rbp-gcp-hero__copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.2vw, 18px);
  min-width: 0;
}

/* Hero "scene" - centrepiece of the card. The .rbp-gcp-hero__media slot is
   the grid cell; .rbp-gcp-hero-scene is the *inner* composition that owns
   the layered glow/rings/image/gems/sparks/floor. Keeping the composition
   in its own box means we can clamp it to a tidy aspect ratio and stop
   the transparent hero asset from blowing the panel out vertically. */
.rbp-gcp-hero__media {
  grid-area: media;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Lower min-height than before — the scene below is the bounded
     element, and the cell just needs to hold it without forcing extra
     vertical space on the panel. */
  min-height: clamp(140px, 12.5vw, 196px);
  min-width: 0;
  padding: clamp(2px, 0.4vw, 8px) 0;
}

.rbp-gcp-hero-scene,
.rbp-gcp-hero__scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Cap the composition so a tall transparent asset cannot drive the
     hero into landing-page territory. */
  max-width: clamp(230px, 23vw, 350px);
  aspect-ratio: 1 / 0.74;
  max-height: clamp(150px, 15vw, 224px);
  margin: 0 auto;
}

.rbp-gcp-hero__title-row {
  display: flex;
  gap: clamp(10px, 1vw, 16px);
  align-items: center;
}

/* App-style icon: the inner image owns the rounded mask so the
   underlying square asset never reads as "pasted into a box". The outer
   container only contributes a soft halo + 1px hairline, kept very
   subtle so it feels like a real polished game icon. */
.rbp-gcp-hero__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(46px, 4vw, 62px);
  height: clamp(46px, 4vw, 62px);
  border-radius: 18px;
  background: transparent;
  box-shadow:
    0 10px 24px rgba(37, 99, 235, 0.28),
    0 0 0 1px rgba(96, 165, 250, 0.18);
  overflow: visible;
}

.rbp-gcp-hero__icon::before {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: 0;
  border-radius: 22px;
  background: radial-gradient(closest-side at 50% 50%, rgba(96, 165, 250, 0.32), transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}

.rbp-gcp-hero__icon img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.rbp-gcp-hero__title,
.rbp-gcp h1.rbp-gcp-hero__title {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5ch;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: clamp(26px, 2.3vw, 40px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.012em !important;
  text-transform: none !important;
  text-shadow: none !important;
}

.rbp-gcp-hero__verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(22px, 1.6vw, 28px);
  height: clamp(22px, 1.6vw, 28px);
  color: #60a5fa;
}

.rbp-gcp-hero__verified svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rbp-gcp-hero__tagline {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 60ch;
  color: var(--rbp-gcp-text-dim) !important;
  font-size: clamp(14px, 1vw, 17px) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  text-shadow: none !important;
}

.rbp-gcp-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rbp-gcp-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--rbp-gcp-border);
  border-radius: 999px;
  background: var(--rbp-gcp-panel);
  color: var(--rbp-gcp-text-dim);
  font-size: clamp(11px, 0.78vw, 13px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.rbp-gcp-badge__ico {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: #60a5fa;
}

/* Shared SVG sizing - every inline icon in this scope renders as a 1em-1em
   stroked glyph. Fill:none keeps the icon library readable across surfaces. */
.rbp-gcp svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rbp-gcp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.rbp-gcp-btn {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  cursor: pointer;
  /* Softer transition - only colours and shadow ease, no movement. */
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.rbp-gcp-btn svg {
  width: 14px;
  height: 14px;
}

.rbp-gcp-btn--primary {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  color: #fff;
  box-shadow:
    0 6px 14px rgba(37, 99, 235, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.rbp-gcp-btn--primary:hover {
  background: linear-gradient(180deg, #4f8ff8, #2f6fea);
  box-shadow:
    0 8px 18px rgba(37, 99, 235, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.rbp-gcp-btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--rbp-gcp-border);
  color: var(--rbp-gcp-text);
}

.rbp-gcp-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(148, 163, 184, 0.28);
}

.rbp-gcp-hero__halo {
  position: absolute;
  inset: 6% 6% 10% 6%;
  background:
    radial-gradient(closest-side at 50% 55%, rgba(96, 165, 250, 0.55), rgba(59, 130, 246, 0.18) 45%, transparent 75%);
  filter: blur(26px);
  pointer-events: none;
  z-index: 0;
}

.rbp-gcp-hero__rings {
  position: absolute;
  /* Centre with inset:0 + margin:auto (a STATIC layout-based centre) instead of
     a transform. That frees the animated `transform` to be a PURE rotate() — with
     no translate in the keyframe there is literally nothing for the browser to
     drift. The previous translate(-50%,-50%)+rotate combo accumulated a sideways
     shift in Firefox over time. */
  inset: 0;
  margin: auto;
  width: min(86%, 320px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px dashed rgba(96, 165, 250, 0.26);
  pointer-events: none;
  z-index: 0;
  animation: rbp-gcp-spin 60s linear infinite;
  transform-origin: 50% 50%;
}

.rbp-gcp-hero__rings::before,
.rbp-gcp-hero__rings::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(96, 165, 250, 0.16);
}

.rbp-gcp-hero__rings::before {
  inset: 14%;
}

.rbp-gcp-hero__rings::after {
  inset: -14%;
  border-style: dotted;
  border-color: rgba(96, 165, 250, 0.20);
}

/* Both keyframes carry the SAME transform-function list (translate + rotate)
   so the browser interpolates each function independently. With only a `to`
   (mismatched lists vs the base translate), browsers fall back to matrix
   decomposition, which resolved the percentage translate inconsistently and
   slowly DRIFTED the ring off-centre over time. Matching lists = pure spin. */
@keyframes rbp-gcp-spin {
  to { transform: rotate(360deg); }
}

/* Soft "floor" glow under the asset so the scene feels grounded instead
   of an asset hanging in space. Pure CSS - a horizontally squashed radial
   gradient anchored at the bottom of the scene. */
.rbp-gcp-hero__floor {
  position: absolute;
  left: 50%;
  bottom: 6%;
  z-index: 1;
  width: 72%;
  height: 36px;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side at 50% 50%, rgba(96, 165, 250, 0.55), rgba(37, 99, 235, 0.20) 45%, transparent 75%);
  filter: blur(10px);
  pointer-events: none;
  opacity: 0.85;
}

/* Hero asset: treat as a transparent scene element. We constrain BOTH
   width and height so a tall transparent character cannot dominate the
   panel vertically; object-fit:contain preserves the asset's aspect. */
/* The float animation lives on the WRAPPER (.rbp-gcp-hero__img-wrap) which has
   NO filter, so its transform is composited cheaply. The image itself keeps the
   drop-shadow but is STATIC, so the (expensive) filter is rasterised once instead
   of every frame. */
.rbp-gcp-hero__img-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: rbp-gcp-float 6s ease-in-out infinite;
  will-change: transform;
}

.rbp-gcp-hero__img,
.rbp-gcp-hero-image {
  display: block;
  width: 100%;
  max-width: min(100%, 320px);
  max-height: clamp(148px, 17vw, 244px);
  height: auto;
  object-fit: contain;
  object-position: center 56%;
  filter:
    drop-shadow(0 22px 32px rgba(37, 99, 235, 0.42))
    drop-shadow(0 0 28px rgba(96, 165, 250, 0.30));
}

/* Fallback path: the game icon is square, so cap its size more
   aggressively otherwise it reads as an oversized product thumbnail. */
.rbp-gcp-hero__img--fallback {
  max-width: clamp(140px, 14vw, 220px);
  max-height: clamp(140px, 14vw, 220px);
}

@keyframes rbp-gcp-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Floating decorative diamonds. Each variant is a different size and
   offset so the scene reads as composed rather than tiled. */
.rbp-gcp-hero__gem {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  color: #60a5fa;
  filter: drop-shadow(0 4px 10px rgba(59, 130, 246, 0.45));
  pointer-events: none;
  animation: rbp-gcp-gem 5.5s ease-in-out infinite;
  will-change: transform;   /* same filter-repaint fix as the hero image */
}

.rbp-gcp-hero__gem svg {
  width: 100%;
  height: 100%;
}

.rbp-gcp-hero__gem--a { top: 12%;  left: 8%;  width: clamp(28px, 3vw, 44px); animation-delay: -0.4s; }
.rbp-gcp-hero__gem--b { top: 22%;  right: 10%; width: clamp(36px, 4vw, 56px); animation-delay: -1.6s; }
.rbp-gcp-hero__gem--c { bottom: 16%; left: 14%; width: clamp(32px, 3.4vw, 50px); animation-delay: -2.8s; }
.rbp-gcp-hero__gem--d { bottom: 10%; right: 16%; width: clamp(22px, 2.4vw, 34px); animation-delay: -4.2s; opacity: 0.85; }

@keyframes rbp-gcp-gem {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-8px) rotate(3deg); }
}

/* Tiny twinkling sparks layered behind the gems. The container takes the
   full media area and positions each <i> via nth-of-type so we don't
   need a wrapper per spark. */
.rbp-gcp-hero__sparks {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.rbp-gcp-hero__sparks i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #bfdbfe;
  box-shadow: 0 0 8px 1px rgba(191, 219, 254, 0.8);
  opacity: 0.55;
  animation: rbp-gcp-twinkle 3.6s ease-in-out infinite;
}

.rbp-gcp-hero__sparks i:nth-of-type(1) { top: 8%;  left: 24%; animation-delay: -0.0s; }
.rbp-gcp-hero__sparks i:nth-of-type(2) { top: 18%; left: 60%; animation-delay: -0.6s; width: 3px; height: 3px; }
.rbp-gcp-hero__sparks i:nth-of-type(3) { top: 30%; left: 90%; animation-delay: -1.1s; }
.rbp-gcp-hero__sparks i:nth-of-type(4) { top: 50%; left: 4%;  animation-delay: -1.6s; width: 3px; height: 3px; }
.rbp-gcp-hero__sparks i:nth-of-type(5) { top: 62%; left: 80%; animation-delay: -2.1s; }
.rbp-gcp-hero__sparks i:nth-of-type(6) { top: 78%; left: 28%; animation-delay: -2.6s; width: 3px; height: 3px; }
.rbp-gcp-hero__sparks i:nth-of-type(7) { top: 88%; left: 64%; animation-delay: -3.1s; }
.rbp-gcp-hero__sparks i:nth-of-type(8) { top: 40%; left: 38%; animation-delay: -3.4s; width: 2.5px; height: 2.5px; }

@keyframes rbp-gcp-twinkle {
  0%, 100% { opacity: 0.18; transform: scale(0.85); }
  50%      { opacity: 0.85; transform: scale(1.1); }
}

/* prefers-reduced-motion: silence the decorative motion. The scene
   stays composed - just frozen. */
@media (prefers-reduced-motion: reduce) {
  .rbp-gcp-hero__rings,
  .rbp-gcp-hero__img-wrap,
  .rbp-gcp-hero__gem,
  .rbp-gcp-hero__sparks i {
    animation: none !important;
  }
}

.rbp-gcp-hero__stats {
  grid-area: stats;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.7vw, 12px);
  justify-content: center;
  /* Un-boxed to match the loose hero — was a heavy bordered card. A thin left
     hairline groups it as a column without re-introducing a box. */
  padding: 2px 0 2px clamp(14px, 1.2vw, 20px);
  border-left: 1px solid rgba(96, 165, 250, 0.14);
  min-width: 0;
}

/* Eyebrow gets its own subtle rule under it so the trust panel reads as
   a deliberately-titled module, not just a stack of numbers. */
.rbp-gcp-hero__stats > .rbp-gcp-hero__stats-eyebrow {
  padding-bottom: clamp(8px, 0.7vw, 12px);
  border-bottom: 1px solid rgba(148, 163, 184, 0.10);
}

.rbp-gcp-hero__stats-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #93c5fd;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rbp-gcp-hero__stats-eyebrow i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #60a5fa;
  box-shadow: 0 0 8px rgba(96, 165, 250, 0.8);
  animation: rbp-gcp-pulse 2.2s ease-in-out infinite;
}

@keyframes rbp-gcp-pulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 8px rgba(96, 165, 250, 0.8); }
  50%      { transform: scale(1.3); box-shadow: 0 0 14px rgba(96, 165, 250, 1); }
}

.rbp-gcp-stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: clamp(4px, 0.4vw, 6px) 0;
}

.rbp-gcp-stat + .rbp-gcp-stat {
  border-top: 1px solid rgba(148, 163, 184, 0.10);
  padding-top: clamp(8px, 0.7vw, 11px);
}

.rbp-gcp-stat__ico {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.26), rgba(37, 99, 235, 0.12));
  color: #93c5fd;
  box-shadow:
    inset 0 0 0 1px rgba(96, 165, 250, 0.22),
    0 6px 14px rgba(37, 99, 235, 0.18);
  flex-shrink: 0;
  box-sizing: border-box;
}

.rbp-gcp-stat__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rbp-gcp-stat__value {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: #fff !important;
  font-size: clamp(18px, 1.5vw, 26px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
}

.rbp-gcp-stat__value i {
  color: #fbbf24;
  font-style: normal;
  font-size: 0.7em;
}

.rbp-gcp-stat__label {
  color: var(--rbp-gcp-text-mute) !important;
  font-size: clamp(11px, 0.78vw, 12px) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

/* ------------------------------------------------------------------ */
/* Giveaway banner                                                     */
/* ------------------------------------------------------------------ */

.rbp-gcp-giveaway {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: clamp(14px, 1.6vw, 24px);
  align-items: center;
  padding: clamp(12px, 1.2vw, 18px) clamp(16px, 1.8vw, 24px);
  margin: clamp(10px, 1vw, 16px) 0 clamp(14px, 1.4vw, 22px);
  border: 1px solid rgba(251, 191, 36, 0.24);
  border-radius: var(--rbp-gcp-radius);
  background:
    radial-gradient(60% 200% at 0% 50%, rgba(251, 191, 36, 0.16), transparent 55%),
    radial-gradient(60% 200% at 100% 50%, rgba(59, 130, 246, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(11, 24, 45, 0.90), rgba(7, 14, 28, 0.95));
  box-shadow:
    0 14px 36px rgba(2, 6, 18, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(251, 191, 36, 0.05);
  color: inherit;
  text-decoration: none !important;
  overflow: hidden;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

/* LIVE pulse dot inside the eyebrow so the banner reads as an ongoing
   event strip rather than a static promo card. */
.rbp-gcp-giveaway__eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.9);
  vertical-align: middle;
  animation: rbp-gcp-pulse 2.2s ease-in-out infinite;
}

/* Faint shimmer line across the banner so it reads as a "live event"
   surface, not a static notification card. */
.rbp-gcp-giveaway::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(251, 191, 36, 0.06) 50%,
    transparent 65%
  );
  background-size: 200% 100%;
  animation: rbp-gcp-shimmer 7s linear infinite;
  pointer-events: none;
}

@keyframes rbp-gcp-shimmer {
  to { background-position: -200% 0; }
}

.rbp-gcp-giveaway > * {
  position: relative;
  z-index: 1;
}

.rbp-gcp-giveaway:hover {
  border-color: rgba(251, 191, 36, 0.4);
  box-shadow:
    0 16px 42px rgba(2, 6, 18, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(251, 191, 36, 0.16);
}

.rbp-gcp-giveaway__mark {
  display: inline-flex;
  width: clamp(46px, 3.8vw, 60px);
  height: clamp(46px, 3.8vw, 60px);
  align-items: center;
  justify-content: center;
  padding: 13px;
  border-radius: 14px;
  background:
    radial-gradient(120% 120% at 30% 0%, rgba(254, 215, 130, 0.3), rgba(217, 119, 6, 0.14));
  color: #fde68a;
  box-shadow:
    inset 0 0 0 1px rgba(251, 191, 36, 0.32),
    0 8px 22px rgba(217, 119, 6, 0.32);
  box-sizing: border-box;
}

.rbp-gcp-giveaway__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.rbp-gcp-giveaway__eyebrow {
  display: inline-flex;
  align-items: center;
  color: #fbd58a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rbp-gcp-giveaway__title {
  color: #fff;
  font-size: clamp(15px, 1.1vw, 19px);
  font-weight: 800;
  line-height: 1.25;
}

.rbp-gcp-giveaway__sub {
  color: var(--rbp-gcp-text-mute);
  font-size: clamp(11px, 0.82vw, 13px);
}

.rbp-gcp-giveaway__view {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
  padding: 5px 10px 5px 12px;
  width: max-content;
  border: 1px solid rgba(96, 165, 250, 0.32);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.18), rgba(37, 99, 235, 0.10));
  color: #cfe1ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.rbp-gcp-giveaway:hover .rbp-gcp-giveaway__view {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.32), rgba(59, 130, 246, 0.22));
  color: #fff;
  border-color: rgba(96, 165, 250, 0.5);
}

.rbp-gcp-giveaway__view svg {
  width: 11px;
  height: 11px;
}

.rbp-gcp-giveaway__prize {
  position: relative;
  padding-left: clamp(14px, 1.4vw, 22px);
}

.rbp-gcp-giveaway__prize::before {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(148, 163, 184, 0.22), transparent);
}

.rbp-gcp-giveaway__timer {
  position: relative;
  padding-left: clamp(14px, 1.4vw, 22px);
}

.rbp-gcp-giveaway__timer::before {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(148, 163, 184, 0.22), transparent);
}

.rbp-gcp-giveaway__prize {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.rbp-gcp-giveaway__prize-ico {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  color: #93c5fd;
  flex-shrink: 0;
}

/* Premium prize tile shared with the homepage giveaway banner.
   The .rbp-gcp-giveaway__prize--img modifier is added by both
   templates when a prize image is available. The tile becomes a
   gold-accented glass surface with a soft glow, so the prize image
   reads as a visual focal point instead of a flat thumbnail. The
   homepage uses an additional .rbp-home-giveaway__prize-ico alias
   class for backwards compatibility — rules below match either. */
.rbp-gcp-giveaway__prize--img .rbp-gcp-giveaway__prize-ico,
.rbp-home-giveaway__prize-ico {
  position: relative;
  width: clamp(46px, 3.6vw, 56px);
  height: clamp(46px, 3.6vw, 56px);
  border-radius: 12px;
  padding: 4px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(250, 204, 21, 0.18), rgba(77, 163, 255, 0.10) 60%, rgba(7, 18, 38, 0.85) 100%),
    linear-gradient(180deg, rgba(13, 30, 60, 0.92), rgba(7, 18, 38, 0.95));
  border: 1px solid rgba(250, 204, 21, 0.32);
  box-shadow:
    0 6px 16px rgba(2, 6, 18, 0.45),
    0 0 18px rgba(250, 204, 21, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
  flex: 0 0 auto;
}

.rbp-gcp-giveaway__prize--img .rbp-gcp-giveaway__prize-ico::after,
.rbp-home-giveaway__prize-ico::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% -20%, rgba(255, 255, 255, 0.08), transparent 55%);
}

.rbp-gcp-giveaway__prize--img .rbp-gcp-giveaway__prize-ico img,
.rbp-home-giveaway__prize-ico img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(2, 6, 18, 0.5));
}

.rbp-gcp-giveaway__prize--img .rbp-gcp-giveaway__prize-ico svg,
.rbp-home-giveaway__prize-ico svg {
  position: relative;
  width: 58%;
  height: 58%;
  stroke: #ffe680;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.45));
}

/* Gold the "Grand Prize" label so it reads as the premium accent on
   both surfaces, not just the homepage. */
.rbp-gcp-giveaway__prize small {
  color: rgba(255, 230, 128, 0.92) !important;
  letter-spacing: 0.14em;
  font-weight: 800;
}

.rbp-gcp-giveaway__prize div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rbp-gcp-giveaway__prize small {
  color: var(--rbp-gcp-text-mute);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rbp-gcp-giveaway__prize strong {
  color: #fff;
  font-size: clamp(13px, 0.95vw, 16px);
  font-weight: 800;
  line-height: 1.2;
}

.rbp-gcp-giveaway__prize span {
  color: var(--rbp-gcp-text-dim);
  font-size: 11px;
  font-weight: 600;
}

.rbp-gcp-giveaway__timer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 0;
}

.rbp-gcp-giveaway__timer-label {
  color: var(--rbp-gcp-text-mute);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.rbp-gcp-giveaway__cells {
  display: flex;
  gap: 6px;
}

.rbp-gcp-giveaway__cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 42px;
  padding: 6px 8px;
  border: 1px solid var(--rbp-gcp-border);
  border-radius: 10px;
  background: rgba(5, 11, 26, 0.7);
}

.rbp-gcp-giveaway__cell b {
  color: #fff;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 900;
  line-height: 1;
  font-feature-settings: 'tnum' on;
}

.rbp-gcp-giveaway__cell i {
  color: var(--rbp-gcp-text-mute);
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------------ */
/* Category tabs (in-page section nav)                                  */
/* ------------------------------------------------------------------ */

.rbp-gcp-tabs {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1vw, 16px);
  margin-bottom: clamp(14px, 1.4vw, 22px);
}

.rbp-gcp-tabs__label {
  flex-shrink: 0;
  color: #93c5fd !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.rbp-gcp-tabs__inner {
  display: flex;
  gap: 6px;
  flex: 1 1 0;
  padding: 6px;
  border: 1px solid rgba(96, 165, 250, 0.20);
  border-radius: 999px;
  background:
    radial-gradient(60% 200% at 50% 50%, rgba(59, 130, 246, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(11, 24, 45, 0.82), rgba(7, 14, 28, 0.88));
  box-shadow:
    0 12px 28px rgba(2, 6, 18, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow-x: auto;
  scrollbar-width: none;
}

.rbp-gcp-tabs__inner::-webkit-scrollbar {
  display: none;
}

.rbp-gcp-tab {
  position: relative;
  display: inline-flex;
  flex: 1 1 auto;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--rbp-gcp-text-dim) !important;
  font-size: clamp(12px, 0.88vw, 14px) !important;
  font-weight: 700 !important;
  white-space: nowrap;
  text-decoration: none !important;
  text-transform: none !important;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.rbp-gcp-tab__ico {
  display: inline-flex;
  width: 15px;
  height: 15px;
  color: currentColor;
  opacity: 0.85;
}

.rbp-gcp-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff !important;
}

.rbp-gcp-tab.is-active {
  background:
    linear-gradient(180deg, rgba(96, 165, 250, 0.42), rgba(37, 99, 235, 0.28));
  border-color: rgba(96, 165, 250, 0.62);
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 24px rgba(59, 130, 246, 0.32),
    0 6px 16px rgba(37, 99, 235, 0.30);
}

.rbp-gcp-tab.is-active .rbp-gcp-tab__ico {
  opacity: 1;
  color: #cfe3ff;
}

/* Underline-glow accent for the active tab so the browsing controller
   reads as a real "now showing" cue rather than just a coloured pill. */
.rbp-gcp-tab.is-active::after {
  content: "";
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #93c5fd, transparent);
  box-shadow: 0 0 10px rgba(147, 197, 253, 0.7);
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Category section + slider                                            */
/* ------------------------------------------------------------------ */

.rbp-gcp-sections {
  display: flex;
  flex-direction: column;
  /* Tight section rhythm — this is a browsing surface, so product rows
     should read as a dense storefront, not a sparse marketing page. */
  gap: clamp(16px, 1.6vw, 24px);
  /* Top margin pulls the first product row up close to the giveaway
     banner now that the in-page tab strip is gone. */
  margin-top: clamp(2px, 0.4vw, 6px);
  padding-bottom: clamp(16px, 1.6vw, 24px);
}

.rbp-gcp-section {
  /* scroll-margin-top has to clear both the fixed main header + subheader
     when a tab click scrolls a section into view; this matches the height
     calc used elsewhere. */
  scroll-margin-top: calc(var(--rbp-fixed-main-h, 88px) + var(--rbp-fixed-sub-h, 0px) + 18px);
}

.rbp-gcp-section__head {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(8px, 1vw, 14px);
  flex-wrap: wrap;
}

.rbp-gcp-section__title-wrap {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.rbp-gcp-section__ico {
  display: inline-flex;
  width: clamp(34px, 2.6vw, 44px);
  height: clamp(34px, 2.6vw, 44px);
  align-items: center;
  justify-content: center;
  padding: 9px;
  border-radius: 12px;
  background:
    radial-gradient(120% 120% at 30% 0%, rgba(96, 165, 250, 0.32), rgba(37, 99, 235, 0.14));
  color: #cfe1ff;
  box-shadow:
    inset 0 0 0 1px rgba(96, 165, 250, 0.28),
    0 8px 18px rgba(37, 99, 235, 0.22);
  box-sizing: border-box;
  flex-shrink: 0;
}

/* !important on color / font-weight beats Breakdance's global heading rules
   which would otherwise render the section title as the theme's
   default dim grey. Same pattern for the blurb's brightness. */
.rbp-gcp-section__title,
.rbp-gcp .rbp-gcp-section__title,
.rbp-gcp h2.rbp-gcp-section__title {
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: clamp(18px, 1.4vw, 24px) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
}

.rbp-gcp-section__blurb,
.rbp-gcp .rbp-gcp-section__blurb {
  margin: 4px 0 0 !important;
  padding: 0 !important;
  color: var(--rbp-gcp-text-dim) !important;
  font-size: clamp(12px, 0.88vw, 14px) !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

.rbp-gcp-section__controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Arrows: blue-tinted gradient on a dark surface with an inner highlight
   ring, so the controls read as a deliberate, branded affordance instead
   of a default-grey browser button. */
.rbp-gcp-arrow {
  display: inline-flex;
  width: 40px;
  height: 40px;
  padding: 11px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(96, 165, 250, 0.22);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(59, 130, 246, 0.20), rgba(37, 99, 235, 0.10));
  color: #cfe1ff;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 6px 14px rgba(2, 6, 18, 0.35);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  box-sizing: border-box;
}

.rbp-gcp-arrow:hover {
  background:
    linear-gradient(180deg, rgba(96, 165, 250, 0.35), rgba(59, 130, 246, 0.22));
  border-color: rgba(96, 165, 250, 0.45);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 22px rgba(37, 99, 235, 0.28);
}

.rbp-gcp-arrow:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* View-all: more prominent than the arrows. Reads as a primary-ish CTA
   pill - dark glass core with a subtle inner ring and a chevron icon. */
.rbp-gcp-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  padding: 11px 18px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(13, 27, 52, 0.92), rgba(7, 14, 28, 0.92));
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 6px 14px rgba(2, 6, 18, 0.4);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.rbp-gcp-view-all:hover {
  background:
    linear-gradient(180deg, rgba(59, 130, 246, 0.32), rgba(37, 99, 235, 0.22));
  border-color: rgba(96, 165, 250, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 24px rgba(37, 99, 235, 0.28);
}

.rbp-gcp-view-all::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 1.8px solid currentColor;
  border-right: 1.8px solid currentColor;
  transform: rotate(45deg);
  margin-left: 2px;
  opacity: 0.9;
}

/* ------------------------------------------------------------------ */
/* Slider strip + card                                                 */
/* ------------------------------------------------------------------ */

.rbp-gcp-slider {
  --rbp-gcp-slider-bleed: clamp(18px, 1.25vw, 24px);
  --rbp-gcp-slider-gutter: clamp(8px, 0.8vw, 12px);
  --rbp-gcp-slider-y-bleed: clamp(34px, 2.5vw, 46px);
  position: relative;
  margin-inline: calc(var(--rbp-gcp-slider-bleed) * -1);
  padding-inline: var(--rbp-gcp-slider-gutter);
  overflow: visible;
}

/* WC's [products] shortcode wraps the loop in <div class="woocommerce">.
   Strip its default margin and let the slider own the spacing. */
.rbp-gcp-slider .woocommerce {
  margin: 0;
  padding: 0;
  overflow: visible;
}

/* The slider strip itself: horizontal flex, scroll-snap, hidden bottom-
   chrome. Override every columns-N variant the shortcode might emit. */
.rbp-gcp-slider ul.products,
.rbp-gcp-slider .woocommerce > ul.products,
.rbp-gcp-slider ul.products.columns-1,
.rbp-gcp-slider ul.products.columns-2,
.rbp-gcp-slider ul.products.columns-3,
.rbp-gcp-slider ul.products.columns-4,
.rbp-gcp-slider ul.products.columns-5,
.rbp-gcp-slider ul.products.columns-6,
.rbp-gcp-slider ul.products.columns-7,
.rbp-gcp-slider ul.products.columns-8 {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: clamp(10px, 1vw, 16px);
  width: 100%;
  box-sizing: border-box;
  margin: calc(var(--rbp-gcp-slider-y-bleed) * -0.44) 0 calc(var(--rbp-gcp-slider-y-bleed) * -0.38) !important;
  /* The horizontal scrollbar clips paint to its own padding box, so
     the larger inline/bottom padding gives hover glows room to breathe
     without changing the visible card width or scroll logic. */
  padding: var(--rbp-gcp-slider-y-bleed) var(--rbp-gcp-slider-bleed) calc(var(--rbp-gcp-slider-y-bleed) + 14px) !important;
  overflow-x: auto;
  overflow-y: visible;
  scroll-padding-inline: var(--rbp-gcp-slider-bleed);
  scroll-snap-type: x proximity;
  /* NOTE: do NOT set `scroll-behavior: smooth` here. The JS uses
     scrollBy({ behavior: "smooth" }) for arrow paginations (which
     animates explicitly via the option) and direct `scrollLeft = N`
     for instant edge wraps. A CSS-level smooth-scroll would re-animate
     the wrap and, combined with scroll-snap-type, produced a feedback
     loop where each programmatic scroll re-fired the scroll listener.
     See initSlider() in game-category-page.js. */
  /* Hide the native horizontal scrollbar so the slider track reads as
     a clean carousel. Vertical page scrolling is unaffected — only this
     element's scrollbar is suppressed. Touch / wheel / arrow scroll all
     keep working. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}

.rbp-gcp-slider ul.products::-webkit-scrollbar { display: none; height: 0; width: 0; }

.rbp-gcp-slider ul.products::after {
  content: "";
  flex: 0 0 clamp(4px, 0.6vw, 10px);
}

/* Card: fixed width, flex-column so image / title / price / button stack
   predictably regardless of what WC and any sibling plugin emits.
   Each card sits inside its own panel - a darker bluish container that
   pops the card off the page background and gives the hover lift
   something visible to animate against. */
.rbp-gcp-slider ul.products > li.product {
  position: relative;
  display: flex !important;
  flex-direction: column;
  gap: var(--rbp-gcp-card-gap);
  flex: 0 0 var(--rbp-gcp-card-w) !important;
  width: var(--rbp-gcp-card-w) !important;
  max-width: var(--rbp-gcp-card-w) !important;
  min-width: 0;
  margin: 0 !important;
  padding: var(--rbp-gcp-card-pad) !important;
  box-sizing: border-box;
  list-style: none;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  border-radius: calc(var(--rbp-gcp-radius-sm) + 4px) !important;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(59, 130, 246, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(15, 30, 56, 0.78), rgba(8, 17, 34, 0.78)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 22px rgba(2, 6, 18, 0.42) !important;
  overflow: visible;
  isolation: isolate;
  scroll-snap-align: start;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.rbp-gcp-slider ul.products > li.product:hover {
  transform: translateY(-4px);
  border-color: rgba(96, 165, 250, 0.42) !important;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(59, 130, 246, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(20, 38, 70, 0.92), rgba(11, 23, 44, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 36px rgba(37, 99, 235, 0.28),
    0 0 0 1px rgba(96, 165, 250, 0.24) !important;
}

/* Note: we intentionally do NOT blank ::before / ::after on the li here -
   those slots are used by the In-Stock and Out-of-Stock pills (see below). */

/* The image link: wraps the product image. We give it a 1:1 framed
   wrapper with the starry product background and the image floats above. */
.rbp-gcp-slider ul.products > li.product a.woocommerce-LoopProduct-link {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--rbp-gcp-card-gap);
  min-width: 0;
  min-height: 0;
  text-decoration: none !important;
  color: inherit;
}

.rbp-gcp-slider ul.products > li.product a.woocommerce-LoopProduct-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--rbp-gcp-radius-sm);
  background: var(--rbp-gcp-card-bg) center / cover no-repeat;
  transition: box-shadow 0.18s ease;
}

.rbp-gcp-slider ul.products > li.product:hover a.woocommerce-LoopProduct-link::before {
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.32),
    0 0 22px rgba(59, 130, 246, 0.18);
}

.rbp-gcp-slider ul.products > li.product a.woocommerce-LoopProduct-link img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  box-sizing: border-box;
  padding: var(--rbp-gcp-card-pad);
  object-fit: contain;
  border-radius: var(--rbp-gcp-radius-sm);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
  transform: scale(0.9);
  transform-origin: 50% 60%;
  transition: filter 0.18s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rbp-gcp-slider ul.products > li.product:hover a.woocommerce-LoopProduct-link img {
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.26));
  /* Match the homepage's hover-scale so /pet-simulator-99/ and
     /steal-a-brainrot/ feel alive in the same way. Same 1.04 target
     as the homepage rule at homepage.css → keeps the two surfaces
     visually consistent. */
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .rbp-gcp-slider ul.products > li.product a.woocommerce-LoopProduct-link img {
    transition: filter 0.18s ease;
  }
  .rbp-gcp-slider ul.products > li.product:hover a.woocommerce-LoopProduct-link img {
    transform: scale(0.9);
  }
}

/* !important on color/font is required to win against Breakdance's
   theme defaults, which render product-loop titles + prices in a dim
   grey on dark backgrounds (the recurring "leak" the user flagged).
   Same pattern for every nested element WC may wrap the value in
   (<bdi>, <ins>, <del>, .amount, .woocommerce-Price-amount). */
.rbp-gcp-slider ul.products > li.product .woocommerce-loop-product__title,
.rbp-gcp-slider ul.products > li.product h2.woocommerce-loop-product__title,
.rbp-gcp-slider ul.products > li.product h3.woocommerce-loop-product__title {
  display: -webkit-box;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  color: #fff !important;
  font-size: clamp(13px, 0.85vw, 15px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: calc(clamp(13px, 0.85vw, 15px) * 1.2 * 2);
}

.rbp-gcp-slider ul.products > li.product .price,
.rbp-gcp-slider ul.products > li.product .price *,
.rbp-gcp-slider ul.products > li.product .price bdi,
.rbp-gcp-slider ul.products > li.product .price ins,
.rbp-gcp-slider ul.products > li.product .price .amount,
.rbp-gcp-slider ul.products > li.product .price .woocommerce-Price-amount,
.rbp-gcp-slider ul.products > li.product .price .woocommerce-Price-currencySymbol {
  color: #fff !important;
  background: none !important;
  text-shadow: none !important;
  text-decoration: none !important;
}

.rbp-gcp-slider ul.products > li.product .price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  justify-content: flex-start;
  align-self: stretch;
  width: 100%;
  min-height: clamp(34px, 2.4vw, 44px);
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(18px, 1.1vw, 22px) !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

.rbp-gcp-slider ul.products > li.product .price > *,
.rbp-gcp-slider ul.products > li.product .price bdi,
.rbp-gcp-slider ul.products > li.product .price .amount,
.rbp-gcp-slider ul.products > li.product .price .woocommerce-Price-amount {
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

.rbp-gcp-slider ul.products > li.product .price ins {
  order: 1;
  display: block;
  align-self: flex-start;
  text-decoration: none !important;
}

/* Strikethrough original price.
 *
 * The element only — children inherit colour / text-decoration but
 * we MUST NOT apply margin-right or font-size to the descendants:
 * - margin-right on the inner .woocommerce-Price-currencySymbol creates
 *   a visible gap between "£" and the number (12.99).
 * - font-size: 0.85em on every descendant compounds multiplicatively
 *   (em is relative to the parent) so the symbol ends up far smaller
 *   than the number.
 * The colour / text-decoration / font-weight rules still target
 * `del *` so the WC default amount + symbol styles don't paint
 * over our greyed-out strikethrough.
 */
.rbp-gcp-slider ul.products > li.product .price del {
  order: 2;
  display: block;
  align-self: flex-start;
  margin: 0 !important;
  font-size: 0.72em !important;
  line-height: 1 !important;
  opacity: 0.9;
}

/* Colour the entire del subtree grey-blue. The currency symbol and
 * amount each carry their own WooCommerce class which the white-
 * everywhere price rule (above) targets at higher specificity than
 * a bare `del *` would — so we list them explicitly here to match
 * that specificity and win the cascade. */
.rbp-gcp-slider ul.products > li.product .price del,
.rbp-gcp-slider ul.products > li.product .price del *,
.rbp-gcp-slider ul.products > li.product .price del bdi,
.rbp-gcp-slider ul.products > li.product .price del .amount,
.rbp-gcp-slider ul.products > li.product .price del .woocommerce-Price-amount,
.rbp-gcp-slider ul.products > li.product .price del .woocommerce-Price-currencySymbol {
  color: rgba(170, 188, 215, 0.72) !important;
  font-weight: 700 !important;
  text-decoration: line-through !important;
}

/* Defensive: any margin a theme might inject on the inner amount /
   bdi / currencySymbol spans is stripped so "£14.99" stays one
   visually-tight run. */
.rbp-gcp-slider ul.products > li.product .price del *,
.rbp-gcp-slider ul.products > li.product .price del bdi,
.rbp-gcp-slider ul.products > li.product .price del .woocommerce-Price-amount,
.rbp-gcp-slider ul.products > li.product .price del .woocommerce-Price-currencySymbol {
  margin: 0 !important;
  padding: 0 !important;
}

/* Footer: Breakdance injects a quantity stepper here on shop loops. We
   hide it - the user clicks Add To Basket which posts qty=1 - and pin
   the add-to-cart button to fill the card width. */
.rbp-gcp-slider ul.products > li.product .bde-woo-product-footer {
  display: flex;
  width: 100%;
  margin-top: auto;
  padding: 0;
}

.rbp-gcp-slider ul.products > li.product .bde-woo-product-footer .quantity,
.rbp-gcp-slider ul.products > li.product .bde-woo-product-footer .quantity--number,
.rbp-gcp-slider ul.products > li.product .quantity,
.rbp-gcp-slider ul.products > li.product .quantity--number {
  display: none !important;
}

/* WC sometimes emits a "View Basket" link after a successful AJAX add.
   On the loop card it sits next to the button and breaks layout - hide
   it. The mini-cart / fragments already give the user that affordance. */
.rbp-gcp-slider ul.products > li.product .added_to_cart {
  display: none !important;
}

/* Hide WC's small "Out of stock" stock-state line - we render our own
   pill-style badge top-right of the card image. */
.rbp-gcp-slider ul.products > li.product .stock {
  display: none !important;
}

/* Hide screen-reader labels that some Breakdance qty inputs ship with;
   keeping them visible doubles-up text under the price. */
.rbp-gcp-slider ul.products > li.product label.screen-reader-text,
.rbp-gcp-slider ul.products > li.product .screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Add-to-cart button: full-width primary CTA. We re-style from the bare
   <a class="button"> WC emits rather than relying on theme defaults. */
.rbp-gcp-slider ul.products > li.product a.button,
.rbp-gcp-slider ul.products > li.product a.add_to_cart_button {
  display: inline-flex !important;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: clamp(40px, 2.8vw, 46px) !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid rgba(96, 165, 250, 0.45) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, #3b82f6, #2563eb) !important;
  color: #fff !important;
  font-size: clamp(12px, 0.82vw, 14px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none !important;
  text-transform: none !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  box-shadow:
    0 6px 14px rgba(37, 99, 235, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

/* Inject a cart glyph into the button without touching WC markup.
   `data:image/svg+xml,...` keeps the rule self-contained and avoids
   shipping a separate asset just for this icon. */
.rbp-gcp-slider ul.products > li.product a.button::before,
.rbp-gcp-slider ul.products > li.product a.add_to_cart_button::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2 12h12l2-8H6'/%3E%3Ccircle cx='9' cy='20' r='1.6'/%3E%3Ccircle cx='17' cy='20' r='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rbp-gcp-slider ul.products > li.product a.button:hover,
.rbp-gcp-slider ul.products > li.product a.add_to_cart_button:hover {
  background:
    linear-gradient(180deg, #5096fa, #3173ed) !important;
  box-shadow:
    0 10px 22px rgba(37, 99, 235, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Hide the cart glyph on the OOS substitute button - the "Out of Stock"
   text is the only thing that should render in that state. */
.rbp-gcp-slider ul.products > li.product.outofstock a.button::before {
  display: none !important;
}

/* Loading / added states keep the same shape, just dim slightly. */
.rbp-gcp-slider ul.products > li.product a.add_to_cart_button.loading {
  opacity: 0.78;
}

/* ============================================================
 * Corner pills — sale ribbon + In Stock pill
 *
 * Consolidation note: there is a separate, properly-scoped pair of
 * rules in modules/product-display/assets/css/product-display.css
 * for Breakdance-rendered shop loops (`.bde-wooshoppage`,
 * `.bde-wooproductslist`). Those drive the badges on the
 * /product-category/... archive pages. The block below is the
 * single source of truth for badges inside the GCP slider, which
 * is what both /pet-simulator-99/ and the homepage /test/ surface
 * use. The two namespaces never collide (different ancestor
 * classes), but if either side is touched the other should be
 * checked for visual parity.
 *
 * Geometry rationale:
 *   - 10px offset from the card edge. Constant value, not a calc()
 *     against --rbp-gcp-card-pad, so the pill is always anchored
 *     to the card's true corner — never floats inwards on the
 *     image area at desktop and never bleeds outwards on mobile.
 *   - The card border-radius is 16px so a 10px-offset pill corner
 *     sits at (10,10) from the card corner, comfortably inside
 *     the rounded curve: (16-10)² + (16-10)² = 72 < 16².
 *   - max-width is the belt-and-braces: even if a future rule
 *     bumps the padding or a longer label is used, the pill can
 *     never extend past the card edge.
 *   - Padding/font/dot-position trimmed slightly so the IN STOCK
 *     pill (the wider of the two) doesn't crowd the right side
 *     at the new tight offset.
 *   - Box-shadow blur softened so the dark halo doesn't extend
 *     visibly past the card boundary.
 * ============================================================ */

/* Sale ribbon — top-left of the card.
 *
 * Selector is prefixed with `body.rbp-gcp-body` to lift specificity
 * (0,5,4) above the product-display .onsale rule's (0,5,3). Both
 * surfaces that load this CSS (the homepage takeover and the GCP
 * game pages) carry the `rbp-gcp-body` body class, so the prefix
 * always matches without affecting any other context.
 *
 * Anchor compensation:
 *   The In Stock pill is a `::after` on .li.product and anchors to
 *   the li's padding-box edge — so its `top: 18px / right: 18px`
 *   places it 18 px below the li's top border.
 *
 *   The <span class="onsale"> is emitted by WooCommerce INSIDE
 *   <a class="woocommerce-LoopProduct-link"> (the sale flash hooks
 *   into woocommerce_before_shop_loop_item_title, which fires
 *   between the link open and the image). That link is
 *   `position: relative` (see ~line 1392), so the sale span
 *   anchors to the LINK box, which is itself inset from the li by
 *   var(--rbp-gcp-card-pad) (10-14 px depending on viewport).
 *
 *   A plain `top: 18px / left: 18px` on the sale span therefore
 *   ends up var(--rbp-gcp-card-pad) further inside the card than
 *   the In Stock pill on the opposite corner, leaving the sale
 *   ribbon visibly "stranded" off the corner. We subtract the
 *   card padding from the offsets so both badges land at the same
 *   distance from the li's outer edge regardless of breakpoint.
 *
 * Visual: same geometry as the In Stock pill (padding, font, dot,
 * shadow). Only the hue rotates from green to red.
 */
body.rbp-gcp-body .rbp-gcp-slider ul.products > li.product span.onsale,
.rbp-gcp-slider ul.products > li.product span.onsale {
  position: absolute !important;
  top: calc(18px - var(--rbp-gcp-card-pad)) !important;
  left: calc(18px - var(--rbp-gcp-card-pad)) !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 5;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 36px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 4px 9px 4px 15px !important;
  border: 1px solid rgba(248, 113, 113, 0.32) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 7px 50%, rgba(255, 99, 99, 0.95) 2.8px, transparent 3.4px),
    linear-gradient(180deg, rgba(127, 29, 29, 0.82), rgba(76, 18, 18, 0.88)) !important;
  color: rgba(254, 226, 226, 0.95) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28) !important;
  pointer-events: none;
  transform: none !important;
  /* Cancel the product-display rule's backdrop-filter so the dark
     gradient renders with the intended opacity instead of being
     blurred through to the image behind it. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Out of stock: dim the image, overlay, and render an OOS pill. The
   add-to-cart button becomes a flat dark "Out of Stock" pill in its
   place (see below). */
.rbp-gcp-slider ul.products > li.product.outofstock {
  position: relative;
  z-index: 0;
}

.rbp-gcp-slider ul.products > li.product.outofstock a.woocommerce-LoopProduct-link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--rbp-gcp-radius-sm);
  background: rgba(10, 12, 16, 0.42);
  pointer-events: none;
}

.rbp-gcp-slider ul.products > li.product.outofstock a.woocommerce-LoopProduct-link img,
.rbp-gcp-slider ul.products > li.product.outofstock:hover a.woocommerce-LoopProduct-link img {
  opacity: 0.86;
  filter: grayscale(0.25) brightness(0.92) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.16));
}

.rbp-gcp-slider ul.products > li.product.outofstock::after {
  content: "Out of Stock";
  position: absolute;
  /* Balanced corner placement — equal 18px top + right inset so the
     pill sits the same distance from both edges, matching the
     In Stock pill on stocked cards. */
  top: 18px;
  right: 18px;
  z-index: 9;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 36px);
  padding: 4px 9px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  background: rgba(7, 14, 28, 0.7);
  color: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28);
}

.rbp-gcp-slider ul.products > li.product.outofstock span.onsale {
  display: none !important;
}

/* In-stock pill: rendered via ::after on every li.product that does NOT
   carry the .outofstock class. Sits top-right of the image area, mirroring
   the position of the OOS pill so visual rhythm stays consistent across
   stock states. Small + pill-shaped + green so it reads "available" at a
   glance without screaming. */
/* In Stock pill — top-right of the card.
 *
 * Asymmetric offset note: the right inset is 14px while the sale
 * ribbon on the opposite corner uses 10px. The two pills are NOT
 * the same visible width — "IN STOCK" (8 chars) renders ~30-40 px
 * wider than a typical "-NN%" sale ribbon, so a symmetric 10px
 * inset puts the In Stock pill visually closer to the card's
 * right edge than the sale ribbon is to the left. The extra 4 px
 * here brings the two pills back into perceived balance — the
 * user-visible "distance from corner" reads the same on both
 * sides. Shadow blur is also softer than the sale rule so the
 * dark halo can't bleed past the card on the busier right side.
 */
.rbp-gcp-slider ul.products > li.product:not(.outofstock)::after {
  content: "In Stock";
  position: absolute !important;
  /* Shrink the pill itself so the wider IN STOCK label stops crowding
     the right edge regardless of viewport. Smaller font (10px), tighter
     padding (4px / 9px / 4px / 15px), smaller indicator dot (2.8px at
     7px from left). Combined with the equal 18px top/right inset, the
     pill sits diagonally balanced in the card's top-right corner —
     same gap above as to the right of the badge. */
  top: 18px !important;
  right: 18px !important;
  z-index: 9;
  display: inline-flex !important;
  align-items: center;
  max-width: calc(100% - 36px) !important;
  padding: 4px 9px 4px 15px !important;
  border: 1px solid rgba(74, 222, 128, 0.32) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 7px 50%, rgba(74, 222, 128, 0.95) 2.8px, transparent 3.4px),
    linear-gradient(180deg, rgba(20, 83, 45, 0.82), rgba(8, 51, 27, 0.88)) !important;
  color: rgba(220, 252, 231, 0.95) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28) !important;
}

/* Hide the In Stock pill on cards that also have an onsale ribbon,
   so the two pills don't fight for the top corners. The sale ribbon
   is the more commercially valuable signal in that case. */
body.rbp-gcp-body .rbp-gcp-slider ul.products > li.product:not(.outofstock):has(span.onsale)::after,
.rbp-gcp-slider ul.products > li.product:not(.outofstock):has(span.onsale)::after {
  display: none !important;
  content: none !important;
}

/* Defensive nullification.
 *
 * product-display.css carries its own .onsale rule and an extra
 * ::before "dot halo" on the badge. Both are gated by
 * .breakdance-woocommerce:is(.bde-wooshoppage, .bde-wooproductslist)
 * ancestors, but those ancestor classes can be added globally by
 * Breakdance's WC integration depending on theme/builder state — and
 * when they leak through, the product-display rule wins on
 * specificity (5 classes vs our 4) AND it stamps a second dot via
 * ::before on top of our existing radial-gradient dot, making the
 * sale ribbon look chunkier than the matched In Stock pill on the
 * opposite corner.
 *
 * The rule below removes the ::before dot inside our slider so the
 * sale ribbon stays visually identical to the In Stock pill no
 * matter which CSS layer wins the size/position fight. */
.rbp-gcp-slider ul.products > li.product span.onsale::before {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Out-of-stock variant of the button - same shape but a flatter dark
   surface and locked. We blank the WC label and stamp our own "Out of
   Stock" copy via ::after so the button never says "Read more". */
.rbp-gcp-slider ul.products > li.product.outofstock a.button {
  position: relative;
  background: linear-gradient(180deg, rgba(15, 30, 56, 0.85), rgba(8, 17, 34, 0.85)) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  color: rgba(203, 213, 245, 0.85) !important;
  box-shadow: none !important;
  cursor: not-allowed;
  pointer-events: none;
  font-size: 0 !important;
}

.rbp-gcp-slider ul.products > li.product.outofstock a.button::after {
  content: "Out of Stock";
  position: relative;
  display: inline-block;
  color: #cbd5f5;
  font-size: clamp(12px, 0.82vw, 14px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
}

/* ------------------------------------------------------------------ */
/* Trust strip                                                          */
/* ------------------------------------------------------------------ */

.rbp-gcp-trust {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 18px);
  margin: clamp(14px, 1.6vw, 24px) 0 clamp(8px, 1vw, 16px);
  padding: clamp(14px, 1.4vw, 22px) clamp(18px, 1.8vw, 26px);
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: var(--rbp-gcp-radius);
  background:
    radial-gradient(80% 200% at 50% 0%, rgba(59, 130, 246, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(11, 24, 45, 0.78), rgba(7, 14, 28, 0.85));
  box-shadow:
    0 12px 30px rgba(2, 6, 18, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.rbp-gcp-trust__item {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
  position: relative;
}

/* Subtle vertical dividers between trust items so the 4 cells read as
   one integrated bar rather than four disconnected blocks. The last
   item has no divider. Hidden on the 2-up / stacked layouts via the
   responsive blocks below. */
.rbp-gcp-trust__item + .rbp-gcp-trust__item::before {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: calc(-1 * clamp(5px, 0.5vw, 9px));
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(148, 163, 184, 0.18), transparent);
}

.rbp-gcp-trust__ico {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 12px;
  background:
    radial-gradient(120% 120% at 30% 0%, rgba(96, 165, 250, 0.32), rgba(37, 99, 235, 0.14));
  color: #cfe1ff;
  box-shadow:
    inset 0 0 0 1px rgba(96, 165, 250, 0.22),
    0 6px 14px rgba(37, 99, 235, 0.22);
  box-sizing: border-box;
  flex-shrink: 0;
}

.rbp-gcp-trust__item div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rbp-gcp-trust__item strong {
  color: #fff !important;
  font-size: clamp(13px, 0.95vw, 15px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.rbp-gcp-trust__item span {
  color: var(--rbp-gcp-text-dim) !important;
  font-size: clamp(11px, 0.82vw, 13px) !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                           */
/* ------------------------------------------------------------------ */

@media (max-width: 1023px) {
  .rbp-gcp { padding-top: clamp(14px, 3vw, 22px); }
}

@media (max-width: 640px) {
  /* On phones the orb lattice clusters too tightly at device density —
     soften it slightly so it doesn't compete with mobile copy. */
  .rbp-gcp {
    background-image:
      radial-gradient(900px 700px at 18% 22%, rgba(59, 130, 246, 0.10), transparent 60%),
      radial-gradient(820px 620px at 82% 78%, rgba(96, 165, 250, 0.09), transparent 60%),
      radial-gradient(circle at 16px 16px, rgba(147, 197, 253, 0.16) 1.3px, transparent 2px),
      radial-gradient(circle at 70px 70px, rgba(96, 165, 250, 0.10) 1px, transparent 1.8px),
      repeating-linear-gradient(135deg, rgba(96, 165, 250, 0.03) 0 1px, transparent 1px 80px);
  }
}

@media (max-width: 880px) {
  .rbp-gcp {
    --rbp-gcp-card-w: clamp(148px, 41vw, 172px);
    --rbp-gcp-card-pad: 10px;
    --rbp-gcp-card-gap: 7px;
  }

  /* Scroll sliders (home + game pages): enlarge cards on non-desktop so the
     card + its "Add to basket" button are comfortable tap targets and fewer
     cards crowd the viewport (mis-tap guard). The reflow grids (--grid) keep
     their own density — this is scoped to the scroll-slider variant only. */
  .rbp-gcp-slider:not(.rbp-gcp-slider--grid) ul.products > li.product {
    flex: 0 0 clamp(176px, 34vw, 208px) !important;
    width: clamp(176px, 34vw, 208px) !important;
    max-width: clamp(176px, 34vw, 208px) !important;
  }

  .rbp-gcp-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    /* Copy first, then a tight stats strip, then the media scene moves
       to the *bottom* of the stack so the title / buttons / trust
       chips sit immediately above the giveaway banner and the user
       reaches products with much less scrolling. */
    grid-template-areas:
      "copy"
      "stats"
      "media";
    padding: clamp(14px, 3.4vw, 20px);
    gap: clamp(10px, 2.4vw, 16px);
  }
  .rbp-gcp-hero__title { font-size: clamp(24px, 6.4vw, 30px) !important; }
  .rbp-gcp-hero__media { min-height: 0; padding: 0; }
  .rbp-gcp-hero-scene,
  .rbp-gcp-hero__scene { max-width: min(78%, 320px); aspect-ratio: 1 / 0.62; max-height: 170px; }
  .rbp-gcp-hero__img,
  .rbp-gcp-hero-image { max-height: 148px; }
  .rbp-gcp-hero__rings { width: min(72%, 240px); }
  /* Drop the gems on mobile — the smaller scene gets cluttered. */
  .rbp-gcp-hero__gem { display: none; }
  .rbp-gcp-hero__stats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
  }
  .rbp-gcp-hero__stats > .rbp-gcp-hero__stats-eyebrow {
    flex: 1 0 100%;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10);
  }
  .rbp-gcp-hero__stats .rbp-gcp-stat {
    flex: 1 1 30%;
    padding: 4px 6px;
    border-radius: 10px;
    background: rgba(7, 14, 28, 0.45);
  }
  .rbp-gcp-hero__stats .rbp-gcp-stat + .rbp-gcp-stat {
    border-top: 0;
    padding-top: 4px;
  }
  .rbp-gcp-tabs { flex-direction: column; align-items: stretch; gap: 6px; }
  .rbp-gcp-tabs__label { padding-left: 4px; }
  .rbp-gcp-tabs__inner { width: 100%; }

  /* SLIM one-line giveaway banner on mobile:
       [trophy]  prize name ........................  [countdown]  ›
     The verbose copy block (eyebrow/title/sub/view) and the bulky prize image
     tile are dropped so the banner is a single thin row and products clear the
     fold. Desktop layout is untouched. */
  .rbp-gcp-giveaway {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 13px 8px 10px;
    margin: 6px 0 10px;
    border-radius: 12px;
  }
  .rbp-gcp-giveaway__mark {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 7px;
    border-radius: 9px;
  }
  .rbp-gcp-giveaway__text { display: none; }

  .rbp-gcp-giveaway__prize {
    flex: 1 1 auto;
    min-width: 0;
    gap: 0;
    padding: 0;
    border-top: 0;
  }
  .rbp-gcp-giveaway__prize::before { display: none; }
  .rbp-gcp-giveaway__prize-ico,
  .rbp-gcp-giveaway__prize--img .rbp-gcp-giveaway__prize-ico,
  .rbp-gcp-giveaway__prize small,
  .rbp-gcp-giveaway__prize span { display: none; }
  .rbp-gcp-giveaway__prize div { min-width: 0; }
  .rbp-gcp-giveaway__prize strong {
    display: block;
    font-size: 12.5px !important;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .rbp-gcp-giveaway__timer {
    flex: 0 0 auto;
    align-items: center;
    gap: 3px;
    padding: 0;
    border-top: 0;
  }
  .rbp-gcp-giveaway__timer::before,
  .rbp-gcp-giveaway__timer-label { display: none; }
  .rbp-gcp-giveaway__cells { gap: 3px; }
  .rbp-gcp-giveaway__cell {
    min-width: 23px;
    padding: 3px 4px;
    gap: 0;
    border-radius: 6px;
  }
  .rbp-gcp-giveaway__cell b { font-size: 11px !important; }
  .rbp-gcp-giveaway__cell i { font-size: 7px; letter-spacing: 0.03em; }

  /* trailing chevron (the 'view' arrow lives in the hidden copy block) */
  .rbp-gcp-giveaway::after {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-left: 1px;
    border-right: 2px solid rgba(191, 219, 254, 0.85);
    border-top: 2px solid rgba(191, 219, 254, 0.85);
    transform: rotate(45deg);
  }

  /* Compact single-row mobile section header:
     [icon + title] ............................ [View All →]
     The blurb is hidden on mobile (it's promo copy, not a control),
     and the long "<category>" suffix on the View All pill is hidden
     so the button stays tight even with names like "Gargantuans". */
  .rbp-gcp-section__head {
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
  }
  .rbp-gcp-section__title-wrap { flex: 1 1 auto; min-width: 0; gap: 9px; }
  .rbp-gcp-section__title {
    font-size: clamp(15px, 4.4vw, 18px) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rbp-gcp-section__blurb { display: none !important; }
  .rbp-gcp-section__ico { width: 30px; height: 30px; padding: 7px; border-radius: 9px; }
  .rbp-gcp-section__controls {
    flex: 0 0 auto;
    margin-left: auto;
  }
  .rbp-gcp-section__controls .rbp-gcp-arrow { display: none; }
  .rbp-gcp-view-all {
    margin-left: 0;
    padding: 7px 11px;
    font-size: 11px;
    gap: 5px;
    border-radius: 999px;
    white-space: nowrap;
  }
  /* Drop the "<category>" suffix on mobile so the button stays compact
     ("View All →" only). The screen-reader label on the anchor still
     announces the full category. */
  .rbp-gcp-view-all__cat { display: none; }
  .rbp-gcp-view-all::after { width: 6px; height: 6px; border-width: 1.6px; }

  .rbp-gcp-slider ul.products > li.product .woocommerce-loop-product__title,
  .rbp-gcp-slider ul.products > li.product h2.woocommerce-loop-product__title,
  .rbp-gcp-slider ul.products > li.product h3.woocommerce-loop-product__title {
    font-size: 13px !important;
    line-height: 1.15 !important;
    min-height: calc(13px * 1.15 * 2);
  }

  .rbp-gcp-slider ul.products > li.product .price {
    gap: 2px;
    min-height: 34px;
    font-size: clamp(17px, 4.9vw, 20px) !important;
    line-height: 1 !important;
    text-align: left !important;
  }

  .rbp-gcp-slider ul.products > li.product a.button,
  .rbp-gcp-slider ul.products > li.product a.add_to_cart_button {
    height: 40px !important;
    padding-inline: 10px !important;
    font-size: 12.5px !important;
  }

  /* Sections start right under the giveaway on mobile. */
  .rbp-gcp-sections { gap: 14px; margin-top: 0; }
  .rbp-gcp-hero { padding-bottom: 6px; }

  .rbp-gcp-trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 16px;
  }
  /* Dividers only make sense in a single-row layout; hide on 2-up + 1-up. */
  .rbp-gcp-trust__item + .rbp-gcp-trust__item::before { display: none; }
}

@media (max-width: 540px) {
  .rbp-gcp { --rbp-gcp-card-w: 150px; }
  /* Phones: ~1.5–1.7 slider cards in view (bloxcart-like) so buttons are
     easy to hit. Scroll sliders only — grids stay 2-up. */
  .rbp-gcp-slider:not(.rbp-gcp-slider--grid) ul.products > li.product {
    flex: 0 0 clamp(190px, 56vw, 224px) !important;
    width: clamp(190px, 56vw, 224px) !important;
    max-width: clamp(190px, 56vw, 224px) !important;
  }
  .rbp-gcp-hero__badges .rbp-gcp-badge { padding: 6px 10px; font-size: 11px; }
  .rbp-gcp-trust { grid-template-columns: minmax(0, 1fr); }
  /* On very small screens the hero scene is removed entirely — the
     copy/buttons/stats block is the shopping surface, and products
     start almost immediately under the giveaway. */
  .rbp-gcp-hero__media { display: none; }
  .rbp-gcp-hero__grid { grid-template-areas: "copy"; }
}

/* Corrective mobile game-page polish: keep the game pages catalogue-first.
   These overrides mirror the refined homepage giveaway card pattern while
   leaving the desktop game-page layout alone. */
@media (max-width: 880px) {
  .rbp-gcp-tabs { margin-bottom: 10px; }

  .rbp-gcp-hero__grid {
    /* Slim mobile hero: image + the TRUSTED STOREFRONT stats panel are dropped,
       leaving just title + tagline + trust chips. (Hiding the stats also fixes
       the cramped 'Cross-server trade' / 'Friending not required' text that
       wrapped mid-word.) Catalogue-first — products clear the fold sooner. */
    grid-template-areas: "copy";
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 6px 0 4px;
  }
  .rbp-gcp-hero__stats { display: none; }

  .rbp-gcp-hero__copy { gap: 9px; }
  .rbp-gcp-hero__title-row { gap: 9px; align-items: center; }
  .rbp-gcp-hero__icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }
  .rbp-gcp-hero__icon::before { inset: -4px; border-radius: 18px; filter: blur(6px); }
  .rbp-gcp-hero__icon img { border-radius: 12px; }
  .rbp-gcp-hero__title { font-size: clamp(22px, 6vw, 26px) !important; line-height: 1.08 !important; }
  .rbp-gcp-hero__verified { width: 19px; height: 19px; }
  .rbp-gcp-hero__tagline { font-size: 13.5px !important; line-height: 1.42 !important; }
  .rbp-gcp-hero__media { display: none; }
  .rbp-gcp-hero__badges { gap: 6px; }
  .rbp-gcp-hero__badges .rbp-gcp-badge {
    gap: 6px;
    padding: 5px 8px;
    font-size: 10.5px;
  }
  .rbp-gcp-badge__ico { width: 12px; height: 12px; }

  .rbp-gcp-hero__actions {
    gap: 8px;
    margin-top: 0;
  }
  .rbp-gcp-btn {
    padding: 10px 12px;
    border-radius: 11px;
    font-size: 13px;
  }

  .rbp-gcp-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 9px 10px 10px;
    border-radius: 13px;
  }
  .rbp-gcp-hero__stats > .rbp-gcp-hero__stats-eyebrow {
    grid-column: 1 / -1;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10);
  }
  .rbp-gcp-hero__stats .rbp-gcp-stat {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 6px;
    align-items: center;
    min-width: 0;
    padding: 0 6px;
    border-radius: 0;
    background: transparent;
  }
  .rbp-gcp-hero__stats .rbp-gcp-stat + .rbp-gcp-stat {
    border-top: 0;
    border-left: 1px solid rgba(148, 163, 184, 0.12);
    padding-top: 0;
  }
  .rbp-gcp-stat__ico {
    width: 28px;
    height: 28px;
    padding: 7px;
    border-radius: 9px;
  }
  .rbp-gcp-stat__body { gap: 1px; }
  .rbp-gcp-stat__value {
    font-size: clamp(16px, 4.4vw, 19px) !important;
    white-space: nowrap;
  }
  .rbp-gcp-stat__label {
    font-size: 10px !important;
    line-height: 1.12 !important;
  }

  .rbp-gcp-giveaway {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-areas:
      "mark text"
      "prize prize"
      "timer timer";
    align-items: start;
    gap: 12px;
    min-height: 0;
    padding: 14px !important;
    margin: 8px 0 12px;
    border-radius: 16px;
    overflow: hidden;
  }
  .rbp-gcp-giveaway__mark {
    grid-area: mark;
    align-self: start;
    width: 46px;
    height: 46px;
    padding: 12px;
    border-radius: 12px;
  }
  .rbp-gcp-giveaway__text {
    grid-area: text;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
  }
  .rbp-gcp-giveaway__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 0;
    font-size: 10px !important;
    line-height: 1.25;
    letter-spacing: 0.1em;
    white-space: normal;
  }
  .rbp-gcp-giveaway__eyebrow::before { width: 5px; height: 5px; margin-right: 6px; }
  .rbp-gcp-giveaway__title { font-size: 16px !important; line-height: 1.18; }
  .rbp-gcp-giveaway__sub { font-size: 12.5px; line-height: 1.35; }
  .rbp-gcp-giveaway__view {
    max-width: 100%;
    margin-top: 4px;
    padding: 5px 10px 5px 12px;
    font-size: 10.5px;
    letter-spacing: 0;
    white-space: normal;
  }
  .rbp-gcp-giveaway__view svg { width: 10px; height: 10px; }

  .rbp-gcp-giveaway__prize {
    grid-area: prize;
    width: 100%;
    min-width: 0;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px !important;
    border: 1px solid rgba(250, 204, 21, 0.18) !important;
    border-radius: 14px;
    background:
      radial-gradient(140px 80px at 0% 0%, rgba(250, 204, 21, 0.12), transparent 70%),
      linear-gradient(180deg, rgba(13, 30, 60, 0.68), rgba(7, 18, 38, 0.74)) !important;
  }
  .rbp-gcp-giveaway__prize::before { display: none !important; }
  .rbp-gcp-giveaway__prize--img .rbp-gcp-giveaway__prize-ico {
    width: 42px;
    height: 42px;
    padding: 3px;
    border-radius: 10px;
  }
  .rbp-gcp-giveaway__prize small { font-size: 9px; line-height: 1.15; letter-spacing: 0.08em; }
  .rbp-gcp-giveaway__prize strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px !important;
    line-height: 1.15;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .rbp-gcp-giveaway__prize span { font-size: 11px; line-height: 1.25; }

  .rbp-gcp-giveaway__timer {
    grid-area: timer;
    width: 100%;
    min-width: 0;
    display: grid;
    gap: 6px;
    padding: 0;
  }
  .rbp-gcp-giveaway__timer::before { display: none !important; }
  .rbp-gcp-giveaway__timer-label {
    justify-self: start;
    font-size: 9px;
    line-height: 1;
    letter-spacing: 0.12em;
  }
  .rbp-gcp-giveaway__cells {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .rbp-gcp-giveaway__cell {
    min-width: 0;
    min-height: 48px;
    padding: 7px 4px;
    gap: 2px;
    border-radius: 10px;
  }
  .rbp-gcp-giveaway__cell b { font-size: clamp(18px, 6vw, 22px) !important; }
  .rbp-gcp-giveaway__cell i { font-size: 8.5px; letter-spacing: 0.06em; }

  .rbp-gcp-hero { padding-bottom: 4px; }

  /* =====================================================================
     AUTHORITATIVE slim-mobile overrides. Two competing @media(880) blocks had
     drifted out of sync: the rules ABOVE still re-showed the stats panel and
     re-bulked the giveaway (display:grid !important). These last-in-block,
     !important rules force the intended slim layout. (TODO: collapse the two
     880 blocks into one — left as overrides here to avoid a risky 200-line
     surgical delete.)
     ===================================================================== */
  .rbp-gcp-hero__grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "copy" !important;
  }
  .rbp-gcp-hero__media,
  .rbp-gcp-hero__stats { display: none !important; }
  .rbp-gcp-hero__tagline {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .rbp-gcp-hero__badges { flex-wrap: wrap; }

  .rbp-gcp-giveaway {
    display: flex !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    align-items: center;
    gap: 10px;
    min-height: 0;
    padding: 8px 13px 8px 10px !important;
    overflow: hidden;
  }
  .rbp-gcp-giveaway__mark {
    grid-area: auto !important;
    align-self: center;
    flex: 0 0 auto;
    width: 30px !important;
    height: 30px !important;
    padding: 7px !important;
  }
  .rbp-gcp-giveaway__text { display: none !important; }
  .rbp-gcp-giveaway__prize {
    grid-area: auto !important;
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
  }
  .rbp-gcp-giveaway__prize-ico,
  .rbp-gcp-giveaway__prize--img .rbp-gcp-giveaway__prize-ico,
  .rbp-gcp-giveaway__prize small,
  .rbp-gcp-giveaway__prize span { display: none !important; }
  .rbp-gcp-giveaway__prize strong {
    display: block !important;
    -webkit-line-clamp: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12.5px !important;
  }
  .rbp-gcp-giveaway__timer {
    grid-area: auto !important;
    width: auto !important;
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    gap: 3px;
    padding: 0 !important;
  }
  .rbp-gcp-giveaway__timer-label { display: none !important; }
  .rbp-gcp-giveaway__cells {
    width: auto !important;
    display: flex !important;
    grid-template-columns: none !important;
    gap: 3px;
  }
  .rbp-gcp-giveaway__cell {
    min-width: 22px !important;
    min-height: 0 !important;
    padding: 3px 4px !important;
    border-radius: 6px;
  }
  .rbp-gcp-giveaway__cell b { font-size: 11px !important; }
  .rbp-gcp-giveaway__cell i { font-size: 7px !important; letter-spacing: 0.03em; }
  .rbp-gcp-giveaway::after {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-left: 1px;
    border-right: 2px solid rgba(191, 219, 254, 0.85);
    border-top: 2px solid rgba(191, 219, 254, 0.85);
    transform: rotate(45deg);
  }
}

.rbp-gcp-slider ul.products > li.product a.add_to_cart_button.rp-atc-confirmed,
.rbp-gcp-slider ul.products > li.product a.add_to_cart_button.rp-atc-confirmed.added {
  position: relative;
  display: inline-flex !important;
  border-color: rgba(52, 211, 153, 0.58) !important;
  background:
    radial-gradient(120px 70px at 24% 0%, rgba(187, 247, 208, 0.28), transparent 68%),
    linear-gradient(180deg, #2ee89a, #16c983 55%, #0fa76b) !important;
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(2, 24, 16, 0.28);
  box-shadow:
    0 10px 24px rgba(16, 185, 129, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  opacity: 1 !important;
  transform: translateY(-1px) scale(1.015);
  animation: rp-atc-success-pop 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.rbp-gcp-slider ul.products > li.product a.add_to_cart_button.rp-atc-confirmed::before {
  content: "";
  display: inline-block !important;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.rbp-gcp-slider ul.products > li.product a.add_to_cart_button.rp-atc-confirmed::after {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(105deg, transparent 0 32%, rgba(255, 255, 255, 0.34) 45%, transparent 58%);
  transform: translateX(-110%);
  animation: rp-atc-success-shine 0.78s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
  pointer-events: none;
}

.rbp-gcp-slider ul.products > li.product a.add_to_cart_button .rp-atc-label {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.rbp-gcp-slider ul.products > li.product a.add_to_cart_button.rp-atc-restoring .rp-atc-label {
  opacity: 0;
  transform: translateY(4px);
}

@keyframes rp-atc-success-pop {
  0% { transform: translateY(0) scale(0.985); }
  58% { transform: translateY(-1px) scale(1.025); }
  100% { transform: translateY(-1px) scale(1.015); }
}

@keyframes rp-atc-success-shine {
  0% { transform: translateX(-110%); opacity: 0; }
  24% { opacity: 1; }
  100% { transform: translateX(110%); opacity: 0; }
}

/* ==================================================================== */
/* Embedded category browsing (app-like in-shell storefront)            */
/* ==================================================================== */

.rbp-gcp-browse {
  margin-bottom: clamp(28px, 4vw, 56px);
}

/* Focused catalogue mode has no hero above it — keep it tight to the
   sticky subheader so it reads catalogue-first, not like a landing
   page with a big empty gap before the products. */
.rbp-gcp--browse .rbp-gcp-browse {
  margin-top: clamp(8px, 1.4vw, 16px);
}

/* Subtle breadcrumb-style back affordance — clearly secondary, never
   competing with the category title. Category nav itself stays in the
   sticky subheader. */
.rbp-gcp-browse__bar {
  display: flex;
  align-items: center;
  margin-bottom: clamp(8px, 1vw, 12px);
}

/* On mobile the Filter control moves up into the sticky subheader, so the
   in-page bar (back link + filter trigger) is hidden to keep the catalogue
   tight. Back-nav is covered by the subheader's "Now browsing" game chip. */
@media (max-width: 1023px) {
  .rbp-gcp-browse__bar { display: none; }
}

.rbp-gcp-browse__back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 1 auto;
  min-width: 0;
  padding: 4px 6px 4px 2px;
  text-decoration: none;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: #8195bb;
  background: none;
  border: 0;
  border-radius: 8px;
  transition: color .15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rbp-gcp-browse__back > span {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.rbp-gcp-browse__back:hover {
  color: #cfe0ff;
}
.rbp-gcp-browse__back svg {
  width: 14px;
  height: 14px;
}

/* Catalogue header rhythm: micro eyebrow → title → blurb, with an
   optional result count opposite the title and a hairline rule that
   visually anchors the grid as a deliberate shop module. */
.rbp-gcp-browse__title {
  margin-bottom: 0;
  align-items: flex-start;
}
.rbp-gcp-browse__eyebrow {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5f74a0;
  margin-bottom: 4px;
}
.rbp-gcp-browse__count {
  flex: 0 0 auto;
  align-self: center;
  font-size: .82rem;
  font-weight: 600;
  color: #9fb2d8;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(15, 26, 50, .5);
  border: 1px solid rgba(120, 150, 220, .16);
  white-space: nowrap;
}
.rbp-gcp-browse__rule {
  height: 1px;
  margin: clamp(12px, 1.5vw, 18px) 0 clamp(14px, 1.8vw, 22px);
  background: linear-gradient(
    90deg,
    rgba(120, 150, 220, 0) 0%,
    rgba(120, 150, 220, .22) 18%,
    rgba(120, 150, 220, .22) 82%,
    rgba(120, 150, 220, 0) 100%
  );
}

/* Filter & Sort trigger sits on the right of the back-bar (top of the
   browse block) — premium glass chip, never a default-looking button. */
.rbp-gcp-browse__bar {
  justify-content: space-between;
  gap: 10px;
}
.rbp-gcp-filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 8px 14px;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: #dbe6ff;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  border-radius: 12px;
  border: 1px solid rgba(96, 165, 250, .26);
  background:
    radial-gradient(180px 80px at 20% -20%, rgba(77, 163, 255, .22), transparent 70%),
    linear-gradient(180deg, rgba(20, 38, 78, .82), rgba(10, 21, 48, .82));
  box-shadow: 0 8px 22px rgba(2, 6, 18, .35), inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: border-color .16s ease, transform .16s ease, background .16s ease, color .16s ease;
}
.rbp-gcp-filter-trigger:hover,
.rbp-gcp-filter-trigger:focus-visible {
  color: #fff;
  border-color: rgba(150, 180, 255, .55);
  transform: translateY(-1px);
  outline: none;
}
.rbp-gcp-filter-trigger svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rbp-gcp-filter-trigger.is-active {
  border-color: rgba(150, 200, 255, .65);
  background:
    radial-gradient(180px 80px at 20% -20%, rgba(77, 163, 255, .32), transparent 70%),
    linear-gradient(180deg, rgba(34, 60, 130, .95), rgba(18, 35, 74, .95));
}
.rbp-gcp-filter-trigger em {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  color: #fff;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(77, 163, 255, .95), rgba(34, 80, 180, .95));
  box-shadow: 0 0 0 1px rgba(150, 200, 255, .35);
}
.rbp-gcp-filter-trigger em[hidden] { display: none; }

/* Active-filter pill rail — sits beneath the title, swapped via AJAX
   together with the grid (lives inside [data-rbp-gcp-grid-products]
   parent block of the inner). Each pill is a real link, so the rail
   doubles as a JS-free filter clear UI. */
.rbp-gcp-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: clamp(8px, 1.2vw, 14px);
}
.rbp-gcp-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: .76rem;
  font-weight: 600;
  text-decoration: none;
  color: #cfe0ff;
  border-radius: 999px;
  background: rgba(15, 30, 65, .58);
  border: 1px solid rgba(96, 165, 250, .22);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.rbp-gcp-pill:hover,
.rbp-gcp-pill:focus-visible {
  color: #fff;
  border-color: rgba(150, 200, 255, .55);
  background: rgba(20, 38, 78, .75);
  outline: none;
}
.rbp-gcp-pill i {
  font-style: normal;
  font-weight: 700;
  opacity: .7;
  line-height: 1;
}
.rbp-gcp-pill--clear {
  color: #ff9ec4;
  border-color: rgba(255, 120, 170, .35);
  background: rgba(60, 16, 36, .45);
}
.rbp-gcp-pill--clear:hover,
.rbp-gcp-pill--clear:focus-visible {
  color: #fff;
  border-color: rgba(255, 150, 200, .65);
  background: rgba(110, 24, 56, .6);
}

/* ==================================================================== */
/* Filter & Sort drawer (left-anchored, sidecart-quality glass)         */
/* ==================================================================== */

/* High enough to clear typical chat widget stacks (~2147482000-range)
   but still under the sidecart panel (2147482500) so the cart wins when
   both happen to be open. */
.rbp-gcp-drawer {
  position: fixed;
  inset: 0;
  z-index: 2147482450;
  display: grid;
  justify-items: start;
  pointer-events: none;
  color: #eef4ff;
  font-family: Manrope, Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  box-sizing: border-box;
}
.rbp-gcp-drawer *,
.rbp-gcp-drawer *::before,
.rbp-gcp-drawer *::after { box-sizing: border-box; }
.rbp-gcp-drawer[hidden] { display: none; }
.rbp-gcp-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 18, .72);
  opacity: 0;
  backdrop-filter: blur(0);
  transition: opacity .32s ease, backdrop-filter .32s ease;
  pointer-events: auto;
}
.rbp-gcp-drawer__panel {
  position: relative;
  width: min(420px, calc(100vw - 22px));
  max-width: 100vw;
  height: calc(100dvh - 24px);
  margin: 12px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid rgba(96, 165, 250, .34);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(720px 360px at 20% -10%, rgba(77, 163, 255, .18), transparent 60%),
    linear-gradient(180deg, rgba(12, 24, 54, .98), rgba(4, 9, 19, .98));
  box-shadow: 0 34px 100px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
  transform: translate3d(-36px, 0, 0) scale(.975);
  opacity: 0;
  filter: saturate(.92);
  transition: transform .34s cubic-bezier(.16, 1, .3, 1), opacity .28s ease, filter .34s ease;
  pointer-events: auto;
  isolation: isolate;
}
.rbp-gcp-drawer__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0 38%, rgba(255, 255, 255, .045) 46%, transparent 56%),
    linear-gradient(rgba(96, 165, 250, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 165, 250, .03) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
  opacity: .52;
}
.rbp-gcp-drawer.is-open .rbp-gcp-drawer__overlay {
  opacity: 1;
  backdrop-filter: blur(2px);
}
.rbp-gcp-drawer.is-open .rbp-gcp-drawer__panel {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  filter: saturate(1);
}
html.rbp-gcp-drawer-lock,
html.rbp-gcp-drawer-lock body { overflow: hidden !important; }

.rbp-gcp-drawer__header,
.rbp-gcp-drawer__footer {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  background: rgba(5, 12, 27, .86);
  backdrop-filter: blur(14px);
}
.rbp-gcp-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-bottom: 1px solid rgba(96, 165, 250, .15);
}
.rbp-gcp-drawer__title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.rbp-gcp-drawer__title > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(77, 163, 255, .36);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(77, 163, 255, .18), rgba(77, 163, 255, .08));
  color: #93c5fd;
}
.rbp-gcp-drawer__title > span svg {
  width: 20px !important; height: 20px !important;
  fill: none !important; stroke: currentColor !important;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.rbp-gcp-drawer__title p {
  margin: 0 0 2px !important;
  color: #5cc8ff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  opacity: 1 !important;
}
.rbp-gcp-drawer__title h2 {
  margin: 0 !important;
  color: #f8fbff !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
  text-transform: none !important;
}
.rbp-gcp-drawer__close {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  border: 1px solid rgba(96, 165, 250, .18);
  background: rgba(15, 30, 65, .62);
  color: #dbeafe;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.rbp-gcp-drawer__close:hover,
.rbp-gcp-drawer__close:focus-visible {
  background: rgba(77, 163, 255, .16);
  border-color: rgba(96, 165, 250, .34);
  color: #fff;
  outline: none;
  transform: translateY(-1px);
}
.rbp-gcp-drawer__close svg {
  width: 18px !important; height: 18px !important;
  fill: none !important; stroke: currentColor !important;
  stroke-width: 2.4; stroke-linecap: round;
}

.rbp-gcp-drawer__body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.rbp-gcp-drawer__section {
  padding: 14px;
  border-radius: 16px;
  background: rgba(10, 21, 48, .55);
  border: 1px solid rgba(96, 165, 250, .14);
  min-width: 0;
  /* Visible so the absolutely-positioned custom dropdown menu can
     overlay the next section without being clipped. */
  overflow: visible;
}
.rbp-gcp-drawer__section--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  overflow: visible;
}
.rbp-gcp-drawer__label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #9fb0cf !important;
  margin: 0 0 10px !important;
  opacity: 1 !important;
  line-height: 1.2 !important;
}
.rbp-gcp-drawer__sub {
  display: block !important;
  margin: 4px 0 0 !important;
  font-size: .78rem !important;
  font-weight: 500 !important;
  color: #7e93bd !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.rbp-gcp-drawer__section--row .rbp-gcp-drawer__label { margin-bottom: 0 !important; }
.rbp-gcp-drawer__section--row > div { min-width: 0; }

.rbp-gcp-drawer__select {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
}
.rbp-gcp-drawer__select select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  max-width: 100% !important;
  font: inherit !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
  color: #eef4ff !important;
  padding: 11px 38px 11px 14px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background: rgba(5, 12, 27, .65) !important;
  border: 1px solid rgba(96, 165, 250, .2) !important;
  cursor: pointer;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  opacity: 1 !important;
  transition: border-color .15s ease, background .15s ease;
}
.rbp-gcp-drawer__select select:hover,
.rbp-gcp-drawer__select select:focus-visible {
  border-color: rgba(150, 200, 255, .55) !important;
  background: rgba(15, 30, 65, .85) !important;
  outline: none !important;
}
/* The OS-rendered popup ignores most styling, but setting a light bg +
   dark text keeps every option readable across light/dark OS themes. */
.rbp-gcp-drawer__select select option,
.rbp-gcp-drawer__select select optgroup {
  color: #0f1a32 !important;
  background: #fff !important;
}
.rbp-gcp-drawer__select svg {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 14px; height: 14px;
  transform: translateY(-50%);
  fill: none; stroke: #8fa4cc;
  stroke-width: 2.2;
  pointer-events: none;
}

/* ── Custom dropdown (fully dark, no native paint anywhere) ────────── */

/* Defensive: kill Breakdance's `img, svg { max-width:100%; height:auto }`
   leak. Every SVG inside the drawer is a deliberate UI glyph with an
   explicit size on its own rule; without this, those sizes get
   overridden and the chevron / check inflates to fill its row. */
.rbp-gcp-drawer svg {
  max-width: none !important;
  max-height: none !important;
  width: auto;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

.rbp-gcp-drawer__sr-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

.rbp-gcp-drawer__dd {
  position: relative;
  width: 100%;
  min-width: 0;
}
.rbp-gcp-drawer__dd-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 11px 14px !important;
  font: inherit !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left !important;
  color: #eef4ff !important;
  background: rgba(5, 12, 27, .65) !important;
  border: 1px solid rgba(96, 165, 250, .2) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  line-height: 1.3 !important;
  opacity: 1 !important;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.rbp-gcp-drawer__dd-btn:hover {
  border-color: rgba(150, 200, 255, .55) !important;
  background: rgba(15, 30, 65, .85) !important;
}
.rbp-gcp-drawer__dd-btn:focus-visible,
.rbp-gcp-drawer__dd[data-open="1"] .rbp-gcp-drawer__dd-btn {
  border-color: rgba(150, 200, 255, .75) !important;
  background: rgba(15, 30, 65, .9) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, .25) !important;
  outline: none !important;
}
.rbp-gcp-drawer__dd-value {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: inherit !important;
  font-weight: 600 !important;
}
.rbp-gcp-drawer__dd-btn svg {
  flex: 0 0 auto;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px;
  fill: none !important;
  stroke: #8fa4cc !important;
  stroke-width: 2.2;
  transition: transform .18s ease, stroke .15s ease;
}
.rbp-gcp-drawer__dd[data-open="1"] .rbp-gcp-drawer__dd-btn svg {
  stroke: #cfe0ff;
  transform: rotate(180deg);
}

.rbp-gcp-drawer__dd-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  margin: 0 !important;
  padding: 6px !important;
  list-style: none !important;
  height: auto;
  min-height: 0;
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(12, 24, 54, .98), rgba(6, 12, 28, .98)) !important;
  border: 1px solid rgba(96, 165, 250, .35) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04);
  opacity: 0;
  transform: translateY(-4px) scale(.98);
  transform-origin: top center;
  transition: opacity .14s ease, transform .14s ease;
  pointer-events: none;
}
.rbp-gcp-drawer__dd-menu[hidden] { display: none !important; }
.rbp-gcp-drawer__dd[data-open="1"] .rbp-gcp-drawer__dd-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.rbp-gcp-drawer__dd[data-flip="1"] .rbp-gcp-drawer__dd-menu {
  top: auto;
  bottom: calc(100% + 6px);
  transform-origin: bottom center;
}
.rbp-gcp-drawer__dd-opt {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 38px !important;
  padding: 9px 12px !important;
  margin: 0 !important;
  font: inherit !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.25 !important;
  color: #eef4ff !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  list-style: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  user-select: none;
  transition: background .12s ease, color .12s ease;
}
.rbp-gcp-drawer__dd-opt > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit !important;
  font: inherit !important;
  opacity: 1 !important;
}
.rbp-gcp-drawer__dd-opt + .rbp-gcp-drawer__dd-opt { margin-top: 2px !important; }
.rbp-gcp-drawer__dd-opt:hover,
.rbp-gcp-drawer__dd-opt[data-active="1"] {
  background: rgba(77, 163, 255, .18) !important;
  color: #fff !important;
}
.rbp-gcp-drawer__dd-opt.is-selected {
  background: rgba(77, 163, 255, .28) !important;
  color: #fff !important;
}
.rbp-gcp-drawer__dd-check {
  flex: 0 0 auto;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px;
  max-width: 14px !important;
  max-height: 14px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.4;
  opacity: 0;
  transition: opacity .12s ease;
}
.rbp-gcp-drawer__dd-opt.is-selected .rbp-gcp-drawer__dd-check { opacity: 1; }

/* ── Dual-handle price range slider ────────────────────────────────── */
.rbp-gcp-drawer__range {
  position: relative;
  height: 28px;
  margin: 6px 4px 4px;
  isolation: isolate;
}
.rbp-gcp-drawer__range-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 6px;
  margin-top: -3px;
  border-radius: 999px;
  background: rgba(15, 30, 65, .82);
  border: 1px solid rgba(96, 165, 250, .18);
  overflow: hidden;
}
.rbp-gcp-drawer__range-fill {
  position: absolute;
  top: 0; bottom: 0;
  left: 0%;
  right: 0%;
  background: linear-gradient(90deg, rgba(77, 163, 255, .9), rgba(150, 200, 255, .9));
  box-shadow: 0 0 12px rgba(77, 163, 255, .35);
}
.rbp-gcp-drawer__range-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  pointer-events: none;
  outline: none;
}
.rbp-gcp-drawer__range-input--min { z-index: 3; }
.rbp-gcp-drawer__range-input--max { z-index: 2; }
.rbp-gcp-drawer__range-input::-webkit-slider-runnable-track {
  height: 28px;
  background: transparent;
  border: 0;
}
.rbp-gcp-drawer__range-input::-moz-range-track {
  height: 28px;
  background: transparent;
  border: 0;
}
.rbp-gcp-drawer__range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 20px;
  height: 20px;
  /* Chrome/Safari place the thumb top at (track-top + margin-top); the old
     -2px left the thumb ~6px above the 6px centre track. Centre a 20px thumb
     in the 28px runnable-track: (28 - 20) / 2 = 4px. Firefox auto-centres,
     so it was unaffected either way. */
  margin-top: 4px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(77, 163, 255, .9);
  box-shadow: 0 4px 12px rgba(2, 6, 18, .45), 0 0 0 4px rgba(77, 163, 255, .14);
  cursor: grab;
  transition: transform .12s ease, box-shadow .12s ease;
}
.rbp-gcp-drawer__range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(77, 163, 255, .9);
  box-shadow: 0 4px 12px rgba(2, 6, 18, .45), 0 0 0 4px rgba(77, 163, 255, .14);
  cursor: grab;
}
.rbp-gcp-drawer__range-input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 4px 12px rgba(2, 6, 18, .45), 0 0 0 5px rgba(96, 165, 250, .45);
}
.rbp-gcp-drawer__range-input:focus-visible::-moz-range-thumb {
  box-shadow: 0 4px 12px rgba(2, 6, 18, .45), 0 0 0 5px rgba(96, 165, 250, .45);
}
.rbp-gcp-drawer__range-input:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.05); }

/* Bigger, easier-to-grab thumbs on touch/mobile (44px-ish target), with the
   centring recomputed for the taller track so it stays aligned everywhere. */
@media (max-width: 640px) {
  .rbp-gcp-drawer__range { height: 34px; }
  .rbp-gcp-drawer__range-input { height: 34px; }
  .rbp-gcp-drawer__range-input::-webkit-slider-runnable-track { height: 34px; }
  .rbp-gcp-drawer__range-input::-moz-range-track { height: 34px; }
  .rbp-gcp-drawer__range-input::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: 3px; } /* (34-28)/2 */
  .rbp-gcp-drawer__range-input::-moz-range-thumb { width: 28px; height: 28px; }
}
.rbp-gcp-drawer__range-values {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-size: .82rem !important;
  font-weight: 700 !important;
  color: #cfe0ff !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  opacity: 1 !important;
}
.rbp-gcp-drawer__range-values > span {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  color: inherit !important;
}

.rbp-gcp-drawer__switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex: 0 0 auto;
  cursor: pointer;
}
.rbp-gcp-drawer__switch input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.rbp-gcp-drawer__switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(15, 30, 65, .82);
  border: 1px solid rgba(96, 165, 250, .22);
  transition: background .18s ease, border-color .18s ease;
}
.rbp-gcp-drawer__switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #cfe0ff;
  box-shadow: 0 2px 8px rgba(2, 6, 18, .4);
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), background .2s ease;
}
.rbp-gcp-drawer__switch input:checked + .rbp-gcp-drawer__switch-track {
  background: linear-gradient(180deg, rgba(77, 163, 255, .9), rgba(34, 80, 180, .9));
  border-color: rgba(150, 200, 255, .65);
}
.rbp-gcp-drawer__switch input:checked + .rbp-gcp-drawer__switch-track .rbp-gcp-drawer__switch-thumb {
  transform: translateX(18px);
  background: #fff;
}
.rbp-gcp-drawer__switch input:focus-visible + .rbp-gcp-drawer__switch-track {
  box-shadow: 0 0 0 3px rgba(96, 165, 250, .35);
}

.rbp-gcp-drawer__footer {
  display: flex;
  gap: 10px;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(96, 165, 250, .15);
}
.rbp-gcp-drawer__btn {
  flex: 1 1 0;
  min-width: 0;
  font: inherit !important;
  font-size: .92rem !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  cursor: pointer;
  border: 1px solid transparent !important;
  opacity: 1 !important;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.rbp-gcp-drawer__btn--ghost {
  color: #cfe0ff !important;
  background: rgba(15, 30, 65, .62) !important;
  border-color: rgba(96, 165, 250, .22) !important;
}
.rbp-gcp-drawer__btn--ghost:hover,
.rbp-gcp-drawer__btn--ghost:focus-visible {
  color: #fff !important;
  background: rgba(20, 38, 78, .75) !important;
  border-color: rgba(150, 200, 255, .55) !important;
  outline: none;
}
.rbp-gcp-drawer__btn--apply {
  color: #fff !important;
  background: linear-gradient(180deg, rgba(77, 163, 255, .95), rgba(34, 80, 180, .95)) !important;
  box-shadow: 0 12px 30px rgba(34, 80, 180, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.rbp-gcp-drawer__btn--apply:hover,
.rbp-gcp-drawer__btn--apply:focus-visible {
  transform: translateY(-1px);
  outline: none;
  background: linear-gradient(180deg, rgba(108, 184, 255, 1), rgba(48, 100, 210, 1)) !important;
  color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
  .rbp-gcp-drawer__overlay,
  .rbp-gcp-drawer__panel,
  .rbp-gcp-drawer__btn,
  .rbp-gcp-filter-trigger,
  .rbp-gcp-drawer__switch-thumb { transition: none; }
}

/* Grid mode: reuse the exact slider card styling but lay it out as a
   wrapping responsive grid instead of a horizontal scroller. Every
   card-internal rule keys off `.rbp-gcp-slider ... li.product`, so the
   card paint stays byte-identical to the landing sliders — only the
   container axis changes. */
.rbp-gcp-slider--grid {
  margin-inline: 0;
  padding-inline: 0;
  overflow: visible;
}
.rbp-gcp-slider--grid ul.products,
.rbp-gcp-slider--grid .woocommerce > ul.products,
.rbp-gcp-slider--grid ul.products.columns-1,
.rbp-gcp-slider--grid ul.products.columns-2,
.rbp-gcp-slider--grid ul.products.columns-3,
.rbp-gcp-slider--grid ul.products.columns-4,
.rbp-gcp-slider--grid ul.products.columns-5,
.rbp-gcp-slider--grid ul.products.columns-6,
.rbp-gcp-slider--grid ul.products.columns-7,
.rbp-gcp-slider--grid ul.products.columns-8 {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(var(--rbp-gcp-card-w), 1fr));
  gap: clamp(8px, 1vw, 14px);
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  scroll-snap-type: none;
}
.rbp-gcp-slider--grid ul.products::after { content: none; flex: none; }
.rbp-gcp-slider--grid ul.products > li.product {
  flex: initial !important;
  width: auto !important;
  max-width: none !important;
}

/* Native app-style content swap. No backdrop panel, no full-grid blur
   (both produced a visible clipped rectangle). Just a clean uniform
   opacity dip on the outgoing products + a small centred spinner, then
   the incoming products fade up. Nothing ever clips a rectangle over
   the page texture. */
.rbp-gcp-grid {
  position: relative;
  min-height: 220px;
}
.rbp-gcp-grid [data-rbp-gcp-grid-products] {
  transition: opacity .18s ease;
}
.rbp-gcp-grid.is-loading [data-rbp-gcp-grid-products] {
  opacity: .42;
  pointer-events: none;
}
/* Incoming grid (after innerHTML swap, once is-loading is cleared)
   fades up softly — also gives the very first server render a subtle
   settle-in rather than a hard paint. */
.rbp-gcp-grid:not(.is-loading) [data-rbp-gcp-grid-products] {
  animation: rbp-gcp-grid-in .26s ease both;
}
@keyframes rbp-gcp-grid-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.rbp-gcp-grid::after {
  content: "";
  position: absolute;
  top: clamp(70px, 16vh, 150px);
  left: 50%;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  border-radius: 50%;
  border: 3px solid rgba(120, 160, 255, .22);
  border-top-color: rgba(150, 185, 255, .95);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.rbp-gcp-grid.is-loading::after {
  opacity: 1;
  animation: rbp-gcp-spin .7s linear infinite;
}
@keyframes rbp-gcp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .rbp-gcp-grid:not(.is-loading) [data-rbp-gcp-grid-products] { animation: none; }
  .rbp-gcp-grid.is-loading::after { animation: none; }
}

@media (max-width: 640px) {
  .rbp-gcp--browse .rbp-gcp-browse {
    margin-top: clamp(6px, 2.5vw, 14px);
    /* Small buffer only — the footer sits below this grid and the fixed bottom
       nav is cleared by body.rbp-header-active's padding-bottom (below the
       footer), so the last product row is never behind the nav. The old 96px
       just showed as a gap above the footer at <=640px. */
    padding-bottom: 24px;
  }
  .rbp-gcp-browse__bar { margin-bottom: 8px; }
  .rbp-gcp-browse__back { font-size: .78rem; }
  .rbp-gcp-browse__count {
    align-self: flex-start;
    font-size: .76rem;
    padding: 4px 10px;
  }
  .rbp-gcp-slider--grid ul.products,
  .rbp-gcp-slider--grid .woocommerce > ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  /* Compact pill on mobile — matches the visual weight of the
     item-count chip and never wraps to two lines. */
  .rbp-gcp-filter-trigger {
    padding: 5px 12px;
    gap: 6px;
    font-size: .78rem;
    border-radius: 999px;
  }
  .rbp-gcp-filter-trigger svg { width: 12px; height: 12px; }
  .rbp-gcp-filter-trigger em {
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    padding: 0 5px;
  }
  .rbp-gcp-pill { font-size: .72rem; padding: 4px 9px; }

  /* Full-height left drawer on mobile. Same slide-from-left motion as
     desktop so it never collides with the right-side cart FAB or the
     floating bottom nav. */
  .rbp-gcp-drawer {
    align-items: stretch;
    justify-items: start;
  }
  .rbp-gcp-drawer__panel {
    width: min(360px, 100vw);
    max-width: 100vw;
    height: 100dvh;
    margin: 0;
    border-radius: 0 22px 22px 0;
    border-left: 0;
    border-top: 0;
    border-bottom: 0;
    transform: translate3d(-100%, 0, 0) scale(1);
  }
  .rbp-gcp-drawer.is-open .rbp-gcp-drawer__panel {
    transform: translate3d(0, 0, 0) scale(1);
  }
  .rbp-gcp-drawer__header { padding: 14px 16px; }
  .rbp-gcp-drawer__title h2 { font-size: 18px !important; }
  .rbp-gcp-drawer__body { padding: 14px; gap: 12px; }
  .rbp-gcp-drawer__footer {
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 380px) {
  .rbp-gcp-drawer__panel { width: 100vw; border-radius: 0; }
}

/* Keep decorative motion off the mobile rendering path. These elements are
   visual accents only, so disabling them preserves the experience while
   avoiding repeated paint/compositing work on lower-power devices. */
@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .rbp-gcp-hero__rings,
  .rbp-gcp-hero__img,
  .rbp-gcp-hero__gem,
  .rbp-gcp-hero__sparks i,
  .rbp-gcp-hero__stats-eyebrow i,
  .rbp-gcp-giveaway::before,
  .rbp-gcp-giveaway__eyebrow::before {
    animation: none !important;
  }
}

/* Product sections remain fully present in the DOM for browsing and SEO, but
   browsers can skip their initial layout/paint work until they approach the
   viewport. This is particularly valuable on long game storefronts. */
@supports (content-visibility: auto) {
  .rbp-gcp-section {
    content-visibility: auto;
    contain-intrinsic-size: 1px 460px;
  }

  .rbp-gcp-trust {
    content-visibility: auto;
    contain-intrinsic-size: 1px 180px;
  }
}

/* ---- Archive/Search filter shell (Filter & Sort on WC archives + search) --- */
.rbp-af-heading {
  max-width: 880px;
  margin: 0 0 14px;
}
.rbp-af-heading__title {
  margin: 0;
  color: #f8fbff;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0;
}
.rbp-af { margin: 0 0 clamp(10px, 1.4vw, 18px); }
.rbp-af__bar { display: flex; justify-content: flex-end; align-items: center; }
/* Active-filter chips live in their own row beneath the bar — never pushing the
   trigger sideways. Left-aligned + wrapping, matching the game-page browse. */
.rbp-af__pills { justify-content: flex-start; }
@media (max-width: 640px) {
  .rbp-af-heading__title { font-size: 26px; }
  /* Phones: full-width trigger with the chips stacked underneath. */
  .rbp-af__bar .rbp-gcp-filter-trigger { width: 100%; margin-left: 0; justify-content: center; }
}
html.rbp-af-lock, body.rbp-af-lock { overflow: hidden; }
/* Our drawer owns sorting — hide WooCommerce's default "Sort by …" ordering
   dropdown on the product-category archives + product search, scoped to those
   body classes so it can never affect any other WooCommerce page. */
body.tax-product_cat form.woocommerce-ordering,
body.post-type-archive-product form.woocommerce-ordering,
body.search form.woocommerce-ordering { display: none !important; }

/* ── Browsing texture on shop / category / search pages ──────────────────────
   Brings the game landing pages' "dots + shelf lines + aurora" atmosphere onto
   the shop (/roblox-catalogue/), product-category, and product-search pages,
   which otherwise show a flat background. Painted on the Breakdance
   `.section-container` (the full-height content wrapper) — NOT the body, because
   the Breakdance section paints an opaque background that would cover a body
   texture. The deep navy base is the last layer; product cards/panels sit on
   their own opaque-enough surfaces, so the texture only reads in the gutters —
   same intent as .rbp-gcp-body. */
body.tax-product_cat .section-container,
body.post-type-archive-product .section-container,
body.search .section-container {
  background:
    radial-gradient(900px 700px at 18% 22%, rgba(59, 130, 246, 0.10), transparent 60%),
    radial-gradient(820px 620px at 82% 78%, rgba(96, 165, 250, 0.09), transparent 60%),
    radial-gradient(circle at 18px 18px, rgba(147, 197, 253, 0.22) 1.6px, transparent 2.4px),
    radial-gradient(circle at 78px 78px, rgba(96, 165, 250, 0.13) 1.2px, transparent 2px),
    repeating-linear-gradient(135deg, rgba(96, 165, 250, 0.045) 0 1px, transparent 1px 96px),
    linear-gradient(180deg, #050913 0%, #060c1c 40%, #050913 100%) !important;
  background-size: auto, auto, 120px 120px, 120px 120px, auto, auto !important;
  background-position: 0 0, 0 0, 0 0, 60px 60px, 0 0, 0 0 !important;
  background-attachment: fixed, fixed, scroll, scroll, scroll, fixed !important;
}