/* Precision fixes for v3 storefront */
html, body, .storefront, .storefront > main, .storefront > header { max-width: 100%; overflow-x: clip; }
.topbar { min-width: 0; }
.topnav { min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scrollbar-width: none; white-space: nowrap; }
.topnav::-webkit-scrollbar { display: none; }
.topnav > a { flex: 0 0 auto; }
.container, .footer-inner { width: min(1440px, calc(100% - 80px)); }
.topbar { width: min(1440px, calc(100% - 80px)); }
.v3-hero { aspect-ratio: auto; min-height: 0; height: auto; padding-block: clamp(48px, 6vw, 92px); grid-template-columns: minmax(0, 1.08fr) minmax(440px, .92fr); gap: clamp(34px, 5vw, 82px); }
.hero-console { aspect-ratio: auto; min-height: 0; height: auto; display: flex; flex-direction: column; }
.showcase-v3-image { height: auto; aspect-ratio: 16 / 9; }
.showcase-v3-stack button { aspect-ratio: 16 / 9; }
.product-visual { height: auto; aspect-ratio: 16 / 9; }
.console-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.v3-hero .hero-copy { align-self: center; }
.product-switch { align-items: flex-end; }
.product-switch button { appearance: none; border: 0; border-bottom: 2px solid transparent; padding: 0 0 15px; background: transparent; color: #656c7a; cursor: pointer; font: 500 10px 'DM Mono', monospace; letter-spacing: .12em; }
.product-switch button:hover, .product-switch button.switch-active { color: var(--white); border-bottom-color: var(--orange); }
.product-card[hidden] { display: none; }
.showcase-v3-grid[hidden] { display: none; }
.product-status.coming { color: var(--purple); }
.showcase-tabs { display: flex; gap: 10px; margin: 0 0 18px; }
.showcase-tab { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font: 500 10px 'DM Mono', monospace; letter-spacing: .1em; }
.showcase-tab small { color: #626a78; font-size: 9px; letter-spacing: 0; }
.showcase-tab:hover, .showcase-tab.active { border-color: var(--orange); color: var(--white); background: rgba(255,120,75,.08); }
.showcase-secondary { margin-top: 34px; }
.discord-actions { display: grid; gap: 9px; }
.discord-actions .v3-btn { width: max-content; min-width: 190px; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.plan-choice { display: flex; min-height: 52px; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: #191d25; }
.plan-choice:hover, .plan-choice-featured { border-color: var(--orange); background: rgba(255,120,75,.1); }
.plan-choice span { color: var(--muted); font: 500 9px 'DM Mono', monospace; }
.plan-choice b { color: var(--white); font-size: 12px; }
.checkout-main, .checkout-aside, .status-shell, .auth-card, .account-shell { opacity: 1 !important; transform: none !important; }
.checkout-shell .methods, .checkout-shell .method, .checkout-shell .currency-pill, .checkout-shell .quantity-pill, .checkout-shell .promo-form, .checkout-shell .order-form { opacity: 1 !important; transform: none !important; visibility: visible !important; }
.checkout-shell { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; width: 100%; max-width: 1080px; margin: 58px auto 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.checkout-main, .checkout-aside { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 22px 70px rgba(0,0,0,.24); }
.checkout-main { padding: 34px; }
.checkout-main h1 { margin: 10px 0 9px; font-size: clamp(34px, 5vw, 58px); line-height: 1; letter-spacing: -.07em; }
.checkout-main > p { color: var(--muted); }
.checkout-main .form-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.checkout-main .form-section h2 { margin: 0 0 14px; font-size: 15px; letter-spacing: -.02em; }
.checkout-main .banner, .checkout-main .notice { border-color: var(--line); background: #171a21; border-radius: 9px; }
.checkout-main .method { min-height: 68px; padding: 14px 15px; border-color: var(--line); border-radius: 10px; background: #171a21; }
.checkout-main .method:hover, .checkout-main .method:has(input:checked) { border-color: var(--orange); background: rgba(255,120,75,.08); box-shadow: none; transform: none; }
.checkout-main .method-title { color: var(--white); font-size: 13px; }
.checkout-main .method-meta { color: var(--muted); font-size: 11px; }
.checkout-main .method-price { color: var(--orange); font-size: 13px; }
.checkout-main .btn.primary.big { width: 100%; margin-top: 26px; min-height: 50px; background: var(--orange); color: #171013; border-radius: 10px; }
.checkout-aside { align-self: start; position: sticky; top: 24px; padding: 25px; }
.checkout-aside .summary-list { border-top-color: var(--line); }
.checkout-aside .summary-list > div { padding: 14px 0; border-bottom-color: var(--line); }
.checkout-aside .summary-list span { color: var(--muted); font-size: 11px; }
.checkout-aside .summary-list b { color: var(--white); font: 500 12px 'DM Mono', monospace; }
.checkout-aside .summary-list > div:last-child b { color: var(--orange); font-size: 18px; }
.checkout-aside .aside-note { border-top-color: var(--line); color: var(--muted); }
.checkout-aside .aside-note b { color: var(--white); font-size: 12px; }
.discord-actions .discord-person, .discord-actions .v3-btn { width: 100%; min-width: 220px; min-height: 44px; }
.discord-person { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--white); }
.discord-person:hover { border-color: #566071; background: #171a21; }
.discord-person b { font-size: 12px; }
.discord-person small { color: var(--muted); font: 500 9px 'DM Mono', monospace; }
.account-expiry { display:flex; align-items:center; gap:6px; margin-top:5px; }
.account-expiry b { color: var(--orange); font:500 11px 'DM Mono', monospace; }
.v3-section, .v3-cta, .v3-marquee { content-visibility: auto; contain-intrinsic-size: 620px; }
img { image-rendering: auto; }
@media (max-width: 700px) {
  .hero-orbit { display:none; }
  .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .v3-hero *, .v3-section *, .v3-cta *, .showcase-v3-image img, .showcase-v3-stack img { animation:none !important; transition:none !important; }
}
.product-detail-v3 { padding: 64px 0 100px; }
.product-detail-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr); gap:clamp(28px,5vw,76px); align-items:center; }
.product-detail-media { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:0 28px 90px rgba(0,0,0,.3); }
.product-detail-media img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }
.product-detail-copy h1 { margin:8px 0 16px; font-size:clamp(42px,6vw,76px); line-height:.95; letter-spacing:-.07em; }
.product-detail-copy > p { max-width:490px; color:var(--muted); line-height:1.75; }
.product-detail-copy h2 { margin:34px 0 14px; font-size:20px; }
.product-detail-points { display:grid; gap:8px; margin:24px 0; color:var(--muted); font:500 11px 'DM Mono',monospace; }
.product-detail-points span::before { content:'✓'; color:var(--green); margin-right:8px; }
.detail-plans { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.detail-plan { display:grid; gap:4px; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.detail-plan:hover { border-color:var(--orange); background:rgba(255,120,75,.08); text-decoration:none; }
.detail-plan span { color:var(--muted); font:500 10px 'DM Mono',monospace; }
.detail-plan b { font-size:21px; }
.detail-plan small { color:var(--orange); font:500 9px 'DM Mono',monospace; }
@media (max-width:900px) { .product-detail-v3 { padding-top:36px; } .product-detail-grid { grid-template-columns:1fr; } }
@media (max-width: 900px) {
  .container, .footer-inner, .topbar { width: min(1240px, calc(100% - 36px)); }
  .v3-hero { min-height: 0; grid-template-columns: 1fr; gap: 42px; }
  .hero-console { min-height: 0; }
  .topbar { align-items: center; flex-direction: row; flex-wrap: nowrap; }
  .topnav { justify-content: flex-end; }
}
/* 4:3, 5:4 and square viewports need width for the console, not a squeezed
   two-column layout. This breakpoint is aspect-aware as well as width-aware. */
@media (max-aspect-ratio: 4/3) and (min-width: 901px), (max-width: 1080px) {
  .v3-hero { grid-template-columns: 1fr; }
  .hero-console { width: min(760px, 100%); margin-inline: auto; }
}
@media (min-aspect-ratio: 2/1) and (min-width: 1500px) {
  .v3-hero { grid-template-columns: minmax(0, .95fr) minmax(560px, 1.05fr); }
  .hero-console { max-width: 780px; justify-self: end; }
}
/* Desktop hero is a real 16:9 composition. The internal UI is compacted to
   fit that canvas; it never relies on overflow or absolute positioning. */
@media (min-width: 1081px) {
  .v3-hero { aspect-ratio: auto; height: calc((100vw - 80px) * .5625); min-height: 0; overflow: visible; align-items: center; }
  .v3-hero .hero-copy, .v3-hero .hero-console { min-width: 0; height: 100%; }
  .v3-hero .hero-copy { display: flex; flex-direction: column; justify-content: center; }
  .v3-hero h1 { font-size: clamp(54px, 6vw, 86px); margin-block: 16px 20px; }
  .hero-lead { font-size: 14px; line-height: 1.6; }
  .hero-actions { margin: 24px 0 0; flex-wrap: wrap; position: relative; z-index: 2; }
  .hero-console { width: 100%; align-self: center; overflow: hidden; }
  .console-top, .console-foot { height: 42px; padding-inline: 16px; }
  .console-body { padding: 24px 26px 27px; }
  .loadout-name { font-size: 25px; margin: 11px 0 22px; }
  .loadout-name img { width: 35px; height: 35px; padding: 6px; }
  .signal { margin: 10px 0; }
  .console-grid { margin-top: 22px; }
  .console-grid div { padding: 11px 13px; }
}
/* Wide desktop: do not leave the storefront trapped in a 1440px island on a
   16:9 monitor. The hero uses the available viewport as its canvas. */
@media (min-width: 1500px) and (min-aspect-ratio: 4/3) {
  .container, .footer-inner, .topbar { width: calc(100% - 96px); max-width: none; }
  .topnav { overflow: visible; max-width: none; }
  /* Explicit pixel-equivalent height avoids min-content expansion defeating
     aspect-ratio when the hero contains a large live panel. */
  .v3-hero { width: 100%; height: calc((100vw - 96px) * .5625); min-height: 0; aspect-ratio: auto; overflow: hidden; }
  .v3-hero .hero-copy { height: 100%; }
  .v3-hero .hero-console { height: auto; aspect-ratio: 16 / 9; max-height: none; }
  .product-grid { max-width: 1160px; margin-inline: auto; }
  .product-visual { height: 180px; aspect-ratio: auto; }
  .showcase-v3-grid { max-width: 1200px; margin-inline: auto; }
  .showcase-v3-image { height: 360px; aspect-ratio: auto; }
  .showcase-v3-stack button { height: 171px; aspect-ratio: auto; }
  /* Keep the hero wide, but bring the rest of the storefront back toward the
     visual center on ultra-wide monitors. */
  .v3-section, .v3-cta, .v3-marquee { width: min(1440px, calc(100% - 96px)); margin-inline: auto; }
}
@media (max-aspect-ratio: 4/3) and (min-width: 1081px) {
  .v3-hero { aspect-ratio: auto; }
  .v3-hero { height: auto; }
  .v3-hero .hero-copy, .v3-hero .hero-console { height: auto; }
}
@media (max-width: 600px) {
  .container, .footer-inner, .topbar { width: calc(100% - 28px); }
  .topbar { align-items: flex-start; flex-direction: column; }
  .topnav { width: 100%; justify-content: flex-start; }
  .hero-console { aspect-ratio: auto; }
  .product-visual { aspect-ratio: 16 / 9; height: auto; }
  .checkout-shell { grid-template-columns: 1fr; margin-top: 30px; }
  .checkout-aside { position: static; }
  .checkout-main { padding: 23px 18px; }
  .showcase-tabs { overflow-x: auto; }
  .showcase-tab { flex: 0 0 auto; }
  .discord-actions .v3-btn { width: 100%; }
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .discord-person { align-items: flex-start; flex-direction: column; gap: 3px; }
}

/* The topbar is intentionally untouched.  On wide displays the first
   screen was stretching from edge to edge, which pushed the hero copy and
   actions too far apart.  Keep the hero itself as a centered 16:9 canvas;
   the rest of the page keeps its existing responsive rules. */
@media (min-width: 1081px) and (min-aspect-ratio: 3/2) {
  .v3-hero {
    /* Match the exact content rail used by the sections below. */
    width: min(1440px, calc(100% - 96px));
    margin-inline: auto;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    /* Give the live-session panel the larger half of the hero. */
    grid-template-columns: minmax(0, .92fr) minmax(560px, 1.08fr);
    gap: clamp(32px, 4vw, 64px);
  }
  .v3-hero .hero-console {
    width: 100%;
    height: auto !important;
    min-height: 0;
    max-height: 100%;
    aspect-ratio: 16 / 9;
    align-self: center;
  }
}