/* ==========================================================================================================
   site.css - the storefront's site layer, both stores (old CSS cleanup, Part 1: split out of g2.css).
   Tokens, primitives, the header, the desktop menu, the phone header + drawer, the footer, the services menu, the top
   bar, gift findability in the menu, flags and platform icons, our own checkbox and dropdown, the floating buttons,
   and the rules that lived in the layouts' inline <style> blocks. Page CSS lives in web/css/pages/ (PageAssets);
   the Games2All look in store-all.css. Linked by both layouts after the old theme (while a page still loads it).

   Rules of this file (as g2.css):
   - every class starts with "g2-"; old theme classes are only restyled in the "from the layouts" blocks below;
   - logical properties only (margin-inline, inset-inline, padding-inline), so dir="rtl" mirrors it with no RTL twin;
     arrows that must point the other way carry .g2-flip;
   - motion is transform / opacity only, and none of it runs under prefers-reduced-motion.

   Breakpoints: the header switches to the phone header + drawer under 1100px (the bar needs ~1050px, more in
   Arabic); homepage sections use their phone layout under 768px.
   ========================================================================================================== */

/* ---------- the layouts' first inline <style> ----------
   It came before every stylesheet: it now opens base.css, the first stylesheet of every page. */

/* ---------- tokens (the design file's :root) ---------- */
:root {
    --g2-page: #0b0d10;
    --g2-surface: #14171c;
    --g2-raised: #1a1d22;
    --g2-input: #171a20;
    --g2-panel: #11141a;
    --g2-line: #23272e;
    --g2-line2: #2a2f37;
    --g2-hair: #262b33;
    --g2-text: #eef0f3;
    --g2-muted: #9aa1a9;
    --g2-dim: #868d96;
    --g2-brand: #95ab52;
    --g2-brand-hover: #a8bf62;
    --g2-brand-soft: rgba(149, 171, 82, .12);
    --g2-gold: #f4b63d;
    --g2-sale: #ff6b5b;
    --g2-ps: #3d7bff;
    --g2-nin: #ff4d5a;
    --g2-xb: #3ddc84;
    --g2-pc: #e0a43c;
    --g2-gutter: 40px;
    --g2-header-row: 72px;
    --g2-radius: 14px;
}

@media (max-width: 767px) {
    :root { --g2-gutter: 16px; }
}

/* Page width = the .container around the hero slider (Index_EG), so the header, menu panels, sections and footer
   line up with the slider's edges. Values read from the site's CSS at each breakpoint (custom.css / cls.css):
   992-1199 max-width 960px + 12px padding, 1200 1180 + 20, 1400 1380 + 20, 1600 1580 + 20, 1900 1850 + 20. Below 992
   the container is full width with no padding, so the sections keep a 16px gutter of their own. */
:root { --g2-wrap-max: 100%; --g2-wrap-pad: 16px; }
@media (min-width: 992px) { :root { --g2-wrap-max: 960px; --g2-wrap-pad: 12px; } }
@media (min-width: 1200px) { :root { --g2-wrap-max: 1180px; --g2-wrap-pad: 20px; } }
@media (min-width: 1400px) { :root { --g2-wrap-max: 1380px; --g2-wrap-pad: 20px; } }
@media (min-width: 1600px) { :root { --g2-wrap-max: 1580px; --g2-wrap-pad: 20px; } }
@media (min-width: 1900px) { :root { --g2-wrap-max: 1850px; --g2-wrap-pad: 20px; } }

/* ---------- primitives ---------- */
.g2-wrap {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--g2-wrap-max);
    margin-inline: auto;
    padding-inline: var(--g2-wrap-pad);
}

.g2-header *, .g2-header *::before, .g2-header *::after,
.g2-footer *, .g2-footer *::before, .g2-footer *::after,
.g2-home *, .g2-home *::before, .g2-home *::after,
.g2-sec *, .g2-sec *::before, .g2-sec *::after,
.g2-intro *, .g2-intro *::before, .g2-intro *::after,
.g2-ihead *, .g2-ihead *::before, .g2-ihead *::after,
.g2-index *, .g2-index *::before, .g2-index *::after,
.g2-pdp *, .g2-pdp *::before, .g2-pdp *::after,
.g2-pcrumbs *, .g2-pdock *, .g2-zoom * {
    box-sizing: border-box;
}

/* custom.css title-cases every heading, label and .btn: these components are written in sentence case. */
.g2-header :is(h1, h2, h3, h4, label, .g2-btn, button),
.g2-footer :is(h1, h2, h3, h4, label, button),
.g2-sec :is(h1, h2, h3, h4, label, .g2-btn, button),
.g2-intro :is(h1, h2, h3),
.g2-ihead :is(h1, h2, label, button),
.g2-index :is(h1, h2, h3, h4, label, .g2-btn, button, select),
.g2-pdp :is(h1, h2, h3, h4, h5, label, .g2-btn, button, select, dt),
.g2-pdock :is(.g2-btn, button), .g2-zoom :is(button) {
    text-transform: none;
    letter-spacing: normal;
}

/* Resets at zero specificity (:where), so every component class below wins over them. */
:where(.g2-header, .g2-footer, .g2-sec, .g2-intro, .g2-ihead, .g2-index, .g2-pdp, .g2-pcrumbs, .g2-pdock) a {
    color: inherit;
    text-decoration: none;
}

:where(.g2-header, .g2-footer, .g2-sec, .g2-intro, .g2-ihead, .g2-index, .g2-pdp, .g2-pcrumbs, .g2-pdock) a:hover {
    text-decoration: none;
}

:where(.g2-header, .g2-sec, .g2-footer, .g2-index, .g2-pdp, .g2-pdock, .g2-zoom) button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.g2-header :focus-visible, .g2-footer :focus-visible, .g2-sec :focus-visible, .g2-intro :focus-visible,
.g2-ihead :focus-visible, .g2-index :focus-visible, .g2-pdp :focus-visible, .g2-pcrumbs :focus-visible,
.g2-pdock :focus-visible, .g2-zoom :focus-visible {
    outline: 2px solid var(--g2-brand);
    outline-offset: 2px;
}

/* Focus rings for the keyboard only: a mouse click never leaves an outline (the theme outlines every focused link). */
.g2-header :focus:not(:focus-visible), .g2-footer :focus:not(:focus-visible),
.g2-sec :focus:not(:focus-visible), .g2-intro :focus:not(:focus-visible),
.g2-ihead :focus:not(:focus-visible), .g2-index :focus:not(:focus-visible),
.g2-pdp :focus:not(:focus-visible), .g2-pcrumbs :focus:not(:focus-visible),
.g2-pdock :focus:not(:focus-visible), .g2-zoom :focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none;
}

.g2-icon {
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: middle;
}

[dir="rtl"] .g2-flip { transform: scaleX(-1); }

/* custom.rtl.css forces direction: rtl !important on every span, a and div: numbers ("-29%", "EGP 3,989") keep their
   order only with !important here. */
.g2-num, .g2-cc, :is(.g2-header, .g2-sec, .g2-index, .g2-pdp, .g2-pdock) .g2e-price__num {
    font-variant-numeric: tabular-nums;
    direction: ltr !important;
    unicode-bidi: isolate;
}

.g2-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.g2-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--g2-dim);
    text-transform: uppercase;
}

[dir="rtl"] .g2-label { letter-spacing: 0; }

.g2-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
}

[dir="rtl"] .g2-eyebrow { letter-spacing: 0; }

.g2-eyebrow--sale { color: #ffb3a8; }
.g2-eyebrow--save { color: #7be8a8; }

.g2-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--g2-brand) !important;
    white-space: nowrap;
}

.g2-more:hover { color: var(--g2-brand-hover) !important; }

