/* ============================================================
   MYBOOST — MOBILE STYLES (≤768px)
   Aligns the theme with the Figma mobile frame 193:219
   (file oLiCYK8jlTKmpNShW7W34g, 375 × 5276).

   ▸ ALL rules are scoped inside @media (max-width: …) blocks.
   ▸ Selectors are prefixed with `body` and use !important so
     they tie/win against the desktop !important rules emitted
     by `wp_add_inline_style` and the `wp_footer` priority-999
     QA override block. The priority-1000 footer block in
     functions.php mirrors the most critical rules below to
     beat the QA overrides which load later in the cascade.
   ▸ Loaded LAST in the head via wp_enqueue_style so this file
     sits after main.css + all hotfix stylesheets.
   ============================================================ */

@media (max-width: 768px) {

  /* === GLOBAL: prevent horizontal overflow on small screens === */
  /* Never set overflow-x alone — per CSS spec, overflow-y then computes to auto and
     creates nested vertical scroll pockets inside sections. Use clip + explicit Y axis. */
  html {
    overflow-x: clip !important;
    overflow-y: auto !important;
    max-width: 100vw !important;
  }
  body {
    overflow-x: clip !important;
    overflow-y: visible !important;
    max-width: 100vw !important;
  }
  body main, body .site-main {
    overflow-x: clip !important;
    overflow-y: visible !important;
    max-width: 100% !important;
  }
  body section { max-width: 100vw !important; box-sizing: border-box !important; }

  /* === SECTION TITLES — Pricedown on mobile (Figma 193:219, hero loop #3 approach) === */
  body #choose-game .section-title,
  body .section-title.choose-game-title,
  body #choose-game h2,
  body #best-sellers .bs-header .section-title,
  body #best-sellers .section-title,
  body #why-choose .why-choose-title,
  body #why-choose h2.why-choose-title,
  body #why-choose h2.section-title.why-choose-title,
  body #how-it-works .hiw-title,
  body #how-it-works .section-title,
  body #promoters .promoters-heading,
  body #promoters .section-title,
  body #reviews .reviews-heading,
  body #reviews .section-title,
  body #faq .faq-title,
  body #faq .section-title {
    font-family: 'Pricedown Bl', Pricedown, 'Bowlby One', Impact, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    -webkit-text-stroke: 2.5px #000 !important;
    text-shadow: 2px 2px 0 #000 !important;
    paint-order: stroke fill !important;
  }

  /* === SITE HEADER — default mobile (inner pages) === */
  body #site-header {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
    background: transparent !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
  }
  body .header-inner {
    padding: 14px 20px !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body .site-logo, body .footer-logo { font-size: 20px !important; }
  body .menu-toggle { display: flex !important; }
  body .site-nav { display: none !important; }
  body .site-nav.open {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 12px !important;
    right: 12px !important;
    background: rgba(10,10,10,0.96) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    padding: 18px 22px !important;
    gap: 14px !important;
    z-index: 50 !important;
  }
  body .site-nav.open a { font-size: 16px !important; }
  body .site-nav.open .nav-search {
    display: block !important;
    width: 100% !important;
    margin: 0 0 4px !important;
  }
  body .site-nav.open .nav-search-form {
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
  }
  body .site-nav.open .nav-search-input {
    height: 46px !important;
    min-width: 0 !important;
    padding: 0 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  }
  body .site-nav.open .nav-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important;
  }
  body .site-nav.open .nav-search-submit {
    height: 46px !important;
    padding: 0 14px !important;
    border: none !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #8104cb 0%, #ff00bb 100%) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }
  body .site-nav.open .nav-search-results {
    display: grid !important;
    gap: 6px !important;
    margin-top: 10px !important;
  }
  body .site-nav.open .nav-search-results[hidden] {
    display: none !important;
  }
  body .site-nav.open .nav-search-result {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 14px !important;
  }
  body .site-nav.open .nav-search-result::after {
    display: none !important;
  }
  body .site-nav.open .nav-search-result-title {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body .site-nav.open .nav-search-result-type,
  body .site-nav.open .nav-search-message {
    color: rgba(255, 255, 255, 0.55) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.55) !important;
    font-size: 12px !important;
  }
  body .site-nav.open .nav-search-message {
    padding: 8px 2px !important;
  }

  /* === HOME — Elementor glass header (scroll-linked, Figma mobile 193:219) === */
  body.home .elementor-location-header {
    position: absolute !important;
    top: calc(12px * (1 - var(--mb-home-header-glass, 0)) + env(safe-area-inset-top, 0px)) !important;
    left: calc(12px * (1 - var(--mb-home-header-glass, 0))) !important;
    right: calc(12px * (1 - var(--mb-home-header-glass, 0))) !important;
    width: auto !important;
    z-index: 1001 !important;
    padding: 0 var(--mb-gutter, 24px) calc(12px * var(--mb-home-header-glass, 0)) !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.home.mb-header-scrolled .elementor-location-header {
    top: env(safe-area-inset-top, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    padding-bottom: 8px !important;
    position: fixed !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.home .mb-header__pill {
    min-height: 3rem !important;
    padding: 12px 16px !important;
  }

  /* Figma mobile — header row inside hero glass: logo left, menu right */
  body.home.mb-header-hero-top .elementor-location-header {
    position: absolute !important;
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    padding: 0 !important;
  }
  body.home.mb-header-hero-top .elementor-location-header .e-con,
  body.home.mb-header-hero-top .elementor-location-header .e-con-inner,
  body.home.mb-header-hero-top .elementor-location-header .elementor-widget-container,
  body.home.mb-header-hero-top .mb-header {
    padding: 0 !important;
    margin: 0 !important;
  }
  body.home.mb-header-hero-top .mb-header__pill {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 16px 16px 10px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }
  body.home.mb-header-hero-top .mb-header__pill::before {
    display: none !important;
    opacity: 0 !important;
  }
  body.home.mb-header-hero-top .mb-header__nav,
  body.home.mb-header-hero-top .mb-header-actions-slot {
    display: none !important;
  }
  body.home.mb-header-hero-top .mb-header__logo {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  body.home.mb-header-hero-top .mb-header__logo .mb-title-5,
  body.home.mb-header-hero-top .mb-header__logo .mb-title-5--stroke {
    font-family: 'Barlow Condensed', Impact, sans-serif !important;
    font-weight: 900 !important;
    font-size: 22px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    -webkit-text-stroke: 1px #000 !important;
    text-shadow:
      1px 0 0 #000,
      -1px 0 0 #000,
      0 1px 0 #000,
      0 -1px 0 #000,
      1px 1px 0 #000 !important;
    paint-order: stroke fill !important;
  }
  body.home.mb-header-hero-top .mb-header__toggle {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }
  body.home.mb-header-hero-top .mb-header__toggle span {
    background-color: #070708 !important;
  }
  body.mb-scroll-locked .mb-header__toggle span,
  body.mb-scroll-locked.home.mb-header-hero-top .mb-header__toggle span {
    background-color: #fff !important;
  }
  body.home.mb-header-hero-top #hero .hero-composition {
    padding-top: 52px !important;
  }
  body.home .site-logo {
    font-family: 'Barlow Condensed', Impact, sans-serif !important;
    font-weight: 900 !important;
    font-size: 22px !important;
    letter-spacing: 0.04em !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    -webkit-text-stroke: 1px #000 !important;
    text-shadow:
      1px 0 0 #000,
      -1px 0 0 #000,
      0 1px 0 #000,
      0 -1px 0 #000,
      1px 1px 0 #000 !important;
    paint-order: stroke fill !important;
  }
  body.home .menu-toggle span {
    background: #fff !important;
  }

  /* === HERO — stable stacked layout (sky bg + character + CTA card) === */
  body #hero {
    min-height: auto !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
  }
  body #hero .hero-stage {
    min-height: auto !important;
    max-width: 100% !important;
    padding: clamp(56px, 8vh, 80px) 16px 16px !important;
    box-sizing: border-box !important;
  }
  body.home #hero {
    overflow: visible !important;
  }
  body.home #hero .hero-stage {
    padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 16px !important;
  }
  body #hero .hero-composition {
    position: relative !important;
    min-height: 420px !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }
  body.home #hero .hero-composition {
    min-height: 420px !important;
    padding: 52px 0 0 !important;
    overflow: visible !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    border-radius: 36px !important;
    box-shadow:
      0 4px 24px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    isolation: isolate !important;
  }
  body.home #hero .hero-composition::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    border-radius: inherit !important;
    background: rgba(255, 255, 255, 0.14) !important;
    pointer-events: none !important;
  }
  body #hero .hero-stack {
    position: relative !important;
    display: block !important;
    --hero-m-cta-h: clamp(168px, 30vh, 204px);
    --hero-m-char-w: min(64vw, 240px);
    --hero-m-car-w: min(112px, 29vw);
    --hero-m-crates-w: min(96px, 25vw);
    --hero-m-deco-sit: -16px;
    --hero-m-car-overlap: 88px;
    --hero-m-crates-overlap: 52px;
    --hero-m-car-optical-nudge: calc(var(--hero-m-car-w) * 147 / 274 - var(--hero-m-crates-w) * 30 / 262);
    --hero-m-figures-bottom: var(--hero-m-cta-h);
    --hero-m-title-top: clamp(56px, 10vh, 88px);
    min-height: calc(var(--hero-m-cta-h) + 320px) !important;
    padding: 0 10px var(--hero-m-cta-h) !important;
    overflow: visible !important;
  }
  body.home #hero .hero-stack {
    --hero-m-title-top: 4px;
  }
  body.home .hero-title {
    top: var(--hero-m-title-top) !important;
    z-index: 5 !important;
    font-size: clamp(24px, 6.8vw, 30px) !important;
    line-height: 1.05 !important;
  }
  body .hero-title {
    position: absolute !important;
    grid-row: unset !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--hero-m-title-top, clamp(56px, 10vh, 88px)) !important;
    padding: 0 12px !important;
    z-index: 5 !important;
    width: calc(100% - 8px) !important;
    max-width: calc(100% - 8px) !important;
    margin: 0 auto !important;
    padding: 0 12px !important;
    transform: none !important;
    text-align: center !important;
    font-family: 'Pricedown Bl', Pricedown, 'Bowlby One', Impact, sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(28px, 8vw, 34px) !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    -webkit-text-stroke-width: var(--hero-title-stroke-mobile) !important;
    -webkit-text-stroke-color: #000 !important;
    text-shadow: var(--hero-title-stroke-shadow-mobile) !important;
    paint-order: stroke fill !important;
    box-sizing: border-box !important;
  }
  body .hero-title-line { display: block !important; white-space: normal !important; }

  body .hero-figure-row {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--hero-m-figures-bottom, var(--hero-m-cta-h, clamp(168px, 30vh, 204px))) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
    pointer-events: none !important;
  }

  body .hero-character {
    left: auto !important;
    right: auto !important;
    width: auto !important;
    max-width: none !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  body .hero-figure-row .hero-character {
    position: absolute !important;
    flex: none !important;
    align-self: auto !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
    z-index: 6 !important;
    display: block !important;
    width: var(--hero-m-char-w, min(64vw, 240px)) !important;
    height: auto !important;
    max-width: var(--hero-m-char-w, min(64vw, 240px)) !important;
    max-height: min(44vh, 300px) !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    pointer-events: none !important;
  }

  body .hero-figure-row .hero-deco {
    position: absolute !important;
    top: auto !important;
    display: block !important;
    flex: none !important;
    align-self: auto !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    pointer-events: none !important;
    z-index: 4 !important;
  }

  body .hero-figure-row .hero-deco-car {
    left: auto !important;
    right: calc(50% + (var(--hero-m-char-w, min(64vw, 240px)) / 2) - var(--hero-m-car-overlap, 88px)) !important;
    bottom: calc(var(--hero-m-deco-sit, -16px) - var(--hero-m-car-optical-nudge)) !important;
    width: var(--hero-m-car-w, min(112px, 29vw)) !important;
    height: auto !important;
    margin: 0 !important;
    transform: rotate(4.75deg) !important;
    transform-origin: center bottom !important;
  }

  body .hero-figure-row .hero-deco-crates {
    left: calc(50% + (var(--hero-m-char-w, min(64vw, 240px)) / 2) - var(--hero-m-crates-overlap, 52px)) !important;
    right: auto !important;
    bottom: var(--hero-m-deco-sit, -16px) !important;
    width: var(--hero-m-crates-w, min(96px, 25vw)) !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  body .hero-figures {
    display: none !important;
  }
  /* CTA pill: full-width, stacked text + button (matches Figma mobile) */
  body .hero-cta-row {
    position: absolute !important;
    grid-row: unset !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    background: #fff !important;
    border: none !important;
    border-left: 4px solid #070708 !important;
    border-top: 4px solid #070708 !important;
    border-radius: 24px !important;
    box-shadow:
      0 10px 0 0 #000,
      0 16px 32px rgba(0, 0, 0, 0.22) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: auto !important;
    isolation: isolate !important;
  }
  body .hero-cta-text {
    text-align: center !important;
    color: #070708 !important;
    -webkit-text-fill-color: #070708 !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 600 !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    text-shadow: none !important;
    margin: 0 !important;
  }
  body .hero-cta-row .btn,
  body .hero-cta-row .btn-primary {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 60px !important;
    padding: 14px 22px !important;
    border-radius: 100px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, #8104cb 0%, #ff00bb 100%) !important;
    border: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow:
      0 0 24px rgba(255, 0, 187, 0.45),
      0 4px 16px rgba(129, 4, 203, 0.35) !important;
  }

  /* === CHOOSE YOUR GAME === */
  body .cg-bs-panel { overflow: visible !important; }
  body #choose-game {
    min-height: auto !important;
    padding: 48px 0 40px !important;
    overflow: visible !important;
    --figma-cg-active-w: 320px;
    --figma-cg-active-h: 452px;
    --figma-cg-side-w: 252px;
    --figma-cg-side-h: 362px;
  }
  body #choose-game .mb-shade--cg,
  body #choose-game img.mb-shade--cg,
  body .cg-bs-panel > .mb-shade--cg {
    left: 9.03% !important;
    top: min(7.708vw, 111px) !important;
    width: min(98.33vw, 1416px) !important;
    max-width: 1416px !important;
    transform: none !important;
    filter: blur(60px) !important;
    opacity: 0.85 !important;
  }
  body #choose-game .container,
  body #choose-game .container--title { padding: 0 20px !important; max-width: 100% !important; }
  body #choose-game .section-title,
  body .section-title.choose-game-title,
  body #choose-game h2 {
    font-size: clamp(32px, 9vw, 40px) !important;
    line-height: 1.1 !important;
    margin: 0 0 16px !important;
    text-align: center !important;
  }
  body .choose-game-carousel {
    margin-top: 10px !important;
  }
  /* Beat .section-full horizontal inset so coverflow centers with the title */
  body .choose-game-carousel.section-full,
  body .choose-game-carousel {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body .choose-game-carousel,
  body .choose-game-swiper {
    height: 520px !important;
    max-height: 520px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    --figma-cg-active-w: 320px;
    --figma-cg-active-h: 452px;
    --figma-cg-side-w: 252px;
    --figma-cg-side-h: 362px;
  }
  /* Slide box must fit the active card — smaller slides clamp card width (loop #6) */
  body .choose-game-swiper .swiper-slide {
    width: 320px !important;
    height: 452px !important;
    max-width: 320px !important;
    max-height: 452px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body .choose-game-swiper .game-slide-card {
    width: 252px !important;
    height: 362px !important;
    max-width: 252px !important;
    max-height: 362px !important;
    min-width: 252px !important;
    border: 3px solid #fff !important;
  }
  body .choose-game-swiper .swiper-slide-active .game-slide-card,
  body .choose-game-swiper .swiper-slide-active .game-slide-card.is-focus,
  body .choose-game-swiper .game-slide-card.is-focus {
    width: 320px !important;
    height: 452px !important;
    max-width: 320px !important;
    max-height: 452px !important;
    min-width: 320px !important;
    border: 3px solid #fff !important;
  }
  body .choose-game-swiper .game-slide-card img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
  }

  /* === BEST SELLERS === */
  body #best-sellers {
    min-height: auto !important;
    padding: 56px 0 40px !important;
    overflow: visible !important;
    --bs-card-radius: 20px;
  }
  body #best-sellers .bs-products-stage {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    overflow: visible !important;
    max-width: 100% !important;
  }
  body #best-sellers .bs-shell { padding: 0 16px !important; max-width: 100% !important; }
  body #best-sellers .bs-header {
    min-height: 56px !important;
    margin-bottom: 16px !important;
    position: relative !important;
    text-align: center !important;
  }
  body #best-sellers .bs-header .section-title,
  body #best-sellers .section-title {
    font-size: clamp(32px, 9vw, 40px) !important;
    line-height: 1.1 !important;
    min-height: 0 !important;
    margin: 0 0 8px !important;
  }
  body .bs-deco-youtube {
    width: 32px !important;
    height: 32px !important;
    left: calc(50% - 132px) !important;
    top: 4px !important;
    transform: rotate(-14deg) !important;
  }
  body .bs-deco-gamepad {
    width: 48px !important;
    height: 48px !important;
    left: calc(50% + 92px) !important;
    top: -2px !important;
    transform: rotate(12deg) !important;
  }
  body #best-sellers .filter-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x !important;
    overscroll-behavior-y: none !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 0 -16px 20px !important;
    padding: 4px 16px 10px !important;
  }
  body #best-sellers .filter-tabs::-webkit-scrollbar { display: none !important; }
  body #best-sellers .filter-tab {
    flex: 0 0 auto !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    border-radius: 40px !important;
    white-space: nowrap !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    background: rgba(7, 7, 8, 0.45) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background-image: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  body #best-sellers .filter-tab.active {
    background: #fff !important;
    color: #070708 !important;
    -webkit-text-fill-color: #070708 !important;
    border: none !important;
  }
  /* Mobile: 2-column grid (readable cards, no fan overlap) */
  body #best-sellers .products-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
    touch-action: auto !important;
    overscroll-behavior-y: visible !important;
    scroll-snap-type: none !important;
  }
  body #best-sellers .products-grid[data-view="games"] .product-card--game,
  body #best-sellers .products-grid:not([data-view="products"]) .product-card--game {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 280 / 400 !important;
    height: auto !important;
    margin-left: 0 !important;
    border-radius: var(--bs-card-radius) !important;
    overflow: clip !important;
    border: var(--mb-cover-border) !important;
    border-color: var(--mb-cover-border-color) !important;
    box-sizing: border-box !important;
    transform: none !important;
    transform-origin: center center !important;
    z-index: auto !important;
    scroll-snap-align: none !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3) !important;
  }
  body #best-sellers .products-grid[data-view="games"] .product-card--game img,
  body #best-sellers .products-grid:not([data-view="products"]) .product-card--game img {
    border-radius: var(--bs-card-radius) !important;
  }
  body #best-sellers .products-grid[data-view="products"] {
    min-height: 0 !important;
    align-items: stretch !important;
  }
  body #best-sellers .products-grid[data-view="products"] .product-card--product {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    margin-left: 0 !important;
    border-radius: 24px !important;
    overflow: clip !important;
    border: var(--mb-cover-border) !important;
    border-color: var(--mb-cover-border-color) !important;
    box-sizing: border-box !important;
    transform: none !important;
    transform-origin: center center !important;
    z-index: auto !important;
    scroll-snap-align: none !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3) !important;
  }
  body #best-sellers .products-grid[data-view="products"] .product-card--product img {
    border-radius: 24px !important;
  }
  body #best-sellers .products-grid .product-card--game:first-child,
  body #best-sellers .products-grid .product-card--game:nth-child(even),
  body #best-sellers .products-grid .product-card--game:nth-child(odd) {
    margin-left: 0 !important;
    transform: none !important;
  }
  body #best-sellers .products-grid .product-card--game .product-card-overlay {
    display: none !important;
  }
  body #best-sellers .products-grid[data-view="games"] .product-card--game[data-game="rdr2"] {
    display: none !important;
  }
  body #best-sellers .bs-view-all {
    display: none;
    width: auto !important;
    min-width: 212px !important;
    max-width: calc(100% - 40px) !important;
    min-height: 56px !important;
    margin: 20px auto 0 !important;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    background: var(--mb-grad) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: none !important;
    border-radius: var(--mb-radius-pill) !important;
    box-shadow: var(--mb-glow-button) !important;
    padding: 16px 28px !important;
    font-size: var(--mb-body-16) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
  }
  body #best-sellers .bs-view-all:active {
    background: var(--mb-grad-active) !important;
  }
  body #best-sellers .products-grid[data-view="games"] + .bs-view-all {
    display: flex !important;
    align-self: center !important;
  }
  body #best-sellers .products-grid .product-card--product .product-card-name {
    font-family: 'Pricedown Bl', Pricedown, 'Bowlby One', Impact, sans-serif !important;
    font-size: clamp(14px, 3.8vw, 18px) !important;
    line-height: 1.2 !important;
    padding: 8px 16px !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
  }
  body .cg-bs-panel > .mb-shade--bs-left,
  body .cg-bs-panel img.mb-shade--bs-left {
    position: absolute !important;
    left: max(-14.65%, calc(-211 * min(100vw, 1440px) / 1440)) !important;
    top: min(91.25vw, 1314px) !important;
    width: min(63.61vw, 916px) !important;
    max-width: 916px !important;
    height: auto !important;
    aspect-ratio: 916 / 737 !important;
    transform: none !important;
    filter: blur(56px) !important;
    mix-blend-mode: screen !important;
    opacity: 0.78 !important;
    z-index: 1 !important;
  }
  body .why-hiw-panel > .mb-shade--why,
  body .why-hiw-panel img.mb-shade--why {
    position: absolute !important;
    left: max(-42.36%, calc(-610 * min(100vw, 1440px) / 1440)) !important;
    top: min(47.29vw, 681px) !important;
    width: min(191.67vw, 2760px) !important;
    max-width: 2760px !important;
    height: auto !important;
    aspect-ratio: 2760 / 737 !important;
    transform: none !important;
    filter: blur(56px) !important;
    mix-blend-mode: screen !important;
    opacity: 0.72 !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  /* === WHY CHOOSE — stack rating + stats vertically on mobile === */
  body #why-choose {
    min-height: auto !important;
    padding: 48px 16px !important;
    overflow: visible !important;
  }
  body #why-choose .container {
    padding: 0 !important;
    max-width: 100% !important;
  }
  body #why-choose .why-choose-title,
  body #why-choose h2.why-choose-title,
  body #why-choose h2.section-title.why-choose-title,
  body #why-choose h2.section-title.why-choose-title {
    font-size: clamp(30px, 8.5vw, 38px) !important;
    margin: 0 0 24px !important;
  }
  body #why-choose .why-choose-inner {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 24px !important;
    width: 100% !important;
  }
  body #why-choose .why-rating-block,
  body #why-choose .why-rating { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; }
  body #why-choose .why-rating-tilt {
    transform: rotate(-5deg) !important;
    transform-origin: center center !important;
    display: inline-block !important;
  }
  body #why-choose .why-rating-number {
    font-size: clamp(80px, 22vw, 108px) !important;
    line-height: 0.9 !important;
  }
  body #why-choose .why-rating-tag span,
  body #why-choose .why-rating-label span {
    font-size: clamp(22px, 6vw, 30px) !important;
    padding: 6px 16px !important;
    transform: rotate(-3deg) !important;
  }
  body #why-choose .why-stats-block,
  body #why-choose .why-stats {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 20px !important;
  }
  body #why-choose .why-stats-row,
  body #why-choose .why-stats .why-stats-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 18px 28px !important;
    max-width: 100% !important;
  }
  body #why-choose .why-stat-number {
    font-size: clamp(32px, 9vw, 44px) !important;
    letter-spacing: 0.04em !important;
  }
  body #why-choose .why-stat-label {
    font-size: 13px !important;
    -webkit-text-stroke: 1.5px #000 !important;
    text-shadow: 1.5px 1.5px 0 #000 !important;
  }
  body #why-choose .why-stat-support,
  body #why-choose .why-stat-uptime { min-width: 0 !important; }
  body #why-choose .why-stat-number.why-stat-locked { min-width: 0 !important; }
  body #why-choose .why-trustpilot,
  body #why-choose .why-badges {
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px auto 0 !important;
    justify-content: center !important;
  }
  body #why-choose .badge-trustpilot-pill {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 10px 16px !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }
  body #why-choose .badge-trustpilot-pill .tp-star-icon { font-size: 22px !important; }
  body #why-choose .badge-trustpilot-pill .tp-label { font-size: 15px !important; }
  body #why-choose .badge-trustpilot-pill .tp-excellent { font-size: 18px !important; }
  body #why-choose .why-trustpilot,
  body #why-choose .why-badges { margin-top: 0 !important; }

  /* === HOW IT WORKS === */
  body .why-hiw-panel { overflow: visible !important; padding-top: 48px !important; }
  body #how-it-works {
    min-height: auto !important;
    padding: 48px 16px !important;
    overflow: visible !important;
    background: transparent !important;
  }
  body .mb-hiw-promo-bridge { overflow: visible !important; }
  body .hiw-stage {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  body .hiw-layout { display: block !important; min-height: auto !important; overflow: visible !important; }
  body .hiw-steps-col,
  body .hiw-content,
  body .hiw-inner,
  body .hiw-steps {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 3 !important;
  }
  body .hiw-inner {
    padding-right: 0 !important;
    min-height: auto !important;
  }
  body #how-it-works .hiw-title,
  body #how-it-works .section-title {
    font-family: 'Pricedown Bl', Pricedown, 'Bowlby One', Impact, sans-serif !important;
    font-size: clamp(36px, 10vw, 44px) !important;
    font-weight: 400 !important;
    -webkit-text-stroke-width: var(--hero-title-stroke-mobile) !important;
    -webkit-text-stroke-color: #000 !important;
    text-shadow: var(--hero-title-stroke-shadow-mobile) !important;
    paint-order: stroke fill !important;
    text-align: center !important;
    margin: 0 0 24px !important;
    width: 100% !important;
  }
  body .hiw-steps {
    width: 100% !important;
    max-width: 100% !important;
    gap: var(--hiw-card-gap) !important;
    display: flex !important;
    flex-direction: column !important;
  }
  body .hiw-step-row,
  body .hiw-step {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transform: none !important;
    overflow: visible !important;
  }
  body .hiw-step-num {
    flex: 0 0 56px !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    font-family: Anton, Impact, sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-align: center !important;
    border-radius: 50% !important;
    align-self: flex-start !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    -webkit-text-stroke-width: var(--hiw-num-stroke-mobile) !important;
    -webkit-text-stroke-color: #000 !important;
    text-shadow: var(--hiw-num-stroke-shadow-mobile) !important;
    paint-order: stroke fill !important;
    background: linear-gradient(135deg, #ff00bb 0%, #e600e6 26%, #9333ea 58%, #8104cb 100%) !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
  }
  body .hiw-step-row:first-child .hiw-step-num,
  body .hiw-step:first-child .hiw-step-num {
    background: linear-gradient(135deg, #ff00bb 0%, #e600e6 26%, #9333ea 58%, #8104cb 100%) !important;
  }
  body .hiw-step-card {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 24px 20px !important;
    border-radius: 24px !important;
    background: rgba(7, 7, 8, 0.55) !important;
    border: 1px solid rgba(129, 4, 203, 0.45) !important;
    box-shadow: 0 0 16px rgba(219, 61, 255, 0.15) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
  body .hiw-step-row:first-child .hiw-step-card,
  body .hiw-step:first-child .hiw-step-card {
    background: linear-gradient(15deg, rgba(129, 4, 203, 0.92) 0%, rgba(255, 0, 187, 0.88) 100%) !important;
    border: none !important;
    border-left: 4px solid #070708 !important;
    border-top: 4px solid #070708 !important;
    box-shadow: 0 0 18px rgba(219, 61, 255, 0.3) !important;
  }
  body #how-it-works .hiw-step-row:not(.hiw-step-current) .hiw-step-card,
  body #how-it-works .hiw-step:not(.hiw-step-current) .hiw-step-card,
  body #how-it-works .hiw-step-row:first-child:not(.hiw-step-current) .hiw-step-card,
  body #how-it-works .hiw-step:first-child:not(.hiw-step-current) .hiw-step-card {
    background: rgba(7, 7, 8, 0.55) !important;
    border: 1px solid rgba(129, 4, 203, 0.45) !important;
    box-shadow: 0 0 16px rgba(219, 61, 255, 0.15) !important;
  }
  body #how-it-works .hiw-step-row.hiw-step-current .hiw-step-card,
  body #how-it-works .hiw-step.hiw-step-current .hiw-step-card {
    background: linear-gradient(15deg, rgba(129, 4, 203, 0.92) 0%, rgba(255, 0, 187, 0.88) 100%) !important;
    border: none !important;
    border-left: 4px solid #070708 !important;
    border-top: 4px solid #070708 !important;
    box-shadow: 0 0 18px rgba(219, 61, 255, 0.3) !important;
  }
  body #how-it-works .hiw-step-progress {
    height: 5px !important;
    margin-top: 12px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.16) !important;
  }
  body #how-it-works .hiw-step-progress-fill {
    display: block !important;
    width: 0;
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #f0abfc 0%, #ff00bb 48%, #8104cb 100%) !important;
    box-shadow: 0 0 16px rgba(255, 0, 187, 0.56) !important;
  }
  body .hiw-step-title {
    font-family: 'Pricedown Bl', Pricedown, 'Bowlby One', Impact, sans-serif !important;
    font-size: clamp(20px, 5.5vw, 24px) !important;
    font-weight: 400 !important;
    line-height: 1.12 !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    -webkit-text-stroke-width: var(--hiw-step-stroke-mobile, 0) !important;
    -webkit-text-stroke-color: transparent !important;
    text-shadow: var(--hiw-step-stroke-shadow-mobile) !important;
    paint-order: normal !important;
    overflow: visible !important;
  }
  body .hiw-step-text {
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    letter-spacing: -0.01em !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
  /* HIW figure — below steps, flush to viewport right edge on mobile */
  body .mb-hiw-promo-bridge {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }
  body .mb-hiw-promo-bridge > .hiw-figure,
  body .mb-hiw-promo-bridge > .hiw-figure--right,
  body .mb-hiw-promo-bridge > .mb-gta-figure,
  body #how-it-works .hiw-figure,
  body #how-it-works img.hiw-figure,
  body #how-it-works img.hiw-figure--right,
  body .mb-gta-figure {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: min(300px, 78vw) !important;
    max-width: none !important;
    max-height: min(380px, 48vh) !important;
    height: auto !important;
    margin: 28px 0 0 !important;
    object-fit: contain !important;
    object-position: right bottom !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
  body #how-it-works .mb-shade--hiw,
  body #how-it-works img.mb-shade--hiw { display: none !important; visibility: hidden !important; }

  /* === PROMOTERS — horizontal scroll on mobile === */
  body #promoters {
    min-height: auto !important;
    padding: 56px 0 40px !important;
    overflow: visible !important;
  }
  body .promoters-layout { padding: 0 16px !important; max-width: 100% !important; }
  body .promoters-heading,
  body #promoters .promoters-heading,
  body #promoters .section-title {
    font-size: var(--mb-section-title-mobile) !important;
    margin: 0 0 32px !important;
    text-align: center !important;
  }
  body .promoters-viewport {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 0 16px !important;
    margin: 0 -16px !important;
    width: calc(100% + 32px) !important;
    max-width: calc(100% + 32px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x !important;
    overscroll-behavior-y: none !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
  }
  body .promoters-viewport.is-mb-infinite,
  body .reviews-viewport.is-mb-infinite {
    scroll-snap-type: none !important;
  }
  body .promoters-viewport.is-mb-infinite .promoter-card,
  body .reviews-viewport.is-mb-infinite .review-card {
    scroll-snap-align: none !important;
  }

  body .promoters-viewport::-webkit-scrollbar { display: none !important; }
  body .promoters-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    width: max-content !important;
    transform: none !important;
    animation: none !important;
  }
  body .promoter-card {
    flex: 0 0 212px !important;
    width: 212px !important;
    height: 288px !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    scroll-snap-align: start !important;
  }
  body .promoter-card-frame {
    transform: none !important;
    padding: 22px 18px !important;
    border-radius: 14px !important;
  }
  body .promoter-card-body {
    transform: none !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
  }
  body .promoter-avatar { width: 68px !important; height: 68px !important; }
  body .promoter-handle { font-size: 14px !important; }
  body .promoter-badge { font-size: 11px !important; padding: 4px 12px !important; }
  body .promoter-count { font-size: 12px !important; }

  /* === REVIEWS — horizontal scroll on mobile === */
  body #reviews {
    min-height: auto !important;
    padding: 56px 0 32px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }
  body #reviews .reviews-layout { padding: 0 16px !important; max-width: 100% !important; text-align: center !important; }
  body #reviews .reviews-heading,
  body #reviews .section-title {
    font-size: var(--mb-section-title-mobile) !important;
    margin: 0 0 32px !important;
  }
  body .reviews-viewport {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px 0 16px !important;
    margin: 0 -16px !important;
    width: calc(100% + 32px) !important;
    max-width: calc(100% + 32px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x !important;
    overscroll-behavior-y: none !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    justify-content: flex-start !important;
  }
  body .reviews-viewport::-webkit-scrollbar { display: none !important; }
  body .reviews-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding: 12px 16px 16px !important;
    margin: 0 !important;
    width: max-content !important;
    min-height: 0 !important;
    height: auto !important;
    transform: none !important;
    translate: none !important;
  }
  body .review-card {
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 0 !important;
    max-width: 300px !important;
    height: auto !important;
    min-height: 280px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    scroll-snap-align: start !important;
  }
  body .review-card:first-child { margin-left: 0 !important; }
  body .review-card-frame {
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    padding: 26px 22px !important;
    border-radius: 18px !important;
    border-width: 2px !important;
    box-sizing: border-box !important;
  }
  body .review-card-body { transform: none !important; align-items: flex-start !important; gap: 14px !important; }
  body .review-avatar {
    width: 72px !important;
    height: 72px !important;
    margin: 0 0 14px !important;
  }
  body .review-name { font-size: 16px !important; line-height: 1.25 !important; }
  body .review-text {
    font-size: 14px !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
    margin-top: 12px !important;
  }

  /* Horizontal scroll nav arrows (promoters + reviews) */
  body .mb-hscroll {
    position: relative;
    width: 100%;
  }

  body .mb-hscroll__btn {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    background: rgba(7, 7, 8, 0.42);
    color: #fff;
    opacity: 0.55;
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity 0.2s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  body .mb-hscroll__btn--prev { left: 6px; }
  body .mb-hscroll__btn--next { right: 6px; }

  body .mb-hscroll__chevron {
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
  }

  body .mb-hscroll__btn--prev .mb-hscroll__chevron {
    transform: rotate(-135deg);
    margin-left: 3px;
  }

  body .mb-hscroll__btn--next .mb-hscroll__chevron {
    transform: rotate(45deg);
    margin-right: 3px;
  }

  body .mb-hscroll__btn:is(:hover, :focus-visible) {
    opacity: 0.82;
    background: rgba(7, 7, 8, 0.58);
    outline: none;
  }

  body .mb-hscroll__btn.is-disabled {
    opacity: 0.22;
    pointer-events: none;
  }

  body .mb-hscroll__btn:not(.is-disabled):active {
    opacity: 0.92;
  }

  /* Tone down the FAQ/Reviews halo on small screens */
  body .reviews-faq-panel .mb-shade--faq {
    left: max(-0.49%, calc(-7 * min(100vw, 1440px) / 1440)) !important;
    top: min(4.79vw, 69px) !important;
    width: min(123.4vw, 1777px) !important;
    transform: rotate(-75.12deg) !important;
    opacity: 0.45 !important;
    filter: blur(40px) !important;
  }

  /* === FAQ === */
  body #faq {
    min-height: auto !important;
    padding: 32px 16px 48px !important;
    overflow: visible !important;
  }
  body .faq-shell {
    max-width: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  body .faq-inner,
  body .faq-list,
  body .faq-item { max-width: 100% !important; width: 100% !important; }
  body #faq .faq-title,
  body #faq .section-title.faq-title,
  body .reviews-faq-panel #faq .faq-title,
  body .reviews-faq-panel .section-title.faq-title {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 28px !important;
    text-align: center !important;
    font-size: clamp(32px, 9vw, 40px) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    -webkit-text-stroke: 2.5px #000 !important;
    text-shadow:
      1px 0 0 #000,
      -1px 0 0 #000,
      0 1px 0 #000,
      0 -1px 0 #000,
      2px 2px 0 #000 !important;
    paint-order: stroke fill !important;
    position: relative !important;
    z-index: 4 !important;
    background: none !important;
  }
  body .faq-list { min-height: 0 !important; position: relative !important; z-index: 5 !important; }
  body .faq-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 5 !important;
  }
  body .faq-item:not(.open) { min-height: 56px !important; align-items: center !important; }
  body .faq-item.open { min-height: 0 !important; align-items: flex-start !important; }
  body .faq-item-main { flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important; }
  body .faq-question {
    font-size: 15px !important;
    line-height: 1.3 !important;
    -webkit-text-stroke: 1.5px #000 !important;
    text-shadow: 1.5px 1.5px 0 #000 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }
  body .faq-toggle {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    box-shadow: 0 3px 14px rgba(147, 51, 234, 0.32) !important;
  }
  body .faq-item:not(.open) .faq-toggle { align-self: center !important; margin-top: 0 !important; }
  body .faq-item.open .faq-toggle {
    align-self: flex-start !important;
    margin-top: 2px !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22) !important;
  }
  body .faq-icon { width: 16px !important; height: 16px !important; }
  body .faq-icon::before { width: 12px !important; height: 2px !important; }
  body .faq-icon::after { width: 2px !important; height: 12px !important; }
  body .faq-answer {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  body .faq-item.open .faq-answer {
    max-height: 520px !important;
  }
  body .faq-answer-inner {
    margin-top: 10px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
    opacity: 0 !important;
    transform: translateY(-4px) !important;
    transition: opacity 0.35s ease 0.05s, transform 0.35s ease 0.05s !important;
  }
  body .faq-item.open .faq-answer-inner {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  /* Reduce FAQ character glow on mobile (they overflow & distract) */
  body .faq-character {
    pointer-events: none !important;
  }
  body .faq-character--left {
    width: min(160px, 38vw) !important;
    max-height: 48vh !important;
    left: -12vw !important;
    opacity: 0.24 !important;
    z-index: 1 !important;
  }
  body .faq-character--right {
    width: min(140px, 34vw) !important;
    max-height: 44vh !important;
    right: -10vw !important;
    opacity: 0.24 !important;
    z-index: 1 !important;
  }

  /* === FINAL CTA — overlap footer, corner cards, centered car === */
  body #final-cta {
    position: relative !important;
    z-index: 12 !important;
    min-height: auto !important;
    padding: 48px 16px 24px !important;
    margin-bottom: -64px !important;
    overflow: visible !important;
    overflow-x: visible !important;
    clear: none !important;
  }
  body .cta-frame {
    position: relative !important;
    min-height: 480px !important;
    border-radius: 28px !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.5) !important;
    background: rgba(255, 255, 255, 0.06) !important;
  }
  body .cta-beach-bg,
  body .cta-bg-glow {
    border-radius: 28px !important;
    overflow: hidden !important;
  }
  body .cta-beach-bg::after {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.42) 0%,
      rgba(0, 0, 0, 0.28) 45%,
      rgba(0, 0, 0, 0.62) 100%
    ) !important;
  }
  body .cta-floating-cards {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    overflow: visible !important;
    z-index: 6 !important;
  }
  body .cta-float-card {
    display: block !important;
    position: absolute !important;
    border-radius: 10px !important;
    opacity: 1 !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55) !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 7 !important;
    text-decoration: none !important;
  }
  body .cta-float-card:nth-child(n+5) {
    display: none !important;
  }
  /* Left stack — bottom + upper */
  body .cta-float-card:nth-child(1) {
    width: 76px !important;
    height: 102px !important;
    left: 16px !important;
    bottom: 52px !important;
    top: auto !important;
    right: auto !important;
    transform: rotate(-12deg) !important;
    z-index: 2 !important;
  }
  body .cta-float-card:nth-child(2) {
    width: 58px !important;
    height: 78px !important;
    left: -2px !important;
    top: 8% !important;
    bottom: auto !important;
    right: auto !important;
    transform: rotate(-8deg) !important;
    z-index: 3 !important;
  }
  /* Right stack — upper + bottom */
  body .cta-float-card:nth-child(3) {
    width: 84px !important;
    height: 112px !important;
    right: 16px !important;
    bottom: 56px !important;
    top: auto !important;
    left: auto !important;
    transform: rotate(11deg) !important;
    z-index: 4 !important;
  }
  body .cta-float-card:nth-child(4) {
    width: 64px !important;
    height: 86px !important;
    right: -2px !important;
    top: 6% !important;
    bottom: auto !important;
    left: auto !important;
    transform: rotate(7deg) !important;
    z-index: 3 !important;
  }
  body #final-cta .cta-shell {
    position: relative !important;
    z-index: 5 !important;
    padding: 72px 24px 108px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    min-height: 480px !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
  }
  body #final-cta .cta-inner {
    max-width: 260px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 24px !important;
    text-align: center !important;
    pointer-events: auto !important;
    z-index: 8 !important;
  }
  body #final-cta .cta-title {
    font-family: 'Anton', Impact, sans-serif !important;
    font-size: clamp(32px, 10vw, 44px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.01em !important;
    -webkit-text-stroke: 3px #000 !important;
    text-shadow: 3px 3px 0 #000 !important;
    margin: 0 !important;
  }
  body #final-cta .cta-subtitle {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 auto !important;
    max-width: 320px !important;
    color: #fff !important;
  }
  body #final-cta .btn,
  body #final-cta .btn-primary,
  body #final-cta .btn-cta-final {
    display: inline-flex !important;
    width: auto !important;
    min-width: 212px !important;
    max-width: calc(100% - 40px) !important;
    min-height: 56px !important;
    padding: 16px 28px !important;
    margin: 0 auto !important;
  }

  /* === FOOTER — room for overlapping CTA + car (homepage only) === */
  body.home .site-footer-section {
    position: relative !important;
    z-index: 8 !important;
    padding-top: 176px !important;
    padding-bottom: 40px !important;
    overflow: visible !important;
    clear: none !important;
  }
  body.home .site-footer-section .container { padding: 0 20px !important; max-width: 100% !important; }
  body.home .footer-inner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 18px !important;
  }
  body.home .footer-logo { font-size: 22px !important; }
  body.home .footer-links {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 8px !important;
  }
  body.home .footer-links a { font-size: 14px !important; }
  body.home .footer-actions {
    flex-direction: column !important;
    gap: 14px !important;
    align-items: center !important;
  }
  body.home .footer-social { gap: 14px !important; justify-content: center !important; }
  body.home .footer-car {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    top: -72px !important;
    width: min(220px, 62vw) !important;
    height: auto !important;
    max-width: 280px !important;
    transform: translateX(-50%) !important;
    object-position: center bottom !important;
    z-index: 20 !important;
    pointer-events: none !important;
  }
  body.home .footer-car:not([src]),
  body.home .footer-car[src=""] {
    display: none !important;
  }

}

