/* ==========================================================================================================
   GAMES2ALL STORE LOOK (body.g2-store-all, printed only by _Layout_AE)
   Concept A "Code Vault": mint accent on an ink-navy ground, Sora for English UI text (Arabic keeps Tajawal).
   Store-only CSS lives ONLY here; every selector starts with body.g2-store-all, so Egypt never matches it (and never
   downloads the fonts: a font file loads only on pages that use it). Tokens first, then the few hard-coded olive
   values of the header, menu panels and help pill. Gold, sale and the platform tones stay as they are.
   ========================================================================================================== */
@font-face {
    font-family: "G2 Sora";
    src: url("/web/fonts/g2all/sora-latin.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "G2 Mono";
    src: url("/web/fonts/g2all/jetbrains-mono-latin.woff2") format("woff2");
    font-weight: 500 700;
    font-style: normal;
    font-display: swap;
}

/* The soft green glow behind the top of the page (_Layout_AE .g2-glow-blob). */
body.g2-store-all .g2-glow-blob {
    position: absolute;
    z-index: -10;
    top: -35%;
    left: 0;
    width: 25%;
    height: 50%;
    border-radius: 100%;
    background: #45cc8d;
    opacity: .16;
    filter: blur(65px);
    transform: translateZ(0);
    pointer-events: none;
}

body.g2-store-all {
    --g2-page: #080b11;
    --g2-surface: #0e131b;
    --g2-raised: #131a24;
    --g2-input: #111720;
    --g2-panel: #0c1118;
    --g2-line: #1e2733;
    --g2-line2: #26303d;
    --g2-hair: #222b37;
    --g2-text: #eaf3f4;
    --g2-muted: #93a1ab;
    --g2-dim: #7b8995;
    --g2-brand: #3ee0c4;
    --g2-brand-hover: #63e8d1;
    --g2-brand-soft: rgba(62, 224, 196, .12);
    --g2-font-ui: "G2 Sora", "Poppins", system-ui, sans-serif;
    /* For later parts (codes, order numbers); no rule uses it yet, so the file never downloads. */
    --g2-font-mono: "G2 Mono", ui-monospace, Consolas, monospace;
}

/* Page ground: base.css paints a fixed olive / gold glow layer (body::before) behind a transparent body; mint here. */
body.g2-store-all::before {
    background:
        radial-gradient(60vw 50vw at 12% 0, rgba(62, 224, 196, .10), rgba(62, 224, 196, 0) 70%),
        radial-gradient(45vw 40vw at 92% 4%, rgba(61, 123, 255, .07), rgba(61, 123, 255, 0) 70%),
        linear-gradient(180deg, #0b1018 0%, #080b11 55%);
}

@media (max-width: 575.98px) {
    body.g2-store-all::before {
        background:
            radial-gradient(90vw 70vw at 0 0, rgba(62, 224, 196, .09), rgba(62, 224, 196, 0) 70%),
            radial-gradient(70vw 60vw at 100% 0, rgba(61, 123, 255, .06), rgba(61, 123, 255, 0) 70%),
            linear-gradient(180deg, #0b1018 0%, #080b11 55%);
    }
}

/* English only: Sora for the page, its headings, labels and buttons (base.css gives them the page font). */
html:not([dir="rtl"]) body.g2-store-all,
html:not([dir="rtl"]) body.g2-store-all :is(h1, h2, h3, h4, h5, h6, label, button) {
    font-family: var(--g2-font-ui);
}

/* Headings a touch tighter (sizes unchanged: H1 32 / 24 phone, section titles 24 / 19). Latin only: letter-spacing
   would pull Arabic letters apart. */
html:not([dir="rtl"]) body.g2-store-all :is(h1, h2, h3, .g2-sec__title) { letter-spacing: -.02em; }

/* ---- Header and menu: olive values written as literals in the rules above (the brand fills already carry dark text). */
body.g2-store-all .g2-tone--brand { --g2-tone: #63e8d1; }
body.g2-store-all .g2-chip--new { color: #9ff0e1; }
body.g2-store-all .g2-header form.g2s-field input.x-autocomplete:focus { box-shadow: 0 0 0 3px rgba(62, 224, 196, .22); }

body.g2-store-all .g2-helpbtn {
    border-color: rgba(62, 224, 196, .45) !important;
    background: rgba(62, 224, 196, .08) !important;
    color: #bff3e9 !important;
}

body.g2-store-all .g2-helpbtn:hover, body.g2-store-all .g2-helpbtn[aria-expanded="true"] { background: rgba(62, 224, 196, .18) !important; }

body.g2-store-all .g2-feature {
    background: radial-gradient(90% 80% at 80% 10%, rgba(62, 224, 196, .30), transparent 60%), linear-gradient(160deg, #0f2a2a, #0c1118);
}

@media (max-width: 1099px) {
    /* One centred glow, so the same rule serves both directions. */
    body.g2-store-all .g2-cols--games > .g2-feature { background: radial-gradient(90% 120% at 50% 0%, rgba(62, 224, 196, .22), transparent 60%), var(--g2-surface); }
}

/* Home sections' display numerals (rank, release day, news placeholder) force Poppins: Sora in English. */
html:not([dir="rtl"]) body.g2-store-all :is(.g2-top__rank, .g2-release__day, .g2-hnews__ph) { font-family: var(--g2-font-ui); }

/* ---- Product list: the active filter chips and the sort menu's current option. */
body.g2-store-all .g2-lchip { box-shadow: inset 0 0 0 1px rgba(62, 224, 196, .4); color: #9ff0e1 !important; }
body.g2-store-all .g2-lchip__x { background: rgba(62, 224, 196, .2); }
body.g2-store-all .g2-sortdd__option.is-current { color: #63e8d1 !important; }

/* ---- Product page: the picker row that just changed and the specifications ring (same timing, mint keyframes). */
@keyframes g2all-pick-changed { 0%, 60% { box-shadow: 0 0 0 4px rgba(62, 224, 196, .22); } 100% { box-shadow: none; } }
@keyframes g2all-specs-flash { 0%, 50% { box-shadow: 0 0 0 4px rgba(62, 224, 196, .28); } 100% { box-shadow: 0 0 0 4px rgba(62, 224, 196, 0); } }
body.g2-store-all .g2-pick__row.is-changed { animation-name: g2all-pick-changed; }
body.g2-store-all .g2-overview__specs.is-flashed { animation-name: g2all-specs-flash; }

/* ---- Cart and checkout: option cards, inputs, address search, the summary total, the cart info icon. */
body.g2-store-all .g2-opt.selected { box-shadow: 0 0 0 3px rgba(62, 224, 196, .12); }
body.g2-store-all .g2-co .g2-input:focus,
body.g2-store-all .g2-asheet__input:focus { box-shadow: 0 0 0 3px rgba(62, 224, 196, .18); }
body.g2-store-all .g2-asheet__result:hover, body.g2-store-all .g2-asheet__result.is-active { background: rgba(62, 224, 196, .14); }
body.g2-store-all .g2-sum .g2-row--total :is(.amount, .g2-row__value, .g2-row__value *, .g2e-price, .g2e-price *) { color: #63e8d1 !important; }
body.g2-store-all .g2-cartinfo__icon { background: rgba(99, 232, 209, .12); color: #63e8d1; }

/* ---- Account: the points balance card and the selected address card. */
body.g2-store-all .g2-balance { background: radial-gradient(80% 140% at 100% 0%, rgba(62, 224, 196, .18), transparent 60%), var(--g2-surface); }
body.g2-store-all:dir(rtl) .g2-balance { background: radial-gradient(80% 140% at 0% 0%, rgba(62, 224, 196, .18), transparent 60%), var(--g2-surface); }
body.g2-store-all #memberAddresses li .address-box.g2-dcard.selected { border-color: #63e8d1; box-shadow: inset 0 0 0 .5px #63e8d1; background-color: rgba(99, 232, 209, .08); }

/* ---- The --brand-color family (base.css tokens) in mint, and the native checks / radios. */
body.g2-store-all {
    --brand-color: #3ee0c4;
    --brand-color-light: #63e8d1;
    --brand-color-dark: #2bbfa6;
    --brand-color-darker: #1d6f62;
}

body.g2-store-all input[type="checkbox"],
body.g2-store-all input[type="radio"] { accent-color: #3ee0c4; }

/* ---- Menu, phones: the drawer's platform pills open the "All" panel on one column, matched by key. The Egypt list above
   names only ps5, ps4, sw2, sw, xb, pc; the digital store's columns (StoreMenu.AddDigitalPlatforms) are ps, xb, nin, pc,
   top and apps. */
@media (max-width: 1099px) {
    body.g2-store-all .g2-menu .g2-panel--all[data-g2-show-current="ps"] [data-g2-part="ps"],
    body.g2-store-all .g2-menu .g2-panel--all[data-g2-show-current="nin"] [data-g2-part="nin"],
    body.g2-store-all .g2-menu .g2-panel--all[data-g2-show-current="top"] [data-g2-part="top"],
    body.g2-store-all .g2-menu .g2-panel--all[data-g2-show-current="apps"] [data-g2-part="apps"] { display: flex; }
}