/* Dots and squares in platform / brand colours. */
.g2-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--g2-tone, var(--g2-brand)); flex: 0 0 auto; }
.g2-square { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--g2-tone, var(--g2-brand)); flex: 0 0 auto; }
.g2-tone--ps { --g2-tone: var(--g2-ps); }
.g2-tone--nin { --g2-tone: var(--g2-nin); }
.g2-tone--xb { --g2-tone: var(--g2-xb); }
.g2-tone--pc { --g2-tone: var(--g2-pc); }
.g2-tone--gold { --g2-tone: var(--g2-gold); }
.g2-tone--brand { --g2-tone: #bcd767; }
.g2-tone--steam { --g2-tone: #66c0f4; }
.g2-tone--apple { --g2-tone: #d9dde2; }
.g2-tone--google { --g2-tone: #34a853; }
.g2-tone--amazon { --g2-tone: #ff9900; }
.g2-tone--roblox { --g2-tone: #e2231a; }
.g2-tone--pubg { --g2-tone: #f2a900; }
.g2-tone--freefire { --g2-tone: #ff7a00; }
.g2-tone--valorant { --g2-tone: #ff4655; }
.g2-tone--fcpoints { --g2-tone: #2ad18a; }
.g2-tone--razer { --g2-tone: #44d62c; }

/* Chips */
.g2-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.g2-chip--pre { background: rgba(244, 182, 61, .14); color: var(--g2-gold); }
.g2-chip--new { background: var(--g2-brand-soft); color: #cfe08f; }
.g2-chip--used, .g2-chip--muted { background: rgba(255, 255, 255, .07); color: var(--g2-muted); }
.g2-chip--save { background: rgba(61, 220, 132, .12); color: #7be8a8; }

.g2-off {
    display: inline-grid;
    place-items: center;
    height: 22px;
    padding: 0 7px;
    border-radius: 6px;
    background: var(--g2-sale);
    color: #140b0a;
    font-size: 11.5px;
    font-weight: 800;
}

.g2-cc {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 20px;
    padding: 0 5px;
    border-radius: 5px;
    background: var(--g2-raised);
    border: 1px solid var(--g2-line2);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: var(--g2-muted);
    direction: ltr;
}

/* Buttons */
.g2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .15s, border-color .15s, color .15s;
}

.g2-btn--primary { background: var(--g2-brand) !important; color: #0b0d10 !important; }
.g2-btn--primary:hover, .g2-btn--primary:focus-visible { background: var(--g2-brand-hover) !important; color: #0b0d10 !important; }
.g2-btn--secondary { background: var(--g2-input) !important; border: 1px solid var(--g2-line2) !important; color: var(--g2-text) !important; }
.g2-btn--secondary:hover { background: var(--g2-raised) !important; }

/* The site's one price format (list_product_themes.css .g2e-price, which loads late), repeated so a card never
   jumps when it arrives. Colours stay cls.css's. */
:is(.g2-header, .g2-sec, .g2-index, .g2-pdp, .g2-pdock) .g2e-price {
    display: inline-flex;
    align-items: baseline;
    gap: .22em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Everywhere: the currency and the number never wrap apart (the markup puts a plain space between them). */
.g2e-price { white-space: nowrap; }
:is(.g2-header, .g2-sec, .g2-index, .g2-pdp, .g2-pdock) .g2e-price__cur { font-size: .62em; font-weight: 600; color: var(--g2-muted); }
:is(.g2-header, .g2-sec, .g2-index, .g2-pdp, .g2-pdock) .g2e-price__int { font-weight: 700; }
:is(.g2-header, .g2-sec, .g2-index, .g2-pdp, .g2-pdock) .g2e-price__num { direction: ltr; unicode-bidi: isolate; }
:is(.g2-header, .g2-sec, .g2-index, .g2-pdp, .g2-pdock) .g2e-price__dec { font-size: .62em; font-weight: 700; }
:is(.g2-sec, .g2-index, .g2-pdp) .g2e-price--was { font-size: 12px; color: var(--g2-dim); text-decoration: line-through; }
:is(.g2-sec, .g2-index, .g2-pdp) .g2e-price--was .g2e-price__int { font-weight: 500; }

/* ---------- sideways scrollers (g2-hs; g2.js "scrollers") ----------
   The native scrollbar is hidden; a thin bar (.g2-hs-bar, added by g2.js) fades in while scrolling or hovering, in
   space the scroller already reserves (padding-bottom), so nothing moves. The side with more content fades out
   (--g2-fade-start / --g2-fade-end, set on scroll). */
.g2-hs-wrap {
    position: relative;
    min-width: 0;
}

.g2-hs {
    --g2-fade-start: 0px;
    --g2-fade-end: 0px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 8px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--g2-fade-start), #000 calc(100% - var(--g2-fade-end)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--g2-fade-start), #000 calc(100% - var(--g2-fade-end)), transparent 100%);
}

[dir="rtl"] .g2-hs {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--g2-fade-start), #000 calc(100% - var(--g2-fade-end)), transparent 100%);
    mask-image: linear-gradient(to left, transparent 0, #000 var(--g2-fade-start), #000 calc(100% - var(--g2-fade-end)), transparent 100%);
}

.g2-hs::-webkit-scrollbar { display: none; }

.g2-hs-bar {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
}

.g2-hs-wrap.is-scrolling .g2-hs-bar { opacity: 1; }

.g2-hs-thumb {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    height: 4px;
    border-radius: 4px;
    background: #4a525d;
}

/* Homepage sections have no inner vertical scrolling (the page always scrolls with the wheel over them).
   Mouse drag (g2.js setUpDragScroll, sideways rows that overflow only): the normal arrow cursor at rest, "grabbing"
   only while a drag is in progress, no text selection and no snapping meanwhile. */
.g2-hs.is-dragging {
    cursor: grabbing;
    user-select: none;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
}

.g2-hs.is-dragging * { cursor: grabbing !important; }

/* ---------- back to top (_Layout #scrollToTopBtn; shown after one screen) ----------
   A 40px round dark button straight above the chat bubble (#chat_with_us: 15px from the bottom), 12px apart.
   The bubble is 41px tall, 37px under 480px (the theme's body line-height changes there). */
:root { --g2-chat-h: 41px; }
@media (max-width: 479px) { :root { --g2-chat-h: 37px; } }

#scrollToTopBtn {
    position: fixed;
    z-index: 99;
    right: 15px;
    bottom: calc(15px + var(--g2-chat-h) + 12px);
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--g2-line2);
    background: var(--g2-surface);
    color: var(--g2-text);
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease, background-color .15s;
}
#scrollToTopBtn.show { opacity: 1; visibility: visible; }
#scrollToTopBtn:hover { background: var(--g2-raised); }

/* ---------- chat bubble (_Layout / _Layout_AE #chat_with_us, #chat_with_us_btn) ----------
   A royal-blue pill in the corner, glass sheen on top (.g2-glass); the 1em icon is the sprite's "comment". */
#chat_with_us { position: fixed; bottom: 15px; right: 15px; z-index: 100; }
#chat_with_us_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7.5px 15px;
    border: 0;
    border-radius: 25px;
    background-color: #4169e1;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: inherit;
    cursor: pointer;
    box-shadow: rgb(0 0 0 / 18%) -2px 3px 0 1px;
}
#chat_with_us_btn:focus { outline: none; background-color: #3277f2; }
#chat_with_us_btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#chat_loading { display: none; width: 50px; height: 50px; margin-right: 50px; border: 5px solid transparent; border-top-color: #007bff; border-radius: 50%; animation: g2-spin 1s linear infinite; }

/* ---------- glass sheen (.g2-glass: the chat bubble) ---------- */
:root { --g2-glass-bg: rgba(30, 30, 30, .28); }
.g2-glass {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(180deg, rgb(255 255 255 / .1), rgb(255 255 255 / .05));
    backdrop-filter: blur(4px) saturate(300%);
    -webkit-backdrop-filter: blur(4px) saturate(300%);
}
.g2-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(120% 80% at 20% 0%, rgb(255 255 255 / .6) 0%, rgb(255 255 255 / .15) 40%, #fff0 70%);
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: .9;
}
.g2-glass:hover { box-shadow: 0 10px 28px rgb(0 0 0 / .18), inset 0 1px 0 rgb(255 255 255 / .55); transform: translateY(-1px); transition: transform .2s ease, box-shadow .2s ease; }
.g2-glass:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .g2-glass:hover { transform: none; } }

/* ---------- the page-wide loading layer (#myLoadingOverlay: pages show it with style.display = "flex") ---------- */
#myLoadingOverlay { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background-color: rgb(0 0 0 / .7); }
.g2-loader { width: 50px; height: 50px; border: 5px solid #ccc; border-top-color: #3498db; border-radius: 50%; animation: g2-spin 1s linear infinite; }
@keyframes g2-spin { to { transform: rotate(360deg); } }

/* ---------- sprite icons (the /web/img/icons.svg sprite: <svg class="g2-ico"><use href="…#name"></use></svg>; Icons.Svg) ----------
   1em, currentColor. (.g2-icon is the inline SVGs that size themselves with width / height.) */
.g2-ico { display: inline-block; flex: none; width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; overflow: visible; }
.g2-ico--5x { font-size: 5em; }

/* ---------- the TempData message (Message component: .g2-msgbar > .g2-msg--success | danger | warning | info) ---------- */
.g2-msgbar { max-width: var(--g2-wrap-max); margin-inline: auto; padding-inline: var(--g2-wrap-pad); }
.g2-msg {
    margin: 16px 0 0;
    padding: 12px 16px;
    border: 1px solid rgba(244, 182, 61, .35);
    border-radius: 14px;
    background: rgba(244, 182, 61, .08);
    color: var(--g2-text);
    font-size: 14px;
    line-height: 1.5;
    text-align: start;
}
.g2-msg__title { color: var(--g2-gold); font-weight: 700; }
.g2-msg__title:empty { display: none; }
.g2-msg--danger { border-color: rgba(255, 107, 91, .4); background: rgba(255, 107, 91, .08); }
.g2-msg--danger .g2-msg__title { color: #ff978b; }
.g2-msg--info { border-color: rgba(61, 123, 255, .35); background: rgba(61, 123, 255, .08); }
.g2-msg--info .g2-msg__title { color: #8fb2ff; }
.g2-msg--success { border-color: rgba(61, 220, 132, .35); background: rgba(61, 220, 132, .08); }
.g2-msg--success .g2-msg__title { color: #7be8a8; }

/* ---------- the page frame (#pageBody .g2-page; #main_body) ---------- */
.g2-page { display: flow-root; }
#main_body { min-height: 570px; padding-bottom: 25px; }
@media (max-width: 767px) { #main_body { min-height: 290px; } }
/* (Phones: the footer's last row keeps 80px free under it for this button and the chat — .g2-footer__bottom.) */

/* ============================================================================================================
   HEADER
   ============================================================================================================ */
header.g2-header {
    position: relative;
    z-index: 1000;
    margin: 0;
    padding: 0;
    background: rgba(15, 18, 21, .78);
    border-bottom: 1px solid var(--g2-hair);
    color: var(--g2-text);
}

/* The page dimmer behind the listing's phone filters (.body_overlay: Products/Index shows it with style.display). */
.g2-header .body_overlay { display: none; position: fixed; inset: 0; z-index: 103; opacity: 1; transition: opacity .18s ease; }
.g2-header .body_overlay .g2-overlay__bg { position: fixed; inset: 0; z-index: 10; background-color: rgba(11, 13, 16, .72); }
@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
    .g2-header .body_overlay .g2-overlay__bg { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
}
/* Shown by switching display on: it fades in from 0. */
@starting-style { .g2-header .body_overlay { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .g2-header .body_overlay { transition: none; } }

/* Desktop: one flex row with a 12px gap between every item (no margins); the tools sit at the end. */
.g2-header__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--g2-header-row);
}

.g2-header .g2-header__menu { grid-area: menu; display: none !important; }

.g2-header__logo {
    grid-area: logo;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding-inline-end: 10px;
}

.g2-header__logo-img {
    display: block;
    width: auto;
    height: 36px;
    max-width: 191px;
    object-fit: contain;
}

/* custom.css gives .search-box its own width and z-index 1000: here it fills its slot and stays under ☰ / cart. */
.g2-header .g2-header__search {
    grid-area: search;
    flex: 0 1 460px;
    width: auto !important;
    min-width: 0;
    position: relative;
    z-index: 1 !important;
}

/* The search field: same field and behaviour (search.css), brighter icon and placeholder, green focus ring. */
.g2-header form.g2s-field input.x-autocomplete {
    height: 44px;
    border-color: var(--g2-line2) !important;
    background-color: var(--g2-input) !important;
    font-size: 14px;
}

.g2-header form.g2s-field input.x-autocomplete::placeholder { color: #b5bbc2; }
.g2-header form.g2s-field .g2s-field__submit { color: #c3c8cf; }

.g2-header form.g2s-field input.x-autocomplete:focus {
    border-color: var(--g2-brand) !important;
    box-shadow: 0 0 0 3px rgba(149, 171, 82, .22);
}

.g2-header__tools {
    grid-area: tools;
    justify-self: end;
    flex: 0 0 auto;
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.g2-header .cart-box.popup { display: none !important; }

/* Icon buttons (phones) */
.g2-iconbtn {
    position: relative;
    display: inline-grid !important;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--g2-input) !important;
    border: 1px solid var(--g2-line2) !important;
    color: var(--g2-text);
    flex: 0 0 auto;
}

.g2-iconbtn--avatar {
    background: var(--g2-brand) !important;
    border-color: transparent !important;
    color: #0b0d10 !important;
    font-size: 12px;
    font-weight: 800;
    direction: ltr;
}

/* Help Center: an outlined green pill (desktop). */
.g2-helpbtn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(149, 171, 82, .45) !important;
    background: rgba(149, 171, 82, .08) !important;
    color: #d9e6b0 !important;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .15s;
}

.g2-helpbtn:hover, .g2-helpbtn[aria-expanded="true"] { background: rgba(149, 171, 82, .18) !important; }

/* Account */
.g2-signin {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #dfe3e8 !important;
    white-space: nowrap;
}

.g2-signin:hover { background: var(--g2-input); }

.g2-account { position: relative; }

.g2-account__button {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding-block: 0 !important;
    padding-inline: 5px 10px !important;
    border-radius: 999px !important;
    border: 1px solid var(--g2-line2) !important;
    background: var(--g2-input) !important;
    font-size: 13.5px;
    font-weight: 600;
}

.g2-avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: var(--g2-brand);
    color: #0b0d10;
    font-size: 12px;
    font-weight: 800;
    direction: ltr;
}

.g2-avatar--large { width: 42px; height: 42px; flex-basis: 42px; font-size: 14px; }

.g2-account__name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.g2-account__chev { opacity: .6; }
.g2-account__phone { display: none !important; }

.g2-account .g2-account__menu {
    top: calc(100% + 8px);
    inset-inline-start: auto;
    inset-inline-end: 0;
    width: 220px;
    margin-top: 0;
}

.g2-account__link {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13.5px;
    color: var(--g2-text) !important;
}

.g2-account__link:hover { background: var(--g2-input); }

/* Language: a pill track with a green thumb under the current option. A click slides the thumb (200ms, g2.js adds
   .is-switching) and then follows the link. The options are always in EN, ع order (LTR) so the thumb maths is simple. */
.g2-lang {
    position: relative;
    display: inline-grid;
    grid-template-columns: 40px 40px;
    padding: 3px;
    border-radius: 999px;
    background: var(--g2-input);
    border: 1px solid var(--g2-line2);
    direction: ltr !important;
}

.g2-lang__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 40px;
    height: 30px;
    border-radius: 999px;
    background: var(--g2-brand);
    transition: transform .2s ease;
}

.g2-lang.is-ar .g2-lang__thumb { transform: translateX(40px); }
.g2-lang.is-ar.is-switching .g2-lang__thumb { transform: none; }
.g2-lang.is-en.is-switching .g2-lang__thumb { transform: translateX(40px); }

.g2-lang__option {
    position: relative;
    z-index: 1;
    display: inline-grid !important;
    place-items: center;
    height: 30px;
    padding: 0 !important;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--g2-muted) !important;
    transition: color .2s ease;
}

.g2-lang__option.is-current { color: #0b0d10 !important; }
.g2-lang.is-switching .g2-lang__option.is-current { color: var(--g2-muted) !important; }
.g2-lang.is-switching .g2-lang__option:not(.is-current) { color: #0b0d10 !important; }

@media (prefers-reduced-motion: reduce) {
    .g2-lang__thumb, .g2-lang__option { transition: none; }
}

/* Cart: rounded total and the item count badge */
.g2-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    background: var(--g2-input);
    border: 1px solid var(--g2-line2);
    font-size: 14px;
    font-weight: 700;
    color: var(--g2-text) !important;
    line-height: 1;
}

.g2-cart > svg, .g2-cart > i { display: block; flex: 0 0 auto; }

/* "EGP 1,250.50": currency, a no-break space and the number on one centred LTR line. */
.g2-cart__total {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
    direction: ltr !important;
    unicode-bidi: isolate;
}

.g2-cart__total .g2-num { direction: ltr !important; }
.g2-cart__currency { font-size: .62em; font-weight: 600; color: var(--g2-muted); }

.g2-cart__badge {
    position: absolute;
    top: -7px;
    inset-inline-end: -7px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--g2-brand);
    color: #0b0d10;
    font-size: 11px;
    font-weight: 800;
}

/* ============================================================================================================
   MENU - desktop (≥ 1100px): .g2-menu is the bar under the header row, panels open under it.
   ============================================================================================================ */
.g2-panel { display: none; }

@media (min-width: 1100px) {
    .g2-drawer__backdrop,
    .g2-drawer__top,
    .g2-drawer__me,
    .g2-drawer__account,
    .g2-drawer__platforms,
    .g2-drawer__settings,
    .g2-nav__entry--phone,
    .g2-nav__icon,
    .g2-nav__next,
    .g2-nav__new,
    .g2-panel__back { display: none !important; }

    .g2-menu, .g2-drawer, .g2-drawer__body, .g2-nav { position: static; }

    .g2-drawer__body {
        box-sizing: border-box;
        max-width: var(--g2-wrap-max);
        margin-inline: auto;
        padding-inline: var(--g2-wrap-pad);
    }

    .g2-nav__list {
        display: flex;
        align-items: center;
        gap: 2px;
        height: 52px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .g2-nav__entry { position: static; }

    .g2-nav__item {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        height: 40px;
        padding: 0 9px !important;
        border-radius: 10px !important;
        font-size: 13.5px;
        font-weight: 600;
        color: #e3e6ea !important;
        white-space: nowrap;
        transition: background-color .15s;
    }

    .g2-nav__item:hover, .g2-nav__item[aria-expanded="true"] { background: var(--g2-input) !important; color: var(--g2-text) !important; }
    .g2-nav__item[aria-expanded="true"] { box-shadow: inset 0 -2px 0 var(--g2-brand); }
    /* The current page's plain item ("Contact us" on /contactus and the store pages): the same underline as an open panel. */
    .g2-nav__item[aria-current="page"] { color: var(--g2-text) !important; box-shadow: inset 0 -2px 0 var(--g2-brand); }
    .g2-nav__chev { opacity: .6; }
    .g2-nav__item--all { gap: 9px; }

    .g2-nav__item--featured { color: var(--g2-gold) !important; }

    .g2-nav__dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--g2-gold);
    }

    /* Panels: absolutely placed under the bar (the header is their containing block). */
    /* Wide panels span the page's content width (the same edges as the header bar and the slider). */
    .g2-panel {
        position: absolute;
        top: 100%;
        inset-inline: 0;
        width: calc(min(100%, var(--g2-wrap-max)) - 2 * var(--g2-wrap-pad));
        margin-inline: auto;
        margin-top: 6px;
        z-index: 1010;
        flex-direction: column;
        gap: 18px;
        padding: 24px;
        border-radius: 18px;
        background: var(--g2-panel);
        border: 1px solid var(--g2-line2);
        box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
    }

    .g2-panel.is-open {
        display: flex;
        animation: g2-panel-in .16s ease-out;
    }

    /* Small dropdowns sit under their own item (g2.js sets inset-inline-start). */
    .g2-panel--drop { inset-inline: auto; width: max-content; max-width: calc(100% - 2 * var(--g2-gutter)); padding: 20px 22px; }

    .g2-panel--small {
        inset-inline: auto;
        width: 320px;
        padding: 10px;
        gap: 2px;
    }

    .g2-help { top: var(--g2-header-row); margin-top: -4px; }
    .g2-help__row--desktop { display: flex; }
}

@keyframes g2-panel-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* Panel content (desktop and drawer) */
.g2-cols {
    display: grid;
    gap: 24px;
}

.g2-cols--platforms { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.g2-cols--games { grid-template-columns: repeat(6, minmax(0, 1fr)) 1.3fr; }

.g2-col {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.g2-col__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--g2-line);
    font-size: 14px;
    font-weight: 700;
    color: var(--g2-text) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.g2-col__link, .g2-drop__link {
    display: block;
    padding: 7px 0;
    font-size: 13.5px;
    line-height: 1.3;
    color: #c9ced4 !important;
    transition: color .15s;
}

.g2-col__link:hover, .g2-drop__link:hover { color: var(--g2-brand) !important; }

.g2-feature {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid var(--g2-line2);
    background: radial-gradient(90% 80% at 80% 10%, rgba(149, 171, 82, .35), transparent 60%), linear-gradient(160deg, #18301f, #11141a);
    color: var(--g2-text) !important;
}

/* "FEATURED" with the title 4px under it; the tile is never taller than the columns beside it (align-self start). */
.g2-cols--games > .g2-feature { align-self: start; }
.g2-feature__top { display: flex; flex-direction: column; gap: 4px; }
.g2-feature__title { font-size: 18px; font-weight: 700; line-height: 1.25; }
.g2-feature__text { font-size: 12.5px; color: #c9ced4; }

.g2-drop { display: flex; gap: 40px; }

.g2-drop__col {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 160px;
}

.g2-drop__title {
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--g2-line);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--g2-dim);
}

[dir="rtl"] .g2-drop__title { letter-spacing: 0; }

.g2-panel__note {
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid var(--g2-line);
    font-size: 12.5px;
    color: var(--g2-dim);
}

/* Titled columns (Consoles, Pre-Owned, Collectibles, Apparel): a compact panel under its bar item, the groups side by
   side; each column a tone dot + title, then icon tile + label rows. Below 1100px (the drawer) the dot and the tiles are
   hidden and the section reads exactly like a Dropdown one. */
.g2-tcols .g2-tcol__tile, .g2-tcols .g2-tcol__title .g2-dot { display: none; }

@media (min-width: 1100px) {
    .g2-panel--titled { padding: 20px; }
    .g2-tcols { gap: 28px; }
    .g2-tcols .g2-tcol { gap: 2px; min-width: 170px; max-width: 240px; }

    .g2-tcols .g2-tcol__title {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 8px 6px;
        margin: 0;
        border-bottom: 0;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #9aa1a9 !important;
    }

    [dir="rtl"] .g2-tcols .g2-tcol__title { letter-spacing: 0; text-transform: none; }
    .g2-tcols .g2-tcol__title .g2-dot { display: inline-block; }
    a.g2-tcol__title:hover, a.g2-tcol__title:focus-visible { color: var(--g2-text) !important; }

    .g2-tcols .g2-tcol__link {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 38px;
        padding: 0 8px;
        border-radius: 10px;
        font-size: 14px;
        color: #dcdfe4 !important;
        transition: background-color .14s ease, color .14s ease, transform .14s ease;
    }

    .g2-tcols .g2-tcol__tile {
        display: grid;
        place-items: center;
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: color-mix(in srgb, var(--g2-tone) 12%, transparent);
        color: var(--g2-tone);
        transition: background-color .14s ease;
    }

    .g2-tcols .g2-tcol__tile svg { width: 16px; height: 16px; stroke: currentColor; }
    .g2-tcol__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .g2-tcols .g2-tcol__link:hover, .g2-tcols .g2-tcol__link:focus-visible { background: #1f232a; color: #fff !important; transform: translateX(2px); }
    [dir="rtl"] .g2-tcols .g2-tcol__link:hover, [dir="rtl"] .g2-tcols .g2-tcol__link:focus-visible { transform: translateX(-2px); }
    .g2-tcols .g2-tcol__link:hover .g2-tcol__tile, .g2-tcols .g2-tcol__link:focus-visible .g2-tcol__tile { background: color-mix(in srgb, var(--g2-tone) 22%, transparent); }
    .g2-panel--titled .g2-panel__note { border-top-color: #23272e; }
}

@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
    .g2-tcols .g2-tcol__link, [dir="rtl"] .g2-tcols .g2-tcol__link { transform: none !important; transition: background-color .14s ease, color .14s ease; }
}

.g2-panel__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding-top: 14px;
    border-top: 1px solid var(--g2-line);
    font-size: 12.5px;
    color: var(--g2-dim);
}

.g2-brandline__brand { color: var(--g2-muted) !important; font-weight: 500; }
.g2-brandline__brand:hover { color: var(--g2-text) !important; }

/* Group tabs (Accessories, Gift cards): tabs on the start side, the active group beside them. Every group is in the
   HTML; the inactive ones are hidden with CSS. */
.g2-tabpanel {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 20px;
    min-height: 260px;
}


.g2-tabpanel__tabs {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-inline-end: 14px;
    border-inline-end: 1px solid var(--g2-line);
}

.g2-gtab {
    display: flex !important;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--g2-muted) !important;
    text-align: start;
    transition: background-color .15s, color .15s;
}

.g2-gtab.is-active { background: var(--g2-input) !important; color: var(--g2-text) !important; }
.g2-gtab__chev { margin-inline-start: auto; opacity: .5; }

.g2-tabpanel__groups { position: relative; min-width: 0; }
.g2-tabpanel__all { position: absolute; top: 4px; inset-inline-end: 0; }
.g2-tgroup { display: none; flex-direction: column; gap: 14px; min-width: 0; }
.g2-tgroup.is-active { display: flex; }

.g2-tgroup__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.g2-tgroup__title { font-size: 18px; font-weight: 700; color: var(--g2-text); }

.g2-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.g2-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--g2-line);
    background: var(--g2-surface);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #dfe3e8 !important;
    transition: background-color .15s, border-color .15s;
}

.g2-tile:hover { border-color: var(--g2-line2); background: var(--g2-raised); }

.g2-tile__icon {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--g2-input);
    border: 1px solid var(--g2-line2);
    color: var(--g2-brand);
}

.g2-regions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    align-content: start;
}

.g2-region {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid var(--g2-line);
    background: var(--g2-surface);
    font-size: 13px;
    font-weight: 500;
    color: var(--g2-text) !important;
}

.g2-region:hover { border-color: var(--g2-line2); }

/* Help panel */
.g2-help__row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--g2-text) !important;
}

.g2-help__row:hover { background: var(--g2-input); }
.g2-help__title { font-size: 13.5px; font-weight: 700; }
.g2-help__text { font-size: 12px; color: var(--g2-muted); }

.g2-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 6px;
}

.g2-contact__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--g2-line2);
    background: var(--g2-input);
    font-size: 13px;
    font-weight: 600;
    color: var(--g2-text) !important;
}

/* ============================================================================================================
   PHONE HEADER + DRAWER (< 1100px)
   ============================================================================================================ */
@media (max-width: 1099px) {
    :root { --g2-header-row: 56px; }

    header.g2-header {
        position: sticky;
        top: 0;
        transition: transform .25s ease;
    }

    .g2-header__bar {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        grid-template-rows: var(--g2-header-row) auto;
        grid-template-areas: "menu logo tools" "search search search";
        column-gap: 8px;
        row-gap: 0;
        height: auto;
        padding-bottom: 10px;
    }

    .g2-header .g2-header__menu { display: inline-grid !important; transition: transform .25s ease; }

    .g2-header__logo { justify-self: start; padding-inline-end: 0; transition: opacity .2s ease; }
    .g2-header__logo-img { height: 28px; max-width: 150px; }

    .g2-header__search { transition: padding .25s ease; }
    .g2-header form.g2s-field input.x-autocomplete { height: 42px; }

    .g2-helpbtn, .g2-header__tools > .g2-lang, .g2-account__button, .g2-cart__total, .g2-signin__text { display: none !important; }
    .g2-account__phone { display: inline-grid !important; }
    .g2-header__tools { gap: 8px; margin-inline-start: 0; }
    .g2-header__tools > .g2-account, .g2-header__tools > .g2-signin { transition: opacity .2s ease; }

    .g2-signin {
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
        border-radius: 12px;
        background: var(--g2-input);
        border: 1px solid var(--g2-line2);
    }

    .g2-cart {
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
        transition: transform .25s ease;
    }

    /* Scrolling down: the logo row slides away; the search row stays pinned with ☰ and the cart beside it.
       8px (+ the notch area) stays above the search row. ☰ and the cart sit above the search row (z-index 3) so
       they keep their clicks; the hidden logo row takes none. */
    .g2-header .g2-header__menu,
    .g2-header .g2-cart { position: relative; z-index: 3; }

    header.g2-header.is-compact { transform: translateY(calc(-1 * var(--g2-header-row) + 8px + env(safe-area-inset-top, 0px))); }

    /* While the page is locked (drawer open) the header must not be transformed: a transformed ancestor would trap
       the fixed drawer inside the header's box. The same compact position is held with the sticky top offset instead
       (no visual change), with no transition on the way in or out (g2.js adds html.g2-unlocking for one frame). */
    html.g2-locked header.g2-header.is-compact { transform: none; top: calc(-1 * var(--g2-header-row) + 8px + env(safe-area-inset-top, 0px)); }
    html.g2-locked header.g2-header, html.g2-unlocking header.g2-header { transition: none !important; }
    header.g2-header.is-compact .g2-header__menu,
    header.g2-header.is-compact .g2-cart { transform: translateY(calc(var(--g2-header-row) - 7px)); }
    header.g2-header.is-compact .g2-header__tools { pointer-events: none; }
    header.g2-header.is-compact .g2-header__tools > .g2-cart { pointer-events: auto; }
    header.g2-header.is-compact .g2-header__logo,
    header.g2-header.is-compact .g2-header__tools > .g2-account,
    header.g2-header.is-compact .g2-header__tools > .g2-signin { opacity: 0; pointer-events: none; }
    header.g2-header.is-compact .g2-header__search { padding-inline: 48px; }

    /* The drawer: fixed, slides in from the start side over a fading backdrop. */
    .g2-menu {
        position: fixed;
        inset: 0;
        z-index: 2000;
        visibility: hidden;
        pointer-events: none;
    }

    .g2-menu.is-open { visibility: visible; pointer-events: auto; }

    .g2-drawer__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .55);
        opacity: 0;
        transition: opacity .2s ease-out;
    }

    .g2-menu.is-open .g2-drawer__backdrop { opacity: 1; }

    .g2-drawer {
        position: absolute;
        top: 0;
        bottom: 0;
        inset-inline-start: 0;
        display: flex;
        flex-direction: column;
        width: min(332px, 86vw);
        background: var(--g2-panel);
        border-inline-end: 1px solid var(--g2-line2);
        transform: translateX(-100%);
        transition: transform .25s cubic-bezier(.2, .8, .2, 1);
        overflow: hidden;
        outline: none;
    }

    [dir="rtl"] .g2-drawer { transform: translateX(100%); }
    .g2-menu.is-open .g2-drawer { transform: none; }

    .g2-drawer__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;
        padding: 10px 16px;
        border-bottom: 1px solid var(--g2-line);
    }

    .g2-drawer__logo { height: 26px; width: auto; }

    .g2-drawer__body {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 14px 16px 24px;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .g2-drawer__body > * { flex-shrink: 0; }

    .g2-drawer__account { display: flex; gap: 10px; }
    .g2-drawer__account .g2-btn { flex: 1; }

    .g2-drawer__me {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border-radius: 14px;
        background: var(--g2-surface);
        border: 1px solid var(--g2-line);
    }

    .g2-drawer__me-text { min-width: 0; }
    .g2-drawer__hello { display: block; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .g2-drawer__me-links { display: flex; gap: 14px; margin-top: 3px; }
    .g2-drawer__me-links a { font-size: 13px; font-weight: 600; color: var(--g2-brand) !important; }

    .g2-drawer__platforms { display: flex; flex-direction: column; gap: 8px; }
    .g2-pills { display: flex; gap: 6px; }

    .g2-pill {
        flex: 0 0 auto;
        height: 34px;
        padding: 0 14px !important;
        border-radius: 999px !important;
        border: 1px solid var(--g2-line2) !important;
        background: var(--g2-input) !important;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
    }

    .g2-nav { margin-inline: -16px; }
    .g2-nav__list { margin: 0; padding: 0; list-style: none; }
    /* The "☰ All" button is desktop only; its panel stays, the platform pills and "Brands" open it here. */
    .g2-nav__entry--desktop > .g2-nav__item { display: none !important; }
    .g2-nav__chev, .g2-nav__dot { display: none; }

    .g2-nav__item {
        display: flex !important;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 50px;
        padding: 0 16px !important;
        border-bottom: 1px solid #1b1f25 !important;
        font-size: 15px;
        font-weight: 600;
        text-align: start;
        color: var(--g2-text) !important;
    }

    .g2-nav__item:active { background: var(--g2-input) !important; }
    .g2-nav__item[aria-current="page"] { background: var(--g2-input) !important; box-shadow: inset 3px 0 0 var(--g2-brand); }
    [dir="rtl"] .g2-nav__item[aria-current="page"] { box-shadow: inset -3px 0 0 var(--g2-brand); }
    .g2-nav__item--featured { color: var(--g2-gold) !important; }
    .g2-nav__item--featured .g2-nav__new { margin-inline-start: auto; }
    .g2-nav__next { margin-inline-start: auto; opacity: .5; }

    .g2-nav__icon {
        display: grid;
        place-items: center;
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        border-radius: 9px;
        background: var(--g2-input);
        color: var(--g2-muted);
    }

    /* A section opens as a page over the WHOLE drawer body (below the top bar — g2.js sets `top` to the bar's
       height), solid, with its own scroll and a sticky back row. The main list is hidden meanwhile
       (.has-subpanel) and the body keeps its scroll position, so Back returns to the same place. */
    .g2-panel {
        position: absolute;
        top: 57px;
        bottom: 0;
        inset-inline: 0;
        box-sizing: border-box;
        z-index: 5;
        flex-direction: column;
        gap: 16px;
        padding: 0 16px 24px;
        overflow-y: auto;
        overscroll-behavior: contain;
        scroll-padding-top: 60px;
        background: var(--g2-panel);
    }

    /* The panel is a fixed-height flex column that scrolls: its parts (and their rows) must keep their own height.
       A part with overflow: hidden (the column heads) could otherwise shrink to nothing - that is how the first item
       ("PlayStation 5") vanished under the back row. The content starts below the sticky back row. */
    .g2-panel > *,
    .g2-panel .g2-cols > *,
    .g2-panel .g2-col > *,
    .g2-panel .g2-drop > *,
    .g2-panel .g2-drop__col > * { flex-shrink: 0; }

    .g2-panel.is-open { display: flex; animation: g2-sub-in .22s cubic-bezier(.2, .8, .2, 1); }
    [dir="rtl"] .g2-panel.is-open { animation-name: g2-sub-in-rtl; }

    .g2-drawer.has-subpanel .g2-drawer__body { overflow: hidden; }
    .g2-drawer.has-subpanel .g2-drawer__body > :not(.g2-nav),
    /* (No transition: the theme animates links with `transition: all`, which would keep them visible for a while.) */
    .g2-drawer.has-subpanel .g2-nav__item { visibility: hidden; transition: none !important; }
    .g2-drawer.has-subpanel .g2-drawer__body > :not(.g2-nav) a { transition: none !important; }
    .g2-drawer.has-subpanel .g2-panel.is-open { visibility: visible; }

    .g2-panel__back {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex !important;
        align-items: center;
        gap: 10px;
        flex: 0 0 auto;
        min-height: 52px;
        margin-inline: -16px;
        padding: 0 16px !important;
        background: var(--g2-panel) !important;
        border-bottom: 1px solid var(--g2-line) !important;
        font-size: 16px;
        font-weight: 700;
        text-align: start;
    }

    .g2-cols--platforms, .g2-cols--games, .g2-drop { display: flex; flex-direction: column; gap: 16px; }
    .g2-drop__col { min-width: 0; }
    .g2-drop__title { border-bottom: 0; padding-bottom: 0; margin: 6px 0 2px; }
    .g2-col__link, .g2-drop__link { display: flex; align-items: center; min-height: 42px; padding: 0; font-size: 14px; color: #d6dadf !important; border-bottom: 1px solid #1b1f25; }
    .g2-col__head { border-bottom: 0; }

    /* The "All" panel opened from a platform pill shows that platform; from "Brands", the brand line. */
    .g2-panel--all:not([data-g2-show-current=""]) [data-g2-part] { display: none; }
    .g2-menu .g2-panel--all[data-g2-show-current="ps5"] [data-g2-part="ps5"],
    .g2-menu .g2-panel--all[data-g2-show-current="ps4"] [data-g2-part="ps4"],
    .g2-menu .g2-panel--all[data-g2-show-current="sw2"] [data-g2-part="sw2"],
    .g2-menu .g2-panel--all[data-g2-show-current="sw"] [data-g2-part="sw"],
    .g2-menu .g2-panel--all[data-g2-show-current="xb"] [data-g2-part="xb"],
    .g2-menu .g2-panel--all[data-g2-show-current="pc"] [data-g2-part="pc"],
    .g2-menu .g2-panel--all[data-g2-show-current="brands"] [data-g2-part="brands"] { display: flex; }

    .g2-brandline { border-top: 0; padding-top: 0; }
    .g2-brandline__label { display: none; }

    .g2-brandline__brand {
        display: grid;
        place-items: center;
        width: calc((100% - 16px) / 3);
        height: 54px;
        padding: 4px;
        border-radius: 12px;
        background: var(--g2-surface);
        border: 1px solid var(--g2-line);
        font-size: 12px;
        font-weight: 800;
        text-align: center;
        color: #cfd3d8 !important;
    }

    .g2-panel--all .g2-brandline { gap: 8px; }
    .g2-panel--all .g2-brandline .g2-more { width: 100%; padding-top: 6px; }

    .g2-tabpanel { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
    .g2-tabpanel__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0; border: 0; }

    .g2-gtab {
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        height: 58px;
        padding: 4px !important;
        border-radius: 12px !important;
        border: 1px solid var(--g2-line) !important;
        background: var(--g2-surface) !important;
        font-size: 11.5px;
        font-weight: 700;
        text-align: center;
        color: var(--g2-text) !important;
    }

    .g2-gtab.is-active { border-color: var(--g2-brand) !important; background: var(--g2-brand-soft) !important; }
    .g2-gtab__chev { display: none; }

    /* Accessories: every group shown as a plain list in the drawer. */
    .g2-panel--tabs:not(.g2-panel--gift) .g2-tabpanel__tabs { display: none; }
    .g2-panel--tabs:not(.g2-panel--gift) .g2-tgroup { display: flex; }
    .g2-tgroup__title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--g2-dim); }
    .g2-tiles, .g2-regions { display: flex; flex-direction: column; gap: 0; }

    .g2-tile, .g2-region {
        min-height: 44px;
        padding: 0;
        border: 0;
        border-bottom: 1px solid #1b1f25;
        border-radius: 0;
        background: none;
        font-size: 14px;
        font-weight: 500;
    }

    .g2-tile__icon { flex-basis: 30px; height: 30px; }
    .g2-tabpanel__groups { display: flex; flex-direction: column; gap: 16px; }
    .g2-tabpanel__all { position: static; }
    .g2-feature { min-height: 0; }

    /* Video Games: the same look as Accessories - small uppercase group labels with the platform's colour dot, then
       rows - and the FC 27 featured tile as a full-width row at the top. */
    .g2-panel--games .g2-col { gap: 0; }

    .g2-panel--games .g2-col__head {
        min-height: 0;
        margin: 0;
        padding: 0 0 6px;
        border-bottom: 0;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--g2-dim) !important;
    }

    [dir="rtl"] .g2-panel--games .g2-col__head { letter-spacing: 0; }
    .g2-panel--games .g2-col__head .g2-dot { width: 7px; height: 7px; }
    .g2-panel--games .g2-col__link { min-height: 44px; font-weight: 500; }

    .g2-cols--games > .g2-feature {
        order: -1;
        align-self: stretch;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "top more" "text more";
        align-items: center;
        gap: 2px 12px;
        padding: 14px 16px;
        border-radius: 14px;
        background: radial-gradient(90% 120% at 100% 0%, rgba(149, 171, 82, .3), transparent 60%), var(--g2-surface);
    }

    [dir="rtl"] .g2-cols--games > .g2-feature { background: radial-gradient(90% 120% at 0% 0%, rgba(149, 171, 82, .3), transparent 60%), var(--g2-surface); }
    .g2-feature .g2-feature__top { grid-area: top; gap: 2px; }
    .g2-feature .g2-feature__title { font-size: 16px; }
    .g2-feature .g2-feature__text { grid-area: text; font-size: 12px; color: var(--g2-muted); }
    .g2-feature .g2-more { grid-area: more; }
    .g2-feature__cta { display: none; }

    /* Help Center, Guides, News and Contact us: a plain list; 16280 and WhatsApp buttons under it. */
    .g2-help {
        position: static;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        margin-inline: -16px;
        overflow: visible;
        background: none;
        animation: none;
    }

    .g2-help.is-open { animation: none; }
    .g2-help__row { flex-direction: row; min-height: 44px; align-items: center; padding: 0 16px; border-radius: 0; border-bottom: 1px solid #1b1f25; }
    .g2-help__row--desktop { display: none; }
    .g2-help__title { font-size: 14px; font-weight: 500; color: #c9ced4; }
    .g2-help__text { display: none; }
    .g2-contact { margin: 16px 16px 0; }

    .g2-drawer__settings { display: flex; flex-direction: column; gap: 12px; }

    .g2-drawer__row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        font-size: 13px;
        color: var(--g2-muted);
    }

    .g2-drawer__row label { margin: 0; font-size: 13px; font-weight: 400; color: var(--g2-muted); }
    .g2-drawer__currency { font-weight: 700; color: var(--g2-text); }
    .g2-select { background: var(--g2-input); color: var(--g2-text); border: 1px solid var(--g2-line2); border-radius: 8px; height: 34px; padding: 0 8px; }
}

