/* Figma 1440px alignment — reviews, FAQ, CTA, Best Sellers (hero layout in main.css) */

/* Best Sellers — fan of covers (beat Elementor img { height: auto }) */
#best-sellers .products-grid .product-card--game {
  flex: 0 0 auto !important;
  width: clamp(180px, 14vw, 228px) !important;
  max-width: clamp(180px, 14vw, 228px) !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  margin-left: clamp(-52px, -3.6vw, -34px) !important;
  border: var(--mb-cover-border) !important;
  border-color: var(--mb-cover-border-color) !important;
  transform-origin: center bottom !important;
  box-sizing: border-box !important;
  overflow: clip !important;
}

#best-sellers .products-grid .product-card--product {
  flex: 0 0 clamp(180px, 14vw, 228px) !important;
  width: clamp(180px, 14vw, 228px) !important;
  max-width: clamp(180px, 14vw, 228px) !important;
  aspect-ratio: 1 / 1 !important;
  border: var(--mb-cover-border) !important;
  border-color: var(--mb-cover-border-color) !important;
  box-sizing: border-box !important;
  overflow: clip !important;
}

#best-sellers .products-grid[data-view="products"] {
  min-height: calc(clamp(180px, 14vw, 228px) * 4 / 3) !important;
  align-items: flex-end !important;
}

#best-sellers .products-grid .product-card:first-child {
  margin-left: 0 !important;
}

#best-sellers .products-grid .product-card:nth-child(1) { z-index: 5 !important; transform: rotate(3deg) !important; }
#best-sellers .products-grid .product-card:nth-child(2) { z-index: 4 !important; transform: rotate(4deg) !important; }
#best-sellers .products-grid .product-card:nth-child(3) { z-index: 3 !important; transform: rotate(5deg) !important; }
#best-sellers .products-grid .product-card:nth-child(4) { z-index: 2 !important; transform: rotate(6deg) !important; }
#best-sellers .products-grid .product-card:nth-child(5),
#best-sellers .products-grid .product-card:nth-child(n+6) { z-index: 1 !important; transform: rotate(7deg) !important; }

#best-sellers .products-grid .product-card img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
}

#best-sellers .products-grid .product-card-overlay {
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 12px 16px !important;
}

#best-sellers .products-grid .product-card-name {
  width: auto !important;
  max-width: calc(100% - 8px) !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.72) !important;
}

#best-sellers .filter-tabs {
  margin-bottom: 32px !important;
}

/* Why Choose — CSS-locked stat literals (24/7, 99.9%) */
#why-choose .why-stats-row {
  max-width: none !important;
  overflow: visible !important;
}

#why-choose .why-stat-support,
#why-choose .why-stat-uptime {
  min-width: max(9ch, 148px) !important;
  overflow: visible !important;
}

#why-choose .why-stat-number.why-stat-locked {
  display: inline-block !important;
  min-width: 5.5em !important;
  overflow: visible !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

#why-choose .why-stat-val-support::before {
  content: '24/7' !important;
}

#why-choose .why-stat-val-uptime::before {
  content: '99.9%' !important;
}

/* Why Choose — unified sky-blue metrics (single font, no glow) */
#why-choose .why-rating-number,
#why-choose .why-stat-number,
#why-choose .why-stat-number.why-stat-locked::before {
  font-family: var(--font-pricedown) !important;
  font-weight: 400 !important;
  color: var(--why-num-color) !important;
  -webkit-text-fill-color: var(--why-num-color) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  background: none !important;
  filter: none !important;
  paint-order: fill !important;
}

#why-choose .why-rating-number {
  font-size: clamp(96px, 11vw, 128px) !important;
  letter-spacing: -0.02em !important;
  line-height: 0.92 !important;
}

#why-choose .why-stat-number,
#why-choose .why-stat-number.why-stat-locked::before {
  font-size: clamp(40px, 4.2vw, 52px) !important;
  letter-spacing: 0.06em !important;
}

/* ── P1 HERO FIGMA ALIGNMENT (Figma 460:770) ───────────────── */