/* === Tablet band (481–768px) — choose-game centering === */
@media (min-width: 481px) and (max-width: 768px) {
  body .hiw-step-num {
    flex: 0 0 56px !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }
  body .choose-game-carousel,
  body .choose-game-swiper {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* === Small phones (≤480px) — extra-tight tweaks === */
@media (max-width: 480px) {
  body #hero .hero-stack {
    --hero-m-char-w: min(60vw, 220px);
    --hero-m-car-w: min(100px, 27vw);
    --hero-m-crates-w: min(88px, 23vw);
    --hero-m-cta-h: clamp(156px, 28vh, 188px);
    --hero-m-deco-sit: -14px;
    --hero-m-car-overlap: 74px;
    --hero-m-crates-overlap: 46px;
    min-height: calc(var(--hero-m-cta-h) + 300px) !important;
  }
  body .hero-figure-row .hero-deco-car { right: calc(50% + (var(--hero-m-char-w, min(60vw, 220px)) / 2) - var(--hero-m-car-overlap, 74px)) !important; }
  body .hero-figure-row .hero-deco-crates { left: calc(50% + (var(--hero-m-char-w, min(60vw, 220px)) / 2) - var(--hero-m-crates-overlap, 46px)) !important; }
  body .hero-figure-row .hero-character { max-height: min(40vh, 260px) !important; }
  body #hero .hero-composition { min-height: 400px !important; }
  body.home #hero .hero-composition { min-height: 400px !important; }
  body .hero-title {
    font-size: clamp(26px, 7.6vw, 32px) !important;
    line-height: 1.05 !important;
  }
  body.home .hero-title {
    top: 4px !important;
    font-size: clamp(22px, 6.4vw, 28px) !important;
  }
  body .hero-cta-text { font-size: 11.5px !important; line-height: 15px !important; }
  body .hero-cta-row { width: calc(100% - 24px) !important; max-width: calc(100% - 24px) !important; }

  body .choose-game-carousel,
  body .choose-game-swiper {
    height: 480px !important;
    max-height: 480px !important;
    --figma-cg-active-w: 288px;
    --figma-cg-active-h: 406px;
    --figma-cg-side-w: 224px;
    --figma-cg-side-h: 318px;
  }
  body .choose-game-swiper .swiper-slide {
    width: 288px !important; height: 406px !important;
    max-width: 288px !important; max-height: 406px !important;
  }
  body .choose-game-swiper .game-slide-card {
    width: 224px !important; height: 318px !important;
    max-width: 224px !important; max-height: 318px !important;
  }
  body .choose-game-swiper .swiper-slide-active .game-slide-card,
  body .choose-game-swiper .swiper-slide-active .game-slide-card.is-focus,
  body .choose-game-swiper .game-slide-card.is-focus {
    width: 288px !important;
    height: 406px !important;
    max-width: 288px !important;
    max-height: 406px !important;
    min-width: 288px !important;
  }

  body #best-sellers .products-grid { gap: 10px !important; }
  body #best-sellers .products-grid .product-card--product .product-card-name {
    font-size: clamp(13px, 3.5vw, 16px) !important;
    padding: 6px 12px !important;
  }
  body .bs-deco-youtube { left: calc(50% - 110px) !important; width: 28px !important; height: 28px !important; }
  body .bs-deco-gamepad { left: calc(50% + 78px) !important; width: 40px !important; height: 40px !important; }

  body .review-card {
    flex: 0 0 260px !important;
    width: 260px !important;
    min-width: 0 !important;
    max-width: 260px !important;
  }
  body .reviews-track { padding-inline: 16px !important; }
  body .promoter-card { flex: 0 0 180px !important; width: 180px !important; height: 240px !important; }

  body .faq-question { font-size: 14px !important; }
  body .hiw-step-num {
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }
  body .hiw-step-title { font-size: 16px !important; line-height: 20px !important; }
  body .hiw-step-text { font-size: 13px !important; line-height: 18px !important; }
  body .faq-toggle { flex: 0 0 32px !important; width: 32px !important; height: 32px !important; }
  body .faq-icon { width: 14px !important; height: 14px !important; }

  /* Category game banner below products — full bleed on mobile (avoid 100vw clip) */
  body.mb-cat-page .mb-container {
    overflow-x: visible !important;
  }
  body.mb-cat-page .mb-cat-hero--banner {
    display: block !important;
    width: calc(100% + (2 * var(--mb-gutter, 24px))) !important;
    max-width: none !important;
    margin-left: calc(-1 * var(--mb-gutter, 24px)) !important;
    margin-right: calc(-1 * var(--mb-gutter, 24px)) !important;
    margin-top: var(--mb-cat-stack-space, clamp(24px, 5vw, 36px)) !important;
    margin-bottom: var(--mb-cat-block-space, clamp(48px, 10vw, 72px)) !important;
  }
  body.mb-cat-page .mb-cat-hero--banner .mb-cat-hero__banner {
    min-height: clamp(140px, 42vw, 220px) !important;
  }
  body.mb-cat-page .mb-cat-hero--banner .mb-cat-hero__img {
    object-fit: cover !important;
    object-position: var(--mb-cat-hero-focus-mobile, center center) !important;
  }

  /* PDP category banner below product description */
  body.mb-pdp-page .mb-pdp-body {
    overflow-x: visible !important;
  }
  body.mb-pdp-page .mb-pdp-body .mb-cat-hero--banner {
    display: block !important;
    width: calc(100% + (2 * var(--mb-gutter, 24px))) !important;
    max-width: none !important;
    margin-left: calc(-1 * var(--mb-gutter, 24px)) !important;
    margin-right: calc(-1 * var(--mb-gutter, 24px)) !important;
    margin-top: var(--mb-pdp-block-space, clamp(48px, 8vw, 96px)) !important;
    margin-bottom: 0 !important;
  }
  body.mb-pdp-page .mb-pdp-body .mb-cat-hero--banner .mb-cat-hero__banner {
    min-height: clamp(140px, 42vw, 220px) !important;
  }
  body.mb-pdp-page .mb-pdp-body .mb-cat-hero--banner .mb-cat-hero__img {
    object-fit: cover !important;
    object-position: var(--mb-cat-hero-focus-mobile, center center) !important;
  }
}