@keyframes g2-sub-in {
    from { opacity: .4; transform: translateX(24px); }
    to { opacity: 1; transform: none; }
}

@keyframes g2-sub-in-rtl {
    from { opacity: .4; transform: translateX(-24px); }
    to { opacity: 1; transform: none; }
}

/* While the drawer (or another sheet, g2.js lockPageScroll) is open the page behind it does not scroll: overflow
   hidden on <html> only - never position: fixed on body, which broke the sticky header and repainted the page - and
   the scrollbar's space is kept, so nothing moves. The scroll position never changes. */
html.g2-locked { overflow: hidden !important; scrollbar-gutter: stable; }
.g2-menu { overscroll-behavior: contain; }

/* Section rhythm tokens (gift cards final round, Oct 2026): eyebrow -> title 6px -> subtitle 4px -> content 20px
   (16px on phones); 56px between sections (40px on phones) where a page uses --g2-section-space; text 1.45 high. */
:root {
    --g2-section-space: 56px;
    --g2-head-gap: 6px;
    --g2-sub-gap: 4px;
    --g2-content-gap: 20px;
    --g2-text-lh: 1.45;
    --g2-title-size: 24px;
}

@media (max-width: 767px) {
    :root { --g2-section-space: 40px; --g2-content-gap: 16px; --g2-title-size: 19px; }
}