/* 1. Comic panel diagonal dividers — softened vs Figma 460:770 (semi-transparent) */
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(11deg, transparent 22%, rgba(7,7,8,0.42) 22%, rgba(7,7,8,0.42) calc(22% + 3px), transparent calc(22% + 3px)),
    linear-gradient(11deg, transparent 45%, rgba(7,7,8,0.32) 45%, rgba(7,7,8,0.32) calc(45% + 2px), transparent calc(45% + 2px)),
    linear-gradient(11deg, transparent 70%, rgba(7,7,8,0.28) 70%, rgba(7,7,8,0.28) calc(70% + 2px), transparent calc(70% + 2px));
}

/* Hero composition — no frosted frame (breaks stacking on live site) */
.hero-composition {
  background: transparent !important;
  border-radius: 0 !important;
}

/* Hero stacking — Figma 460:770 canvas (1440×800) */
.hero-stack {
  position: relative;
  min-height: var(--hero-h, 800px);
  padding-bottom: 0;
}

@media (min-width: 769px) {
  #hero {
    --hero-h: 800px;
    --hero-title-top: 172px;
    --hero-char-bottom: 164px;
    --hero-cta-bottom: 72px;
    --hero-crates-bottom: 110px;
    --hero-car-bottom: 12px;
  }

  .hero-stage,
  .hero-composition,
  .hero-stack {
    min-height: var(--hero-h) !important;
    padding: 0 !important;
  }

  /* Above #hero::after (z-index 3) so CTA pill is never darkened by bottom blur */
  .hero-stage {
    z-index: 5 !important;
  }

  /* Figma 460:783 — Anton 140px, white fill + black stroke */
  .hero-title {
    top: var(--hero-title-top) !important;
    z-index: 2;
    text-align: center;
    font-family: 'Anton', 'Impact', sans-serif !important;
    font-size: clamp(80px, 9.72vw, 140px) !important;
    font-weight: 400 !important;
    line-height: 1.03 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    -webkit-text-stroke-width: var(--hero-title-stroke) !important;
    -webkit-text-stroke-color: #000 !important;
    text-shadow: var(--hero-title-stroke-shadow) !important;
    paint-order: stroke fill !important;
  }

  .hero-character {
    bottom: var(--hero-char-bottom) !important;
    z-index: 5;
  }

  /* Figma 460:798 — CTA pill centered, bottom 72px */
  .hero-cta-row {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: var(--hero-cta-bottom) !important;
    transform: translateX(-50%) !important;
    flex: none !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 24px !important;
    width: min(680px, calc(100% - 80px)) !important;
    max-width: 680px !important;
    margin: 0 !important;
    padding: 16px 16px 16px 32px !important;
    background: #fff !important;
    border: none !important;
    border-left: 4px solid #070708 !important;
    border-top: 4px solid #070708 !important;
    border-radius: 80px !important;
    box-shadow:
      0 10px 0 0 #000,
      0 16px 32px rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: auto !important;
    isolation: isolate !important;
  }

  .hero-deco {
    position: absolute !important;
    top: auto !important;
    object-position: center bottom !important;
    z-index: 4 !important;
  }

  /* Figma 460:781 — car left 420px, bottom 12px */
  .hero-deco-car {
    left: max(8px, calc(50% - 300px)) !important;
    right: auto !important;
    bottom: var(--hero-car-bottom) !important;
    width: 274px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
  }

  /* Figma 460:782 — crates left 744px, bottom 110px */
  .hero-deco-crates {
    left: max(8px, calc(50% + 24px)) !important;
    right: auto !important;
    bottom: var(--hero-crates-bottom) !important;
    width: 262px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
  }
}

/* CTA button gradient: #8104cb → #ff00bb with pink glow */
.hero-cta-row .btn-primary {
  background: linear-gradient(135deg, #8104cb 0%, #ff00bb 100%) !important;
  box-shadow:
    0 0 24px rgba(255, 0, 187, 0.55),
    0 4px 16px rgba(129, 4, 203, 0.45) !important;
  border-radius: 999px !important;
}

.hero-cta-row .btn-primary:hover {
  box-shadow:
    0 0 32px rgba(255, 0, 187, 0.75),
    0 6px 20px rgba(129, 4, 203, 0.55) !important;
}

/* 7. Bottom blur fade — dark transition from hero into Choose Game (below CTA pill) */
#hero::after {
  content: '' !important;
  position: absolute !important;
  left: -10% !important;
  right: -10% !important;
  bottom: -80px !important;
  height: 200px !important;
  background: #070708 !important;
  filter: blur(97px) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

/* ── REVIEWS (460:1012) — 1200×492, cards centered as a group ─ */
#reviews {
  padding-left: var(--container-px);
  padding-right: var(--container-px);
}