/* ============================================================================================================
   FOOTER
   ============================================================================================================ */
.g2-footer {
    margin-top: 24px;
    border-top: 1px solid var(--g2-hair);
    background: #0d0f13;
    color: var(--g2-text);
}

.g2-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
    gap: 30px;
    padding-block: 44px 30px;
}

/* The Egypt store adds an "Our stores" column (every open store page): one more column. */
.g2-footer__grid--stores { grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr 1.2fr; gap: 26px; }

.g2-footer__about { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.g2-footer__logo img { display: block; width: auto; height: 32px; max-width: 191px; object-fit: contain; }
.g2-footer__line { margin: 0; font-size: 13px; line-height: 1.6; color: var(--g2-muted); }
.g2-footer__socials { display: flex; gap: 8px; }

.g2-footer__social {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--g2-line2);
    background: var(--g2-input);
}

.g2-footer__social picture { display: contents; }
.g2-footer__social img { width: 18px; height: 18px; object-fit: contain; }
.g2-footer__apps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.g2-footer__apps img { display: block; width: 120px; height: auto; }

.g2-footer__col, .g2-footer__contact { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.g2-footer__title { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--g2-text); }
.g2-footer__toggle { display: none !important; }
.g2-footer__links { display: flex; flex-direction: column; gap: 2px; }
.g2-footer__links a { padding: 4px 0; font-size: 13px; color: var(--g2-muted) !important; }
.g2-footer__links a:hover { color: var(--g2-text) !important; }