.reviews-layout {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

.reviews-viewport {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 8px 0 16px;
  overflow: visible;
}

.reviews-track {
  margin: 0 auto;
  padding: 0 0 32px;
  transform: none !important;
}

.review-card {
  flex-shrink: 0;
}

.review-card-frame {
  transform: rotate(5deg) !important;
  transform-origin: center bottom;
}

.review-card-body {
  transform: rotate(-5deg) !important;
  transform-origin: center bottom;
}

/* ── FAQ (460:1057) — accordion 800px centered in 1200 ─ */
#faq {
  padding-left: var(--container-px);
  padding-right: var(--container-px);
}

.faq-shell {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.faq-inner {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

#faq .faq-title {
  text-align: center;
}

.reviews-faq-panel #faq .faq-title {
  display: inline-block;
  width: auto;
  min-height: 0;
  position: relative;
  z-index: 3;
  background: none;
}

.faq-list {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  overflow: visible;
}

/* Figma 460:769 — FAQ accent */
.reviews-faq-panel .mb-shade--faq {
  left: max(-0.49%, calc(-7 * min(100vw, 1440px) / 1440));
  top: min(4.79vw, 69px);
  width: min(123.4vw, 1777px);
  transform: rotate(-75.12deg);
  transform-origin: center center;
  mix-blend-mode: lighten;
  opacity: 0.82;
  filter: blur(34px);
  z-index: 1;
  -webkit-clip-path: inset(18% 0 4% 0);
  clip-path: inset(18% 0 4% 0);
}

.faq-list {
  position: relative;
  z-index: 2;
}

.faq-item-main {
  position: relative;
  z-index: 1;
}

.faq-toggle {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

/* ── FINAL CTA (460:1076) — Group 12 bg + rounded frame 630px content ─ */
#final-cta {
  padding-left: var(--container-px);
  padding-right: var(--container-px);
}

#final-cta .cta-shell {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  min-height: 744px;
  padding: 80px clamp(24px, 5vw, 48px) 96px;
  pointer-events: none;
}

.cta-inner {
  width: 100%;
  max-width: 630px;
  margin: 0 auto;
  gap: 56px;
  pointer-events: auto;
  position: relative;
  z-index: 6;
}

.cta-floating-cards {
  z-index: 4;
}

.cta-float-card {
  pointer-events: auto;
  z-index: 5;
}

#final-cta .cta-title {
  font-family: 'Anton', Impact, sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(48px, 5vw, 72px) !important;
  line-height: 1.17 !important;
  text-transform: uppercase !important;
}

#final-cta .cta-subtitle {
  color: #fff !important;
  font-size: 14px !important;
  line-height: 20px !important;
}

@media (max-width: 768px) {
  /* Hero mobile — Pricedown + black stroke (mobile.css / footer @1000 win cascade) */
  body.home #hero .hero-composition {
    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;
    overflow: hidden !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;
  }

  .hero-title {
    font-family: 'Pricedown Bl', Pricedown, 'Bowlby One', Impact, sans-serif !important;
    font-size: clamp(30px, 9vw, 36px) !important;
    font-weight: 400 !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;
  }

  .hero-cta-row {
    border-radius: 24px !important;
    border-left: 4px solid #070708 !important;
    border-top: 4px solid #070708 !important;
    box-shadow:
      0 10px 0 0 #000,
      0 16px 32px rgba(0, 0, 0, 0.22) !important;
  }

  .reviews-viewport {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .reviews-track {
    margin: 0;
    padding: 0 16px 24px;
  }

  .faq-character--left {
    left: -12vw;
    opacity: 0.24;
    width: min(160px, 38vw);
    max-height: 48vh;
  }

  .faq-character--right {
    right: -10vw;
    opacity: 0.24;
    width: min(140px, 34vw);
    max-height: 44vh;
  }
}