.g2-footer__reach {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    font-weight: 600;
    color: #dfe3e8 !important;
}

.g2-footer__reach-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.25; }
.g2-footer__reach-sub { font-size: 11.5px; font-weight: 500; color: var(--g2-dim); }
.g2-footer__email { font-size: 12px; white-space: nowrap; }

.g2-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-block: 18px;
    border-top: 1px solid var(--g2-line);
    font-size: 12px;
    color: var(--g2-dim);
}

.g2-footer__payments { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }

.g2-footer__payments li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 32px;
    padding: 3px 6px;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.g2-footer__payments img { display: block; width: auto; height: auto; max-width: 40px; max-height: 26px; object-fit: contain; }
.g2-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.g2-footer__legal a { color: var(--g2-dim) !important; }
.g2-footer__legal a:hover { color: var(--g2-text) !important; }

@media (min-width: 768px) and (max-width: 1099px) {
    .g2-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .g2-footer { margin-top: 12px; }
    .g2-footer__grid { display: flex; flex-direction: column; gap: 0; padding-block: 18px 6px; }

    /* Call / WhatsApp / email first, as buttons. */
    .g2-footer__contact { order: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 18px; }
    .g2-footer__contact .g2-footer__title, .g2-footer__reach--stores, .g2-footer__reach-sub { display: none; }

    .g2-footer__reach {
        justify-content: center;
        height: 52px;
        padding: 0 10px;
        border-radius: 14px;
        border: 1px solid var(--g2-line2);
        background: var(--g2-input);
        font-weight: 700;
    }

    .g2-footer__reach--mail { grid-column: 1 / -1; font-weight: 600; color: var(--g2-muted) !important; }

    /* Shop, Help and Games 2 Egypt: collapsible sections. */
    .g2-footer__col { order: 2; gap: 0; border-top: 1px solid var(--g2-line); }
    .g2-footer__col .g2-footer__title { display: none; }

    .g2-footer__toggle {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 52px;
        font-size: 14.5px !important;
        font-weight: 700;
    }

    .g2-footer__plus { color: var(--g2-muted); transition: transform .2s ease; }
    .g2-footer__toggle[aria-expanded="true"] .g2-footer__plus { transform: rotate(45deg); }
    .g2-footer__col:not(.is-open) .g2-footer__links { display: none; }
    .g2-footer__links { padding-bottom: 12px; }
    .g2-footer__links a { padding: 8px 0; font-size: 13.5px; }

    /* Then the apps and socials (the logo and the about line stay on desktop). */
    .g2-footer__about { order: 3; padding-block: 18px; border-top: 1px solid var(--g2-line); gap: 14px; }
    .g2-footer__logo, .g2-footer__line { display: none; }
    .g2-footer__about .g2-footer__apps { order: -1; margin-top: 0; }

    .g2-footer__bottom { flex-direction: column; align-items: flex-start; }
    .g2-footer__legal { flex-direction: column-reverse; align-items: flex-start; gap: 10px; }
}

/* Floating chat and back-to-top buttons overlap the footer's last line on phones: leave room. */
@media (max-width: 767px) {
    .g2-footer__bottom { padding-bottom: 80px; }
}

/* Cross-document view transitions: the listing card's cover (named on click, g2.js) morphs into this page's main
   image; platform and condition links morph the cover the same way. Off under reduced motion. Only the cover moves:
   the rest of the page swaps without a cross-fade. The opt-in (@view-transition) is at the top of _Layout's <head>: it
   has to be read before the page's first inline script. */
@media (prefers-reduced-motion: no-preference) {
    .g2-stage__img--cover { view-transition-name: product-cover; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    ::view-transition-group(product-cover) { animation-duration: .32s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
}

/* MENU - "News". A plain item; with a story published in the last 24 hours it gets a small pulsing red dot before the
   label on desktop and a "NEW" tag in the phone drawer. The dot is absolutely placed inside a fixed 7px slot, so the
   item keeps the other items' height and baseline. */
.nav-news__dot, .nav-news__new { display: none; }

@media (min-width: 1100px) {
    .g2-nav .g2-nav__item.nav-news--fresh .nav-news__dot { position: relative; display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #ff4d5a; }
    .g2-nav .g2-nav__item.nav-news--fresh .nav-news__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #ff4d5a; animation: nav-news-pulse 1.8s ease-out infinite; }
}

@media (max-width: 1099px) {
    .g2-nav .g2-nav__item.nav-news--fresh .nav-news__new { display: inline-flex; margin-inline-start: auto; background: rgba(255, 77, 90, .14); color: #ff8a93; }
}

@keyframes nav-news-pulse {
    from { transform: scale(1); opacity: .7; }
    to { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .g2-nav .g2-nav__item.nav-news--fresh .nav-news__dot::after { animation: none; opacity: 0; }
}

/* MENU - "Offers 42": the live deal count (Common.Offers.OfferDeals) as a small gold pill after the label, desktop bar and
   phone drawer alike (one DOM). Its line height is the label's, so the item keeps the other items' height and baseline. */
.g2-nav .g2-nav__item.nav-offers .nav-offers__count {
    display: inline-flex;
    flex: none;
    align-items: center;
    height: 18px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(244, 182, 61, .16);
    box-shadow: inset 0 0 0 1px rgba(244, 182, 61, .35);
    color: #f4b63d;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1099px) {
    .g2-nav .g2-nav__item.nav-offers .nav-offers__count { margin-inline-start: auto; }
}

/* ============================================================================================================
   SERVICES MENU (_StoreHeader "Services", StoreMenu.ServiceLinks; the Egypt store): desktop = a small panel under its
   item with ONE list (Sell for cash first, a little highlighted: lime icon tile, a "New" tag); phone drawer = the same list
   plus a green Sell for cash row at the top of the drawer (.g2-nav__sell). No price in the menu. Motion: transform only.
   ============================================================================================================ */
.g2-svc { display: flex; flex-direction: column; gap: 0; }
.g2-svc__links { display: flex; flex-direction: column; }

.g2-svc__link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    color: var(--g2-text) !important;
    border-bottom: 1px solid #1b1f25;
}

.g2-svc__label small { font-size: 12.5px; color: var(--g2-muted); }
.g2-svc__label { display: flex; flex-direction: column; min-width: 0; }
/* Sell for cash: one choice among the others, just a little highlighted. */
.g2-svc__link--sell .g2-svc__ico { background: #bcd767; color: #14200a; }
.g2-svc__new { display: inline-block; margin-inline-start: 8px; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase !important; vertical-align: 1px; color: #bcd767; }
/* The phone drawer's top row: Sell for cash, green, with an arrow. */
.g2-nav__sell { display: flex !important; align-items: center; gap: 12px; margin: 4px 0 6px; padding: 10px 12px !important; border-radius: 12px; background: linear-gradient(120deg, #26331a, #161b12) !important; box-shadow: inset 0 0 0 1px #3c4a1c; color: var(--g2-text) !important; }
.g2-nav__sell-ico { display: grid; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #bcd767; color: #14200a; }
.g2-nav__sell-label { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.g2-nav__sell-label b { color: #bcd767; font-size: 14.5px; font-weight: 700; }
.g2-nav__sell-label small { color: var(--g2-muted); font-size: 12px; font-weight: 400; }
.g2-nav__sell-arrow { flex: 0 0 auto; color: #bcd767; }
.g2-svc__label b { font-size: 14px; font-weight: 600; }

.g2-svc__ico {
    display: grid;
    flex: 0 0 34px;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #1f2329;
    color: #bcd767;
}

/* The disc check's icon: a small disc that spins while its row is hovered (CSS only). */
.g2-svc__disc {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background:
        radial-gradient(circle, #1f2329 0 14%, #c7ccd4 15% 19%, #8d939c 20% 28%, transparent 29%),
        conic-gradient(from 20deg, #9fb6c9, #d7c3e8, #a9e0d0, #f3e3a6, #c9d1da, #9fb6c9);
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.g2-svc__link:hover .g2-svc__disc, .g2-svc__link:focus-visible .g2-svc__disc { transform: rotate(360deg); }
.g2-svc [aria-current="page"] .g2-svc__label b { color: #bcd767; }

@media (min-width: 1100px) {
    .g2-panel--services { padding: 10px; }
    .g2-svc { width: 330px; }
    .g2-svc__links { gap: 2px; }
    .g2-svc__link { padding: 10px 12px; border: 0; border-radius: 12px; transition: background-color .2s; }
    .g2-svc__link:hover, .g2-svc__link:focus-visible { background: #1a1d22; }
    .g2-nav__item.nav-services.is-current { color: var(--g2-text) !important; box-shadow: inset 0 -2px 0 var(--g2-brand); }
}

@media (max-width: 1099px) {
    .g2-nav__item.nav-services.is-current { background: var(--g2-input) !important; box-shadow: inset 3px 0 0 var(--g2-brand); }
    [dir="rtl"] .g2-nav__item.nav-services.is-current { box-shadow: inset -3px 0 0 var(--g2-brand); }
    .g2-svc__ico { flex-basis: 32px; width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .g2-svc__disc { transition: none !important; transform: none !important; }
}

/* ---------- Gift cards in the menu (Oct 2026): the "Gift Cards & Top-ups" label opens /gift-cards (g2.js data-g2-href);
   its chevron / next arrow opens the panel, so the arrow gets a bigger hit area (padding, the row does not move). ---------- */
[data-g2-href] .g2-nav__chev, [data-g2-href] .g2-nav__next {
    box-sizing: content-box;
    padding: 10px;
    margin: -10px;
    cursor: pointer;
}

/* The old home gift picker: a store with no country code says nothing about accounts (its "everywhere" chip is empty). */
.g2-gift__everywhere:empty { display: none !important; }

/* ---------- TOP BAR (Egypt store, _StoreHeader): about 32px, scrolls away with the page. Trustpilot | three promises
   (desktop) | Our stores + Hotline. Phones: stars, score, count and 16280 on one line. ---------- */
.g2-topbar {
    border-bottom: 1px solid var(--g2-line);
    background: #0a0c0f;
    color: var(--g2-muted);
    font-size: 12.5px;
    line-height: 1;
}

.g2-topbar__inner {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 32px;
    overflow: hidden;
    white-space: nowrap;
}

.g2-topbar a { display: inline-flex; align-items: center; gap: 6px; color: var(--g2-muted) !important; text-decoration: none !important; }
.g2-topbar a:hover { color: var(--g2-text) !important; }
.g2-topbar__tp b { color: var(--g2-text); font-weight: 700; }
.g2-topbar__tp .g2-tp-mark { width: 14px; height: 14px; }
.g2-topbar__word { color: var(--g2-text); font-weight: 600; }

.g2-topbar__stars { display: inline-flex; gap: 2px; direction: ltr; }

.g2-topbar__stars i {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
    background: linear-gradient(90deg, #00b67a var(--g2-fill, 100%), #3a3f47 var(--g2-fill, 100%));
}

.g2-topbar__stars i::before {
    content: "";
    position: absolute;
    inset: 2px;
    background: #fff;
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.g2-topbar__promises {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    gap: 18px;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
}

.g2-topbar__promises li { display: inline-flex; align-items: center; gap: 6px; }
.g2-topbar__promises li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--g2-brand); }

.g2-topbar__end { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; margin-inline-start: auto; }
.g2-topbar__sep { width: 1px; height: 14px; background: var(--g2-line2); }
.g2-topbar__hot b { color: var(--g2-brand-hover); font-size: 13px; font-weight: 700; }

@media (max-width: 991px) {
    .g2-topbar__promises, .g2-topbar__word, .g2-topbar__long, .g2-topbar__stores, .g2-topbar__sep { display: none !important; }
    .g2-topbar__inner { justify-content: space-between; gap: 10px; }
    .g2-topbar__tp { min-width: 0; overflow: hidden; }
}

/* ---------- Gift menu: "All gift cards" is the first row of the brand column (the brand rows' size, brand green) and the
   gift section's first row in the drawer. Not a .g2-gtab, so hovering it never switches the brand. ---------- */
.g2-gtab-all {
    display: flex !important;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 12px !important;
    border-radius: 10px !important;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--g2-brand) !important;
    text-decoration: none !important;
    transition: background-color .15s, color .15s;
}

.g2-gtab-all .g2-icon { margin-inline-start: auto; }
.g2-gtab-all:hover { background: var(--g2-brand-soft) !important; color: var(--g2-brand-hover) !important; }

@media (max-width: 1099px) {
    .g2-gtab-all {
        grid-column: 1 / -1;
        height: 44px;
        border: 1px solid rgba(149, 171, 82, .45);
        border-radius: 12px !important;
        background: var(--g2-brand-soft);
        font-size: 13px;
    }
}

/* =====================================================================================================================
   GIFT CARDS FINDABILITY (final gift round): the gift mark in the desktop bar and the "Shop all gift cards" strip at the
   top of the gift panel (desktop: about 56px with a solid button; the phone drawer: compact, the button is an arrow).
   ===================================================================================================================== */
.g2-nav__giftmark { display: none; }

@media (min-width: 1100px) {
    .g2-nav__giftmark { display: inline-flex; align-items: center; color: var(--g2-brand); }
}

/* The strip is shared (.g2-menustrip, round 2 of /used-games): the gift panel's "Shop all gift cards" and the Pre-owned
   panel's "Shop all used games" use exactly these rules. */
a.g2-menustrip {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    box-sizing: border-box;
    padding-block: 8px;
    padding-inline: 14px 8px;
    border-radius: 12px;
    background: rgba(149, 171, 82, .12);
    box-shadow: inset 0 0 0 1px rgba(149, 171, 82, .38);
    color: var(--g2-text) !important;
    text-decoration: none !important;
    transition: background-color .15s;
}

a.g2-menustrip:hover { background: rgba(149, 171, 82, .18); }
a.g2-menustrip:focus-visible { outline: 2px solid var(--g2-brand); outline-offset: 2px; }

.g2-menustrip__icon {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(149, 171, 82, .18);
    color: var(--g2-brand);
}

.g2-menustrip__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.g2-menustrip__text b { font-size: 14.5px; font-weight: 700; line-height: 1.25; color: var(--g2-text); }
.g2-menustrip__text small { font-size: 12.5px; line-height: 1.35; color: var(--g2-muted); }

.g2-menustrip__button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    height: 40px;
    padding-inline: 16px;
    border-radius: 10px;
    background: var(--g2-brand);
    color: #0b0d10;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .15s;
}

a.g2-menustrip:hover .g2-menustrip__button { background: var(--g2-brand-hover); }

@media (max-width: 1099px) {
    a.g2-menustrip { gap: 12px; min-height: 52px; padding-block: 6px; padding-inline: 10px 6px; margin-top: 4px; }
    .g2-menustrip__icon { flex-basis: 32px; width: 32px; height: 32px; }
    .g2-menustrip__text b { font-size: 14px; }
    .g2-menustrip__text small { font-size: 12px; }
    .g2-menustrip__button { width: 36px; height: 36px; padding: 0; justify-content: center; }
    .g2-menustrip__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* =====================================================================================================================
   FLAGS AND PLATFORM ICONS (shared). Flags come from wwwroot/web/img/flags (the flag-icons 4x3 set, GiftBrandList.FlagUrl);
   they are pictures, never mirrored in RTL. Platform icons are single-colour masks that take the text colour.
   ===================================================================================================================== */
.g2-flag {
    display: inline-block;
    flex: none;
    width: 20px;
    height: 14px;
    border-radius: 3px;
    object-fit: cover;
    vertical-align: middle;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .1);
    background: var(--g2-raised);
}

.g2-flag--sm { width: 16px; height: 12px; }

.g2-pico {
    display: inline-block;
    flex: none;
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    background-color: currentColor;
    -webkit-mask: var(--g2-pico) center / contain no-repeat;
    mask: var(--g2-pico) center / contain no-repeat;
}

.g2-pico--ps { --g2-pico: url("/web/img/gift-brands/psn.svg"); }
.g2-pico--xbox { --g2-pico: url("/web/img/gift-brands/xbox.svg"); }
.g2-pico--switch { --g2-pico: url("/web/img/gift-brands/nintendo.svg"); }
.g2-pico--pc { --g2-pico: url("/web/img/platforms/pc.svg"); }
.g2-pico--mobile { --g2-pico: url("/web/img/platforms/mobile.svg"); }
.g2-pico--globe { --g2-pico: url("/web/img/platforms/globe.svg"); }

/* Trustpilot mark (shared): the star of wwwroot/web/img/social_icons/trustpilot.svg as a mask in the text colour; Trustpilot
   green #00b67a while the link it sits in is hovered or focused. Size with width / height (16px by default). */
.g2-tp-mark {
    display: inline-block;
    flex: none;
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    background-color: currentColor;
    -webkit-mask: url("/web/img/social_icons/trustpilot.svg") center / contain no-repeat;
    mask: url("/web/img/social_icons/trustpilot.svg") center / contain no-repeat;
    transition: background-color .18s ease;
}

a:hover .g2-tp-mark,
a:focus-visible .g2-tp-mark { background-color: #00b67a; }

@media (prefers-reduced-motion: reduce) {
    .g2-tp-mark { transition: none; }
}

/* =====================================================================================================================
   OUR OWN CHECKBOX (shared site component). NOT ".g2-check": that name is the checkout's round selection mark (above,
   "CHECKOUT AND ACCOUNT"), and sharing it made every row 20px wide and round (round 6b). Markup:
   <label class="g2-checkbox [g2-checkbox--mark]"><input type="checkbox" class="g2-checkbox__input" …>
   <span class="g2-checkbox__box" aria-hidden="true"></span>[a 22px mark]<span class="g2-checkbox__text">Label</span>
   <span class="g2-checkbox__count">12</span></label>
   One line: a grid "box 18px | (mark 22px) | name 1fr (one line, ellipsis) | count auto". The real input stays (visually
   hidden and absolutely placed, so it takes no grid cell; still focusable and posted); the whole row is the click target.
   ===================================================================================================================== */
.g2-checkbox {
    position: relative;
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    width: 100%;
    min-height: 32px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: pointer;
    color: var(--g2-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    text-transform: none;
    user-select: none;
}

.g2-checkbox--mark { grid-template-columns: 18px 22px minmax(0, 1fr) auto; }

.g2-checkbox__input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    overflow: hidden;
    clip-path: inset(50%);
    pointer-events: none;
}

.g2-checkbox__box {
    display: grid;
    place-items: center;
    flex: none;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    aspect-ratio: 1;
    align-self: center;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1.5px solid #3a4049;
    background: var(--g2-input);
    transition: background-color .15s, border-color .15s;
}

.g2-checkbox__box::after {
    content: "";
    width: 5px;
    height: 9px;
    box-sizing: border-box;
    border: solid #0b0d10;
    border-width: 0 2px 2px 0;
    opacity: 0;
    transform: translateY(-1px) rotate(45deg) scale(.4);
    transition: transform .15s, opacity .15s;
}

.g2-checkbox:hover .g2-checkbox__box { border-color: #5d6571; }
.g2-checkbox__input:checked + .g2-checkbox__box { background: var(--g2-brand); border-color: var(--g2-brand); }
.g2-checkbox__input:checked + .g2-checkbox__box::after { opacity: 1; transform: translateY(-1px) rotate(45deg) scale(1); }
.g2-checkbox__input:focus-visible + .g2-checkbox__box { outline: 2px solid var(--g2-brand); outline-offset: 2px; }
.g2-checkbox__input:disabled + .g2-checkbox__box { opacity: .45; }
.g2-checkbox > :nth-child(3):not(.g2-checkbox__text):not(.g2-checkbox__count) { width: 22px; height: 22px; justify-self: center; }
.g2-checkbox__text {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.g2-checkbox__count {
    display: block;
    justify-self: end;
    padding-inline-start: 4px;
    color: var(--g2-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* =====================================================================================================================
   OUR OWN DROPDOWN (shared site component, g2.js "dropdown"). A <select data-g2-dd> gets a button + listbox; the select
   stays underneath (.g2-dd__native, visually hidden) and receives the value and a change event. Without JS the plain
   select shows. An option may carry data-g2-flag="{flag url}" or data-g2-icon="globe". The list is moved to <body> while
   open (fixed, so no overflow parent clips it) and flips above the button when there is no room below.
   ===================================================================================================================== */
.g2-dd { position: relative; display: inline-flex; min-width: 0; max-width: 100%; vertical-align: middle; }
.g2-dd--block { display: flex; width: 100%; }

.g2-dd > .g2-dd__native {
    position: absolute !important;
    inset: 0;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    overflow: hidden;
    clip-path: inset(50%);
    pointer-events: none;
}

.g2-dd__button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    height: 40px;
    box-sizing: border-box;
    margin: 0;
    padding-inline: 12px 10px;
    border-radius: 10px;
    border: 1px solid #2a2f37;
    background: var(--g2-input);
    color: var(--g2-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: start;
    text-transform: none;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.g2-dd__button:hover { border-color: #3a4049; background: var(--g2-raised); }
.g2-dd__button:focus-visible { outline: 2px solid var(--g2-brand); outline-offset: 2px; }
.g2-dd__button[aria-expanded="true"] { border-color: var(--g2-brand); }
.g2-dd__button:disabled { opacity: .5; cursor: default; }

.g2-dd__value { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.g2-dd__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.g2-dd__chev {
    flex: none;
    width: 7px;
    height: 7px;
    margin-inline: 4px 2px;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    opacity: .7;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .15s;
}

.g2-dd__button[aria-expanded="true"] .g2-dd__chev { transform: translateY(2px) rotate(225deg); }

.g2-dd__list {
    position: fixed;
    z-index: 2100;
    box-sizing: border-box;
    max-width: min(360px, calc(100vw - 16px));
    max-height: 300px;
    margin: 0;
    padding: 6px;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 12px;
    border: 1px solid var(--g2-line);
    background: var(--g2-surface);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04);
    color: var(--g2-text);
    scrollbar-width: thin;
    scrollbar-color: #2e333b transparent;
    animation: g2-dd-in .14s ease-out;
}

.g2-dd__list[hidden] { display: none; }
.g2-dd__list::-webkit-scrollbar { width: 6px; }
.g2-dd__list::-webkit-scrollbar-thumb { background: #2e333b; border-radius: 3px; }
.g2-dd__list.is-up { animation-name: g2-dd-in-up; }

@keyframes g2-dd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes g2-dd-in-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.g2-dd__option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
}

.g2-dd__option.is-active { background: var(--g2-raised); }
.g2-dd__option[aria-selected="true"] { font-weight: 700; }
.g2-dd__option[aria-disabled="true"] { opacity: .45; cursor: default; }
.g2-dd__option .g2-dd__text { flex: 1 1 auto; }

.g2-dd__tick {
    flex: none;
    width: 5px;
    height: 10px;
    margin-inline: 8px 4px;
    border: solid var(--g2-brand);
    border-width: 0 2px 2px 0;
    transform: translateY(-1px) rotate(45deg);
    visibility: hidden;
}

.g2-dd__option[aria-selected="true"] .g2-dd__tick { visibility: visible; }
.g2-dd__option .g2-pico, .g2-dd__value .g2-pico { color: var(--g2-muted); }

/* The drawer's currency row keeps its compact height. */
.g2-drawer__row .g2-dd__button { height: 34px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
    .g2-dd__list { animation: none; }
    .g2-checkbox__box, .g2-checkbox__box::after, .g2-dd__chev, .g2-dd__button { transition: none; }
}


/* ---------- from the layouts' later inline <style> blocks (they came after g2.css) ----------
   Egypt layout only, so each selector starts with :where(body:not(.g2-store-all)) (no specificity added); the Arabic
   ones with :where(html[dir="rtl"] body:not(.g2-store-all)). */

:where(html[dir="rtl"] body:not(.g2-store-all)) .payments_icons picture {
    text-align: left;
}

:where(body:not(.g2-store-all)) .accordion-collapse .accordion-button {
    color: #cfcfcf;
    font-size: 14px;
    padding: 5px 15px;
    margin: 5px 0;
    display: inline-block;
    border-bottom: 1px solid var(--light-color);
    width: 100%;
}

:where(body:not(.g2-store-all)) .accordion-collapse .accordion-button .mobile_menu_open_btn {
    width: 20px;
    height: 20px;
    right: 20px;
}

:where(body:not(.g2-store-all)) .accordion-body .accordion-body a {
    padding: 5px 15px !important;
    font-size: 12px !important;
    border-bottom: none !important;
}

:where(body:not(.g2-store-all)) .mobile_menu_item button {
    font-size: 15px;
}

/* The featured title in the menu (titleLink - FC 27 today). Styled by class, not by its words, so swapping titleLink
   to another game keeps it. gap only, so RTL mirrors itself. */
:where(body:not(.g2-store-all)) .nav-featured {
    color: #ffdc11 !important;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

:where(body:not(.g2-store-all)) .nav-featured:hover, :where(body:not(.g2-store-all)) .nav-featured:focus-visible {
    color: #ffe44d !important;
    text-decoration: none;
}

/* The desktop menu's own ".main-nav__list > li > a" sets display: block and custom.css forces font-weight: 500
   !important - both outrank .nav-featured, and a block <a> leaves the empty dot span inline at 0px wide. Padding /
   line-height stay the menu's. The menu's <li>s are inline-block on the text baseline: baseline alignment lets the
   label (not the empty dot) set this link's baseline, so the item sits level with its neighbours. */
:where(body:not(.g2-store-all)) .main-nav__list > li > a.nav-featured {
    display: flex;
    align-items: baseline;
    font-weight: 700;
}

:where(body:not(.g2-store-all)) .main-nav__list > li > a.nav-featured .nav-featured__dot {
    align-self: center;
}

/* custom.css: ".mobile_menu_item a { font-weight: 600 }". */
:where(body:not(.g2-store-all)) .mobile_menu_item > a.nav-featured {
    font-weight: 700;
}

:where(body:not(.g2-store-all)) .nav-featured__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffdc11;
    flex: 0 0 auto;
    box-shadow: 0 0 0 0 rgba(255,220,17,.55);
    animation: navFeaturedPulse 2.4s ease-out infinite;
}

@keyframes navFeaturedPulse {
    0% { box-shadow: 0 0 0 0 rgba(255,220,17,.55); }
    70% { box-shadow: 0 0 0 7px rgba(255,220,17,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,220,17,0); }
}

:where(body:not(.g2-store-all)) .nav-featured__tag {
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(255,220,17,.14);
    color: #ffdc11;
    border: 1px solid rgba(255,220,17,.35);
    letter-spacing: .04em;
}

@media (prefers-reduced-motion: reduce) {
    :where(body:not(.g2-store-all)) .nav-featured__dot { animation: none; }
}

:where(body:not(.g2-store-all)) .payments_icons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

:where(body:not(.g2-store-all)) .payments_icons picture {
    width: 100%;
}

:where(body:not(.g2-store-all)) .payments_icons img {
    width: fit-content;
}

/* .info-block__heading and .footer_text were h5 / h6 used only for their look (not headings). These restore what the
   theme's h5/h6 element rules gave them and the class rules don't. */
:where(body:not(.g2-store-all)) p.info-block__heading {
    font-weight: 500;
}

:where(body:not(.g2-store-all)) span.info-block__heading {
    display: block;
    font-weight: 400;
}

:where(body:not(.g2-store-all)) p.footer_text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: #f3f3f3;
    text-transform: capitalize;
}

[dir="rtl"] :where(body:not(.g2-store-all)) p.footer_text {
    font-size: 18px;
}

/* Arabic, Egypt layout. */
:where(html[dir="rtl"] body:not(.g2-store-all)) .accordion-collapse .accordion-button .mobile_menu_open_btn {
    left: 20px;
    right: initial;
}

:where(html[dir="rtl"] body:not(.g2-store-all)) .hotline a {
    justify-content: flex-end;
}

:where(html[dir="rtl"] body:not(.g2-store-all)) .info-block--header.info-block--header .info-block__item:first-child {
    margin-left: 20px;
}

:where(html[dir="rtl"] body:not(.g2-store-all)) .select_language_selector label {
    padding: 0 5px 0 15px;
}

/* ============================================================================================================
   SHARED PARTS FROM THE PAGE FILES (Oct 2026, "each page loads only the CSS it uses")
   The layouts no longer load every file split out of g2.css; a view asks PageAssets for the page files it uses. The
   rules below are used on pages that do not load their old file - the header, menu and footer, the floating buttons,
   buttons, chips, links, fields, dialogs, breadcrumbs, product cards (whose .g2-card also takes checkout's panel rule) -
   so they moved here, unchanged, in their old order (sections.css, listing.css, product.css, checkout.css, home.css):
   every rule still wins against the same rules as before. Rules that share an element moved together.
   Check: node _local/old-css/page-css-check.js .
   ============================================================================================================ */

/* ---- from pages/sections.css ---- */
/* Product card (the rest of the card is in pages/sections.css) */
.g2-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    color: var(--g2-text) !important;
}

.g2-sec .g2-card__title,
.g2-sec .g2-bento__title,
.g2-sec .g2-release__title,
.g2-sec .g2-urow__title,
.g2-sec .g2-budget__title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.34;
    max-height: 2.68em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--g2-text) !important;
}

.g2-card--mini .g2-card__link { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; color: var(--g2-text) !important; }
.g2-card__act:focus-visible { outline: 2px solid var(--g2-brand); outline-offset: 2px; }

/* The header menu's game columns, 768-1099px. */
@media (min-width: 768px) and (max-width: 1099px) {
    .g2-cols--games { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- from pages/listing.css ---- */
/* Breadcrumbs (listing, product page, status pages). */
.g2-crumbs__list { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 0 6px; list-style: none; white-space: nowrap; }
.g2-crumbs__item { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; font-size: 12.5px; color: var(--g2-dim); }
.g2-crumbs__item + .g2-crumbs__item::before { content: "›"; font-size: 14px; line-height: 1; color: var(--g2-dim); }
[dir="rtl"] .g2-crumbs__item + .g2-crumbs__item::before { content: "‹"; }
.g2-crumbs__item a { color: var(--g2-muted) !important; }
.g2-crumbs__item a:hover { color: var(--g2-text) !important; }
.g2-crumbs__item [aria-current] { color: var(--g2-text); }

/* The Metacritic tone of a card fact (also the product page's stage facts). */
.g2-lcard__meta--good b { background: #66cc33; }
.g2-lcard__meta--mixed b { background: #ffcc33; }
.g2-lcard__meta--bad b { background: #ff6874; }

/* The About card (listing; My account's "About you"); its body rules are in pages/listing.css. */
.g2-about { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; padding: 22px 24px; border-radius: 18px; border: 1px solid var(--g2-line); background: var(--g2-surface); }

@media (max-width: 767px) {
    .g2-crumbs, .g2-ihead__desc, .g2-isubs, .g2-ltools__shown { display: none !important; }
    .g2-about { margin-top: 20px; padding: 16px; }
}

/* ---- from pages/product.css ---- */
/* Platform tones (the product stage; home New arrivals). */
.g2-stage--ps { --g2-ptone: var(--g2-ps); }
.g2-stage--nin { --g2-ptone: var(--g2-nin); }
.g2-stage--xb { --g2-ptone: var(--g2-xb); }
.g2-stage--pc { --g2-ptone: var(--g2-pc); }

/* The "Sell yours" card right under Add to cart (round 2 of /used-games): icon, the offer, a muted line, a button. */
.g2-sellcard {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--g2-line2);
    background: var(--g2-surface);
    box-shadow: inset 0 2px 0 rgba(188, 215, 103, .55);
    color: var(--g2-text) !important;
    text-decoration: none !important;
    transition: border-color .2s, background-color .2s;
}

.g2-sellcard:hover, .g2-sellcard:focus-visible { border-color: rgba(188, 215, 103, .5); background: var(--g2-raised); }
.g2-sellcard__icon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: rgba(188, 215, 103, .14); color: #bcd767; }
.g2-sellcard__text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.g2-sellcard__text b { font-size: 14px; font-weight: 700; line-height: 1.35; }
.g2-sellcard__text b .g2e-price, .g2-sellcard__text b .g2e-price * { color: #bcd767 !important; }
.g2-sellcard__text small { font-size: 12.5px; line-height: 1.45; color: var(--g2-muted); }

.g2-sellcard__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: 10px;
    background: #bcd767;
    color: #14200a;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 400px) {
    .g2-sellcard { flex-wrap: wrap; }
    .g2-sellcard__btn { width: 100%; justify-content: center; }
}

.g2-dot.g2-tone--none { --g2-tone: #5a616b; }

/* The header's cart count after "Add to cart": a short bump, the new number fading in. */
.g2-cart__badge.is-bumped { animation: g2-bump .4s ease-out, g2-badge-fade .3s ease-out; }
@keyframes g2-bump { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.15); } }
@keyframes g2-badge-fade { from { opacity: .25; } to { opacity: 1; } }

@media (max-width: 1099px) {
    /* The chat and back-to-top buttons step up above the bar while it shows. */
    body.g2-pdock-shown #chat_with_us { bottom: 84px !important; }
    body.g2-pdock-shown #scrollToTopBtn { bottom: calc(84px + var(--g2-chat-h) + 12px) !important; }
}

@media (prefers-reduced-motion: reduce) {
    .g2-stage__img, .g2-pick__row.is-changed, .g2-pdock, .g2-pbar__buy, .g2-cart__badge.is-bumped { animation: none !important; }
}

/* The activation country check (a .g2-dialog, ProductDetails "countryRestrictions"): centred icon, title, the detected
   country, the country dropdown and the answer. */
.g2-ctry { width: 560px; }
.g2-ctry__body { align-items: center; text-align: center; gap: 8px; }
.g2-ctry__icon { display: block; width: auto; max-height: 72px; margin: 0 auto 8px; }
.g2-ctry .g2-ctry__title { margin: 0; font-size: 17px; font-weight: 700; color: var(--g2-text); }
.g2-ctry .g2-ctry__line { margin: 0; font-size: 14px; font-weight: 500; color: var(--g2-muted); }
.g2-ctry__place { color: var(--brand-color); }
.g2-ctry__pick { width: min(100%, 360px); margin-top: 8px; text-align: start; }
.g2-ctry .g2-ctry__result { margin: 8px 0 0; font-size: 14px; font-weight: 600; text-align: center; }
.g2-ctry__ok { color: var(--brand-color); }
.g2-ctry__bad { color: #f2a59f; }

/* ---- from pages/checkout.css ---- */
/* Keyboard focus on the checkout / account pages (before the field focus below, as in checkout.css). */
.g2-co :focus-visible, .g2-ckhead :focus-visible, .g2-ckfoot :focus-visible, .g2-mbar :focus-visible {
    outline: 2px solid var(--g2-brand);
    outline-offset: 2px;
}

.g2-co :focus:not(:focus-visible), .g2-ckhead :focus:not(:focus-visible), .g2-ckfoot :focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none;
}

/* The panel card (checkout, account, status pages; on a product card it overrides the card rule above, as before). */
.g2-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 20px;
    border-radius: 18px;
    background: var(--g2-surface);
    border: 1px solid var(--g2-line);
    color: var(--g2-text);
}

.g2-card__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.g2-card__head--wrap { flex-wrap: wrap; }
.g2-card__head h2, .g2-card__title { font-size: 17px; font-weight: 700; }
.g2-card__count { font-size: 13px; font-weight: 600; color: var(--g2-muted); }
.g2-card__link { font-size: 12.5px; font-weight: 600; color: var(--g2-brand) !important; white-space: nowrap; }
.g2-card__link:hover { color: var(--g2-brand-hover) !important; }

.g2-link { font-size: 13px; font-weight: 600; color: var(--g2-brand) !important; cursor: pointer; }
.g2-link:hover { color: var(--g2-brand-hover) !important; }
.g2-link--danger { color: #ff978b !important; display: inline-flex; align-items: center; gap: 6px; }
.g2-link--danger:hover { color: #ffb3a8 !important; }

/* Buttons: sizes and the extra roles these pages need (the primary / secondary ones are in "primitives"). Never
   title-cased, wherever they are (custom.css capitalizes .btn; the sign-in pages' buttons carry both). */
.g2-btn { cursor: pointer; text-decoration: none !important; text-transform: none; letter-spacing: normal; }
.g2-btn--lg { height: 54px; padding: 0 22px; border-radius: 14px; font-size: 16px; }
.g2-btn--sm { height: 36px; padding: 0 14px; border-radius: 10px; font-size: 13px; }
.g2-btn--block { display: flex; width: 100%; }
.g2-btn--danger { background: #dd6259 !important; color: #140b0a !important; border: 0; }
.g2-btn--danger:hover { background: #e7786f !important; }
.g2-btn.disabled, .g2-btn:disabled { cursor: default; }
.g2-btn--primary.disabled { background: var(--g2-raised) !important; color: #c9ced4 !important; box-shadow: inset 0 0 0 1px var(--g2-line2); font-size: 13.5px; white-space: normal; text-align: center; line-height: 1.3; }

/* Chips used here (the base .g2-chip is in "primitives"). */
.g2-chip i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.g2-chip--ok { background: rgba(61, 220, 132, .12); color: #7be8a8; }
.g2-chip--gold { background: rgba(244, 182, 61, .14); color: var(--g2-gold); }
.g2-chip--red { background: rgba(255, 107, 91, .12); color: #ff978b; }
.g2-chip--blue { background: rgba(61, 123, 255, .14); color: #8fb2ff; }
a.g2-chip { cursor: pointer; }
a.g2-chip--muted:hover { color: var(--g2-text); }

/* Loading and empty states (with the panel card's phone padding below, as before). */
.g2-loading { display: grid; place-items: center; padding: 18px; }
.g2-empty { align-items: center; text-align: center; gap: 10px; padding: 40px 20px; }

/* The pay buttons' spinners (before the general busy button below, as before). */
.g2-paybtn.is-busy::after { content: ""; position: absolute; top: 50%; inset-inline-end: 18px; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2px solid rgba(11, 13, 16, .3); border-top-color: #0b0d10; animation: g2-spin .7s linear infinite; }
.g2-mbar__go.is-busy { position: relative; color: transparent !important; }
.g2-mbar__go.is-busy::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid rgba(11, 13, 16, .3); border-top-color: #0b0d10; animation: g2-spin .7s linear infinite; }
.g2-spinner { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: g2-spin .8s linear infinite; }

/* Steps on a line (order success; home Coming soon's .g2-timeline). */
.g2-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.g2-timeline__step { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: var(--g2-input); border: 1px solid var(--g2-line); }
.g2-timeline__dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--g2-line2); font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.g2-timeline__step.is-done .g2-timeline__dot { background: #3ddc84; border-color: #3ddc84; color: #0b0d10; }
.g2-timeline__text { display: flex; flex-direction: column; gap: 2px; }
.g2-timeline__text b { font-size: 13.5px; }
.g2-timeline__text small { font-size: 12px; color: var(--g2-muted); line-height: 1.45; }

/* FAQ card (listing pages, account). */
.g2-faq { gap: 0; }
.g2-faq .g2-card__title { margin-bottom: 8px; }
.g2-faq__item { border-top: 1px solid var(--g2-line); }
.g2-faq__item:first-of-type { border-top: 0; }
.g2-faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.g2-faq__item summary::-webkit-details-marker { display: none; }
.g2-faq__item summary::after { content: "+"; font-size: 18px; color: var(--g2-muted); flex: 0 0 auto; }
.g2-faq__item[open] summary::after { content: "−"; }
.g2-faq__item p { padding-bottom: 12px; font-size: 13px; color: var(--g2-muted); line-height: 1.6; }

/* My account → Sell orders: the items with their agreed prices (on the product page's "Sell yours" card too, as before). */
.g2-sellcard { display: grid; gap: 12px; margin-bottom: 16px; }
.g2-sellcard__items { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.g2-sellcard__items li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; color: var(--g2-text); }
.g2-sellcard__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g2-sellcard__price { flex: 0 0 auto; }
.g2-sellcard__total { padding-top: 8px; border-top: 1px solid var(--g2-line2); }

/* Forms. */
.g2-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
.g2-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.g2-field--wide { grid-column: 1 / -1; }
.g2-field__label { padding: 0; margin: 0; font-size: 12.5px !important; font-weight: 600; color: var(--g2-muted) !important; float: none; width: auto; }
.g2-form__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }

/* Text field / select (kit: every page). */
.g2-input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--g2-line2);
    background: var(--g2-input);
    color: var(--g2-text);
    font-size: 14px;
    box-shadow: none;
}

.g2-input::placeholder { color: var(--g2-dim); opacity: 1; font-size: 13px; }
.g2-input:focus { border-color: var(--g2-brand); outline: none; box-shadow: 0 0 0 3px rgba(149, 171, 82, .18); }
select.g2-input { padding-inline-end: 34px; }
.g2-input-wrap { position: relative; display: flex; align-items: center; }
.g2-input-wrap .g2-input { padding-inline-end: 110px; }
.g2-input-wrap .g2-chip { position: absolute; inset-inline-end: 10px; }

.g2-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.g2-pill { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--g2-line2); background: var(--g2-input); font-size: 13px; font-weight: 600; color: var(--g2-text) !important; cursor: pointer; }
.g2-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.g2-pill:has(input:checked) { border-color: var(--g2-brand); background: var(--g2-brand-soft); }
.g2-pill:has(input:focus-visible) { outline: 2px solid var(--g2-brand); outline-offset: 2px; }

/* Dialog (kit: every page; a native <dialog> opened with showModal()). --form = a 480px form dialog with a head row
   (.g2-dialog__head: title + × .g2-dialog__close) and a body; .g2-dialog__actions closes it at the bottom. */
.g2-dialog { max-width: min(360px, calc(100vw - 32px)); padding: 20px; border-radius: 16px; border: 1px solid var(--g2-line2); background: var(--g2-surface); color: var(--g2-text); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.g2-dialog::backdrop { background: rgba(11, 13, 16, .7); }
.g2-dialog p { margin: 0 0 16px; font-size: 15px; font-weight: 600; color: var(--g2-text); }
.g2-dialog__actions { display: flex; justify-content: flex-end; gap: 10px; }
.g2-dialog--form { width: 480px; max-width: calc(100vw - 32px); }
.g2-dialog--wide { width: 800px; max-width: calc(100vw - 32px); }
.g2-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.g2-dialog__title { margin: 0; font-size: 17px; font-weight: 700; color: var(--g2-text); }
.g2-dialog__close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--g2-muted); font-size: 16px; cursor: pointer; }
.g2-dialog__close:hover { background: var(--g2-raised); color: var(--g2-text); }
.g2-dialog__body { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.g2-dialog__body > :where(h1, h2, h3, h4, h5, p) { margin: 0; }
.g2-form--stack { grid-template-columns: 1fr; }

/* The top-up fields dialog (Products/TopupFields). */
.g2-topup__badge { display: grid; place-items: center; width: 65px; height: 65px; margin-inline: auto; padding: 8px; border-radius: 50%; background: firebrick; }
.g2-topup__lead { text-align: center; font-size: 15px; font-weight: 600; }

/* A Phosphor icon inside a chip is an icon, not the chip's status dot (.g2-chip i). */
.g2-chip i.ph { width: auto; height: auto; border-radius: 0; background: none; font-size: 14px; line-height: 1; }

/* A button that sent its form: a spinner, no second click (g2-checkout.js lockButton). */
.g2-btn.is-busy, a.g2-btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.g2-btn.is-busy::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid rgba(238, 240, 243, .35); border-top-color: var(--g2-text); animation: g2-spin .7s linear infinite; }
.g2-btn--primary.is-busy::after { border-color: rgba(11, 13, 16, .3); border-top-color: #0b0d10; }

/* The empty cart card (the rest of it is in pages/checkout.css "empty cart"). */
.g2-empty2 { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 16px; padding: 22px; }

@media (max-width: 767px) {
    .g2-empty2 { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 20px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .g2-btn.is-busy::after, .g2-pickup__near.is-busy .ph, .g2-asheet__mylocation.is-busy .ph, .g2-asheet__locate.is-busy .ph, .g2-locate__mylocation.is-busy svg { animation: none !important; }
}

/* ---------- floating buttons over the phone bar ---------- */
body.g2-mbar-shown { padding-bottom: var(--g2-mbar-h, 72px); }
body.g2-mbar-shown #chat_with_us { bottom: calc(var(--g2-mbar-h, 72px) + 12px) !important; }
body.g2-mbar-shown #scrollToTopBtn { bottom: calc(var(--g2-mbar-h, 72px) + 12px + var(--g2-chat-h) + 12px) !important; }

@media (max-width: 767px) {
    .g2-card { padding: 16px; border-radius: 16px; }
    .g2-timeline { grid-template-columns: minmax(0, 1fr); }
    .g2-timeline__step { flex-direction: row; align-items: center; }
    .g2-form { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .g2-okhero__icon, .g2-skeleton, .g2-paybtn.is-busy::after, .g2-mbar__go.is-busy::after, .g2-spinner { animation: none !important; }
}

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce) {
    .g2-header *, .g2-header, .g2-footer *, .g2-sec *, .g2-hs-bar, .g2-panel, .g2-drawer, .g2-drawer__backdrop, .g2-fade-in {
        animation: none !important;
        transition: none !important;
    }
}

.g2-field__help { font-size: 12px; color: var(--g2-dim); }

/* ---- from pages/home.css ---- */
/* The Pre-owned menu panel's strip (.g2-menustrip) sits above the titled columns. */
.g2-panel--titled > .g2-menustrip { margin-bottom: 14px; }