/* ==========================================================================================================
   g2.css - the Arena storefront layer (Phase 1: header, menu, drawer, footer and the homepage sections).
   Design: design/home/Phase1-Layout-Homepage.html. Linked last in both branches of _Layout.cshtml.

   Rules of this file:
   - every class starts with "g2-"; old theme classes are never restyled here (pages not redesigned yet keep their CSS);
   - 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.
   ========================================================================================================== */

/* ---------- 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 !important;
    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--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;
}

: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; } }

html body #scrollToTopBtn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    right: 15px;
    bottom: calc(15px + var(--g2-chat-h) + 12px);
    border-radius: 50%;
    border: 1px solid var(--g2-line2);
    background: var(--g2-surface);
    color: var(--g2-text);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    transition: opacity .2s ease, visibility .2s ease, background-color .15s;
}

html body #scrollToTopBtn:hover { background: var(--g2-raised); }
/* (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 !important;
    padding: 0 !important;
    background: rgba(15, 18, 21, .78) !important;
    border-bottom: 1px solid var(--g2-hair);
    color: var(--g2-text);
}

.g2-header .body_overlay { position: fixed; opacity: 1; transition: opacity .18s ease; }
.g2-header .body_overlay .overlay_bg { background-color: rgba(11, 13, 16, .72); }
@supports ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
    .g2-header .body_overlay .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 !important;
    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 !important;
        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); }
    .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);
}

.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 !important;
        text-align: start;
        color: var(--g2-text) !important;
    }

    .g2-nav__item:active { background: var(--g2-input) !important; }
    .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; }

/* ============================================================================================================
   HOMEPAGE: sections, intro, cards
   ============================================================================================================ */
.g2-home { position: relative; }

.g2-sec {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-block: 32px;
    color: var(--g2-text);
}

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

.g2-sec__heading { min-width: 0; }

.g2-sec .g2-sec__title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--g2-text) !important;
}

.g2-sec__sub { margin: 4px 0 0; font-size: 13.5px; color: var(--g2-muted); }

.g2-sec__actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

.g2-arrows { display: flex; gap: 6px; }

.g2-arrow {
    display: grid !important;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px !important;
    border: 1px solid var(--g2-line2) !important;
    background: var(--g2-input) !important;
    transition: opacity .15s;
}

.g2-arrow:disabled { opacity: .35; cursor: default; }

/* Tabs. Every panel sits in the same grid cell and the inactive ones are only invisible (inert, aria-hidden), so a
   section is always as tall as its tallest tab: picking a tab never moves the page. */
.g2-tabbed { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.g2-tabbed > [role="tabpanel"] { grid-row: 2; grid-column: 1; min-width: 0; }
.g2-sec [role="tabpanel"][aria-hidden="true"] { visibility: hidden; }

.g2-tabs { display: flex; gap: 6px; flex-wrap: nowrap; }

.g2-tab {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    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;
    color: var(--g2-muted) !important;
    white-space: nowrap;
    transition: background-color .15s, border-color .15s, color .15s;
}

.g2-tab[aria-selected="true"] { color: var(--g2-text) !important; border-color: var(--g2-brand) !important; background: var(--g2-brand-soft) !important; }
.g2-tab .g2-dot { width: 7px; height: 7px; }

/* New content after a tab change fades in (g2.js adds .g2-fade-in). */
.g2-fade-in { animation: g2-fade-up .22s ease-out; }

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

/* Intro */
.g2-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 16px 12px;
    text-align: center;
    color: var(--g2-text);
}

.g2-intro .g2-intro__title { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.25; color: var(--g2-text) !important; }
.g2-intro__text { margin: 0; max-width: 680px; font-size: 14px; line-height: 1.6; color: var(--g2-muted); }
.g2-intro__links-wrap { width: 100%; }
.g2-intro__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.g2-quicklink {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--g2-line2);
    background: var(--g2-input);
    font-size: 13px;
    white-space: nowrap;
    color: #dfe3e8 !important;
}

.g2-quicklink:hover { border-color: var(--g2-brand); }

/* Image frame: a fixed-ratio box, the art contained in it - never cropped. */
.g2-media {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.g2-media picture { display: contents; }

.g2-media__img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .45));
}

/* Every card type has a fixed frame: overflow hidden switches off the aspect-ratio box's "grow to fit the content",
   so a tall Switch case or a wide console never changes a card's height. */
.g2-card__frame, .g2-release__frame, .g2-deal__frame, .g2-vs__frame, .g2-urow__frame, .g2-budget__frame, .g2-bento__frame {
    overflow: hidden;
    min-height: 0;
}

/* Product card */
.g2-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    color: var(--g2-text) !important;
}

.g2-card__frame {
    display: block;
    aspect-ratio: 4 / 5;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--g2-line);
    background: var(--g2-surface);
    overflow: hidden;
    transition: border-color .2s, transform .2s;
}

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

/* The price row sits at the bottom of every card, so prices line up across a row even when a card has chips. */
.g2-card .g2-price-row { margin-top: auto; }

.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-sec .g2-card__title { min-height: 2.68em; }

.g2-card__category { font-size: 11.5px; color: var(--g2-dim); }

.g2-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    margin-top: 2px;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}

.g2-price-row__date { font-size: 12px; font-weight: 500; color: var(--g2-muted); }

@media (hover: hover) {
    .g2-card:hover .g2-card__frame,
    .g2-bento__small:hover,
    .g2-urow:hover,
    .g2-budget__item:hover,
    .g2-deal:hover { transform: translateY(-2px); border-color: var(--g2-line2); }

    .g2-media__img { transition: transform .3s ease; }

    .g2-card:hover .g2-media__img,
    .g2-bento__small:hover .g2-media__img,
    .g2-bento__big:hover .g2-media__img,
    .g2-release:hover .g2-media__img,
    .g2-deal:hover .g2-media__img,
    .g2-urow:hover .g2-media__img,
    .g2-budget__item:hover .g2-media__img { transform: scale(1.03); }
}

/* ---------- Theme 1, refreshed: the rail ---------- */
.g2-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 4 * 14px) / 5);
    gap: 14px;
    scroll-snap-type: x mandatory;
}

.g2-rail > * { scroll-snap-align: start; }

/* "More to explore" (squareGrid): square frames in a grid, 7 per row (9 from 1600px); the HTML holds 9, the extra
   ones show only where they fit. Phones keep the sideways row (about 2.5 cards). */
.g2-rail.g2-rail--square {
    grid-auto-flow: row;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    scroll-snap-type: none;
    -webkit-mask-image: none;
    mask-image: none;
}

.g2-rail--square > :nth-child(n + 8) { display: none; }
.g2-rail--square .g2-card__frame { aspect-ratio: 1 / 1; }

/* ---------- Theme 3, refreshed: the colour panel ---------- */
.g2-cpanel {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
    padding: 26px;
    border-radius: 24px;
    border: 1px solid color-mix(in srgb, var(--g2-panel-tint) 25%, transparent);
    background: radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--g2-panel-tint) 22%, transparent), transparent 65%), linear-gradient(160deg, #1a1215, #111317);
}

[dir="rtl"] .g2-cpanel { background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--g2-panel-tint) 22%, transparent), transparent 65%), linear-gradient(200deg, #1a1215, #111317); }

.g2-cpanel__copy { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.g2-cpanel__mark { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: color-mix(in srgb, var(--g2-panel-tint) 60%, #fff); }
[dir="rtl"] .g2-cpanel__mark { letter-spacing: 0; }
.g2-sec .g2-cpanel__title { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.15; color: var(--g2-text) !important; }
.g2-cpanel__text { margin: 0; font-size: 13.5px; line-height: 1.6; color: #d5c9cb; }
.g2-cpanel__button { align-self: flex-start; background: #fff !important; color: #c4142a !important; }
.g2-cpanel__button:hover { background: #ffe5e7 !important; }
/* 4 cards below 1600px, 6 from 1600px (the 1600px block). */
.g2-cpanel__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.g2-cpanel__cards > :nth-child(n + 5) { display: none; }
.g2-cpanel .g2-card__frame { background: rgba(0, 0, 0, .25); border-color: rgba(255, 255, 255, .06); }

/* ---------- Theme 12: new arrivals (bento) - fixed row heights ---------- */
.g2-bento {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, 196px);
    gap: 14px;
}

.g2-bento__big {
    position: relative;
    grid-column: span 2;
    grid-row: span 2;
    display: grid;
    grid-template-columns: 40% minmax(0, 1fr);
    gap: 22px;
    padding: 22px;
    border-radius: 22px;
    border: 1px solid var(--g2-line);
    overflow: hidden;
    --g2-stage: var(--g2-brand);
    background: radial-gradient(70% 80% at 25% 45%, color-mix(in srgb, var(--g2-stage) 34%, transparent), transparent 70%), linear-gradient(160deg, #121822, #0e1116);
}

[dir="rtl"] .g2-bento__big { background: radial-gradient(70% 80% at 75% 45%, color-mix(in srgb, var(--g2-stage) 34%, transparent), transparent 70%), linear-gradient(200deg, #121822, #0e1116); }

.g2-stage--ps { --g2-stage: var(--g2-ps); }
.g2-stage--nin { --g2-stage: var(--g2-nin); }
.g2-stage--xb { --g2-stage: var(--g2-xb); }
.g2-stage--pc { --g2-stage: var(--g2-pc); }

.g2-bento__big .g2-bento__frame { display: block; height: 100%; min-height: 0; }

.g2-bento__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}

.g2-bento__text .g2-chip { align-self: flex-start; }

.g2-sec .g2-bento__title { font-size: 24px; font-weight: 800; line-height: 1.2; max-height: 2.4em; letter-spacing: -.02em; }
.g2-bento__title a { color: inherit !important; }

/* The title's link covers the whole tile; the edition chips sit above it. */
.g2-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.g2-bento__desc {
    margin: 0;
    min-height: 3.2em;
    font-size: 13.5px;
    line-height: 1.6;
    color: #c9ced4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.g2-bento__text .g2-hs-wrap { position: relative; z-index: 2; }
.g2-editions { display: flex; flex-wrap: nowrap; gap: 6px; }

.g2-edition {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    height: 34px;
    padding: 0 12px !important;
    border-radius: 11px !important;
    border: 1px solid var(--g2-line2) !important;
    background: rgba(11, 13, 16, .5) !important;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

.g2-edition.is-selected { border-color: var(--g2-brand) !important; }
.g2-bento__price { position: relative; z-index: 2; pointer-events: none; }
.g2-bento__price .g2-price-row { font-size: 24px; }

.g2-bento__small {
    display: grid;
    grid-template-columns: 38% minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid var(--g2-line);
    background: var(--g2-surface);
    overflow: hidden;
    color: var(--g2-text) !important;
    transition: border-color .2s, transform .2s;
}

.g2-bento__small .g2-bento__frame { display: block; height: 100%; min-height: 0; }

/* Small tiles: the category on one line (ellipsis), the price pinned to the bottom of the tile. */
.g2-bento__small { align-items: stretch; }
.g2-bento__small .g2-card__body { align-self: stretch; min-height: 0; }
.g2-bento__small .g2-card__category { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g2-bento__small .g2-price-row { margin-top: auto; }

/* Platform chips of a game sold in several editions (one card per game: _G2EditionChips): one line, the far edge
   fading out when they do not fit. */
.g2-editions-line {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin-top: 2px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
}

[dir="rtl"] .g2-editions-line {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 22px), transparent);
}

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

.g2-edition-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    border: 1px solid var(--g2-line2);
    background: var(--g2-input);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    color: var(--g2-muted);
    white-space: nowrap;
}

.g2-edition-chip .g2-dot { width: 6px; height: 6px; }

/* "Shop by platform" (home_platforms.css): the same title as the g2 sections. */
section.hp .hp__title { font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: none !important; }

/* ---------- Theme 13: deals ---------- */
.g2-deal {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    align-items: center;
    gap: 26px;
    padding: 18px 26px;
    border-radius: 22px;
    border: 1px solid rgba(255, 107, 91, .3);
    background: radial-gradient(60% 120% at 85% 50%, rgba(255, 107, 91, .16), transparent 70%), var(--g2-surface);
    color: var(--g2-text) !important;
    transition: transform .2s, border-color .2s;
}

[dir="rtl"] .g2-deal { background: radial-gradient(60% 120% at 15% 50%, rgba(255, 107, 91, .16), transparent 70%), var(--g2-surface); }

.g2-deal__frame { display: block; aspect-ratio: 3 / 4; }
.g2-deal__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.g2-sec .g2-deal__title { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.25; color: var(--g2-text) !important; }
.g2-deal__prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 4px; font-size: 28px; font-weight: 800; }
.g2-deal__prices .g2e-price--was { font-size: 15px; }
.g2-deal__ends { font-size: 12px; color: var(--g2-muted); }
.g2-deal__off { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.g2-deal__percent { font-size: 64px; font-weight: 800; line-height: .9; letter-spacing: -.03em; color: var(--g2-sale); }

/* Under the banner: 5 cards below 1600px, 7 from 1600px (the 1600px block), 4 in 2 columns on phones. */
.g2-deals { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.g2-deals > :nth-child(n + 6) { display: none; }

/* ---------- Theme 14: best sellers, top 10 ---------- */
.g2-top {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.g2-top__item { position: relative; display: flex; min-width: 0; }
.g2-top__item > .g2-card { flex: 1; }

.g2-top__rank {
    position: absolute;
    top: -10px;
    inset-inline-start: -6px;
    z-index: 3;
    font-family: 'Poppins', system-ui, sans-serif !important;
    font-size: 58px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.05em;
    color: var(--g2-page);
    -webkit-text-stroke: 2px #59616c;
    pointer-events: none;
}

.g2-top__item--podium .g2-top__rank { -webkit-text-stroke-color: var(--g2-brand); }
.g2-top__expand { display: none !important; }

/* ---------- Theme 15: coming soon timeline ---------- */
.g2-timeline { padding-bottom: 10px; }
.g2-timeline__inner { display: flex; min-width: max-content; }
/* Every release card is as tall as the tallest one (months stretch, their lists fill them, the cards fill the list
   items); the "Pre-order" chip sits at the bottom. */
.g2-month { display: flex; flex-direction: column; padding-inline-end: 18px; }
.g2-month__items { flex: 1 1 auto; }
.g2-month__items > li { display: flex; }
.g2-release > .g2-chip { margin-top: auto; }
.g2-month__head { display: flex; align-items: center; height: 34px; }

.g2-month__pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(244, 182, 61, .35);
    background: rgba(244, 182, 61, .12);
    font-size: 13px;
    font-weight: 700;
    color: var(--g2-gold);
    white-space: nowrap;
}

.g2-month--tba .g2-month__pill { background: var(--g2-input); border-color: var(--g2-line2); color: var(--g2-muted); }
.g2-month__track { position: relative; height: 30px; }

.g2-month__track::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 14px;
    height: 2px;
    background: linear-gradient(to right, var(--g2-gold), rgba(244, 182, 61, .35));
}

[dir="rtl"] .g2-month__track::before { background: linear-gradient(to left, var(--g2-gold), rgba(244, 182, 61, .35)); }
.g2-month--tba .g2-month__track::before { background: repeating-linear-gradient(to right, var(--g2-line2) 0 8px, transparent 8px 14px); }
.g2-month__items { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; }

.g2-release {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 186px;
    color: var(--g2-text) !important;
}

.g2-release__dot {
    position: absolute;
    top: -23px;
    inset-inline-start: 22px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--g2-page);
    border: 3px solid var(--g2-gold);
    box-shadow: 0 0 0 4px rgba(244, 182, 61, .15);
}

.g2-month--tba .g2-release__dot { border-color: var(--g2-dim); box-shadow: none; }
.g2-release__when { display: flex; align-items: baseline; gap: 8px; min-height: 26px; }
/* Only the next release is gold (its day number and its frame); the others are white on a plain frame. */
.g2-release__day { font-family: 'Poppins', system-ui, sans-serif; font-size: 26px; font-weight: 800; line-height: 1; color: var(--g2-text); }
.g2-release.is-next .g2-release__day { color: var(--g2-gold); }
.g2-release__month { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--g2-gold); }
[dir="rtl"] .g2-release__month { letter-spacing: 0; }
.g2-release__countdown { font-size: 11.5px; color: var(--g2-muted); min-height: 1.4em; }

.g2-release__frame {
    display: block;
    aspect-ratio: 4 / 5;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--g2-line);
    background: var(--g2-surface);
    transition: border-color .2s;
}

.g2-release.is-next .g2-release__frame { background: radial-gradient(80% 60% at 50% 40%, rgba(244, 182, 61, .08), transparent 75%), var(--g2-surface); border-color: rgba(244, 182, 61, .5); box-shadow: 0 0 0 1px rgba(244, 182, 61, .2), 0 20px 40px rgba(0, 0, 0, .35); }
.g2-release .g2-chip { align-self: flex-start; }

/* ---------- Theme 16: gift cards & top-ups ---------- */
/* Desktop: brand tiles | the picker card, both aligned to the top and as tall as their content. No fixed height and
   no inner scrolling: the wheel always scrolls the page over this section. The card is about 2 rows of amounts tall
   (at most 8 tiles until "All amounts"), so switching brand or region barely changes it. */
/* Round 3 (option A): both halves stretch to the same height - the compact picker sets it and the brand tiles grow
   or shrink to fill it (grid rows 1fr), so the two halves end on the same line. */
.g2-gift {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: stretch;
    gap: 18px;
}

.g2-gift__brands-wrap { display: flex; flex-direction: column; }

.g2-gift .g2-gift__brands {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 10px;
    padding: 0;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}

.g2-gift__brand {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    padding: 8px 6px;
    border-radius: 16px;
    border: 1px solid var(--g2-line);
    background: radial-gradient(90% 90% at 50% 0%, color-mix(in srgb, var(--g2-tone, var(--g2-brand)) 22%, transparent), transparent 70%), var(--g2-surface);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--g2-text) !important;
    text-align: center;
    transition: border-color .15s;
}

.g2-gift__brand:hover { border-color: var(--g2-line2); }
.g2-gift__brand.is-selected { border-color: var(--g2-brand); box-shadow: 0 0 0 1px var(--g2-brand); }

.g2-gift__brand-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-width: 100%;
    overflow: hidden;
}

/* The brand's category image; the letter badge shows until it loads and stays when it fails (.is-missing). */
.g2-gift__logo { position: relative; display: grid; place-items: center; width: 44px; height: 44px; }
.g2-gift__logo > * { grid-area: 1 / 1; }
.g2-gift__logo .g2-gift__badge { width: 34px; height: 34px; border-radius: 10px; font-size: 13px; }
.g2-gift__logo-img { position: relative; width: 44px; height: 44px; border-radius: 10px; object-fit: contain; }
.g2-gift__logo.is-missing .g2-gift__logo-img { display: none; }
.g2-gift__logo.is-loaded .g2-gift__badge { visibility: hidden; }
.g2-tone-tile--ps { --g2-tone: var(--g2-ps); }
.g2-tone-tile--xb { --g2-tone: var(--g2-xb); }
.g2-tone-tile--nin { --g2-tone: var(--g2-nin); }
.g2-tone-tile--steam { --g2-tone: #66c0f4; }
.g2-tone-tile--apple { --g2-tone: #d9dde2; }
.g2-tone-tile--google { --g2-tone: #34a853; }
.g2-tone-tile--roblox { --g2-tone: #e2231a; }
.g2-tone-tile--pubg { --g2-tone: #f2a900; }
.g2-tone-tile--freefire { --g2-tone: #ff7a00; }
.g2-tone-tile--valorant { --g2-tone: #ff4655; }
.g2-tone-tile--fcpoints { --g2-tone: #2ad18a; }
.g2-tone-tile--razer { --g2-tone: #44d62c; }

.g2-gift__badge {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--g2-tone, var(--g2-brand));
    color: #0b0d10;
    font-size: 12px;
    font-weight: 800;
}

.g2-gift__card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid var(--g2-line);
    background: var(--g2-surface);
}

.g2-gift__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.g2-gift__name { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; }
.g2-gift__name .g2-square { width: 12px; height: 12px; border-radius: 4px; }
.g2-gift__head, .g2-gift__everywhere, .g2-gift__field--regions, .g2-gift__buy { flex: 0 0 auto; }
.g2-gift__everywhere { align-self: flex-start; }
.g2-gift__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.g2-gift__field[hidden], .g2-gift__everywhere[hidden] { display: none !important; }
.g2-gift__regions { display: flex; flex-wrap: nowrap; gap: 8px; }


.g2-gift__region {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    height: 34px;
    padding: 0 12px !important;
    border-radius: 10px !important;
    border: 1px solid var(--g2-line2) !important;
    background: var(--g2-input) !important;
    font-size: 13px;
    font-weight: 600;
    color: var(--g2-muted) !important;
}

.g2-gift__region.is-selected { border-color: var(--g2-brand) !important; color: var(--g2-text) !important; background: var(--g2-brand-soft) !important; }
.g2-gift__amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

/* 50px tiles: the face value and the price side by side. */
.g2-gift__amount {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 50px;
    padding: 0 12px !important;
    border-radius: 12px !important;
    border: 1px solid var(--g2-line2) !important;
    background: var(--g2-input) !important;
    text-align: start;
    min-width: 0;
}

.g2-gift__amount.is-selected { border-color: var(--g2-brand) !important; background: var(--g2-brand-soft) !important; }

/* More than 8 amounts: the 7 popular ones, then "All amounts (N options)", which shows the rest in place. */
.g2-gift__amounts:not(.is-expanded) > .g2-gift__amount.is-extra { display: none !important; }
.g2-gift__more { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; border-style: dashed !important; background: transparent !important; }
.g2-gift__more .g2-gift__more-sub { white-space: nowrap; }
.g2-gift__more .g2-gift__face { font-size: 13.5px; }
.g2-gift__more-sub { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--g2-brand); }
.g2-gift__face { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 800; direction: ltr; unicode-bidi: isolate; }

/* An amount without a face value shows its title: 2 lines at most, the whole title in the tooltip. */
.g2-gift__amount--titled .g2-gift__face {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
    direction: inherit;
}
.g2-gift__amount .g2e-price { flex: 0 0 auto; font-size: 11.5px; color: var(--g2-muted); white-space: nowrap; }
.g2-gift__amount--titled .g2-gift__face { flex: 1 1 auto; min-width: 0; }
.g2-gift__amount .g2e-price__int { font-weight: 600; }

.g2-gift__buy {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--g2-line);
}

.g2-gift__chosen { display: flex; flex-direction: column; min-width: 0; }
.g2-gift__chosen-name { font-size: 12px; color: var(--g2-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g2-gift__chosen-price { font-size: 22px; font-weight: 800; }
.g2-gift__add { flex: 0 0 auto; margin-inline-start: auto; height: 44px; padding: 0 24px; }

/* ---------- Theme 17: pre-owned, used vs new ---------- */
.g2-used { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.g2-used--no-hero { grid-template-columns: 1fr; }

.g2-used__hero {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid var(--g2-line);
    background: radial-gradient(60% 70% at 75% 40%, rgba(61, 220, 132, .10), transparent 70%), var(--g2-surface);
}

.g2-used__heading { display: flex; flex-direction: column; gap: 4px; }
.g2-sec .g2-used__title { margin: 0; font-size: 20px; font-weight: 700; color: var(--g2-text) !important; }
.g2-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.g2-vs__side { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.g2-vs__frame { display: block; width: 100%; max-width: 132px; aspect-ratio: 3 / 4; }
.g2-vs__side--new .g2-vs__frame { opacity: .8; }
.g2-vs__price { font-size: 20px; font-weight: 800; }
.g2-vs__price--new .g2e-price--was { font-size: 17px; text-decoration-thickness: 2px; }

.g2-vs__mid {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--g2-raised);
    border: 1px solid var(--g2-line2);
    font-size: 12px;
    font-weight: 800;
    color: var(--g2-muted);
}

.g2-tag { padding: 4px 10px; border-radius: 7px; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
[dir="rtl"] .g2-tag { letter-spacing: 0; }
.g2-tag--new { background: rgba(255, 255, 255, .08); color: var(--g2-muted); border: 1px solid var(--g2-line2); }
.g2-tag--used { background: rgba(61, 220, 132, .14); color: #7be8a8; border: 1px solid rgba(61, 220, 132, .35); }

.g2-used__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-top: 12px; border-top: 1px solid var(--g2-line); }
.g2-used__saving { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.g2-used__saving-label { width: 100%; font-size: 12px; color: var(--g2-muted); }
.g2-used__saving-amount { font-size: 26px; font-weight: 800; color: #7be8a8; }
.g2-used__buttons { margin-inline-start: auto; display: flex; gap: 8px; }

.g2-used__rows { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 10px; }
.g2-used--no-hero .g2-used__rows { grid-template-columns: 1fr 1fr; }

.g2-urow {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid var(--g2-line);
    background: var(--g2-surface);
    color: var(--g2-text) !important;
    transition: border-color .2s, transform .2s;
}

.g2-urow__frame { display: block; aspect-ratio: 1; }
/* Rows 5-8 show from 1600px only (2 columns of 4 there). */
.g2-urow--wide { display: none; }
.g2-urow__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.g2-sec .g2-urow__title { font-size: 13px; }
.g2-urow__price { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; }
.g2-urow__new { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 11.5px; color: var(--g2-dim); }
.g2-urow__note { font-size: 11.5px; color: var(--g2-dim); }

/* ---------- Theme 18: games on a budget ---------- */
.g2-budget { display: flex; flex-direction: column; gap: 12px; }
.g2-budget__limits { display: flex; gap: 6px; flex-wrap: nowrap; }

.g2-limit {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 12px !important;
    border-radius: 8px !important;
    border: 1px solid var(--g2-line2) !important;
    background: transparent !important;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--g2-muted) !important;
    white-space: nowrap;
}

.g2-limit.is-selected { background: var(--g2-raised) !important; color: var(--g2-text) !important; border-color: var(--g2-muted) !important; }
/* Mini cards in ONE row (8 on every desktop width, 4 in 2 columns on phones): the same fixed 3:4 frame on every card
   (the image fitted inside), the title on 2 lines, then the price with a "Used" chip when used. */
.g2-budget__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }

.g2-budget__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid var(--g2-line);
    background: var(--g2-surface);
    color: var(--g2-text) !important;
    transition: border-color .2s, transform .2s;
}

.g2-budget__item[hidden] { display: none; }
.g2-budget__frame { display: block; aspect-ratio: 3 / 4; padding: 8px; border-radius: 10px; background: #0f1215; }
.g2-budget__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; min-width: 0; }
.g2-sec .g2-budget__title { min-height: 2.68em; font-size: 12.5px; }
.g2-budget__price { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; font-size: 14px; font-weight: 700; }

/* ---------- Brands: logo wall ---------- */
.g2-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }

/* Fixed 76px tiles; the logo is contained in at most 70% of the width and 40px of height, so a big logo file can
   never spill out of its tile. Greyed, full colour on hover. */
.g2-logos__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 76px;
    padding: 8px;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--g2-line);
    background: var(--g2-surface);
    transition: border-color .2s;
}

.g2-logos__item picture { display: contents; }

.g2-logos__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 70%;
    max-height: 40px;
    object-fit: contain;
    filter: grayscale(1) brightness(1.6) opacity(.55);
    transition: filter .2s;
}

.g2-logos__item:hover { border-color: var(--g2-line2); }
.g2-logos__item:hover .g2-logos__img { filter: none; }

/* ---------- Latest news (home, lower half): one large card beside three compact ones ---------- */
.g2-hnews__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; align-items: stretch; }
.g2-hnews__lead { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 16px; border: 1px solid var(--g2-line); background: var(--g2-surface); color: var(--g2-text) !important; transition: border-color .15s, transform .2s; }
.g2-hnews__lead:hover, .g2-hnews__item:hover { border-color: #2e333b; }
.g2-hnews__media, .g2-hnews__thumb { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--g2-input); }
.g2-hnews__media img, .g2-hnews__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.g2-hnews__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.g2-hnews__lead .g2-hnews__body { padding: 18px 20px 20px; }
.g2-hnews__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.g2-hnews__chip--news { background: rgba(185, 204, 116, .12); color: #b9cc74; }
.g2-hnews__chip--review { background: rgba(244, 182, 61, .14); color: var(--g2-gold); }
.g2-hnews__chip--article { background: rgba(227, 166, 255, .12); color: #e3a6ff; }
.g2-hnews__chip--top { background: var(--g2-gold); color: #0b0d10; }
.g2-hnews .g2-hnews__title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--g2-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.g2-hnews .g2-hnews__lead .g2-hnews__title { font-size: 22px; line-height: 1.25; }
.g2-hnews__lead:hover .g2-hnews__title, .g2-hnews__item:hover .g2-hnews__title { color: #cfe08f; }
.g2-hnews__text { font-size: 14px; line-height: 1.55; color: var(--g2-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g2-hnews__date { font-size: 12px; color: var(--g2-dim); }
.g2-hnews__list { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.g2-hnews__item { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 14px; align-items: center; min-width: 0; padding: 10px; border-radius: 14px; border: 1px solid var(--g2-line); background: var(--g2-surface); color: var(--g2-text) !important; transition: border-color .15s; }
.g2-hnews__thumb { border-radius: 10px; }
.g2-hnews__ph { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, #1a1e25, #0d1014 70%); color: #5d6570; font-family: 'Poppins', system-ui, sans-serif !important; font-size: 14px; font-weight: 800; direction: ltr; box-shadow: inset 0 -3px 0 #b9cc74; }
.g2-hnews__ph b { color: var(--g2-brand); }

@media (max-width: 991px) {
    .g2-hnews__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .g2-hnews .g2-hnews__lead .g2-hnews__title { font-size: 19px; }
}

/* Phones: the three compact cards become a sideways row (native scrolling, the page itself never blocked). */
@media (max-width: 767px) {
    .g2-hnews__list { display: flex; grid-template-rows: none; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; margin-inline: calc(-1 * var(--g2-wrap-pad)); padding-inline: var(--g2-wrap-pad); scrollbar-width: none; }
    .g2-hnews__list::-webkit-scrollbar { display: none; }
    .g2-hnews__item { flex: 0 0 240px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; scroll-snap-align: start; }
}

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

/* ---------- Guides & service strip ---------- */
.g2-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

/* Compact horizontal cards, about 96px tall: a small icon tile (or the article's own image) beside the "Guide" chip,
   the title and "Read". */
.g2-guide {
    display: flex;
    align-items: stretch;
    min-height: 96px;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--g2-line);
    background: var(--g2-surface);
    color: var(--g2-text) !important;
}

.g2-guide__art { display: grid; place-items: center; flex: 0 0 96px; width: 96px; color: rgba(255, 255, 255, .75); }
.g2-guide__art--1 { background: linear-gradient(135deg, #2c4319, #101317); }
.g2-guide__art--2 { background: linear-gradient(135deg, #1b2c4d, #101317); }
.g2-guide__art--3 { background: linear-gradient(135deg, #4a3315, #101317); }
.g2-guide__art--image { background: var(--g2-raised); }
.g2-guide__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.g2-guide__body { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding: 10px 14px; }
.g2-guide__body .g2-chip { align-self: flex-start; }
.g2-sec .g2-guide__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--g2-text) !important;
}

.g2-services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }

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

.g2-service__icon {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--g2-brand-soft);
    color: var(--g2-brand);
}

.g2-service__text { display: flex; flex-direction: column; min-width: 0; }
.g2-service__title { font-size: 13.5px; font-weight: 700; }
.g2-service__sub { font-size: 12px; color: var(--g2-muted); }

/* ---------- wide screens (1600px+): more cards per row, never bigger cards ----------
   Cards stay about 180-250px wide at every desktop width (the page is at most 1850px wide, .g2-wrap). */
@media (min-width: 1600px) {
    .g2-rail { grid-auto-columns: calc((100% - 6 * 14px) / 7); }
    .g2-rail.g2-rail--square { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .g2-rail--square > :nth-child(n + 8) { display: flex; }
    .g2-top { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 18px 12px; }
    .g2-top__rank { font-size: 44px; }
    .g2-deals { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .g2-deals > :nth-child(n + 6) { display: flex; }
    .g2-cpanel__cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .g2-cpanel__cards > :nth-child(n + 5) { display: flex; }
    .g2-logos { grid-template-columns: repeat(12, minmax(0, 1fr)); }

    /* Gift cards: 6 brands per row, the 8 amount tiles in one row (face value over the price). */
    .g2-gift .g2-gift__brands { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .g2-gift__amounts { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .g2-gift__amount { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; height: 56px; }
    .g2-gift__more .g2-gift__face { font-size: 12.5px; white-space: nowrap; }

    /* Pre-owned: the title on the label's line, bigger covers, 8 rows in 2 columns of 4. */
    .g2-used:not(.g2-used--no-hero) { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
    .g2-used__heading { flex-direction: row; align-items: baseline; gap: 16px; }
    .g2-vs__frame { max-width: 190px; }
    .g2-used__rows { grid-template-columns: 1fr 1fr; }
    .g2-urow--wide { display: grid; }
}

/* ---------- narrower desktops (768-1099) ---------- */
@media (min-width: 768px) and (max-width: 1099px) {
    .g2-cols--games { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .g2-bento__big { grid-template-columns: 1fr; padding: 16px; }
    .g2-bento__big .g2-bento__frame { display: none; }
    .g2-deals, .g2-top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .g2-deals > :nth-child(n + 5) { display: none; }
    .g2-deal { grid-template-columns: 110px minmax(0, 1fr) auto; gap: 18px; }
    .g2-deal__percent { font-size: 48px; }
    .g2-rail { grid-auto-columns: calc((100% - 3 * 14px) / 4); }
    .g2-rail.g2-rail--square { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .g2-rail--square > :nth-child(n + 6) { display: none; }
    .g2-gift { grid-template-columns: 1fr; }
    .g2-gift .g2-gift__brands { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .g2-cpanel { grid-template-columns: 200px minmax(0, 1fr); }
    .g2-cpanel__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .g2-cpanel__cards > :nth-child(n + 4) { display: none; }
    .g2-budget__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .g2-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .g2-logos > :nth-child(n + 9) { display: none; }
    .g2-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================================================================
   PHONES (< 768px)
   ============================================================================================================ */
@media (max-width: 767px) {
    .g2-sec { gap: 14px; padding-block: 22px; }
    .g2-sec .g2-sec__title, section.hp .hp__title { font-size: 19px; }
    .g2-sec__sub { font-size: 12.5px; }
    .g2-arrows { display: none; }

    .g2-intro { padding: 18px 16px 8px; }
    .g2-intro .g2-intro__title { font-size: 18px; }
    .g2-intro__text { font-size: 12.5px; }
    .g2-intro__links { flex-wrap: nowrap; justify-content: flex-start; }

    .g2-sec .g2-card__title { font-size: 12.5px; }
    .g2-price-row { font-size: 15px; }
    .g2-card__frame { padding: 10px; }

    /* Theme 1: about 2.3 cards */
    .g2-rail { grid-auto-columns: 42%; gap: 10px; }
    /* "More to explore": the sideways row again, about 2.5 cards */
    .g2-rail.g2-rail--square { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 38%; overflow-x: auto; scroll-snap-type: x mandatory; -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-rail.g2-rail--square { -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-rail--square > :nth-child(n) { display: flex; }

    /* Theme 3: the button is a small pill beside the title; the cards in 2 columns */
    .g2-cpanel { grid-template-columns: 1fr; gap: 14px; padding: 18px; }

    .g2-cpanel__copy {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "mark button" "title button" "text text";
        column-gap: 12px;
        row-gap: 6px;
    }

    .g2-cpanel__mark { grid-area: mark; }
    .g2-sec .g2-cpanel__title { grid-area: title; font-size: 22px; }
    .g2-cpanel__text { grid-area: text; font-size: 13px; }
    .g2-cpanel__button { grid-area: button; align-self: center; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; }
    .g2-cpanel__cards { grid-template-columns: 1fr 1fr; gap: 10px; }
    .g2-cpanel__cards > :nth-child(n + 5) { display: none; }

    /* Theme 12: the big tile horizontal (image beside text, no description), smalls 2×2 - fixed heights */
    .g2-bento { grid-template-columns: 1fr 1fr; grid-template-rows: 220px repeat(2, 236px); gap: 10px; }
    .g2-bento__big { grid-column: span 2; grid-row: auto; grid-template-columns: 38% minmax(0, 1fr); gap: 14px; padding: 14px; }
    .g2-bento__desc { display: none; }
    .g2-sec .g2-bento__title { font-size: 17px; }
    .g2-bento__price .g2-price-row { font-size: 19px; }
    .g2-bento__small { grid-template-columns: 1fr; grid-template-rows: 120px auto; align-items: start; padding: 10px; gap: 8px; }
    /* The tile's height is fixed: with edition chips the chips replace the category line (they name the platforms),
       one row of chips at most, so the price stays inside the tile. */
    .g2-bento__small .g2-card__body { gap: 3px; }
    .g2-bento__small .g2-card__body > * { flex-shrink: 0; }
    .g2-bento__small .g2-card__body:has(.g2-editions-line) .g2-card__category { display: none; }
    .g2-bento__small .g2-editions-line { flex-wrap: nowrap; overflow: hidden; margin-top: 0; }
    .g2-bento__small .g2-edition-chip { height: 18px; }

    /* Theme 13: compact banner, then 4 cards in 2 columns */
    .g2-deal { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "image info" "image off"; gap: 6px 14px; padding: 14px; }
    .g2-deal__frame { grid-area: image; }
    .g2-deal__info { grid-area: info; }
    .g2-deal__off { grid-area: off; flex-direction: row; align-items: center; justify-content: flex-start; }
    .g2-deal__percent { font-size: 28px; }
    .g2-sec .g2-deal__title { font-size: 16px; }
    .g2-deal__prices { font-size: 20px; }
    .g2-deals { grid-template-columns: 1fr 1fr; gap: 10px; }
    .g2-deals > :nth-child(n + 5) { display: none; }

    /* Theme 14: rows 1-5, "Show 6 to 10" expands the rest */
    .g2-top { grid-template-columns: 1fr; gap: 0; border-radius: 16px; border: 1px solid var(--g2-line); overflow: hidden; }
    .g2-top__item { border-top: 1px solid var(--g2-line); background: var(--g2-surface); }
    .g2-top__item:first-child { border-top: 0; }
    .g2-top:not(.is-expanded) .g2-top__item--more { display: none; }
    .g2-top__expand { display: inline-flex !important; align-self: stretch; }

    .g2-top__rank {
        top: 50%;
        inset-inline-start: 12px;
        width: 34px;
        transform: translateY(-50%);
        font-size: 22px;
        letter-spacing: 0;
        text-align: center;
        color: #4a525d;
        -webkit-text-stroke: 0;
    }

    .g2-top__item--podium .g2-top__rank { color: var(--g2-brand); }
    .g2-top .g2-card { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 12px; padding-inline-start: 58px; }
    .g2-top .g2-card__frame { aspect-ratio: 1; padding: 4px; border-radius: 10px; }
    .g2-top .g2-card__category { display: none; }
    .g2-top .g2-card__title { min-height: 0; font-size: 13px; }

    /* Theme 15 */
    .g2-release { width: 150px; }

    /* Theme 16: brands and regions as sideways rows; the card grows with its content (no inner scrolling). */
    .g2-gift { grid-template-columns: 1fr; gap: 12px; }
    .g2-gift .g2-gift__brands { display: flex; overflow-x: auto; overflow-y: hidden; padding: 0 0 8px; gap: 8px; }
    .g2-gift__brands-wrap .g2-hs { -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-gift__brands-wrap .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-gift__brand { flex: 0 0 92px; min-height: 92px; font-size: 11.5px; }
    .g2-gift__card { padding: 16px; }
    .g2-gift__amounts { grid-template-columns: 1fr 1fr; }
    .g2-gift__amount { height: 48px; }
    .g2-gift__add { padding: 0 16px; }

    /* Theme 17: saving centred on one line, the two buttons side by side, equal width */
    .g2-used { grid-template-columns: 1fr; gap: 12px; }
    .g2-used__hero { padding: 16px; }
    .g2-vs__frame { max-width: 104px; }
    .g2-used__bar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .g2-used__saving { grid-column: 1 / -1; justify-content: center; }
    .g2-used__saving-label { width: auto; font-size: 13px; }
    .g2-used__saving-amount { font-size: 22px; }
    .g2-used__buttons { display: contents; }
    .g2-used__buttons .g2-btn { width: 100%; }
    .g2-used__rows, .g2-used--no-hero .g2-used__rows { grid-template-columns: 1fr; grid-auto-rows: auto; }

    /* Theme 18: 4 mini cards, 2 by 2 */
    .g2-budget__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .g2-budget__item--extra { display: none; }

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

    .g2-guides { grid-template-columns: 1fr; gap: 10px; }
    .g2-guide { flex-direction: row; }
    .g2-guide__art { flex: 0 0 96px; height: auto; }
    .g2-guide__body { padding: 12px; }
    .g2-sec .g2-guide__title { font-size: 13px; }

    .g2-services { grid-template-columns: 1fr 1fr; gap: 8px; }
    .g2-service { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; }
}

/* ============================================================================================================
   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;
}

.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 !important;
    }

    .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; }
}

/* ============================================================================================================
   PRODUCT INDEX (Products/Index: category, search, brand and offers listings - Phase 2)
   The page header (.g2-ihead), the listing (.g2-index): one filter panel (sticky sidebar from 1200px, a bottom sheet
   below), the toolbar, the cards (ListProducts.cshtml), "Load more" and the pages, the About card, no results.
   ============================================================================================================ */
.g2-ihead { display: flex; flex-direction: column; gap: 12px; padding-block: 18px 6px; color: var(--g2-text); }

.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); }

.g2-ihead__title { display: flex; flex-direction: column; gap: 8px; }
.g2-ihead__h { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.g2-ihead .g2-ihead__h1 { margin: 0; font-size: 32px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--g2-text) !important; }
.g2-ihead__logo { display: block; width: auto; height: 40px; max-width: 120px; object-fit: contain; }

/* Round 4: no product count next to the H1 (long category names); phones show a back link to the parent category
   instead of the breadcrumb (the BreadcrumbList JSON-LD is unchanged). */
.g2-iback { display: none; align-items: center; gap: 6px; align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--g2-muted) !important; }
.g2-iback:hover { color: var(--g2-text) !important; }
.g2-iback__arrow { display: inline-block; font-size: 18px; line-height: 1; }

/* The description: one line, then "Read more" (to the About card). */
.g2-ihead__desc { display: flex; align-items: baseline; gap: 6px; margin: 0; max-width: 820px; font-size: 14px; line-height: 1.6; color: var(--g2-muted); }
.g2-ihead__desc-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.g2-ihead__more { flex: 0 0 auto; font-weight: 600; color: var(--g2-brand) !important; white-space: nowrap; }
.g2-ihead__dym { margin: 0; font-size: 13.5px; color: var(--g2-muted); }
.g2-ihead__dym a { font-weight: 600; color: var(--g2-brand) !important; }
.g2-ihead__pills { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.g2-ihead__label { flex: 0 0 auto; font-size: 13px; color: var(--g2-muted); }

.g2-ipill {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--g2-line2);
    background: var(--g2-input);
    font-size: 13px;
    color: #dfe3e8 !important;
    white-space: nowrap;
}

.g2-ipill:hover { border-color: var(--g2-brand); }

.g2-isubs__list { display: flex; gap: 8px; white-space: nowrap; }

.g2-isub {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 15px;
    border-radius: 999px;
    border: 1px solid var(--g2-line2);
    font-size: 13px;
    font-weight: 600;
    color: #c9ced4 !important;
    transition: border-color .15s, color .15s;
}

.g2-isub:hover { border-color: #3a4049; color: var(--g2-text) !important; }
.g2-isub small { font-size: 11px; font-weight: 500; color: var(--g2-dim); }
.g2-isub.is-current { background: var(--g2-text); border-color: var(--g2-text); color: #0b0d10 !important; }
.g2-isub.is-current small { color: #4a5059; }

.g2-index { padding-bottom: 24px; color: var(--g2-text); }
.g2-lshell { min-width: 0; }
.g2-llayout { display: grid; grid-template-columns: 272px minmax(0, 1fr); align-items: start; gap: 24px; padding-top: 10px; }
.g2-lmain { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* The filter panel. Desktop: a sticky sidebar with its own scroll only when it is taller than the screen; at its ends
   the wheel goes on to the page (overscroll-behavior auto). Round 3 (concept B): flat - no box, no border, the groups
   separated by hairlines. */
.g2-filters {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
    overflow: hidden;
}

.g2-filters__head { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; height: 44px; padding: 0 2px; }
.g2-filters__title { flex: 1 1 auto; font-size: 15px; font-weight: 700; }
.g2-filters__clear { font-size: 12.5px; color: var(--g2-muted) !important; text-decoration: underline !important; text-underline-offset: 3px; }
.g2-filters__close, .g2-filters__foot, .g2-filters__backdrop { display: none; }

.g2-filters__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 2px 12px;
    overflow-y: auto;
    overscroll-behavior: auto;
    scrollbar-width: thin;
    scrollbar-color: #2e333b transparent;
}

.g2-filters__body::-webkit-scrollbar { width: 6px; }
.g2-filters__body::-webkit-scrollbar-thumb { border-radius: 6px; background: #2e333b; }

.g2-fgroup { border-top: 1px solid var(--g2-line); padding-block: 2px 10px; }

.g2-fgroup__head {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-align: start;
    color: var(--g2-text) !important;
}

.g2-fgroup__title { flex: 1 1 auto; min-width: 0; }

.g2-fgroup__badge, .g2-ltools__badge {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--g2-brand);
    color: #0b0d10;
    font-size: 11px;
    font-weight: 800;
}

.g2-fgroup__chev { flex: 0 0 auto; opacity: .6; transition: transform .2s; }
.g2-fgroup.is-open .g2-fgroup__chev { transform: rotate(180deg); }
.g2-fgroup__body { display: flex; flex-direction: column; gap: 6px; }
.g2-fgroup__body[hidden] { display: none; }
.g2-fgroup__label { padding-top: 8px; font-size: 12px; font-weight: 600; color: var(--g2-dim); }

.g2-ftoggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; font-size: 13px; color: #c9ced4 !important; }
/* Counts sit apart from their labels with a gap on the parent (never a margin on the ltr number: in Arabic its "start"
   is on the wrong side, which glued "12670+" to the label). */
.g2-ftoggle small, .g2-fcheck small, .g2-fpill small { font-size: 11.5px; color: var(--g2-dim); }
.g2-ftoggle__text { display: inline-flex; align-items: baseline; gap: 6px; }
.g2-ftoggle__switch { position: relative; flex: 0 0 38px; width: 38px; height: 22px; border-radius: 999px; background: #2a2f37; transition: background-color .2s; }
.g2-ftoggle__switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #c9ced4; transition: transform .2s; }
.g2-ftoggle.is-on .g2-ftoggle__switch { background: var(--g2-brand); }
.g2-ftoggle.is-on .g2-ftoggle__switch::after { transform: translateX(16px); background: #0b0d10; }
[dir="rtl"] .g2-ftoggle.is-on .g2-ftoggle__switch::after { transform: translateX(-16px); }

.g2-fpills { display: flex; flex-wrap: wrap; gap: 6px; }

.g2-fpill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--g2-line2);
    font-size: 12.5px;
    color: #c9ced4 !important;
    transition: border-color .15s;
}

.g2-fpill:hover { border-color: #3a4049; }
.g2-fpill.is-on { border-color: var(--g2-brand); background: var(--g2-brand-soft); color: var(--g2-text) !important; }
.g2-fpill[hidden], .g2-fcheck[hidden] { display: none; }

.g2-fchecks { display: flex; flex-direction: column; }
.g2-fcheck { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 13px; color: #c9ced4 !important; }
.g2-fcheck:hover { color: var(--g2-text) !important; }
.g2-fcheck__box { position: relative; display: grid; place-items: center; flex: 0 0 18px; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #3a414b; }
.g2-fcheck.is-on .g2-fcheck__box { background: var(--g2-brand); border-color: var(--g2-brand); }
.g2-fcheck.is-on .g2-fcheck__box::after { content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid #0b0d10; border-bottom: 2px solid #0b0d10; transform: rotate(-45deg); }
.g2-fcheck__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.g2-fsearch { display: flex; align-items: center; gap: 8px; height: 36px; margin: 2px 0 4px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--g2-line2); background: var(--g2-input); color: var(--g2-dim); }
.g2-index .g2-fsearch__input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 12.5px; color: var(--g2-text) !important; outline: none; }
.g2-fshowall { align-self: flex-start; margin-top: 6px; font-size: 12.5px !important; font-weight: 600 !important; color: var(--g2-brand) !important; }
.g2-fshowall[hidden] { display: none; }

/* Toolbar: "Showing X of N", the active filters (links that remove them), Sort (a styled native select). */
.g2-ltools {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "shown chips bar";
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--g2-line);
    background: rgba(20, 23, 28, .92);
}

.g2-ltools__bar { grid-area: bar; display: flex; gap: 8px; }
.g2-ltools__chips-wrap { grid-area: chips; min-width: 0; }
.g2-ltools__shown { grid-area: shown; display: flex; align-items: baseline; gap: 4px; margin: 0; font-size: 13px; color: var(--g2-muted); white-space: nowrap; }
.g2-ltools__shown b { color: var(--g2-text); }

.g2-ltools__button {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    margin: 0;
    padding: 0 12px !important;
    border-radius: 10px !important;
    border: 1px solid var(--g2-line2) !important;
    background: var(--g2-input) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--g2-text) !important;
    white-space: nowrap;
    cursor: pointer;
}

.g2-ltools__filters, .g2-ltools__sortbtn { display: none !important; }
.g2-ltools__sort-label { font-size: 12px; font-weight: 600; color: var(--g2-dim); }

.g2-index .g2-ltools__select {
    height: 100%;
    padding: 0;
    padding-inline-end: 20px;
    border: 0;
    background: transparent;
    font: inherit;
    font-weight: 600;
    color: var(--g2-text);
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.g2-ltools__select option { background: #11141a; color: var(--g2-text); }
.g2-ltools__sort-chev { position: absolute; inset-inline-end: 12px; opacity: .6; pointer-events: none; }
.g2-ltools__chips { display: flex; align-items: center; gap: 6px; white-space: nowrap; padding-bottom: 6px; margin-bottom: -6px; }

.g2-lchip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding-block: 0;
    padding-inline: 12px 8px;
    border-radius: 999px;
    background: var(--g2-brand-soft);
    box-shadow: inset 0 0 0 1px rgba(149, 171, 82, .4);
    font-size: 12.5px;
    font-weight: 500;
    color: #cfe08f !important;
}

.g2-lchip__x { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(149, 171, 82, .2); }
.g2-lchip--clear { padding: 0 6px; background: transparent; box-shadow: none; color: var(--g2-muted) !important; text-decoration: underline !important; text-underline-offset: 3px; }

/* Shelves (concept B): underlined tabs above the toolbar, each a real link to an existing listing URL. */
.g2-shelves { display: flex; gap: 4px; border-bottom: 1px solid var(--g2-line); white-space: nowrap; padding-bottom: 0; }
.g2-shelves-wrap { min-width: 0; }

.g2-shelf {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    height: 44px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--g2-muted) !important;
}

.g2-shelf:hover { color: var(--g2-text) !important; }
.g2-shelf.is-current { color: var(--g2-text) !important; }
.g2-shelf.is-current::after { content: ""; position: absolute; inset: auto 10px 0; height: 2px; border-radius: 2px; background: var(--g2-brand); }

/* The cards (concept B, "poster"): 4 per row next to the sidebar (1200-1599px), 6 from 1600px, 3 at 768-1199px (no
   sidebar), 2 on phones. */
.g2-lresults { min-width: 0; }
.g2-lgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.g2-lgrid__item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.g2-lgrid__more { grid-column: 1 / -1; }

/* The card: the surface with a faint glow of the cover's own colour at the top (::before, the same tiny image as the
   stage's field - --g2-field, set on the card), never a colour worked out in JavaScript. */
.g2-lcard {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 8px 8px 12px;
    overflow: hidden;
    isolation: isolate;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, .06);
    background: #12151a;
    color: var(--g2-text) !important;
    transition: border-color .25s ease, transform .25s ease;
}

.g2-lcard.is-out { opacity: .62; }

/* The stage: a fixed 4:5 frame; the soft colour field (the same image at 24px, blurred and enlarged; a plain dark
   gradient without an image), the cover floating on it - never cropped, never stretched. Round 4: the field is
   calmer (opacity .35, blur 24px, saturate 1.1, under a dark veil) and the card has no coloured glow at its top. */
.g2-lcard__stage {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    min-height: 0;
    overflow: hidden;
    isolation: isolate;
    border-radius: 14px;
    background: linear-gradient(160deg, #1b2029, #0d0f13 70%);
}

.g2-lcard__field {
    position: absolute;
    inset: -20%;
    z-index: -2;
    background: var(--g2-field, none) center / cover no-repeat;
    filter: blur(24px) saturate(1.1);
    opacity: .35;
}

.g2-lcard__stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(11, 13, 16, .55); pointer-events: none; }

.g2-lcard__stage::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, rgba(13, 15, 19, .7)); pointer-events: none; }

/* The cover: 64% of the stage wide (a portrait box art fills that width); anything else (accessories, consoles) at most
   70% wide and 80% high. The hover tilt follows the mouse (g2.js "listing cover tilt": --g2-tilt-x / --g2-tilt-y). */
.g2-lcard__cover {
    position: relative;
    z-index: 1;
    display: block;
    width: 64%;
    height: 80%;
    min-height: 0;
    transform: perspective(700px) rotateX(var(--g2-tilt-x, 0deg)) rotateY(var(--g2-tilt-y, 0deg));
    transition: transform .3s ease;
}

.g2-lcard__cover--object { width: 70%; }
.g2-lcard__cover .g2-media__img { filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .6)); }

/* Round 4 (A1): desktop covers are bigger - a box art 78% of the frame wide (its box tall enough that the width, not
   the height, is the limit), anything else up to 84% x 86%. Phones keep 70% (below). */
@media (min-width: 1200px) {
    .g2-lcard__cover { width: 78%; height: 90%; }
    .g2-lcard__cover--object { width: 84%; height: 86%; }
}

@media (hover: hover) {
    .g2-lcard:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .14); }
    .g2-lcard:hover .g2-lcard__cover { transform: perspective(700px) rotateX(var(--g2-tilt-x, 0deg)) rotateY(var(--g2-tilt-y, 0deg)) scale(1.03); }
    .g2-lcard.is-tilting .g2-lcard__cover { transition: transform .08s linear; }
}

.g2-lcard__body { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; min-width: 0; padding-inline: 6px; }

.g2-index .g2-lcard__title {
    margin: 0;
    min-height: 2.68em;
    max-height: 2.68em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.34;
    color: var(--g2-text) !important;
}

/* One row of chips, 22px high: they wrap and the row hides every line after the first, so only whole chips show - a
   chip is never cut in half. Always present (empty too), so the price lines up across a row. */
.g2-lcard__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    height: 22px;
    overflow: hidden;
    white-space: nowrap;
}

.g2-lcard__chips > * { flex: 0 0 auto; max-width: 100%; }
.g2-lcard__tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.g2-lcard__tag--new { background: rgba(61, 220, 132, .14); color: #7ee8ab; }
.g2-lcard__tag--used { background: rgba(255, 255, 255, .1); color: #d6dadf; }
.g2-lcard__meta { display: inline-flex; }
.g2-lcard__meta b { display: grid; place-items: center; min-width: 24px; height: 22px; padding: 0 4px; border-radius: 6px; font-size: 11.5px; font-weight: 800; line-height: 1; color: #0b0d10; }
.g2-lcard__meta b .g2-num, .g2-lcard__meta b.g2-num { line-height: 1; }
.g2-lcard__meta--good b { background: #66cc33; }
.g2-lcard__meta--mixed b { background: #ffcc33; }
.g2-lcard__meta--bad b { background: #ff6874; }
.g2-lcard__fact { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--g2-raised); font-size: 11px; color: #c9ced4; }
.g2-lcard__fact svg { flex: 0 0 auto; color: var(--g2-dim); }
.g2-lcard__fact bdi { unicode-bidi: isolate; }
/* The price row: one line high at the bottom of the card (prices line up across a row); what does not fit on that line
   is hidden whole (a pre-order's price, a -x% badge on a narrow card), never cut. */
.g2-lcard .g2-price-row { flex-wrap: wrap; height: 26px; min-height: 0; margin-top: auto; overflow: hidden; font-size: 18px; }
.g2-lcard .g2-price-row--pre { gap: 8px; }
.g2-lcard .g2-price-row--pre .g2-price-row__date { white-space: nowrap; }

/* The status line: always there, 16px high, under the price - Out of stock, Only N left, Used from EGP X, or nothing. */
.g2-lcard__status { display: flex; align-items: center; height: 16px; min-width: 0; overflow: hidden; white-space: nowrap; }
.g2-lcard__stock { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--g2-muted); }
.g2-lcard__stock i { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #5a616b; }
.g2-lcard__stock--low { color: #f6c96d; }
.g2-lcard__stock--low i { background: var(--g2-gold); }
.g2-lcard__used { display: inline-flex; align-items: baseline; gap: 4px; font-size: 11.5px; color: var(--g2-dim); }
.g2-lcard__used .g2e-price { font-size: 12px; color: var(--g2-muted); }
.g2-lcard__g2all { padding: 0 4px; font-size: 11.5px; color: var(--g2-gold) !important; }

/* Paging: "Load 24 more" (secondary, at least 280px, what is left as small muted text inside), then one strip under a
   hairline - "Showing 1–24 of 306" at the start, the page links (36px squares) at the end. */
.g2-lmore { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 18px; font-size: 13px; color: var(--g2-muted); }
.g2-lmore b { color: var(--g2-text); font-weight: 600; }

.g2-lmore__button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 280px;
    height: 46px;
    padding: 0 24px;
}

.g2-lmore__button[hidden] { display: none !important; }
.g2-lmore__button[aria-busy="true"] { opacity: .7; }
.g2-lmore__left { display: inline-flex; align-items: baseline; gap: 4px; font-size: 12px; font-weight: 500; color: var(--g2-muted); }

.g2-lmore__strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding-top: 14px;
    border-top: 1px solid var(--g2-line);
}

.g2-lmore__range { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; margin: 0; }
.g2-pager { display: flex; align-items: center; gap: 6px; }

.g2-pager__num, .g2-pager__step {
    display: grid;
    place-items: center;
    min-width: 36px;
    height: 36px;
    padding: 0 6px;
    border-radius: 10px;
    border: 1px solid var(--g2-line2);
    font-size: 13px;
    color: #c9ced4 !important;
}

.g2-pager__num:hover, a.g2-pager__step:hover { border-color: #3a4049; }
.g2-pager__num.is-current { border-color: var(--g2-brand); background: var(--g2-brand); font-weight: 700; color: #0b0d10 !important; }
.g2-pager__step.is-disabled { opacity: .35; }
.g2-pager__step[hidden] { display: none; }
.g2-pager__gap { color: var(--g2-dim); }
.g2-pager__compact { display: none; }

/* Phones and tablets: the floating "Filters | Sort" pill (bottom centre, clear of the chat and back-to-top buttons on
   the right) and the sort sheet. Never shown from 1200px (the sidebar and the select are there). */
.g2-lpill { display: none; }
.g2-sortsheet, .g2-sortsheet__backdrop { display: none; }

/* No results (the whole search, or the filters - in the shell). */
.g2-lempty, .g2-noresults {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 36px 20px;
    border-radius: 20px;
    border: 1px solid var(--g2-line);
    background: var(--g2-surface);
    text-align: center;
}

.g2-noresults { margin-block: 20px 8px; }
.g2-lempty__icon, .g2-noresults__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--g2-input); color: var(--g2-muted); }
.g2-index .g2-lempty__title, .g2-index .g2-noresults__title { margin: 0; font-size: 20px; font-weight: 700; color: var(--g2-text) !important; }
.g2-lempty__text, .g2-noresults__text, .g2-noresults__ask { margin: 0; font-size: 14px; color: var(--g2-muted); }
.g2-noresults__dym { margin: 0; font-size: 14px; color: var(--g2-muted); }
.g2-noresults__dym a, .g2-noresults__ask a { font-weight: 600; color: var(--g2-brand) !important; }
.g2-noresults__tips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.g2-noresults__label, .g2-about__label { font-size: 12px; font-weight: 600; color: var(--g2-dim); }

/* About: the long description, calm and readable; the pasted rich text is reset inside the card (fonts, colours, links,
   image widths, tables that scroll sideways) without touching the stored content. */
.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); }
.g2-index .g2-about__title { margin: 0; font-size: 18px; font-weight: 700; color: var(--g2-text) !important; }
.g2-about__body { position: relative; max-width: 75ch; max-height: 10.2em; overflow: hidden; font-size: 15px; line-height: 1.7; color: #c9ced4; }
.g2-about__body::after { content: ""; position: absolute; inset: auto 0 0; height: 3em; background: linear-gradient(transparent, var(--g2-surface)); pointer-events: none; }
.g2-about__body.is-open { max-height: none; }
.g2-about__body.is-open::after { display: none; }
.g2-about__body * { font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; color: inherit !important; background: transparent !important; }
.g2-about__body p { margin: 0 0 12px; }
.g2-about__body :is(h2, h3, h4, h5, h6) { margin: 14px 0 4px; font-weight: 700 !important; color: var(--g2-text) !important; text-transform: none !important; }
.g2-about__body a { color: var(--g2-brand) !important; text-decoration: underline; text-underline-offset: 3px; }
.g2-about__body img { max-width: 100% !important; height: auto !important; }
.g2-about__body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.g2-about__body :is(td, th) { padding: 4px 8px; border: 1px solid var(--g2-line); }
.g2-about__more { align-self: flex-start; font-size: 12.5px !important; font-weight: 600 !important; color: var(--g2-brand) !important; }
.g2-about__more[hidden] { display: none; }
.g2-about__also { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--g2-line); }

/* Below 1200px: the filter panel is a sheet that slides up from the bottom over a fading backdrop (transform, 250ms),
   and Filters / Sort are a sticky row under the header. */
@media (max-width: 1199px) {
    .g2-llayout { grid-template-columns: minmax(0, 1fr); gap: 0; }

    .g2-filters {
        position: fixed;
        inset: auto 0 0 0;
        top: auto;
        z-index: 2100;
        height: 86vh;
        height: 86dvh;
        max-height: none;
        border: 0;
        border-top: 1px solid var(--g2-line2);
        border-radius: 22px 22px 0 0;
        background: #11141a;
        overscroll-behavior: contain;
        transform: translateY(100%);
        visibility: hidden;
        transition: transform .25s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .25s;
    }

    body.product-filters-open .g2-filters { transform: none; visibility: visible; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }

    .g2-filters__backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 2090;
        background: rgba(0, 0, 0, .55);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility 0s linear .2s;
    }

    body.product-filters-open .g2-filters__backdrop { opacity: 1; visibility: visible; transition: opacity .2s ease; }
    .g2-filters__head { height: 56px; padding: 0 16px; border-bottom: 1px solid var(--g2-line); }
    .g2-filters__close { display: grid !important; place-items: center; width: 40px; height: 40px; border-radius: 12px !important; border: 1px solid var(--g2-line2) !important; background: var(--g2-input) !important; }
    .g2-filters__body { padding: 4px 16px 16px; overscroll-behavior: contain; }
    .g2-filters__foot { display: block; flex: 0 0 auto; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--g2-line); }
    .g2-filters__show { width: 100%; height: 48px; }

    /* The toolbar's parts become rows of the results column: Filters and Sort side by side, in the page (they do not
       stick - the floating pill takes over once they scroll away), then the active filters and "Showing X of N". */
    .g2-ltools { display: contents; }
    .g2-ltools__bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .g2-ltools__filters, .g2-ltools__sortbtn { display: inline-flex !important; }
    .g2-ltools__sort { display: none !important; }
    .g2-ltools__button { height: 42px; border-radius: 12px !important; font-size: 13.5px !important; font-weight: 700 !important; }

    .g2-lgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .g2-lpill {
        position: fixed;
        left: 50%;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        z-index: 1990;
        display: flex;
        align-items: center;
        height: 48px;
        padding: 0 6px;
        border-radius: 999px;
        border: 1px solid var(--g2-line2);
        background: rgba(24, 27, 33, .94);
        box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
        transform: translateX(-50%);
        animation: g2-pill-in .2s ease-out;
    }

    .g2-lpill[hidden] { display: none; }
    body.product-filters-open .g2-lpill, body.product-sort-open .g2-lpill { display: none; }

    .g2-lpill__button {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        height: 40px;
        padding: 0 16px !important;
        border-radius: 999px !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: var(--g2-text) !important;
        white-space: nowrap;
    }

    .g2-lpill__sep { width: 1px; height: 22px; background: var(--g2-line2); }

    /* The sort sheet: a small sheet that slides up over a fading backdrop, the page held still (g2.lockPageScroll). */
    .g2-sortsheet {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 2100;
        display: flex;
        flex-direction: column;
        max-height: 80vh;
        max-height: 80dvh;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--g2-line2);
        border-radius: 22px 22px 0 0;
        background: #11141a;
        overscroll-behavior: contain;
        transform: translateY(100%);
        visibility: hidden;
        transition: transform .25s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .25s;
    }

    body.product-sort-open .g2-sortsheet { transform: none; visibility: visible; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }

    .g2-sortsheet__backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 2090;
        background: rgba(0, 0, 0, .55);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility 0s linear .2s;
    }

    body.product-sort-open .g2-sortsheet__backdrop { opacity: 1; visibility: visible; transition: opacity .2s ease; }
    .g2-sortsheet__head { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--g2-line); }
    .g2-sortsheet__title { flex: 1 1 auto; font-size: 15px; font-weight: 700; color: var(--g2-text); }
    .g2-sortsheet__list { display: flex; flex-direction: column; padding: 6px 16px; overflow-y: auto; }

    .g2-sortsheet__option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 48px;
        border-bottom: 1px solid #1f232a;
        font-size: 14px;
        color: #c9ced4 !important;
    }

    .g2-sortsheet__option:last-child { border-bottom: 0; }
    .g2-sortsheet__option.is-current { color: var(--g2-text) !important; font-weight: 600; }
    .g2-sortsheet__radio { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #3a414b; }
    .g2-sortsheet__option.is-current .g2-sortsheet__radio { border: 5px solid var(--g2-brand); }
}

@keyframes g2-pill-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translateX(-50%); } }

/* Wide screens: 6 cards per row next to the sidebar. */
@media (min-width: 1600px) {
    .g2-lgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
}

@media (max-width: 767px) {
    .g2-ihead { gap: 10px; padding-block: 12px 4px; }
    .g2-ihead .g2-ihead__h1 { font-size: 24px; }
    /* Round 4 (A2, A3): phones start with the back link and the H1, then the shelves, Filters | Sort and the grid. The
       breadcrumb, the description (it is in the About card at the bottom), the sub-category chips and "Showing N of M"
       (the paging block says it) stay in the HTML, not on the screen. */
    .g2-iback { display: inline-flex; }
    .g2-crumbs, .g2-ihead__desc, .g2-isubs, .g2-ltools__shown { display: none !important; }
    .g2-shelf { height: 40px; padding: 0 10px; font-size: 13px; }
    .g2-lgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .g2-lcard { gap: 10px; padding: 6px 6px 10px; border-radius: 16px; }
    .g2-lcard__cover { width: 70%; }
    .g2-lcard__body { padding-inline: 4px; }
    .g2-index .g2-lcard__title { font-size: 12.5px; }
    .g2-lcard .g2-price-row { height: 22px; font-size: 15px; }
    .g2-about { margin-top: 20px; padding: 16px; }
    .g2-noresults { padding: 28px 16px; }

    /* Paging: the button full width; then "Showing 1–24 of 306" and "‹ Page 1 of 13 ›" on one row. The number links stay
       in the HTML (Google), visually hidden. */
    .g2-lmore__button { width: 100%; min-width: 0; }
    .g2-lmore__strip { font-size: 12.5px; }
    .g2-pager { gap: 8px; }
    .g2-pager__num, .g2-pager__gap { position: absolute !important; width: 1px; height: 1px; min-width: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }
    .g2-pager__compact { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
    .g2-pager__step { min-width: 34px; height: 34px; }
}

/* Motion (transform and opacity only; all off under reduced motion). The first screen's 8 cards rise in by row on page
   load - an animation, so they are visible at rest when CSS is missing; never again after an AJAX swap. A swap fades the
   new grid from .6; "Load more" cards fade in. */
@keyframes g2-card-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes g2-grid-swap { from { opacity: .6; } to { opacity: 1; } }
@keyframes g2-card-fade { from { opacity: 0; } to { opacity: 1; } }

.g2-lgrid__item:nth-child(-n + 8) { animation: g2-card-rise .24s ease-out both; }
.g2-lgrid__item:nth-child(n + 5):nth-child(-n + 8) { animation-delay: 40ms; }
@media (min-width: 1600px) {
    .g2-lgrid__item:nth-child(n + 5):nth-child(-n + 6) { animation-delay: 0ms; }
    .g2-lgrid__item:nth-child(n + 7):nth-child(-n + 8) { animation-delay: 40ms; }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .g2-lgrid__item:nth-child(4) { animation-delay: 40ms; }
    .g2-lgrid__item:nth-child(n + 5):nth-child(-n + 6) { animation-delay: 40ms; }
    .g2-lgrid__item:nth-child(n + 7):nth-child(-n + 8) { animation-delay: 80ms; }
}
@media (max-width: 767px) {
    .g2-lgrid__item:nth-child(n + 3):nth-child(-n + 4) { animation-delay: 40ms; }
    .g2-lgrid__item:nth-child(n + 5):nth-child(-n + 6) { animation-delay: 80ms; }
    .g2-lgrid__item:nth-child(n + 7):nth-child(-n + 8) { animation-delay: 120ms; }
}

.is-swapped .g2-lgrid__item { animation: none; }
.is-swapped .g2-lgrid { animation: g2-grid-swap .15s ease-out; }
.g2-lgrid__item.is-appended { animation: g2-card-fade .24s ease-out both; }

@media (prefers-reduced-motion: reduce) {
    .g2-filters, .g2-filters__backdrop, .g2-sortsheet, .g2-sortsheet__backdrop, .g2-lcard, .g2-lcard__cover, .g2-fgroup__chev, .g2-ftoggle__switch, .g2-ftoggle__switch::after { transition: none !important; }
    .g2-lgrid__item, .g2-lgrid__item.is-appended, .is-swapped .g2-lgrid, .g2-lpill { animation: none !important; }
    .g2-lcard:hover, .g2-lcard:hover .g2-lcard__cover { transform: none !important; }
}

/* ============================================================================================================
   PRODUCT PAGE (Products/ProductDetails - Round 3, concept B; behaviour in g2.js "product page")
   The stage (one rounded panel tinted with the platform colour: gallery, buy box, key facts), the section bar
   (desktop), Bought together (theme 5 refreshed, Together.cshtml), Overview, Specifications, All versions,
   Similar / Best sellers (theme 1 refreshed with tabs), the phone bottom bar, the zoom viewer.
   ============================================================================================================ */
.g2-pcrumbs { padding-block: 14px 6px; color: var(--g2-text); }
.g2-pdp { display: flex; flex-direction: column; gap: 28px; padding-bottom: 40px; color: var(--g2-text); }
.g2-pdp .g2-sec.g2-wrap { max-width: none; padding-inline: 0; }

/* ---- the stage ---- */
.g2-stage {
    --g2-ptone: var(--g2-brand);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
    grid-template-areas: "gallery buy" "facts facts";
    gap: 22px 36px;
    padding: 24px;
    overflow: hidden;
    isolation: isolate;
    border-radius: 24px;
    border: 1px solid var(--g2-line);
    background:
        radial-gradient(70% 90% at 28% 35%, color-mix(in srgb, var(--g2-ptone) 24%, transparent), transparent 72%),
        linear-gradient(180deg, #14171d, #0f1115);
}

.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); }

.g2-stage__gallery { grid-area: gallery; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; min-width: 0; }
.g2-stage__gallery:not(:has(.g2-stage__thumbs)) { grid-template-columns: minmax(0, 1fr); }
.g2-stage__thumbs { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.g2-stage__thumb {
    display: grid !important;
    place-items: center;
    width: 64px;
    height: 64px;
    padding: 4px !important;
    overflow: hidden;
    border-radius: 12px !important;
    border: 1px solid var(--g2-line2) !important;
    background: #0d0f13 !important;
    opacity: .72;
    transition: opacity .15s, border-color .15s;
}

.g2-stage__thumb:hover { opacity: 1; }
.g2-stage__thumb.is-active { opacity: 1; border-color: var(--g2-brand) !important; }
.g2-stage__thumb img { width: 100%; height: 100%; object-fit: contain; }
.g2-stage__thumb--video { color: var(--g2-text); background: linear-gradient(160deg, #262b33, #0d0f13) !important; }
.g2-stage__thumb--more { opacity: 1; color: var(--g2-text); font-size: 13px; font-weight: 800; background: var(--g2-raised) !important; }

/* Round 4 (B2): the image column is as tall as the buy box (the stage row), the image centred in it and as large as
   the space allows - never upscaled past its own size (width / height auto). The thumbnail column never runs taller. */
@media (min-width: 768px) {
    .g2-stage__gallery { align-self: stretch; grid-template-rows: minmax(0, 1fr); }
    .g2-stage__viewer { height: 100%; display: flex; flex-direction: column; justify-content: center; }
    .g2-stage__slides { height: 100%; min-height: clamp(340px, 34vw, 460px); max-height: 760px; }
    .g2-stage__thumbs { max-height: 100%; overflow: hidden; align-self: center; }
    .g2-stage__zoom { padding: 34px 12px 30px !important; }
}

.g2-stage__viewer { position: relative; min-width: 0; min-height: 0; }

/* The slides: one per image, side by side (scroll snap: swipe on phones, thumbnails and arrows on desktop). */
.g2-stage__slides {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    height: clamp(340px, 42vw, 560px);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.g2-stage__slides::-webkit-scrollbar { display: none; }
.g2-stage__slide { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; scroll-snap-align: center; }

/* The soft floor glow under the image. */
.g2-stage__slide::after {
    content: "";
    position: absolute;
    inset: auto 18% 3% 18%;
    z-index: -1;
    height: 14%;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--g2-ptone) 45%, transparent), transparent);
    filter: blur(10px);
}

.g2-stage__slide--empty { color: var(--g2-dim); font-size: 13px; }

/* Flex (not grid): the image's max-height: 100% then resolves against the button's height, so a tall image is fitted. */
.g2-stage__zoom {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 34px 20px 46px !important;
    cursor: zoom-in !important;
}

.g2-stage__zoom picture { display: contents; }

.g2-stage__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .55));
    animation: g2-float 6s ease-in-out infinite;
}

@keyframes g2-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Corner chips: the platform at the top start, the Metacritic score at the top end - never on the image. */
.g2-stage__platform, .g2-stage__condition, .g2-stage__meta {
    position: absolute;
    top: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(11, 13, 16, .66);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
    font-size: 12px;
    font-weight: 700;
    color: var(--g2-text);
}

.g2-stage__platform { inset-inline-start: 0; }
.g2-stage__condition { inset-inline-start: 0; top: 36px; color: #d6dadf; }
.g2-stage__meta { inset-inline-end: 0; padding-inline: 10px 4px; }
.g2-stage__meta span { font-size: 11px; font-weight: 600; color: var(--g2-muted); }
.g2-stage__meta b { display: grid; place-items: center; min-width: 26px; height: 22px; padding: 0 5px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 1; color: #0b0d10; }
.g2-stage__meta b .g2-num, .g2-stage__meta b.g2-num { line-height: 1; }
.g2-stage__meta.g2-lcard__meta--good b { background: #66cc33; }
.g2-stage__meta.g2-lcard__meta--mixed b { background: #ffcc33; }
.g2-stage__meta.g2-lcard__meta--bad b { background: #ff6874; }
.g2-stage__dots, .g2-stage__video-chip { display: none !important; }

/* ---- the buy box ---- */
.g2-buy { grid-area: buy; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.g2-buy__brand { align-self: flex-start; font-size: 12.5px; font-weight: 700; color: var(--g2-brand) !important; }
.g2-pdp .g2-buy__title { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--g2-text) !important; }
/* The condition (Used / Open Sealed / No Box) after the name, when the name itself does not say it. */
.g2-pdp .g2-buy__condition { font-size: .5em; font-weight: 700; letter-spacing: 0; white-space: nowrap; vertical-align: middle; color: var(--g2-muted); }
.g2-buy__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.g2-buy__chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; background: rgba(255, 255, 255, .07); font-size: 12px; font-weight: 600; color: #d6dadf; }
.g2-buy__summary { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--g2-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.g2-buy__small { margin: 0; font-size: 12.5px; color: var(--g2-muted); }
.g2-buy__small b { color: var(--g2-text); }

.g2-notice {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--g2-raised);
    box-shadow: inset 0 0 0 1px var(--g2-line2);
    font-size: 13px;
    line-height: 1.5;
    color: #d6dadf;
}

.g2-notice--warn { background: rgba(244, 182, 61, .08); box-shadow: inset 0 0 0 1px rgba(244, 182, 61, .3); color: #f6d8a0; }
.g2-notice b { color: var(--g2-text); }
.g2-notice--warn b { color: #f8cf7d; }
.g2-notice small { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: inherit; opacity: .85; }
.g2-notice a { color: var(--g2-brand) !important; font-weight: 600; }

/* The versions: a row per dimension, every option a link (platform with its price, New / Used with the saving,
   colours with a swatch only when the colour is a real one). */
.g2-pick { display: flex; flex-direction: column; gap: 12px; }
.g2-pick__row, .g2-pick__also { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.g2-pick__row.is-changed { animation: g2-pick-changed 2.4s ease-out 1; border-radius: 10px; }
@keyframes g2-pick-changed { 0%, 60% { box-shadow: 0 0 0 4px rgba(149, 171, 82, .22); } 100% { box-shadow: none; } }
.g2-pick__label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--g2-dim); }
.g2-pick__options { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.g2-pick__options--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }

.g2-pick__opt {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-self: stretch;
    gap: 3px;
    min-width: 0;
    min-height: 50px;
    padding: 7px 12px;
    border-radius: 12px;
    border: 1px solid var(--g2-line2);
    background: rgba(255, 255, 255, .02);
    color: var(--g2-text) !important;
    transition: border-color .15s, background-color .15s;
}

.g2-pick__opt:hover { border-color: #3a4049; }
.g2-pick__opt.is-selected { border-color: var(--g2-brand); background: var(--g2-brand-soft); box-shadow: inset 0 0 0 1px var(--g2-brand); }
.g2-pick__opt.is-out { opacity: .55; }
.g2-pick__name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; }
.g2-pick__price { font-size: 12px; color: var(--g2-muted); }
.g2-pick__price .g2e-price { font-size: 12px; }
.g2-pick__note { font-size: 11px; color: var(--g2-dim); }
/* An out-of-stock tile keeps the in-stock layout; a small tag in its top-end corner says so. */
.g2-pick__tag { position: absolute; top: 4px; inset-inline-end: 6px; font-size: 10px; font-weight: 700; line-height: 1.2; color: var(--g2-muted); pointer-events: none; }
.g2-pick__save { display: inline-flex; align-items: baseline; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; background: rgba(61, 220, 132, .12); font-size: 10.5px; font-weight: 700; color: #7be8a8; }
.g2-pick__save .g2e-price { font-size: 10.5px; }
.g2-pick__swatch { display: inline-block; flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: var(--g2-swatch); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }

.g2-pick__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--g2-line2);
    font-size: 12px;
    color: #c9ced4 !important;
}

.g2-pick__chip.is-out { opacity: .55; }
.g2-pick__chip .g2e-price { font-size: 12px; font-weight: 700; }

/* Round 4 (B1): platform and condition options as compact one-line chips (40px): dot, short name, price - "Out" when
   out of stock (dimmed, still a link). Platforms in a grid (auto-fill, 116px), New / Used side by side; "Also available"
   one line of small chips (at most 4, then "+N" to All versions). */
.g2-pick__options--grid { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 6px; }
.g2-pick__options--line { flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.g2-pick__options--line::-webkit-scrollbar { display: none; }
.g2-pick__opt--chip { flex-direction: row; align-items: center; justify-content: flex-start; gap: 5px; height: 40px; min-height: 40px; padding: 0 8px; border-radius: 10px; white-space: nowrap; overflow: hidden; }
.g2-pick__options--line .g2-pick__opt--chip { flex: 0 0 auto; padding: 0 10px; }
.g2-pick__short { font-size: 12.5px; font-weight: 700; }
.g2-pick__opt--chip .g2-pick__price { margin-inline-start: auto; font-size: 11.5px; }
.g2-pick__opt--chip .g2-pick__price .g2e-price { font-size: 11.5px; }
.g2-pick__options--line .g2-pick__opt--chip .g2-pick__price { margin-inline-start: 2px; }
.g2-pick__out { margin-inline-start: auto; font-size: 11px; font-weight: 600; color: var(--g2-dim); }
.g2-pick__opt--chip .g2-pick__save { height: 20px; align-items: center; }
.g2-pick__options--line .g2-pick__chip { flex: 0 0 auto; height: 28px; padding: 0 9px; }
.g2-pick__chip--more { color: var(--g2-brand) !important; font-weight: 700; }

/* The price. */
.g2-buy__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-size: 34px; font-weight: 800; color: #fff; }
.g2-buy__price .g2e-price--was { font-size: 15px; }
.g2-buy__free { font-size: 22px; font-weight: 800; color: var(--g2-gold); }
.g2-buy__saving { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 13px; color: var(--g2-brand) !important; }
.g2-buy__g2all { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 5px; font-size: 13px; color: var(--g2-gold) !important; }

/* The main action. */
.g2-buy__actions { display: flex; flex-direction: column; gap: 10px; margin: 0 !important; }

.g2-buy__main {
    position: relative;
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px 10px;
    width: 100%;
    height: auto;
    min-height: 52px;
    padding: 10px 18px;
    border-radius: 14px;
    font-size: 15.5px;
    white-space: normal;
    text-align: center;
}

.g2-buy__main .g2-buy__main-text, .g2-buy__main h5 { margin: 0; font-size: inherit; font-weight: 800; color: inherit; }
/* The notify label keeps the heading line height it had as an <h5>, so its text sits on the same pixels. */
.g2-buy__main.notify_me_btn .g2-buy__main-text { line-height: 1.5; }
.g2-buy__main[disabled] { opacity: .6; cursor: default; }
.g2-buy__main.notified { border-color: rgba(64, 178, 190, .5) !important; color: #8fd6de !important; }

.g2-buy__main--pre { background: var(--g2-gold) !important; color: #1a1305 !important; }
.g2-buy__main--pre:hover { background: #f7c45f !important; }
.g2-buy__release { font-size: 13px; font-weight: 600; }
.g2-buy__days { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: rgba(0, 0, 0, .16); font-size: 11.5px; font-weight: 700; }

/* "Added" (the add to cart success callback adds .is-added): a check for 1.2s. */
.g2-buy__main.is-added, [data-pdp-add].is-added { background: #3ddc84 !important; color: #06210f !important; }
[data-pdp-add].is-added .g2-buy__main-text::before { content: "✓ "; }

.g2-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.g2-size { display: grid; place-items: center; min-width: 42px; height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--g2-line2); font-size: 13px; font-weight: 700; color: var(--g2-text) !important; }
.g2-size.is-selected { border-color: var(--g2-brand); background: var(--g2-brand-soft); }
.g2-size.is-out { opacity: .4; }

/* The availability box: delivery, pick up today (the branches open in place), activation. */
.g2-avail { display: flex; flex-direction: column; border-radius: 14px; border: 1px solid var(--g2-line2); background: rgba(255, 255, 255, .02); }
.g2-avail__row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; }
.g2-avail__row + .g2-avail__row { border-top: 1px solid var(--g2-line); }
.g2-avail__icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; background: var(--g2-raised); color: var(--g2-brand); }
.g2-avail__icon.is-bad { color: var(--g2-sale); }
.g2-avail__text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0; min-width: 0; font-size: 13px; }
.g2-avail__text b { font-weight: 700; color: var(--g2-text); }
.g2-avail__text b:not(:last-child) { margin-bottom: 4px; }
.g2-avail__text small { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; line-height: 1.35; color: var(--g2-muted); }
.g2-avail__text small + small { margin-top: 1px; }
.g2-avail__text a { font-size: 12px; color: var(--g2-brand) !important; }
.g2-avail__bad { color: #f2a59f !important; }
.g2-avail__pickup { display: block; padding: 0; }
.g2-avail__pickup > summary { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; list-style: none; cursor: pointer; }
.g2-avail__pickup > summary::-webkit-details-marker { display: none; }
.g2-avail__chev { flex: 0 0 auto; margin-top: 10px; opacity: .6; transition: transform .2s; }
.g2-avail__pickup[open] .g2-avail__chev { transform: rotate(180deg); }
.g2-avail__branches { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0 14px 14px 60px; list-style: none; }
[dir="rtl"] .g2-avail__branches { padding: 0 60px 14px 14px; }
.g2-avail__branches li { display: flex; flex-direction: column; font-size: 13px; }
.g2-avail__branches small { font-size: 12px; color: var(--g2-dim); }

/* The branch finder: the "Pick up from a branch" row opens it in place under itself, inside the availability box
   (g2.js "branch finder": the height grows, the content fades in, the rows arrive one after another). */
.g2-avail__pickbtn { display: flex !important; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 14px !important; text-align: start; cursor: pointer; }
.g2-avail__pickbtn[aria-expanded="true"] .g2-avail__chev { transform: rotate(180deg); }
.g2-avail__pickup { padding: 0; }
.g2-avail__pickup.g2-bf-host { flex-direction: column; align-items: stretch; gap: 0; }
.g2-avail__text small.is-mine-in { color: #8bd6a8; }
.g2-avail__text small.is-mine-out { color: var(--g2-muted); }

.g2-bf { overflow: hidden; }
.g2-bf[hidden] { display: none; }
.g2-bf.is-sizing { transition: height .22s ease; }
.g2-bf__inner { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; }
.g2-bf.is-open .g2-bf__inner { animation: g2-bf-fade .22s ease-out both; }
@keyframes g2-bf-fade { from { opacity: 0; } to { opacity: 1; } }

/* The map strip: two areas (Cairo & Giza, an inset Alexandria box) on the page colour with a faint dot grid; the pins
   are placed by g2 percentages inside a 10px padding. Drawn left to right in both languages. */
.g2-bf__map {
    position: relative;
    display: flex;
    gap: 8px;
    height: 90px;
    padding: 6px;
    border-radius: 12px;
    background-color: var(--g2-page);
    background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px);
    background-size: 10px 10px;
}

.g2-bf__area { position: relative; flex: 0 0 auto; min-width: 0; }
.g2-bf__area--cairo { flex-basis: calc(78% - 4px); }
.g2-bf__area--alex { flex-basis: calc(22% - 4px); }
.g2-bf__shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* A schematic outline under the pins (the Nile and the Ring Road; the Alexandria coast), cut at the area's box. */
.g2-bf__outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; border-radius: 6px; pointer-events: none; }
.g2-bf__lines { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
/* "Nearest to me": the visitor's place, projected like the pins. */
.g2-bf__you {
    position: absolute;
    left: calc(10px + (100% - 20px) * var(--x) / 100);
    top: calc(10px + (100% - 20px) * var(--y) / 100);
    z-index: 2;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 2px var(--g2-brand);
    pointer-events: none;
}
.g2-bf__you[hidden] { display: none; }
.g2-bf__shape rect { fill: rgba(255, 255, 255, .02); stroke: var(--g2-line2); stroke-width: 1; }
.g2-bf__area--alex .g2-bf__shape rect { stroke-dasharray: 3 3; }
.g2-bf__label { position: absolute; top: 5px; left: 8px; right: 8px; overflow: hidden; font-size: 10px; font-weight: 600; line-height: 1.2; color: var(--g2-dim); white-space: nowrap; text-overflow: ellipsis; pointer-events: none; }
.g2-bf__label[dir="rtl"] { text-align: right; }

.g2-bf__pin {
    position: absolute;
    left: calc(10px + (100% - 20px) * var(--x) / 100);
    top: calc(10px + (100% - 20px) * var(--y) / 100);
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    color: #6f767f;
    outline: none;
}

.g2-bf__pin svg { position: relative; z-index: 1; display: block; fill: currentColor; transition: transform .15s ease; }
.g2-bf__pin.is-in { color: #56b47c; }
.g2-bf__pin.is-in::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: rgba(86, 180, 124, .35); animation: g2-bf-pulse 2.2s ease-out infinite; }
.g2-bf__pin.is-hot svg { transform: scale(1.6); }
.g2-bf__pin { cursor: pointer; }
.g2-bf__pin:focus-visible svg { transform: scale(1.6); filter: drop-shadow(0 0 2px var(--g2-brand)); }
/* The selected pin: 12px, with the branch name in a chip above it. */
.g2-bf__pin.is-selected { z-index: 3; }
.g2-bf__pin.is-selected svg { transform: scale(1.5); }
.g2-bf__pinlabel {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    z-index: 2;
    max-width: 140px;
    padding: 2px 7px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--g2-raised);
    box-shadow: inset 0 0 0 1px var(--g2-line2);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--g2-text);
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translate(-50%, 2px);
    transition: opacity .15s ease, transform .15s ease;
    pointer-events: none;
}
.g2-bf__pin.is-selected .g2-bf__pinlabel { opacity: 1; transform: translate(-50%, 0); }
.g2-bf__item.is-selected { background: var(--g2-raised); box-shadow: inset 0 0 0 1px var(--g2-brand); }
.g2-bf.is-open .g2-bf__pin { animation: g2-bf-drop .3s ease-out both; animation-delay: calc(var(--i, 0) * 50ms + 80ms); }
@keyframes g2-bf-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes g2-bf-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.g2-bf__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.g2-bf__near { display: inline-flex !important; align-items: center; gap: 6px; padding: 0 !important; font-size: 12.5px; font-weight: 700; color: var(--g2-brand) !important; cursor: pointer; }
.g2-bf__near:hover { color: var(--g2-brand-hover) !important; }
.g2-bf__near:disabled { opacity: .6; cursor: progress; }
.g2-bf__note { font-size: 12px; color: var(--g2-muted); }
.g2-bf__note[hidden] { display: none; }

/* A bounded scroll area (the branch list, the wide description): a thin scrollbar whose thumb shows only while
   scrolling or on hover (g2.js adds is-scrolling and drops it 800ms after the last scroll), a soft fade at the bottom
   while there is more below (has-more), and the page scrolls on at both ends. */
.g2-scrollarea {
    overflow-y: auto;
    overscroll-behavior: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color .3s ease;
}
.g2-scrollarea:hover, .g2-scrollarea.is-scrolling { scrollbar-color: rgba(255, 255, 255, .26) transparent; }
.g2-scrollarea::-webkit-scrollbar { width: 6px; height: 6px; }
.g2-scrollarea::-webkit-scrollbar-track { background: transparent; }
.g2-scrollarea::-webkit-scrollbar-thumb { border-radius: 3px; background: transparent; }
.g2-scrollarea:hover::-webkit-scrollbar-thumb, .g2-scrollarea.is-scrolling::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .26); }
.g2-scrollarea.has-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); }
.g2-scrollarea:focus { outline: none; }
.g2-scrollarea:focus-visible { outline: 2px solid var(--g2-brand); outline-offset: 2px; }
.g2-bf__scroll { display: flex; flex-direction: column; gap: 10px; max-height: 260px; padding-inline-end: 4px; }

.g2-pdp .g2-bf__group { margin: 2px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--g2-dim); }
.g2-bf__list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.g2-bf__item { border-radius: 10px; }
.g2-bf.is-open .g2-bf__item { animation: g2-bf-row .24s ease-out both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes g2-bf-row { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.g2-bf__item.is-hot, .g2-bf__item:has([aria-expanded="true"]) { background: var(--g2-raised); }
.g2-bf__line { display: flex; align-items: center; gap: 4px; min-height: 40px; }
.g2-bf__row { display: flex; flex: 1 1 auto; align-items: center; gap: 10px; min-width: 0; height: 40px; padding: 0 8px; border-radius: 10px; cursor: pointer; outline: none; }
.g2-bf__row:focus-visible { box-shadow: inset 0 0 0 2px var(--g2-brand); }
.g2-bf__dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: #56b47c; }
.g2-bf__item.is-out .g2-bf__dot { background: #5a616b; }
.g2-bf__text { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.g2-bf__text b { font-weight: 700; color: var(--g2-text); }
.g2-bf__text small { font-size: 12px; color: var(--g2-muted); }
.g2-bf__item.is-out .g2-bf__text { opacity: .6; }
.g2-bf__dist { flex: 0 0 auto; font-size: 11.5px; font-weight: 600; color: var(--g2-muted); white-space: nowrap; }
.g2-bf__dist[hidden] { display: none; }
.g2-bf__star { display: grid !important; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; padding: 0 !important; border-radius: 8px !important; color: var(--g2-dim) !important; cursor: pointer; }
.g2-bf__star svg { fill: none; transition: transform .15s ease; }
.g2-bf__star:hover { color: var(--g2-text) !important; }
.g2-bf__star.is-chosen { color: var(--g2-gold) !important; }
.g2-bf__star.is-chosen svg { fill: currentColor; }
.g2-bf__star:active svg { transform: scale(.85); }
.g2-bf__actions { display: flex; gap: 8px; padding: 0 8px 8px 26px; }
[dir="rtl"] .g2-bf__actions { padding: 0 26px 8px 8px; }
.g2-bf__actions[hidden], .g2-bf__actions:not(:has(a)) { display: none; }
.g2-bf__action { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--g2-line2); font-size: 12px; font-weight: 700; color: var(--g2-text) !important; text-decoration: none !important; }
.g2-bf__action:hover { background: var(--g2-surface); }

/* The share button beside the title and its popover (four pills). */
.g2-buy__head { display: flex; align-items: flex-start; gap: 10px; }
.g2-buy__head .g2-buy__title { flex: 1 1 auto; min-width: 0; }
.g2-share { position: relative; flex: 0 0 auto; margin-top: 4px; }
.g2-share__toggle { display: inline-flex !important; align-items: center; gap: 6px; height: 32px; padding: 0 12px !important; border-radius: 999px !important; box-shadow: inset 0 0 0 1px var(--g2-line2); font-size: 12.5px; font-weight: 700; color: var(--g2-text) !important; cursor: pointer; }
.g2-share__toggle:hover, .g2-share__toggle[aria-expanded="true"] { background: var(--g2-raised) !important; }
.g2-share__pop { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 30; display: flex; flex-direction: column; gap: 6px; width: 190px; padding: 8px; border-radius: 14px; border: 1px solid var(--g2-line2); background: var(--g2-surface); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.g2-share__pop[hidden] { display: none; }
.g2-share__pill { display: flex !important; align-items: center; gap: 10px; height: 36px; padding: 0 14px !important; border-radius: 999px !important; background: var(--g2-raised) !important; font-size: 13px; font-weight: 700; color: var(--g2-text) !important; text-decoration: none !important; text-align: start; cursor: pointer; }
.g2-share__pill:hover { background: #232931 !important; }
.g2-share__pill--whatsapp { background: #25d366 !important; color: #0b0d10 !important; }
.g2-share__pill--whatsapp:hover { background: #3ee07a !important; }

/* "Listen": a small pill under the short description; the player opens inline under it. */
.g2-listen { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.g2-listen__pill { display: inline-flex !important; align-items: center; gap: 6px; height: 28px; padding: 0 12px !important; border-radius: 999px !important; background: var(--g2-raised) !important; font-size: 12px; font-weight: 700; color: var(--g2-text) !important; cursor: pointer; }
.g2-listen__pill:hover, .g2-listen__pill[aria-expanded="true"] { background: var(--g2-brand-soft) !important; color: var(--g2-brand) !important; }
.g2-listen__player { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.g2-listen__player[hidden] { display: none; }

/* The key facts strip at the bottom of the stage. */
.g2-facts {
    grid-area: facts;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px 16px;
    margin: 0;
    padding: 18px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    list-style: none;
}

.g2-facts__item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.g2-facts__icon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: rgba(255, 255, 255, .06); color: #c9ced4; }
.g2-facts__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.g2-facts__text small { font-size: 11px; line-height: 1.25; color: var(--g2-dim); }
.g2-facts__values { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; line-height: 1.25; }
.g2-facts__more { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 6px; background: var(--g2-raised); font-size: 11px; font-weight: 700; color: var(--g2-muted); cursor: help; }
.g2-facts__values b { font-weight: 700; color: var(--g2-text); }

/* ---- the section bar (desktop, from 1100px): sticky at the top (the desktop header scrolls away) ---- */
.g2-pbar {
    position: sticky;
    top: 0;
    z-index: 900;
    display: none;
    align-items: center;
    gap: 16px;
    min-height: 56px;
    margin-block: -10px -6px;
    padding: 0 6px;
    border-bottom: 1px solid var(--g2-line);
    background: rgba(11, 13, 16, .92);
    backdrop-filter: blur(8px);
}

.g2-pbar__links { display: flex; flex: 1 1 auto; gap: 4px; min-width: 0; overflow: hidden; }
.g2-pbar__link { position: relative; display: inline-flex; align-items: center; height: 56px; padding: 0 12px; font-size: 13.5px; font-weight: 600; color: var(--g2-muted) !important; white-space: nowrap; }
.g2-pbar__link:hover, .g2-pbar__link.is-current { color: var(--g2-text) !important; }
.g2-pbar__link.is-current::after { content: ""; position: absolute; inset: auto 10px 0; height: 2px; border-radius: 2px; background: var(--g2-brand); }
.g2-pbar__link[hidden] { display: none; }
.g2-pbar__buy { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; font-size: 16px; font-weight: 800; animation: g2-fade-in .2s ease-out; }
.g2-pbar__buy[hidden] { display: none; }
.g2-pbar__title { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--g2-muted); }
.g2-pbar__add { height: 38px; padding: 0 16px; }

@keyframes g2-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- the sections ---- */
.g2-psec { display: flex; flex-direction: column; gap: 16px; min-width: 0; scroll-margin-top: 72px; }
.g2-pdp .g2-psec__title { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.25; color: var(--g2-text) !important; }
#pdp-similar { scroll-margin-top: 72px; }

/* Bought together. */
.g2-together { display: flex; align-items: center; gap: 20px; padding: 18px; border-radius: 20px; border: 1px solid var(--g2-line); background: var(--g2-surface); }
.g2-together__items { display: flex; flex: 1 1 auto; align-items: center; gap: 12px; min-width: 0; }
.g2-together__plus { flex: 0 0 auto; font-size: 20px; font-weight: 700; color: var(--g2-dim); }

.g2-together__item {
    position: relative;
    display: grid;
    grid-template-columns: 22px 64px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    flex: 1 1 0;
    min-width: 0;
    padding: 10px;
    border-radius: 14px;
    background: var(--g2-raised);
}

.g2-together__check { position: absolute; opacity: 0; width: 1px; height: 1px; }
.g2-together__box { display: grid; place-items: center; width: 22px; height: 22px; margin: 0; border-radius: 6px; border: 1.5px solid #3a414b; cursor: pointer; }
.g2-together__check:checked + .g2-together__box { border-color: var(--g2-brand); background: var(--g2-brand); }
.g2-together__check:checked + .g2-together__box::after { content: ""; width: 10px; height: 5px; margin-top: -2px; border-left: 2px solid #0b0d10; border-bottom: 2px solid #0b0d10; transform: rotate(-45deg); }
.g2-together__check:disabled + .g2-together__box { cursor: default; opacity: .85; }
.g2-together__check:focus-visible + .g2-together__box { outline: 2px solid var(--g2-brand); outline-offset: 2px; }
.g2-together__frame { display: block; width: 64px; height: 64px; }
.g2-together__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 15px; font-weight: 700; }
.g2-together__this { font-size: 11px; font-weight: 700; color: var(--g2-brand); }
.g2-together__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--g2-text) !important; }
.g2-together__buy { display: flex; flex: 0 0 210px; flex-direction: column; gap: 8px; }
.g2-together__label { display: flex; align-items: baseline; gap: 4px; font-size: 12px; color: var(--g2-muted); }
.g2-together__total { display: inline-flex; align-items: baseline; gap: 5px; font-size: 26px; font-weight: 800; }
.g2-together__total .g2e-price__cur { font-size: 13px; font-weight: 600; color: var(--g2-muted); }
.g2-together__add { width: 100%; }

/* Overview: the description; beside it from 1400px (two equal columns) Good to know, the specifications and a small
   buy card that sticks under the header. Below 1400px the same elements stack and the buy card is hidden. */
.g2-overview__grid { display: flex; flex-direction: column; gap: 16px; }
.g2-overview__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.g2-overview__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.g2-overview__specs { display: flex; flex-direction: column; gap: 16px; min-width: 0; scroll-margin-top: 72px; }
.g2-side-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; border-radius: 18px; border: 1px solid var(--g2-line); background: var(--g2-surface); }
.g2-gtk { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.g2-gtk__item { display: flex; flex-direction: column; gap: 2px; font-size: 13px; text-align: start !important; }
.g2-gtk__item b { color: var(--g2-text); }
.g2-gtk__item > span { color: var(--g2-gold); }
.g2-gtk__values { display: flex; flex-wrap: wrap; gap: 4px 10px; }

.g2-sidebuy { display: none; }

@media (min-width: 1400px) {
    .g2-overview__grid:has(> .g2-overview__side) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
    .g2-sidebuy { position: sticky; top: 72px; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; border: 1px solid var(--g2-line); background: var(--g2-surface); }
}

.g2-sidebuy__img { flex: 0 0 auto; width: 52px; height: 64px; border-radius: 8px; object-fit: contain; background: var(--g2-raised); }
.g2-sidebuy__text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.g2-sidebuy__title { overflow: hidden; font-size: 13px; font-weight: 700; color: var(--g2-text); white-space: nowrap; text-overflow: ellipsis; }
.g2-sidebuy__price { font-size: 16px; font-weight: 800; }
.g2-sidebuy__status { font-size: 12.5px; font-weight: 600; color: var(--g2-muted); }
.g2-sidebuy__action { flex: 0 0 auto; }
.g2-sidebuy__add { height: 42px; padding: 0 16px; }

.g2-pdp .g2-side-card__title { margin: 0; font-size: 14px; font-weight: 700; color: var(--g2-text) !important; }
/* Why buy here: a compact 2 x 2 list under the availability box. */
.g2-why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 0; padding: 0; list-style: none; }
.g2-why li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; line-height: 1.3; color: #c9ced4; }
.g2-why__icon { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 7px; background: var(--g2-raised); color: var(--g2-brand); }

/* The description: the rich text as stored, in a readable container; its markup reset to the Arena style. Clamped to
   about 14 lines with a fade and "Read more" (the whole text is in the HTML). */
.g2-pdesc { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; border-radius: 20px; border: 1px solid var(--g2-line); background: var(--g2-surface); }
.g2-pdesc__body { position: relative; max-width: none; max-height: 700px; overflow: hidden; font-size: 15px; line-height: 1.7; color: #c9ced4; }
.g2-pdesc__body.is-animating, .g2-pdesc .g2-pdesc__body--blocks.is-animating { transition: max-height .32s ease; }
.g2-pdesc__body.is-clamped::after { content: ""; position: absolute; inset: auto 0 0; height: 4em; background: linear-gradient(transparent, var(--g2-surface)); pointer-events: none; }
.g2-pdesc__body.is-open { max-height: none; }
.g2-pdesc__body.is-open::after { display: none; }
.g2-pdesc__body * { font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; color: inherit !important; background: transparent !important; text-transform: none !important; }
.g2-pdesc__body p { margin: 0 0 12px; }
.g2-pdesc__body :is(h1, h2, h3, h4, h5, h6) { margin: 18px 0 6px; font-weight: 700 !important; color: var(--g2-text) !important; }
/* (A stored description's own h1 / h2 are written out as <h3 data-pdesc-top>: the page keeps one H1 and its own H2s.) */
.g2-pdesc__body :is(h1, h2, [data-pdesc-top]) { font-size: 1.2em !important; }
.g2-pdesc__body :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
.g2-pdesc__body :is(ul, ol) { margin: 0 0 12px; padding-inline-start: 1.3em; }
.g2-pdesc__body li { margin-bottom: 4px; }
.g2-pdesc__body li::marker { color: var(--g2-brand); }
.g2-pdesc__body a { color: var(--g2-brand) !important; text-decoration: underline; text-underline-offset: 3px; }
/* Round 5 (Part 6): the stored layout is kept. Round 4's blanket reset (width / margin-inline / float / text-align on
   every block) made the TinyMCE templates' Bootstrap columns (.row > .col-sm-6 ...) lose their widths and stack, and
   undid the admin's centring. Only overflow guards stay: media never wider than the column and never stretched;
   tables scroll sideways on phones only. Text colours stay neutralised for the dark background (the rule above). */
/* Old HTML descriptions: the text in a 720px column centred in the card; images and frames up to the card's width. */
.g2-pdesc__body { max-width: none; text-align: start; }
.g2-pdesc__body > :not(img, picture, figure, video, iframe, table, .row, .ratio, .g2-ytfacade, .img-overlay) { max-width: 720px; margin-inline: auto; }
.g2-pdesc__body:has(.row, [class*="col-"], .ratio) { max-width: none; }
.g2-pdesc__body :is(img, video) { max-width: 100% !important; height: auto !important; vertical-align: middle; margin-block: 8px 14px; border-radius: 14px; }
.g2-pdesc__body iframe { max-width: 100% !important; border: 0; border-radius: 14px; }
/* An embed without a ratio wrapper (a bare YouTube iframe) keeps 16:9 at the column's width. */
.g2-pdesc__body :not(.ratio) > iframe:is([src*="youtube"], [src*="youtu.be"], [src*="vimeo"]) { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; }
/* A YouTube video in a stored description is written out as its poster in a button (.g2-ytfacade) that fills the
   player's 16:9 box; the player itself loads after the click (g2.js openVideo). The play mark is drawn, not an image.
   !important on the poster's size and margin: the image rule above forces height: auto and its own margins. */
.g2-pdesc__body .g2-ytfacade { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #000 !important; cursor: pointer; }
.g2-pdesc__body .ratio > .g2-ytfacade { aspect-ratio: auto; }
.g2-pdesc__body .g2-ytfacade img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; border-radius: 0; object-fit: cover; }
.g2-pdesc__body .g2-ytfacade::before { content: ""; position: absolute; inset: 0; z-index: 1; width: 68px; height: 46px; margin: auto; border-radius: 12px; background: rgba(11, 13, 16, .78); transition: background-color .15s; }
.g2-pdesc__body .g2-ytfacade::after { content: ""; position: absolute; top: 50%; left: 50%; z-index: 2; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; transform: translate(-40%, -50%); }
.g2-pdesc__body .g2-ytfacade:hover::before, .g2-pdesc__body .g2-ytfacade:focus-visible::before { background: var(--g2-brand); }
/* <picture> wrappers added by WrapFilesImagesWithPicture take no box of their own, so an image stays the flex / grid /
   column child it was in the editor. */
.g2-pdesc__body picture { display: contents; }
.g2-pdesc__body table { margin: 0 0 14px; border-collapse: collapse; font-size: .9em !important; }
.g2-pdesc__body :is(td, th) { padding: 6px 10px; border: 1px solid var(--g2-line); }
.g2-pdesc__body th { color: var(--g2-text) !important; }
/* The template layouts (wwwroot/admin/tinymce_templates, styled in the editor by admin/css/tinymce_content(_ar).css):
   Bootstrap's grid does the columns; these are the editor rules that also apply here, in Arena colours. */
.g2-pdesc__body .row { margin-bottom: 12px; }
.g2-pdesc__body .full_width { width: 100% !important; height: auto !important; }
.g2-pdesc__body .half_width { width: 50% !important; height: auto !important; }
.g2-pdesc__body .full_height { height: 100% !important; width: auto !important; }
.g2-pdesc__body .half_height { height: 50% !important; width: auto !important; }
.g2-pdesc__body .ratio > iframe { width: 100% !important; height: 100% !important; margin: 0; }
.g2-pdesc__body .ratio { margin-block: 8px 14px; border-radius: 14px; overflow: hidden; }
.g2-pdesc__body .img-overlay { position: relative; display: inline-block; }
.g2-pdesc__body .img-overlay img { display: block; width: 100%; height: auto; margin: 0; }
.g2-pdesc__body .img-overlay .overlay-text { position: absolute; bottom: 10px; inset-inline-start: 10px; padding: 5px 10px; border-radius: 6px; background: rgba(11, 13, 16, .72) !important; color: var(--g2-text) !important; }
.g2-pdesc__body .card { height: 100%; border: 1px solid var(--g2-line); border-radius: 14px; overflow: hidden; }
.g2-pdesc__body .card :is(.card__content, .card-body) { padding: 14px; }
.g2-pdesc__body blockquote { margin: 0 0 14px; padding-inline-start: 14px; border-inline-start: 3px solid var(--g2-brand); color: var(--g2-text) !important; }
.g2-pdesc__body .accordion-button { padding: 12px 0; color: var(--g2-text) !important; box-shadow: none !important; }
.g2-pdesc__body :is(.accordion-item, .accordion .card) { border: 0; border-bottom: 1px solid var(--g2-line); border-radius: 0; }
@media (max-width: 767px) {
    /* Columns stack below 768px only (the templates use col-sm-*, which would keep them side by side from 576px). */
    .g2-pdesc__body .row > [class*="col"] { flex: 0 0 auto; width: 100%; max-width: 100%; }
    .g2-pdesc__body table { display: block; max-width: 100%; overflow-x: auto; }
}
.g2-pdesc__more { align-self: flex-start; font-size: 13px !important; font-weight: 700 !important; color: var(--g2-brand) !important; }
.g2-pdesc__more[hidden] { display: none; }
/* A description written as blocks (the shared block editor): Articles/_StoryBlocks.cshtml inside .g2-pdesc__body--blocks;
   the blocks' own styles are newsroom.css, linked by the product page only for such a description. The box does not
   carry .g2-pdesc__body: that class's resets are for stored rich text and would flatten the blocks. Same column, text
   size, colours and "Read more" clamp as the stored HTML (357px = its 23.8em). */
.g2-pdesc .g2-pdesc__body--blocks { --nr-lime: var(--g2-brand); position: relative; max-width: none; max-height: 700px; overflow: hidden; padding-bottom: 0; font-size: 15px; line-height: 1.7; color: #c9ced4; text-align: start; }
[dir="rtl"] .g2-pdesc .g2-pdesc__body--blocks { line-height: 1.7; }
.g2-pdesc .g2-pdesc__body--blocks.is-clamped::after { content: ""; position: absolute; inset: auto 0 0; z-index: 2; height: 4em; background: linear-gradient(transparent, var(--g2-surface)); pointer-events: none; }
.g2-pdesc .g2-pdesc__body--blocks.is-open { max-height: none; }
.g2-pdesc .g2-pdesc__body--blocks.is-open::after { display: none; }
.g2-pdesc .g2-pdesc__body--blocks > * + * { margin-top: 14px; }
.g2-pdesc .g2-pdesc__body--blocks > :first-child { margin-top: 0 !important; }
/* Text blocks (text, titles, lists, Q&A, boxes, quote, legacy text, the short description) read in a 720px column
   centred in the card; the visual blocks (photos, galleries, photo + text, feature cards, wide photo, video, specs,
   editions, products) use the card's whole width. */
.g2-pdesc .g2-pdesc__body--blocks > :is(.nr-text, .nr-h2, .nr-h3, .nr-list, .nr-faq, .nr-box, .nr-quote, .nr-legacy, .g2-pdesc__short) { max-width: 720px; margin-inline: auto !important; }
.g2-pdesc__short p + p { margin-top: 12px; }
/* Titles: the description's section title is an H3 and its small title an H4 here (the page has one H1 and H2 sections). */
.g2-pdesc .g2-pdesc__body--blocks .nr-h2 { margin: 22px 0 0 !important; font-size: 1.2em; line-height: 1.35; font-weight: 700; color: var(--g2-text) !important; }
.g2-pdesc .g2-pdesc__body--blocks .nr-h3 { margin: 18px 0 0 !important; font-size: 1em; line-height: 1.4; font-weight: 700; color: var(--g2-text) !important; }
.g2-pdesc .g2-pdesc__body--blocks .nr-pb__title { font-size: 1em; }
.g2-pdesc .g2-pdesc__body--blocks .nr-quote p { font-size: 17px; }
.g2-pdesc .g2-pdesc__body--blocks .nr-faq summary { font-size: 15px; }
.g2-pdesc .g2-pdesc__body--blocks .nr-number__value { font-size: 40px; }
/* Nothing leaves the column (the box clips for the clamp), and cards sit one level above the description's surface. */
.g2-pdesc .g2-pdesc__body--blocks :is(.nr-photo--wide, .nr-photo--full, .nr-wide) { margin-inline: 0; }
.g2-pdesc .g2-pdesc__body--blocks .nr-photo--full .nr-photo__img { border-radius: 14px; }
.g2-pdesc .g2-pdesc__body--blocks :is(.nr-summary, .nr-faq, .nr-product, .nr-score, .nr-proscons, .nr-compare__scroll, .nr-pb__card) { background: var(--g2-raised); }
.g2-pdesc .g2-pdesc__body--blocks :is(.nr-compare thead th, .nr-pb__table thead th) { background: #1f232a; }
/* Movement stays, shorter than on a story page (newsroom.js adds nr-motion; nothing moves without it or under reduced motion). */
html.nr-motion .g2-pdesc__body--blocks .nr-block[data-nr-motion="slideRight"]:not(.is-in) { transform: translateX(14px); }
html.nr-motion .g2-pdesc__body--blocks .nr-block[data-nr-motion="slideLeft"]:not(.is-in) { transform: translateX(-14px); }
html.nr-motion .g2-pdesc__body--blocks .nr-block[data-nr-motion="rise"]:not(.is-in) { transform: translateY(10px); }
html.nr-motion .g2-pdesc__body--blocks .nr-block[data-nr-motion="zoom"]:not(.is-in) { transform: scale(.98); }
html.nr-motion .g2-pdesc__body--blocks .nr-block[data-nr-motion="blurIn"]:not(.is-in) { filter: blur(4px); transform: scale(1.01); }
html.nr-motion .g2-pdesc__body--blocks .nr-block[data-nr-motion="pop"]:not(.is-in) { transform: scale(.95); }
html.nr-motion .g2-pdesc__body--blocks .nr-block[data-nr-stagger="1"]:not(.is-in) .nr-step { transform: translateY(6px); }
/* The description preview document (Products/_DescriptionPreview.cshtml, shown in an admin frame): the section alone. */
body.g2-pdesc-preview { margin: 0; padding: 16px; background: #0b0d10; }
.g2-pdesc-preview .g2-pdp { padding-bottom: 0; }
.g2-pinstr { padding: 18px 22px; border-radius: 18px; border: 1px solid var(--g2-line); background: var(--g2-surface); font-size: 14px; color: #c9ced4; }
.g2-pdp .g2-pinstr__title { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--g2-text) !important; }
.g2-pinstr ol { margin: 0; padding-inline-start: 1.3em; }

/* The audio player (today's, restyled in place; opened by "Listen" in the buy box). */
.product-audio-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.product-audio-title { font-size: 13px; font-weight: 600; color: var(--g2-text); }
.product-audio-switch { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--g2-raised); }
.product-audio-lang-btn { padding: 5px 8px !important; border-radius: 6px !important; font-size: 12px; font-weight: 600; color: #cfd6e4 !important; }
.product-audio-lang-btn.active { background: var(--g2-brand) !important; color: #0b0d10 !important; }
.product-audio-controls { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 10px; background: var(--g2-raised); }
.product-audio-play { display: grid !important; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 8px !important; background: var(--g2-brand) !important; color: #0b0d10 !important; font-size: 13px; font-weight: 700; }
.product-audio-time { min-width: 64px; font-size: 11px; color: #d9deea; white-space: nowrap; text-align: center; }
.product-audio-progress { flex: 1; height: 14px; margin: 0; accent-color: var(--g2-brand); }
/* Specifications: titled cards in a masonry wall (CSS columns: 2 beside the description from 1400px, 3 at 1200-1399,
   2 at 768-1199, 1 on phones). */
.g2-specs { columns: 3; column-gap: 16px; }
.g2-specs__card { display: inline-flex; flex-direction: column; gap: 6px; width: 100%; margin-bottom: 16px; padding: 16px 18px; break-inside: avoid; border-radius: 18px; border: 1px solid var(--g2-line); background: var(--g2-surface); }
.g2-pdp .g2-specs__title { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--g2-text) !important; }
.g2-specs__list { display: flex; flex-direction: column; margin: 0; }
.g2-specs__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; padding: 8px 0; border-top: 1px solid #1f232a; font-size: 13px; }
.g2-specs__row:first-child { border-top: 0; }
.g2-specs__row dt { margin: 0; font-weight: 500; color: var(--g2-muted); }
.g2-specs__row dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; font-weight: 600; color: var(--g2-text); }
.g2-specs__chip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 7px; background: var(--g2-raised); font-size: 12px; font-weight: 600; }

/* All versions: one row per product, each a link; the current one marked, out of stock dimmed. */
.g2-versions { display: flex; flex-direction: column; margin: 0; padding: 0; overflow: hidden; border-radius: 18px; border: 1px solid var(--g2-line); background: var(--g2-surface); list-style: none; }
.g2-versions li + li { border-top: 1px solid var(--g2-line); }

.g2-versions__row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) 140px 150px 160px 20px;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 8px 16px;
    font-size: 13.5px;
    color: var(--g2-text) !important;
    transition: background-color .15s;
}

.g2-versions__row:hover { background: var(--g2-raised); }
.g2-versions__row.is-current { background: rgba(255, 255, 255, .03); }
.g2-versions__row.is-out { opacity: .5; }
.g2-versions__name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; font-weight: 700; }
.g2-versions__this { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--g2-brand-soft); font-size: 11px; font-weight: 700; color: #cfe08f; }
.g2-versions__cond { color: var(--g2-muted); }
.g2-versions__price { font-size: 15px; font-weight: 700; }
.g2-versions__stock { font-size: 12.5px; color: var(--g2-muted); }
.g2-versions__stock--out { color: var(--g2-dim); }
.g2-versions__arrow { opacity: .5; }
.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; } }

/* Light motion (g2.js setUpProductMotion, only without reduced motion): sections below the first screen rise 8px and
   fade in once; spec cards and "You may also like" cards follow one after another. Never the stage. */
.g2-pdp__reveal:not(:has(*)) { display: none; }
html.g2-motion .g2-reveal { transition: opacity .3s ease-out, transform .3s ease-out; }
html.g2-motion .g2-reveal:not(.is-in) { opacity: 0; transform: translateY(8px); }
html.g2-motion .g2-reveal [data-pdp-stagger] { transition: opacity .3s ease-out, transform .3s ease-out; }
html.g2-motion .g2-reveal:not(.is-in) [data-pdp-stagger] { opacity: 0; transform: translateY(8px); }
html.g2-motion .g2-reveal.is-in:not(.is-settled) [data-pdp-stagger],
html.g2-motion #pdp-similar.g2-reveal.is-in:not(.is-settled) [data-pdp-stagger] { transition-delay: calc(var(--i, 0) * 40ms); }

@media (hover: hover) and (min-width: 1100px) {
    .g2-pdp .g2-specs__card, .g2-pdp #pdp-similar .g2-hs > * { transition: transform .2s ease-out, opacity .3s ease-out; }
    .g2-pdp .g2-specs__card:hover, .g2-pdp #pdp-similar .g2-hs > *:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .28); }
}

.g2-pdp :is(.g2-btn--primary, .g2-buy__main--pre) { transition: transform .1s ease-out; }
.g2-pdp :is(.g2-btn--primary, .g2-buy__main--pre):active { transform: scale(.98); }

/* ---- the phone bottom bar (below 1100px), only once the main button has scrolled away ---- */
.g2-pdock { display: none; }

/* ---- the zoom viewer (g2.js): the image grows from its place to the centre over a darkening backdrop ---- */
.g2-zoom { position: fixed; inset: 0; z-index: 3000; overscroll-behavior: contain; touch-action: none; }
.g2-zoom__backdrop { position: absolute; inset: 0; background: rgba(5, 6, 8, .88); opacity: 0; transition: opacity .32s cubic-bezier(.2, .8, .2, 1); }
.g2-zoom.is-open .g2-zoom__backdrop { opacity: 1; }
@media (hover: hover) and (min-width: 1100px) { .g2-zoom__backdrop { backdrop-filter: blur(8px); } }
.g2-zoom__stage { position: absolute; inset: 0; overflow: hidden; }
.g2-zoom__img { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; will-change: transform; user-select: none; -webkit-user-drag: none; cursor: zoom-in; }
.g2-zoom.is-magnified .g2-zoom__img { cursor: grab; }
.g2-zoom__img--large { opacity: 0; transition: opacity .2s ease; }
.g2-zoom__img--large.is-ready { opacity: 1; }

.g2-zoom__close, .g2-zoom__nav {
    position: absolute;
    z-index: 2;
    display: grid !important;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50% !important;
    background: rgba(20, 23, 28, .85) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
    color: var(--g2-text) !important;
    opacity: 0;
    transition: opacity .2s ease;
}

.g2-zoom.is-open :is(.g2-zoom__close, .g2-zoom__nav) { opacity: 1; }
.g2-zoom__nav[hidden], .g2-zoom__count[hidden] { display: none !important; }
.g2-zoom__close { top: calc(16px + env(safe-area-inset-top, 0px)); inset-inline-end: 16px; }
.g2-zoom__nav { top: 50%; margin-top: -22px; }
.g2-zoom__nav--prev { inset-inline-start: 16px; }
.g2-zoom__nav--next { inset-inline-end: 16px; }
.g2-zoom__count { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: 50%; z-index: 2; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: rgba(20, 23, 28, .85); font-size: 12px; color: var(--g2-muted); }
.g2-zoom__video { position: absolute; inset: 50% auto auto 50%; width: min(92vw, 1100px); aspect-ratio: 16 / 9; transform: translate(-50%, -50%); border: 0; border-radius: 14px; background: #000; }

/* Desktop: the section bar shows. Wide screens: 4 specification columns. */
@media (min-width: 1100px) {
    .g2-pbar { display: flex; }
}

@media (min-width: 1600px) {
    .g2-stage { grid-template-columns: minmax(0, 1fr) 440px; }
}

@media (min-width: 1400px) {
    .g2-overview__side .g2-specs { columns: 2; column-fill: balance; }
    /* The specifications open the right column, so their heading shares a line with the description's. */
    .g2-overview__side > .g2-overview__specs { order: -1; }
    /* The description scrolls inside its card (g2.js sets the height to the right column's), no "Read more". */
    .g2-pdesc .is-scrollarea { overflow-y: auto; padding-inline-end: 6px; }
    .g2-pdesc .is-scrollarea::after { display: none; }
    /* "Specifications" in the section bar: a short ring on the column it scrolls to. */
    .g2-overview__specs.is-flashed { border-radius: 18px; animation: g2-specs-flash 1.2s ease-out 1; }
}

@keyframes g2-specs-flash { 0%, 50% { box-shadow: 0 0 0 4px rgba(149, 171, 82, .28); } 100% { box-shadow: 0 0 0 4px rgba(149, 171, 82, 0); } }

/* Desktop: the photo stays in view while the buy column grows (the stage clips without becoming a scroll box, so the
   sticky column follows the page). */
@media (min-width: 1100px) {
    .g2-stage { overflow: clip; }
    .g2-stage__gallery { position: sticky; top: 80px; align-self: start; height: clamp(340px, calc(100vh - 120px), 620px); }
}

@media (max-width: 1199px) {
    .g2-specs { columns: 2; }
}

/* Tablets and phones (< 1100px): no section bar; the bottom bar takes the price and the button. */
@media (max-width: 1099px) {
    .g2-stage { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 20px 24px; padding: 18px; }

    .g2-pdock {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 1980;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--g2-line2);
        background: rgba(17, 20, 26, .96);
        box-shadow: 0 -10px 30px rgba(0, 0, 0, .45);
        animation: g2-dock-in .2s ease-out;
    }

    .g2-pdock[hidden] { display: none; }
    .g2-pdock__price { flex: 1 1 auto; font-size: 18px; font-weight: 800; }
    .g2-pdock__add { flex: 0 0 auto; height: 46px; padding: 0 20px; }
    /* 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; }
}

@keyframes g2-dock-in { from { transform: translateY(100%); } to { transform: none; } }

@media (max-width: 899px) {
    .g2-stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "gallery" "buy" "facts"; }
}

/* Phones: dots and swipe instead of thumbnails, two-line version rows, one specification column, 2 facts per row. */
@media (max-width: 767px) {
    .g2-pdp { gap: 22px; }
    .g2-stage { gap: 16px; padding: 14px; border-radius: 20px; }
    .g2-stage__gallery { grid-template-columns: minmax(0, 1fr); }
    .g2-stage__thumbs { display: none; }
    .g2-stage__slides { height: 320px; }
    .g2-stage__zoom { padding: 34px 10px 30px !important; }
    .g2-stage__dots { position: absolute; bottom: 6px; left: 50%; z-index: 2; display: flex !important; gap: 6px; transform: translateX(-50%); }
    .g2-stage__dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .3); transition: width .2s, background-color .2s; }
    .g2-stage__dots i.is-active { width: 16px; background: var(--g2-text); }
    .g2-stage__video-chip { position: absolute; bottom: 0; inset-inline-end: 0; z-index: 2; display: inline-flex !important; align-items: center; gap: 6px; height: 28px; padding: 0 10px !important; border-radius: 999px !important; background: rgba(11, 13, 16, .7) !important; font-size: 12px; font-weight: 700; color: var(--g2-text) !important; }
    .g2-pdp .g2-buy__title { font-size: 22px; }
    .g2-buy__price { font-size: 28px; }
    .g2-pick__options--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .g2-facts { grid-template-columns: 1fr 1fr; }
    .g2-pdp .g2-psec__title { font-size: 19px; }
    .g2-together { flex-direction: column; align-items: stretch; padding: 14px; }
    .g2-together__items { flex-direction: column; align-items: stretch; }
    .g2-together__plus { align-self: center; margin-block: -6px; font-size: 16px; }
    .g2-together__buy { flex-basis: auto; }
    .g2-pdesc { padding: 16px; }
    .g2-specs { columns: 1; }
    .g2-versions__row { grid-template-columns: minmax(0, 1fr) auto 16px; grid-template-areas: "name price arrow" "cond stock arrow"; gap: 2px 10px; padding: 10px 14px; }
    .g2-versions__name { grid-area: name; }
    .g2-versions__price { grid-area: price; text-align: end; }
    .g2-versions__cond { grid-area: cond; font-size: 12px; }
    .g2-versions__stock { grid-area: stock; text-align: end; font-size: 12px; }
    .g2-versions__arrow { grid-area: arrow; }
}

/* 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); }
}

/* The gallery's slide (g2.js showGallerySlide): the image leaving fades to .35, the one arriving fades in from .35,
   for as long as the slide takes. With a mouse on a wide screen the leaving one also shrinks a little and both blur. */
@media (prefers-reduced-motion: no-preference) {
    .g2-stage__slides.is-sliding .g2-stage__slide { transition: opacity .36s ease, transform .36s ease, filter .36s ease; }
    .g2-stage__slide.is-leaving, .g2-stage__slide.is-entering { opacity: .35; }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (min-width: 1100px) {
    .g2-stage__slide.is-leaving { transform: scale(.98); filter: blur(3px); }
    .g2-stage__slide.is-entering { filter: blur(3px); }
}

@media (prefers-reduced-motion: reduce) {
    .g2-overview__specs.is-flashed, .g2-bf__pinlabel, .g2-scrollarea { animation: none !important; transition: none !important; }
    .g2-stage__img, .g2-pick__row.is-changed, .g2-pdock, .g2-pbar__buy, .g2-cart__badge.is-bumped { animation: none !important; }
    .g2-zoom__backdrop, .g2-zoom__img--large, .g2-zoom__close, .g2-zoom__nav, .g2-avail__chev { transition: none !important; }
    .g2-bf, .g2-bf__inner, .g2-bf__pin, .g2-bf__pin::before, .g2-bf__pin svg, .g2-bf__item, .g2-bf__star svg { animation: none !important; transition: none !important; }
    .g2-pdesc__body, .g2-pdesc__body--blocks { transition: none !important; }
    .g2-pdp .g2-specs__card, .g2-pdp #pdp-similar .g2-hs > *, .g2-pdp :is(.g2-btn--primary, .g2-buy__main--pre) { transition: none !important; transform: none !important; }
    html .g2-reveal, html .g2-reveal [data-pdp-stagger] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================================================================
   CHECKOUT AND ACCOUNT (Round 4; design/home/Checkout-Account.html)
   Shopping/Cart, Shipping (+ Members/ShippingAddresses, Pickup, PickupBranch, EmailDeliveryInfo), Checkout,
   OrderSuccess (+ OrderDigitalCodes, OrderPayments); Members/MyAccount, Orders (+ ListOrders), OrderDetails,
   AccountAddresses, EditAccount, RewardPoints and the account menu (_AccountMenu); the focused checkout header
   (_CheckoutHeader) and its one-line footer. Every page root is .g2-co. The ids, names and old classes the scripts
   read stay on the elements; only g2- classes are styled here (plus the few old hooks noted below).
   ============================================================================================================ */
.g2-co *, .g2-co *::before, .g2-co *::after,
.g2-ckhead *, .g2-ckhead *::before, .g2-ckhead *::after,
.g2-ckfoot * {
    box-sizing: border-box;
}

.g2-co {
    padding-bottom: 40px;
    color: var(--g2-text);
}

/* Sentence case (custom.css title-cases headings, labels and .btn) and the site's fonts. */
.g2-co :is(h1, h2, h3, h4, h5, label, legend, button, .g2-btn, summary, input, select, th),
.g2-ckhead :is(a, span, b), .g2-ckfoot a {
    text-transform: none !important;
    letter-spacing: normal !important;
}

:where(.g2-co, .g2-ckhead, .g2-ckfoot) a { color: inherit; text-decoration: none; }
:where(.g2-co, .g2-ckhead, .g2-ckfoot) a:hover { text-decoration: none; }
:where(.g2-co) :is(h1, h2, h3, h4) { margin: 0; color: var(--g2-text); line-height: 1.3; text-wrap: balance; }
:where(.g2-co) p { margin: 0; color: inherit; font-size: inherit; line-height: 1.5; }
:where(.g2-co) :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.g2-co) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.g2-co li { text-align: start !important; }
/* Addresses and names typed in either language (dir="auto"): custom.rtl.css forces direction: rtl on every span, which
   put "12 Abbas El Akkad St" back to front; the text's own first letter decides instead. */
.g2-co [dir="auto"] { unicode-bidi: plaintext !important; }
/* Stacked lines with a number among them (a phone number, an order number): each line keeps its own width, so the
   number (direction ltr) still starts at the line start in Arabic. */
.g2-co :is(.g2-orow__id, .g2-shipto__text, .g2-addr__lines, .g2-infocard p, .g2-odetail__lines, .g2-anav__name, .g2-sitem__text, .g2-oline__text, .g2-mbar__total) { align-items: flex-start; }
.g2-co .dark_container ul { padding: 0; }

.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;
}

/* Prices in these pages: the site's one format (PriceMarkup). Amounts are always light (the old summary's .amount
   inherited Bootstrap's dark table colour). */
.g2-co .g2e-price { display: inline-flex; align-items: baseline; gap: .22em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g2-co .g2e-price__cur { font-size: .62em; font-weight: 600; color: var(--g2-muted); }
.g2-co .g2e-price__int { font-weight: 700; }
.g2-co .g2e-price__num { direction: ltr !important; unicode-bidi: isolate; }
.g2-co .g2e-price__dec { font-size: .62em; font-weight: 700; }
.g2-co .amount, .g2-co .g2-row__value, .g2-co .g2e-price__int { color: var(--g2-text); }

/* ---------- the focused checkout header (Delivery, Payment) ---------- */
.g2-ckhead {
    background: rgba(15, 18, 21, .78);
    border-bottom: 1px solid var(--g2-hair);
}

/* Round 5 (4.1): 72px tall, 32px numbered circles (the number centred by the grid itself: no padding, line-height 1,
   tabular figures), 15px semi-bold labels, 2px connectors; the current step in the brand colour, done steps ticked
   and linked, upcoming ones muted. Phones: 56px, 26px circles, the current label only. */
.g2-ckhead__bar {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 72px;
}

.g2-ckhead__logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.g2-ckhead__logo-img { display: block; width: auto; height: 30px; }
.g2-ckhead__spacer { flex: 1 1 auto; }

.g2-steps {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    font-size: 15px;
    color: var(--g2-dim);
}

.g2-steps__step { display: flex; align-items: center; gap: 10px; }
.g2-steps__link { display: inline-flex; align-items: center; gap: 10px; color: inherit; }
a.g2-steps__link:hover { color: var(--g2-text); }
.g2-steps__name { font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; }

.g2-steps__dot {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    border-radius: 50%;
    border: 2px solid var(--g2-line2);
    font-size: 14px;
    font-weight: 700;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.g2-steps__dot svg { display: block; }
.g2-steps__step.is-done { color: var(--g2-muted); }
.g2-steps__step.is-done .g2-steps__dot { background: var(--g2-brand); border-color: var(--g2-brand); color: #0b0d10; }
.g2-steps__step.is-current { color: var(--g2-brand); }
.g2-steps__step.is-current .g2-steps__dot { border-color: var(--g2-brand); color: var(--g2-brand); background: var(--g2-brand-soft); }
.g2-steps__line { width: 36px; height: 2px; border-radius: 2px; background: var(--g2-line2); }
.g2-steps__step.is-done + .g2-steps__step .g2-steps__line { background: var(--g2-brand); }

.g2-ckhead__end { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; font-size: 12.5px; color: var(--g2-muted); }
.g2-ckhead__secure { display: inline-flex; align-items: center; gap: 6px; color: var(--g2-brand); }
.g2-ckhead__secure-text { color: var(--g2-muted); }
.g2-ckhead__hotline { display: inline-flex; align-items: center; gap: 6px; color: var(--g2-muted) !important; }
.g2-ckhead__hotline b { color: var(--g2-text); }

.g2-ckfoot { margin-top: 24px; border-top: 1px solid var(--g2-hair); background: #12161b; }
.g2-ckfoot__row { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; padding-block: 18px; font-size: 12.5px; color: var(--g2-dim); }
.g2-ckfoot__row a { color: var(--g2-muted) !important; }
.g2-ckfoot__row a:hover { color: var(--g2-text) !important; }

/* Delivery and Payment: no back-to-top button (short pages, and it sat on the phone bar). */
body.g2-focused #scrollToTopBtn { display: none !important; }
body.g2-focused .grecaptcha-badge { visibility: hidden; }

/* ---------- page frame ---------- */
.g2-ptitle { padding-block: 22px 16px; }
.g2-ptitle h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em !important; }

.g2-co__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
    align-items: start;
}

.g2-co__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.g2-co__side { min-width: 0; position: sticky; top: 16px; }

.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);
}

/* The old hook "#submitForm .dark_container" is this card on the payment page: the theme's container rules lose. */
.g2-co .g2-card.dark_container { border-radius: 18px !important; border: 1px solid var(--g2-line); background-color: var(--g2-surface) !important; box-shadow: none; }

.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-muted { color: var(--g2-muted); font-size: 13px; }

.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 !important; letter-spacing: normal !important; }
.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); }

/* A product picture in a fixed frame, contained (never cropped). */
.g2-frame {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    aspect-ratio: 1;
    padding: 6px;
    border-radius: 12px;
    background: #0f1215;
    overflow: hidden;
}

.g2-frame .g2-media__img { filter: none; }

/* Banners */
.g2-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--g2-text);
}

.g2-banner > .g2-icon { margin-top: 1px; }
.g2-banner b { display: block; font-size: 13.5px; }
.g2-banner--gold { background: rgba(244, 182, 61, .07); border: 1px solid rgba(244, 182, 61, .25); }
.g2-banner--gold > .g2-icon { color: var(--g2-gold); }
.g2-banner--ok { background: rgba(61, 220, 132, .07); border: 1px solid rgba(61, 220, 132, .25); }
.g2-banner--red { background: rgba(255, 107, 91, .07); border: 1px solid rgba(255, 107, 91, .28); }
.g2-banner--red > .g2-icon { color: #ff978b; }
.g2-banner--action { align-items: center; }
.g2-banner--action > span { flex: 1 1 auto; min-width: 0; }
.g2-banner--action > .g2-btn { flex: 0 0 auto; }

.g2-loading { display: grid; place-items: center; padding: 18px; }
.g2-loading img { width: 48px; height: 48px; }

/* ---------- cart ---------- */
.g2-citems { display: flex; flex-direction: column; }

.g2-citem {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding-block: 14px;
    border-top: 1px solid var(--g2-line);
}

.g2-citem:first-child { border-top: 0; padding-top: 0; }
.g2-citem__frame { width: 96px; }
.g2-citem__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.g2-citem__cat { font-size: 12.5px; color: var(--g2-muted); }
.g2-citem__title { font-size: 15px !important; font-weight: 600 !important; line-height: 1.35 !important; }
.g2-citem__title a { color: var(--g2-text) !important; }
.g2-citem__title a:hover { color: var(--g2-brand-hover) !important; }
.g2-citem__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.g2-citem__side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.g2-citem__price { font-size: 18px; font-weight: 800; }
.g2-citem__actions { display: flex; align-items: center; gap: 14px; margin: 0; }
.g2-citem__remove { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--g2-dim) !important; cursor: pointer; }
.g2-citem__remove:hover { color: #ff978b !important; font-size: 12.5px !important; font-weight: 500 !important; }
.g2-citems__note { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--g2-line); font-size: 12.5px; color: var(--g2-gold); }

.g2-qty { display: inline-flex; align-items: center; height: 36px; border-radius: 10px; border: 1px solid var(--g2-line2); background: var(--g2-input); }
.g2-qty__btn { display: grid; place-items: center; width: 34px; height: 34px; color: var(--g2-muted) !important; }
.g2-qty__btn:hover:not(:disabled) { color: var(--g2-text) !important; }
.g2-qty__btn:disabled { opacity: .35; cursor: default; }
.g2-qty__value { min-width: 26px; text-align: center; font-size: 14px; font-weight: 700; }

.g2-empty { align-items: center; text-align: center; gap: 10px; padding: 40px 20px; }
.g2-empty__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--g2-input); color: var(--g2-muted); }
.g2-empty h2 { font-size: 20px; font-weight: 700; }
.g2-empty p { color: var(--g2-muted); font-size: 14px; }
.g2-empty__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 4px; }

/* ---------- the order summary (cart, delivery, payment) ---------- */
.g2-sum__toggle { display: none; }
.g2-sum__body { display: flex; flex-direction: column; gap: 14px; }
.g2-sum__note { font-size: 12px; color: var(--g2-dim); text-align: center; }
.g2-sum__note a { color: var(--g2-muted) !important; text-decoration: underline !important; }

.g2-sitems { display: flex; flex-direction: column; gap: 10px; }
.g2-sitem { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.g2-sitem__frame { width: 46px; padding: 4px; border-radius: 10px; }
.g2-sitem__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.g2-sitem__text a { color: var(--g2-text) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g2-sitem__text small { color: var(--g2-dim); font-size: 11.5px; }
.g2-sitem__price { flex: 0 0 auto; font-size: 13px; }

.g2-rows { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.g2-rows--small { font-size: 13px; }
.g2-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.g2-row[hidden] { display: none; }
.g2-row__label { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--g2-muted); font-size: 13.5px; }
.g2-row__note { font-size: 13px; color: var(--g2-muted); text-align: end; }
.g2-row__value { font-weight: 600; text-align: end; }
.g2-row__value--save { color: #7be8a8 !important; }
.g2-row__action { font-size: 12px; font-weight: 600; color: var(--g2-brand) !important; text-decoration: underline !important; }
.g2-row--total { padding-top: 12px; border-top: 1px solid var(--g2-line); font-size: 18px; font-weight: 800; }
.g2-rows--small .g2-row--total { font-size: 16px; }
.g2-row--total .g2-row__value, .g2-row--total .g2e-price__int { font-weight: 800; }
.g2-row--note { font-size: 12px; }
.g2-row--note .g2-row__label { font-size: 12px; }

.g2-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 12px !important; border-top: 1px solid var(--g2-line); }
.g2-trust li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--g2-muted); }
.g2-trust .g2-icon { color: var(--g2-brand); }

/* The phone bar: the total and the next step at the bottom of the screen (below 992px). Its button clicks the page's
   own #place_order / #btnSubmit (g2.js), never a second submit path. The chat and back-to-top buttons step up above it
   (body.g2-mbar-shown, g2.js). */
.g2-mbar { display: none; }

/* ---------- delivery options, addresses, branches ---------- */
.g2-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }

.g2-opt { position: relative; border-radius: 14px; border: 1px solid var(--g2-line2); background: var(--g2-input); cursor: pointer; transition: border-color .15s, background-color .15s; }
.g2-opt:hover { border-color: #3a4049; }
.g2-opt.selected { border-color: var(--g2-brand); background: var(--g2-brand-soft); box-shadow: 0 0 0 3px rgba(149, 171, 82, .12); }
.g2-opt.is-disabled { cursor: default; opacity: .6; }
.g2-opt__label { display: flex; align-items: center; gap: 12px; padding: 14px; margin: 0; }
.g2-opt__radio, .g2-addr__radio, .g2-pm__radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.g2-opt__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(255, 255, 255, .05); color: var(--g2-brand); flex: 0 0 auto; }
.g2-opt__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.g2-opt__text b { font-size: 14.5px; }
.g2-opt__text small { font-size: 12px; color: var(--g2-muted); }
.g2-opt__list { display: flex; flex-direction: column; font-size: 12px; color: #ff978b; }
.g2-opt:focus-within { outline: 2px solid var(--g2-brand); outline-offset: 2px; }

/* The round radio mark (filled with the brand colour when its card is selected). */
.g2-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #3a414b; flex: 0 0 auto; margin-inline-start: auto; transition: border-width .15s, border-color .15s; }
:is(.g2-opt.selected, .address-box.selected, .payment-box.selected, .g2-branch.is-selected) .g2-radio { border: 6px solid var(--g2-brand); }

.g2-co #pickup, .g2-co #emailDelivery { display: none; }
.g2-co #delivery, .g2-co #pickup, .g2-co #emailDelivery { margin-top: 6px; }

.g2-addrs__head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.g2-addrs__head h3 { font-size: 15px; font-weight: 700; }
.g2-addrs__head p { font-size: 12.5px; color: var(--g2-muted); }
.g2-addrs { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 0 !important; padding: 0 !important; }
.g2-addrs__item { position: relative; display: flex; min-width: 0; list-style: none; }
.g2-addrs__item::marker { content: ""; }

.g2-addr {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--g2-line2);
    background: var(--g2-input);
    text-align: start;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.g2-addr:hover { border-color: #3a4049; }
.g2-addr.selected { border-color: var(--g2-brand); background: var(--g2-brand-soft); }
.g2-addr.is-off { opacity: .6; }
.g2-addr:focus-within { outline: 2px solid var(--g2-brand); outline-offset: 2px; }
.g2-addr--static { cursor: default; }
.g2-addr--static:hover { border-color: var(--g2-line2); }
.g2-addr__top { display: flex; align-items: center; gap: 8px; padding-inline-end: 34px; }
.g2-addr__top .g2-radio { position: absolute; top: 14px; inset-inline-end: 44px; margin: 0; }
.g2-addr--static .g2-addr__top { padding-inline-end: 0; }
.g2-addr__name { font-size: 14px; }
.g2-addr__lines { display: flex; flex-direction: column; font-size: 12.5px; color: var(--g2-muted); line-height: 1.5; }
.g2-addr__street { color: var(--g2-text); font-size: 13.5px; }
.g2-addr__fee { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--g2-line); font-size: 12.5px; color: var(--g2-muted); }
.g2-addr__fee-value { color: var(--g2-text); font-weight: 600; }

.g2-addr--add {
    align-items: center;
    justify-content: center;
    flex-direction: row;
    min-height: 120px;
    border-style: dashed;
    color: var(--g2-brand);
    font-size: 14px;
    font-weight: 700;
}

.g2-addr--add .add_new_address, button.g2-addr--add { display: inline-flex; align-items: center; gap: 8px; color: var(--g2-brand) !important; cursor: pointer; font-weight: 700; }
.g2-addr--add:hover { border-color: var(--g2-brand); background: var(--g2-brand-soft); }

/* custom.css styles the old cards by id (#memberAddresses li .address-box ...: no side borders, none on the last one):
   the same id here so the cards keep one border all round. */
#memberAddresses li .address-box.g2-addr { padding: 14px; border: 1px solid var(--g2-line2); background-color: var(--g2-input); margin: 0; }
#memberAddresses li .address-box.g2-addr:hover { border-color: #3a4049; }
#memberAddresses li .address-box.g2-addr.selected { border-color: var(--g2-brand); background-color: var(--g2-brand-soft); }
#memberAddresses li .address-box.g2-addr--add { border-style: dashed; }
#memberAddresses li .address-box.g2-addr--add:hover { border-color: var(--g2-brand); background-color: var(--g2-brand-soft); }

/* The ... menu beside an address card (outside .address-box, so it never selects the address). */
.g2-addr__menu { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 2; }
.g2-addr__menu-button { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--g2-dim); cursor: pointer; list-style: none; }
.g2-addr__menu-button::-webkit-details-marker { display: none; }
.g2-addr__menu-button::marker { content: ""; }
.g2-addr__menu-button:hover, .g2-addr__menu[open] .g2-addr__menu-button { background: var(--g2-raised); color: var(--g2-text); }
.g2-addr__menu-list { position: absolute; top: 34px; inset-inline-end: 0; min-width: 140px; padding: 6px; border-radius: 12px; background: var(--g2-raised); border: 1px solid var(--g2-line2); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
.g2-addr__menu-list a { display: block; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: #ff978b !important; cursor: pointer; }
.g2-addr__menu-list a:hover { background: rgba(255, 107, 91, .1); }

.g2-co .g2-pickup.dark_container { padding: 0; background: transparent !important; border: 0; border-radius: 0 !important; box-shadow: none; }
.g2-pickup__title { font-size: 15px !important; font-weight: 700 !important; }
.g2-pickup__sub { font-size: 12.5px !important; color: var(--g2-muted) !important; margin-bottom: 12px !important; }
.g2-branches { display: flex; flex-direction: column; gap: 8px; }
.g2-branch { position: relative; display: flex; flex-direction: column; border-radius: 14px; border: 1px solid var(--g2-line2); background: var(--g2-input); transition: border-color .15s, background-color .15s; }
.g2-branch[hidden] { display: none; }
.g2-branch__row { display: flex; align-items: stretch; min-width: 0; }
.g2-branch:hover { border-color: #3a4049; }
.g2-branch.is-selected { border-color: var(--g2-brand); background: var(--g2-brand-soft); }
.g2-branch__pick { display: flex !important; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; padding: 12px 14px !important; text-align: start; cursor: pointer; }
.g2-branch__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.g2-branch__text b { font-size: 14px; }
.g2-branch__text span { font-size: 12px; color: var(--g2-muted); }
.g2-branch__pick .g2-radio { margin: 0; }
.g2-branch__map { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding-inline: 14px; border-inline-start: 1px solid var(--g2-line); font-size: 12.5px; font-weight: 600; color: var(--g2-brand) !important; }
.g2-branch__map:hover { color: var(--g2-brand-hover) !important; }
.g2-co .branch_inventory { margin-top: 12px; }
/* Round 5: the detail sits inside the chosen branch's card. */
.g2-co .g2-branch .branch_inventory { margin: 0; padding: 0 12px 12px; }
.g2-co .g2-branch .branch_inventory:empty { display: none; }

.g2-stocknote { margin-bottom: 10px !important; font-size: 13px !important; color: var(--g2-muted) !important; }
.g2-stocknote strong { color: var(--g2-text); }
.g2-stock { display: flex; flex-direction: column; gap: 8px; padding: 0 !important; margin: 0 !important; }
.g2-stock__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--g2-raised); }
.g2-stock__item.is-off .g2-frame, .g2-stock__item.is-off b { opacity: .55; }
.g2-stock__frame { width: 52px; }
.g2-stock__qty { position: absolute; top: 2px; inset-inline-end: 2px; padding: 0 5px; border-radius: 6px; background: var(--g2-brand); color: #0b0d10; font-size: 11px; font-weight: 800; }
.g2-stock__text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; font-size: 13px; }
.g2-stock__text small { font-size: 12px; color: var(--g2-muted); }

.g2-instant { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--g2-raised); }
.g2-instant__status { font-size: 13.5px !important; font-weight: 600; color: var(--g2-text) !important; }
.g2-instant__row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13.5px; }
.g2-instant__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .05); color: var(--g2-brand); }
.g2-instant__value { min-width: 0; overflow-wrap: anywhere; }
.g2-instant + .g2-banner, .g2-banner + .g2-banner { margin-top: 10px; }

/* ---------- payment ---------- */
.g2-shipto__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 12px; align-items: start; font-size: 13px; }
.g2-shipto__icon { color: var(--g2-brand); }
.g2-shipto__text { display: flex; flex-direction: column; gap: 2px; line-height: 1.5; }
.g2-shipto__text b { font-size: 14px; }
.g2-shipto__text span { color: var(--g2-text); }
.g2-shipto__text small { font-size: 12px; color: var(--g2-muted); margin-top: 4px; }

.g2-pgroup { display: flex; flex-direction: column; gap: 8px; }
.g2-pgroup__title { margin-top: 4px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--g2-dim) !important; }
[dir="rtl"] .g2-pgroup__title { letter-spacing: 0 !important; }

.g2-pm {
    position: relative;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--g2-line2);
    background: var(--g2-input);
    text-align: start;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.g2-pm:hover { border-color: #3a4049; }
.g2-pm.selected { border-color: var(--g2-brand); background: var(--g2-brand-soft); }
.g2-pm.disabled { cursor: default; opacity: .45; }
.g2-pm.disabled:hover { border-color: var(--g2-line2); }
.g2-pm:focus-within { outline: 2px solid var(--g2-brand); outline-offset: 2px; }
.g2-pm .g2-radio { margin: 0; }
.g2-pm__icon { color: var(--g2-brand); }
.g2-pm__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.g2-pm__text b { font-size: 14.5px; }
.g2-pm__text small { font-size: 12px; color: var(--g2-muted); line-height: 1.45; }
.g2-pm__text .g2-pm__why { color: var(--g2-gold); }
.g2-pm__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.g2-co .g2-logos { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.g2-logo { display: inline-grid; place-items: center; height: 24px; padding: 0 8px; border-radius: 6px; background: rgba(255, 255, 255, .08); color: #dfe3e8; font-size: 10.5px; font-weight: 800; direction: ltr; white-space: nowrap; }

.g2-points { gap: 12px; }
.g2-points__head { display: flex; align-items: center; gap: 12px; }
.g2-points__head b { display: block; font-size: 14px; }
.g2-points__head small { display: block; font-size: 12px; color: var(--g2-muted); }
.g2-points__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(244, 182, 61, .12); color: var(--g2-gold); flex: 0 0 auto; }
.g2-points__form { display: flex; gap: 8px; margin: 0; }
.g2-points__form .g2-input { flex: 1 1 auto; min-width: 0; }

/* #btnSubmit stays an <input type=button>: the spinner of a submitted order is drawn over it (C4). */
.g2-paybtn { position: relative; }
.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-paybtn #btnSubmit:disabled { opacity: .85; }
.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; }

@keyframes g2-spin { to { transform: rotate(360deg); } }

.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; }

/* ---------- order success ---------- */
.g2-okhero { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 0 26px; text-align: center; }
.g2-okhero__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: rgba(61, 220, 132, .12); color: #3ddc84; animation: g2-pop .4s cubic-bezier(.2, .9, .3, 1.4); }
.g2-okhero h1 { font-size: 28px; font-weight: 800; }
.g2-okhero__ids { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.g2-okhero__text { max-width: 520px; font-size: 13px; color: var(--g2-muted); }
.g2-okhero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }

@keyframes g2-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

.g2-idchip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--g2-raised); border: 1px solid var(--g2-line2); font-size: 13px; }
.g2-idchip small { color: var(--g2-dim); }
.g2-refchip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, .04); color: var(--g2-dim); font-size: 11.5px; cursor: help; }

.g2-fawryref { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 6px; padding: 16px 22px; border-radius: 16px; background: var(--g2-surface); border: 1px dashed rgba(244, 182, 61, .45); }
.g2-fawryref__label { font-size: 12px; font-weight: 600; color: var(--g2-gold); }
.g2-fawryref__number { font-size: 30px; font-weight: 800; letter-spacing: .06em; color: var(--g2-text); }
.g2-fawryref small { font-size: 12px; color: var(--g2-muted); }

.g2-success__body { display: flex; flex-direction: column; gap: 16px; }
/* The hook wrappers the scripts fill (empty until then) add no gap of their own. */
.g2-success__body > :is(.order-digital-codes, .order-payment-requests, .order-payments) { display: contents; }
.g2-success__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.g2-success__branch { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: var(--g2-muted); }
.g2-infocard__title { font-size: 15px; font-weight: 700; }
.g2-infocard p { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--g2-muted); line-height: 1.6; }
.g2-infocard p b { color: var(--g2-text); }

.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; }

.g2-request { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; border-top: 1px solid var(--g2-line); }
.g2-request:first-of-type { border-top: 0; padding-top: 0; }
.g2-request__text { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--g2-muted); line-height: 1.5; }
.g2-request__text b { color: var(--g2-text); font-size: 14px; }
.g2-request__ref { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 10px 14px; border-radius: 12px; background: var(--g2-raised); flex: 0 0 auto; }
.g2-request__ref small { font-size: 11.5px; color: var(--g2-dim); }
.g2-request__ref b { font-size: 16px; color: var(--g2-gold); }

.g2-codes__list { display: flex; flex-direction: column; gap: 10px; }
.g2-code { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--g2-raised); }
.g2-code__frame { width: 52px; }
.g2-code__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; font-size: 13.5px; }
.g2-code__text small { font-size: 12px; color: var(--g2-muted); }
.g2-code__value { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.g2-code__value h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--g2-brand) !important; direction: ltr; }
.g2-code__hidden { letter-spacing: .1em; color: var(--g2-muted); }
.g2-code__status { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--g2-muted); }
.g2-codes__empty { font-size: 13px; color: var(--g2-muted); text-align: center; }

.g2-payments__pending { display: flex; align-items: center; gap: 16px; }
.g2-payments__animation { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.g2-payments__text p { font-size: 13px; color: var(--g2-muted); }
.g2-payments .count-down-time { font-size: 18px; font-weight: 800; color: var(--g2-gold); }
.g2-payments__list { display: flex; flex-direction: column; gap: 10px; }
.g2-payments__item { display: flex; align-items: center; gap: 12px; }
.g2-payments__ok { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(61, 220, 132, .12); color: #3ddc84; flex: 0 0 auto; }
.g2-payments__item .g2-payments__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; font-size: 13.5px; }
.g2-payments__item small { font-size: 12px; color: var(--g2-muted); }

.g2-olines { display: flex; flex-direction: column; }
.g2-oline { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding-block: 10px; border-top: 1px solid var(--g2-line); font-size: 13.5px; }
.g2-oline:first-child { border-top: 0; padding-top: 0; }
.g2-oline__frame { width: 56px; padding: 5px; }
.g2-oline__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.4; }
.g2-oline__text a { color: var(--g2-text) !important; }
.g2-oline__text a:hover { color: var(--g2-brand-hover) !important; }
.g2-oline__text small { font-size: 12px; color: var(--g2-muted); }

.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; }

/* ---------- account ---------- */
.g2-acc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.g2-acc__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.g2-anav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 18px; background: var(--g2-surface); border: 1px solid var(--g2-line); }
.g2-anav__who { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 10px 12px 14px; border-bottom: 1px solid var(--g2-line); }
.g2-anav__avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--g2-brand-soft); color: var(--g2-brand); font-weight: 800; flex: 0 0 auto; }
.g2-anav__name { display: flex; flex-direction: column; min-width: 0; }
.g2-anav__name b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g2-anav__name small { font-size: 12px; color: var(--g2-muted); }
.g2-anav__link { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--g2-muted) !important; }
.g2-anav__link:hover { background: var(--g2-raised); color: var(--g2-text) !important; }
.g2-anav__link.is-current { background: var(--g2-raised); color: var(--g2-text) !important; }
.g2-anav__link.is-current .g2-icon { color: var(--g2-brand); }
.g2-anav__link--out { margin-top: 4px; border-top: 1px solid var(--g2-line); border-radius: 0 0 10px 10px; }

.g2-mtabs { display: none; }

.g2-latest { gap: 12px; }
.g2-latest__body { min-width: 0; }
.g2-latest__body .g2-orow { padding: 0; border-top: 0; }
.g2-latest__track { align-self: flex-start; }
.g2-latest__track[hidden] { display: none; }
.g2-skeleton { border-radius: 12px; background: linear-gradient(90deg, var(--g2-input) 0%, var(--g2-raised) 50%, var(--g2-input) 100%); background-size: 200% 100%; animation: g2-shimmer 1.4s linear infinite; }
.g2-skeleton--row { height: 56px; }

@keyframes g2-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.g2-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.g2-kpi { gap: 8px; }
.g2-kpi__label { font-size: 12.5px; color: var(--g2-muted); }
.g2-kpi__big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 26px; font-weight: 800; }
.g2-kpi__big small { font-size: 13px; color: var(--g2-muted); font-weight: 500; }
.g2-kpi__line { font-size: 14px; font-weight: 600; }

.g2-olist { display: flex; flex-direction: column; }
.g2-olist__loading, .g2-olist__empty p { padding: 18px 4px; font-size: 13px; color: var(--g2-muted); text-align: center; }
.g2-co #load_more { display: none; margin-top: 12px; }

.g2-orow {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr) auto 20px;
    gap: 16px;
    align-items: center;
    padding: 14px 4px;
    border-top: 1px solid var(--g2-line);
    font-size: 13.5px;
    color: var(--g2-text) !important;
    border-radius: 0;
    transition: background-color .15s;
}

.g2-olist > .g2-orow:first-of-type, .g2-olist__loading + .g2-orow { border-top: 0; }
.g2-orow:hover { background: rgba(255, 255, 255, .02); color: var(--g2-text) !important; }
.g2-orow__id { display: flex; flex-direction: column; min-width: 0; }
.g2-orow__id b { font-size: 14px; }
.g2-orow__id small { font-size: 12px; color: var(--g2-dim); }
.g2-orow__total { text-align: end; font-size: 14px; }
.g2-orow__go { color: var(--g2-muted); }

.g2-stack { display: flex; align-items: center; }
.g2-stack__frame { width: 40px; padding: 4px; border-radius: 10px; border: 2px solid var(--g2-surface); margin-inline-start: -10px; }
.g2-stack__frame:first-child { margin-inline-start: 0; }
.g2-stack__more { display: grid; place-items: center; width: 34px; height: 34px; margin-inline-start: -8px; border-radius: 10px; border: 2px solid var(--g2-surface); background: var(--g2-raised); font-size: 11.5px; font-weight: 700; color: var(--g2-muted); }

.g2-odetail__status { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.g2-odetail__date { font-size: 12.5px; color: var(--g2-muted); }
.g2-odetail__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.g2-odetail__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.g2-odetail__lines { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--g2-muted); line-height: 1.6; }
.g2-odetail__lines b { color: var(--g2-text); }

.g2-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g2-track__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12px; color: var(--g2-dim); }
.g2-track__step::before { content: ""; position: absolute; top: 13px; inset-inline-start: -50%; width: 100%; height: 2px; background: var(--g2-line2); z-index: 0; }
.g2-track__step:first-child::before { display: none; }
.g2-track__step.is-done::before, .g2-track__step.is-current::before { background: var(--g2-brand); }
.g2-track__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--g2-surface); border: 2px solid var(--g2-line2); font-size: 12px; font-weight: 700; }
.g2-track__step.is-done .g2-track__dot { background: var(--g2-brand); border-color: var(--g2-brand); color: #0b0d10; }
.g2-track__step.is-current .g2-track__dot { border-color: var(--g2-brand); color: var(--g2-brand); }
.g2-track__step.is-done, .g2-track__step.is-current { color: var(--g2-text); }
.g2-track__step b { font-size: 12.5px; font-weight: 600; }

.g2-addrs--account { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.g2-co #add_new_address { display: none; }

.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; }

.g2-co .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-co .g2-input::placeholder { color: var(--g2-dim); opacity: 1; font-size: 13px; }
.g2-co .g2-input:focus { border-color: var(--g2-brand); outline: none; box-shadow: 0 0 0 3px rgba(149, 171, 82, .18); }
.g2-co 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; }

.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-balance { gap: 8px; background: radial-gradient(80% 140% at 100% 0%, rgba(149, 171, 82, .18), transparent 60%), var(--g2-surface); }
[dir="rtl"] .g2-balance { background: radial-gradient(80% 140% at 0% 0%, rgba(149, 171, 82, .18), transparent 60%), var(--g2-surface); }
.g2-balance__label { font-size: 12.5px; color: var(--g2-muted); }
.g2-balance__big { display: flex; align-items: baseline; gap: 8px; font-size: 34px; font-weight: 800; line-height: 1.2; }
.g2-balance__big small { font-size: 15px; color: var(--g2-muted); font-weight: 600; }
.g2-balance__worth { align-self: flex-start; height: auto; min-height: 26px; padding-block: 4px; white-space: normal; }
.g2-howto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.g2-howto__step { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 14px; background: var(--g2-input); border: 1px solid var(--g2-line); font-size: 12.5px; color: var(--g2-muted); line-height: 1.5; }
.g2-howto__step b { font-size: 14px; color: var(--g2-text); }
.g2-howto__number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--g2-brand-soft); color: var(--g2-brand); font-weight: 800; }

/* ---------- the Bootstrap modals on these pages (address, verify, delete): restyled only ---------- */
.g2-modal .modal-content { border-radius: 18px !important; border: 1px solid var(--g2-line2); background: var(--g2-surface) !important; color: var(--g2-text); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.g2-modal .modal-header, .g2-modal .modal-footer { border-color: var(--g2-line) !important; }
.g2-modal .modal-title, .g2-modal h4 { font-size: 17px !important; font-weight: 700 !important; color: var(--g2-text) !important; text-transform: none !important; }
.g2-modal label { font-size: 12.5px !important; font-weight: 600; color: var(--g2-muted) !important; text-transform: none !important; }
.g2-modal .form-control { min-height: 44px; border-radius: 12px; border: 1px solid var(--g2-line2); background: var(--g2-input); color: var(--g2-text); font-size: 14px; }
.g2-modal textarea.form-control { height: 76px; padding-top: 10px; }
.g2-modal select.form-control:not([size]):not([multiple]) { height: 44px; font-size: 14px; }
.g2-modal .form-control:focus { border-color: var(--g2-brand); box-shadow: 0 0 0 3px rgba(149, 171, 82, .18); }
.g2-modal .form-group { margin-bottom: 14px; }
.g2-modal .btn-close { filter: invert(1) grayscale(1); opacity: .7; }
.g2-modal .modal-footer { gap: 10px; }
.g2-modal .modal-footer .g2-btn { margin: 0; }
.g2-co .g2e-area-ac-menu { z-index: 1065; max-height: 280px; overflow-y: auto; }
.g2-co .g2e-area-ac-item { font-size: 12px; padding: 5px; }

/* ============================================================================================================
   ROUND 5: checkout flow (Delivery, Payment, Cart, order success, My addresses, /locate) - the address sheet, the
   pickup picker, the points card, messages, phone rules.
   ============================================================================================================ */

/* The TempData message (Web MessageViewComponent: .alert in .site-content > .container) on the checkout pages and the
   cart: an Arena banner on the page's own width, in both languages. */
:is(body.g2-focused, body:has(.g2-co)) #message_container .site-content { margin: 0; padding: 0; background: none; }
:is(body.g2-focused, body:has(.g2-co)) #message_container .container { max-width: var(--g2-wrap-max); padding-inline: var(--g2-wrap-pad); margin-inline: auto; }
:is(body.g2-focused, body:has(.g2-co)) #message_container .row { margin: 0; }
:is(body.g2-focused, body:has(.g2-co)) #message_container .col-12 { padding: 0; }
:is(body.g2-focused, body:has(.g2-co)) #message_container .alert {
    display: block;
    margin: 16px 0 0 !important;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid rgba(244, 182, 61, .35);
    background: rgba(244, 182, 61, .08);
    color: var(--g2-text) !important;
    font-size: 14px;
    line-height: 1.5;
    text-align: start;
}
:is(body.g2-focused, body:has(.g2-co)) #message_container .alert .highlight { color: var(--g2-gold) !important; font-weight: 700; }
:is(body.g2-focused, body:has(.g2-co)) #message_container .alert .highlight:empty { display: none; }
:is(body.g2-focused, body:has(.g2-co)) #message_container .alert-danger { border-color: rgba(255, 107, 91, .4); background: rgba(255, 107, 91, .08); }
:is(body.g2-focused, body:has(.g2-co)) #message_container .alert-danger .highlight { color: #ff978b !important; }
:is(body.g2-focused, body:has(.g2-co)) #message_container .alert-info { border-color: rgba(61, 123, 255, .35); background: rgba(61, 123, 255, .08); }
:is(body.g2-focused, body:has(.g2-co)) #message_container .alert-info .highlight { color: #8fb2ff !important; }
:is(body.g2-focused, body:has(.g2-co)) #message_container .alert-success { border-color: rgba(61, 220, 132, .35); background: rgba(61, 220, 132, .08); }
:is(body.g2-focused, body:has(.g2-co)) #message_container .alert-success .highlight { color: #7be8a8 !important; }

/* 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; }

/* Loading and failed states of the parts the Delivery page loads. */
.g2-loading--inline { padding: 12px; }
.g2-loading .g2-spinner { width: 22px; height: 22px; color: var(--g2-brand); }
.g2-loaderror { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 107, 91, .3); background: rgba(255, 107, 91, .06); font-size: 13.5px; color: var(--g2-text); }
.g2-skeleton--chip { display: block; width: 74px; height: 22px; border-radius: 999px; }
.g2-skeleton--line { display: block; width: 100%; height: 13px; border-radius: 6px; }
.g2-skeleton--short { width: 60%; }
.g2-addr--skeleton { gap: 10px; min-height: 140px; cursor: default; }

/* ---------- address cards (Delivery, My addresses) ---------- */
.g2-addrs__contact { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: 13px !important; color: var(--g2-muted) !important; }
.g2-addrs__contact bdi { color: var(--g2-text); font-weight: 600; }
.g2-addr__type { gap: 6px; height: 24px; max-width: 100%; }
.g2-addr__type bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g2-addr__type .ph, .g2-addr__pinned .ph { font-size: 14px; }
.g2-addr__pinned { gap: 4px; height: 24px; }
.g2-addr__pin, .g2-addr__pinlink { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 4px; font-size: 12.5px; font-weight: 600; color: var(--g2-brand) !important; background: none; border: 0; cursor: pointer; }
.g2-addr__pin:hover, .g2-addr__pinlink:hover { color: var(--g2-brand-hover) !important; }
.g2-addr__pin .ph, .g2-addr__pinlink .ph { font-size: 16px; }
.g2-addr__place { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 14.5px; font-weight: 700; color: var(--g2-text); }
.g2-addr__city { font-size: 12.5px; font-weight: 500; color: var(--g2-muted); }
.g2-addr .g2-addr__street {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    unicode-bidi: plaintext !important;
    white-space: pre-line;
    font-size: 13px;
    line-height: 1.5;
    color: #c9ced4;
}
.g2-addr__landmark { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: var(--g2-muted); }
.g2-addr__landmark .ph { margin-top: 2px; font-size: 14px; color: var(--g2-dim); }
.g2-addr.is-off { opacity: 1; cursor: default; }
.g2-addr.is-off > :not(.g2-addr__fee) { opacity: .55; }
.g2-addr.is-off .g2-radio { display: none; }
.g2-addr__fee .g2-link { font-size: 12.5px; }
.g2-addr--static .g2-addr__fee { gap: 12px; }

/* ---------- the pickup picker ---------- */
.g2-pickup__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.g2-pickup__facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 !important; padding: 0 !important; list-style: none; }
.g2-pickup__facts li { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--g2-muted); }
.g2-pickup__facts .ph { font-size: 15px; color: var(--g2-brand); }
.g2-pickup__tools { display: flex; gap: 8px; margin-bottom: 10px; }
.g2-pickup__search { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; margin: 0; }
.g2-pickup__search .ph { position: absolute; inset-inline-start: 14px; font-size: 16px; color: var(--g2-dim); pointer-events: none; }
.g2-co .g2-pickup__search .g2-input { height: 44px; padding-inline-start: 40px; }
.g2-pickup__near { flex: 0 0 auto; height: 44px; }
.g2-pickup__near[aria-pressed="true"] { border-color: var(--g2-brand) !important; color: var(--g2-brand) !important; }
.g2-pickup__near.is-busy .ph { animation: g2-spin .9s linear infinite; }
.g2-pickup__geo { margin: 0 0 10px !important; font-size: 12.5px !important; color: var(--g2-gold) !important; }
.g2-pickup__cities { display: flex; gap: 6px; margin-bottom: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.g2-pickup__cities::-webkit-scrollbar { display: none; }
.g2-pill2 { display: inline-flex; align-items: center; flex: 0 0 auto; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--g2-line2) !important; background: var(--g2-input) !important; font-size: 13px; font-weight: 600; color: var(--g2-muted) !important; white-space: nowrap; cursor: pointer; }
.g2-pill2[aria-pressed="true"] { background: var(--g2-text) !important; border-color: var(--g2-text) !important; color: #0b0d10 !important; }
.g2-pickup__onlyall { margin-bottom: 10px; height: 30px; padding: 0 12px; border: 0; cursor: pointer; }
.g2-pickup__onlyall[hidden] { display: none; }
.g2-branch__pick { min-height: 64px; }
.g2-branch__where { display: flex; flex-wrap: wrap; gap: 2px 8px; }
.g2-branch__where span { font-size: 12px; color: var(--g2-muted); }
.g2-branch__city { color: var(--g2-dim) !important; }
.g2-branch__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.g2-branch__chips [hidden] { display: none; }
.g2-branch__map { justify-content: center; min-width: 48px; }
.g2-branch__map .ph { font-size: 18px; }
.g2-pickup__empty { padding: 12px 2px; font-size: 13px !important; color: var(--g2-muted) !important; }
.g2-pickup__empty[hidden], .g2-pickup__more[hidden] { display: none; }
.g2-pickup__more { width: 100%; margin-top: 10px; height: 44px; }
.g2-bstock { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--g2-line); }
.g2-bstock__ways { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: rgba(244, 182, 61, .06); border: 1px solid rgba(244, 182, 61, .22); }
.g2-bstock__note { margin: 0 !important; font-size: 13px !important; color: var(--g2-text) !important; }
.g2-bstock__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.g2-bstock__actions [hidden] { display: none; }

/* ---------- the points card (Payment) ---------- */
.g2-pts { gap: 12px; }
.g2-pts__head { display: flex; align-items: center; gap: 12px; }
.g2-pts__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(244, 182, 61, .12); color: var(--g2-gold); flex: 0 0 auto; }
.g2-pts__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.g2-pts__text b { font-size: 14.5px; }
.g2-pts__text small { font-size: 12.5px; color: var(--g2-muted); }
.g2-pts__switchrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: 0; padding: 4px 0; font-size: 14px; font-weight: 600; color: var(--g2-text); cursor: pointer; }
.g2-pts__switchtext { display: inline-flex; gap: 6px; }
.g2-switch { appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto; width: 46px; height: 28px; margin: 0; border-radius: 999px; background: var(--g2-line2); cursor: pointer; transition: background-color .15s; }
.g2-switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: #eef0f3; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform .18s ease; }
.g2-switch:checked { background: var(--g2-brand); }
.g2-switch:checked::after { transform: translateX(18px); }
[dir="rtl"] .g2-switch:checked::after { transform: translateX(-18px); }
.g2-switch:disabled { opacity: .45; cursor: default; }
.g2-switch:focus-visible { outline: 2px solid var(--g2-brand); outline-offset: 2px; }
.g2-pts__applied { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.g2-pts__applied .g2-chip { height: 28px; padding: 0 12px; font-size: 13px; }
.g2-pts__applied .g2-link, .g2-pts__more { display: inline-flex; align-items: center; min-height: 36px; font-size: 13px; }
.g2-pts__more { align-self: flex-start; padding: 0; }
.g2-pts__custom { display: flex; flex-direction: column; gap: 8px; }
.g2-pts__custom[hidden] { display: none; }
.g2-pts__form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.g2-pts__label { font-size: 12.5px !important; font-weight: 600; color: var(--g2-muted) !important; margin: 0; }
.g2-pts__entry { display: flex; gap: 8px; }
.g2-co .g2-pts__entry .g2-input { flex: 1 1 auto; min-width: 0; height: 44px; }
.g2-pts__entry .g2-btn { height: 44px; }
.g2-pts__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.g2-pts__chip { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--g2-line2) !important; background: var(--g2-input) !important; font-size: 13px; font-weight: 700; color: var(--g2-text) !important; cursor: pointer; }
.g2-pts__chip:hover { border-color: var(--g2-brand) !important; }
.g2-pts__error { margin: 0 !important; font-size: 12.5px !important; color: #ff978b !important; }
.g2-pts__note { font-size: 12px !important; color: var(--g2-dim) !important; }
.g2-pts.is-busy { opacity: .7; pointer-events: none; }
/* Inside the summary (desktop): a flat block above the Total. */
.g2-pts-slot:not(:has(*)) { display: none; }
.g2-pts-slot .g2-pts { padding: 14px 0 0; border: 0; border-top: 1px solid var(--g2-line); border-radius: 0; background: none; }
.g2-pts-home:not(:has(*)) { display: none; }
.g2-terms-phone { display: none; }

/* ---------- empty cart ---------- */
.g2-empty2 { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 16px; padding: 22px; }
.g2-empty2__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--g2-brand-soft); color: var(--g2-brand); font-size: 28px; }
.g2-empty2__text { display: flex; flex-direction: column; gap: 4px; }
.g2-empty2__text h2 { font-size: 20px; font-weight: 800; }
.g2-empty2__text p { font-size: 14px; color: var(--g2-muted); }
.g2-empty2__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.g2-empty2__facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 14px !important; border-top: 1px solid var(--g2-line); }
.g2-empty2__facts li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--g2-muted); }
.g2-empty2__facts .ph { font-size: 17px; color: var(--g2-brand); }
.g2-empty2__facts a { color: var(--g2-text) !important; font-weight: 700; }
.g2-ptiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.g2-ptile { display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--g2-line2); background: var(--g2-surface); font-size: 15px; font-weight: 700; color: var(--g2-text) !important; white-space: nowrap; transition: border-color .15s, background-color .15s; }
.g2-ptile:hover { border-color: var(--g2-tone, var(--g2-brand)); background: var(--g2-raised); }

/* ---------- the address sheet (Members/_AddressSheet, g2-address.js) ---------- */
.g2-asheet, .g2-asheet *, .g2-asheet *::before, .g2-asheet *::after { box-sizing: border-box; }
.g2-asheet { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; color: var(--g2-text); font-size: 14px; }
.g2-asheet[hidden], .g2-asheet [hidden] { display: none !important; }
.g2-asheet :is(h2, label, legend, button, .g2-btn, input, select) { text-transform: none !important; letter-spacing: normal !important; }
.g2-asheet__backdrop { position: absolute; inset: 0; background: rgba(11, 13, 16, .72); opacity: 0; transition: opacity .2s ease; }
.g2-asheet__panel { position: relative; display: flex; flex-direction: column; width: min(640px, 100%); max-height: min(92vh, 900px); border-radius: 20px; border: 1px solid var(--g2-line2); background: var(--g2-surface); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); overflow: hidden; opacity: 0; transform: translateY(12px); transition: opacity .2s ease, transform .2s ease; }
.g2-asheet.is-open .g2-asheet__backdrop { opacity: 1; }
.g2-asheet.is-open .g2-asheet__panel { opacity: 1; transform: none; }
html.g2-asheet-open { overflow: hidden; }
.g2-asheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--g2-line); }
.g2-asheet__title { margin: 0; font-size: 17px !important; font-weight: 700 !important; color: var(--g2-text) !important; line-height: 1.3; }
.g2-asheet__x { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 0; background: none; color: var(--g2-muted); cursor: pointer; }
.g2-asheet__x:hover { background: var(--g2-raised); color: var(--g2-text); }
.g2-asheet__body { display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; min-height: 0; margin: 0; padding: 16px 20px 20px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.g2-asheet__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--g2-line); background: var(--g2-surface); }
.g2-asheet__foot .g2-btn { height: 46px; }
.g2-asheet__save { min-width: 150px; }
.g2-asheet__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.g2-asheet__label { margin: 0; padding: 0; float: none; font-size: 12.5px !important; font-weight: 600 !important; color: var(--g2-muted) !important; }
.g2-asheet__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: 15px; box-shadow: none; outline: none; }
.g2-asheet__input::placeholder { color: var(--g2-dim); opacity: 1; font-size: 13.5px; }
.g2-asheet__input:focus { border-color: var(--g2-brand); box-shadow: 0 0 0 3px rgba(149, 171, 82, .18); }
select.g2-asheet__input { padding-inline-end: 30px; }
.g2-asheet__arearow { display: flex; gap: 8px; }
.g2-asheet__search { position: relative; flex: 1 1 auto; min-width: 0; }
.g2-asheet__search .g2-asheet__input { padding-inline-start: 40px; }
.g2-asheet__search-icon { position: absolute; top: 15px; inset-inline-start: 14px; color: var(--g2-dim); pointer-events: none; }
.g2-asheet__locate { flex: 0 0 auto; height: 46px; gap: 6px; }
.g2-asheet__locate .ph { font-size: 17px; }
.g2-asheet__results { position: absolute; top: calc(100% + 4px); inset-inline: 0; z-index: 5; max-height: 260px; margin: 0; padding: 6px; list-style: none; overflow-y: auto; border-radius: 12px; border: 1px solid var(--g2-line2); background: var(--g2-raised); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.g2-asheet__result { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--g2-text); text-align: start; cursor: pointer; }
.g2-asheet__result b { font-size: 14px; }
.g2-asheet__result span { font-size: 12px; color: var(--g2-muted); }
.g2-asheet__result:hover, .g2-asheet__result.is-active { background: rgba(149, 171, 82, .14); }
.g2-asheet__chosen { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 46px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--g2-brand); background: var(--g2-brand-soft); }
.g2-asheet__chosen .ph { font-size: 18px; color: var(--g2-brand); }
.g2-asheet__chosen b { font-size: 14.5px; }
.g2-asheet__chosen .g2-link { margin-inline-start: auto; }
.g2-asheet__manual-link { align-self: flex-start; min-height: 32px; padding: 0; border: 0; background: none; }
.g2-asheet__manual { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.g2-asheet__note { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0; font-size: 12.5px; color: var(--g2-muted); line-height: 1.5; }
.g2-asheet__note--ok { color: #7be8a8; }
.g2-asheet__note--hint { color: var(--g2-text); }
.g2-asheet__note--warn { color: var(--g2-gold); }
.g2-asheet__note .g2-link { border: 0; background: none; padding: 0; min-height: 28px; }
.g2-asheet__help { margin: 0; font-size: 12px; color: var(--g2-dim); }
.g2-asheet__map, .g2-locate__map { position: relative; isolation: isolate; overflow: hidden; background: #1a1f26; }
.g2-asheet__map { height: 260px; border-radius: 14px; border: 1px solid var(--g2-line2); }
.g2-asheet__canvas, .g2-locate__canvas { position: absolute; inset: 0; z-index: 0; }
.g2-asheet .leaflet-container, .g2-locate .leaflet-container { background: #1a1f26; font-family: inherit; }
.g2-asheet .leaflet-container img, .g2-locate .leaflet-container img { max-width: none !important; max-height: none !important; }
/* A mild darkening that keeps the street labels readable. */
.g2-asheet .leaflet-tile-pane, .g2-locate .leaflet-tile-pane { filter: brightness(.84) contrast(1.06) saturate(.85); }
.g2-asheet .leaflet-control-attribution, .g2-locate .leaflet-control-attribution { background: rgba(20, 23, 28, .82) !important; color: var(--g2-muted) !important; font-size: 10.5px; }
.g2-asheet .leaflet-control-attribution a, .g2-locate .leaflet-control-attribution a { color: var(--g2-text) !important; }
.g2-asheet .leaflet-bar a, .g2-locate .leaflet-bar a { background: var(--g2-surface); color: var(--g2-text); border-color: var(--g2-line2); }
/* The fixed pin in the centre: a teardrop whose tip is the map's centre, drawn in CSS. */
.g2-asheet__pin { position: absolute; top: 50%; left: 50%; z-index: 500; width: 0; height: 0; pointer-events: none; }
.g2-asheet__pin::before { content: ""; position: absolute; left: -15px; top: -36px; width: 30px; height: 30px; border-radius: 50% 50% 50% 0; background: radial-gradient(circle at 50% 50%, #0b0d10 0 5px, var(--g2-brand) 6px); transform: rotate(-45deg); box-shadow: 0 6px 14px rgba(0, 0, 0, .45); }
.g2-asheet__pin::after { content: ""; position: absolute; left: -6px; top: -3px; width: 12px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, .45); z-index: -1; }
.g2-asheet__mylocation { position: absolute; z-index: 600; bottom: 12px; inset-inline-end: 12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--g2-line2); background: var(--g2-surface); color: var(--g2-text); box-shadow: 0 6px 16px rgba(0, 0, 0, .4); cursor: pointer; }
.g2-asheet__mylocation .ph { font-size: 20px; }
.g2-asheet__mylocation.is-busy .ph, .g2-asheet__locate.is-busy .ph { animation: g2-spin .9s linear infinite; }
.g2-asheet__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.g2-asheet__field--wide { grid-column: 1 / -1; }
.g2-asheet__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.g2-asheet__chip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; margin: 0; padding: 0 14px; border-radius: 999px; border: 1px solid var(--g2-line2); background: var(--g2-input); font-size: 13.5px; font-weight: 600; color: var(--g2-text); cursor: pointer; }
.g2-asheet__chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.g2-asheet__chip .ph { font-size: 16px; color: var(--g2-muted); }
.g2-asheet__chip:has(input:checked) { border-color: var(--g2-brand); background: var(--g2-brand-soft); }
.g2-asheet__chip:has(input:checked) .ph { color: var(--g2-brand); }
.g2-asheet__chip:has(input:focus-visible) { outline: 2px solid var(--g2-brand); outline-offset: 2px; }
.g2-asheet__otherlabel { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.g2-asheet__error { margin: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 107, 91, .35); background: rgba(255, 107, 91, .08); font-size: 13px; color: #ffb3a8; }
.g2-asheet[data-mode="pin"] .g2-asheet__map { height: min(52vh, 420px); }

/* ---------- /locate ---------- */
.g2-locate { padding-bottom: 32px; }
.g2-locate__form { margin: 0; }
.g2-locate__map { height: 60vh; min-height: 300px; max-height: 640px; border-bottom: 1px solid var(--g2-line); }
.g2-locate__map.is-saved .g2-asheet__pin::before { background: radial-gradient(circle at 50% 50%, #0b0d10 0 5px, #3ddc84 6px); }
.g2-locate__mylocation { position: absolute; z-index: 600; bottom: 14px; inset-inline-end: 14px; height: 44px; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
.g2-locate__mylocation.is-busy svg { animation: g2-spin .9s linear infinite; }
.g2-locate__mapnote { position: absolute; z-index: 700; inset: auto 12px 70px; margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(20, 23, 28, .92); font-size: 13px; color: var(--g2-text); }
/* The card starts under the map (never over it: the OSM attribution in its corner must stay readable). */
.g2-locate__card, .g2-locate__done, .g2-locate__used { max-width: 640px; margin: 16px auto 0; position: relative; z-index: 1; }
.g2-locate__head { display: flex; flex-direction: column; gap: 4px; }
.g2-locate__head h1 { font-size: 20px; font-weight: 800; }
.g2-locate__lead { font-size: 13.5px; color: var(--g2-muted); }
.g2-locate__field { display: flex; flex-direction: column; gap: 6px; }
.g2-locate__label { margin: 0; font-size: 12.5px !important; font-weight: 600 !important; color: var(--g2-muted) !important; text-align: start; direction: inherit; }
.g2-co .g2-locate__textarea { height: auto; min-height: 70px; padding: 10px 14px; line-height: 1.5; resize: vertical; unicode-bidi: plaintext; }
.g2-locate__note { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; color: var(--g2-gold); }
.g2-locate__note--hint { color: var(--g2-text); }
.g2-locate__note .g2-link { border: 0; background: none; padding: 0; }
.g2-locate__error { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 107, 91, .35); background: rgba(255, 107, 91, .08); font-size: 13px; color: #ffb3a8; }
.g2-locate__foot { font-size: 12.5px; color: var(--g2-dim); text-align: center; }
.g2-locate__done, .g2-locate__used { align-items: center; text-align: center; gap: 10px; }
.g2-locate__used { margin-top: 32px; }
.g2-locate__done h2, .g2-locate__used h1 { font-size: 19px; font-weight: 800; }
.g2-locate__done p, .g2-locate__used p { font-size: 14px; color: var(--g2-muted); }
.g2-locate__doneicon, .g2-locate__usedicon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; }
.g2-locate__doneicon { background: rgba(61, 220, 132, .12); color: #3ddc84; }
.g2-locate__usedicon { background: rgba(244, 182, 61, .12); color: var(--g2-gold); }
.g2-locate__usedactions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }

/* ---------- phones and tablets (one column, the phone bar) ---------- */
@media (max-width: 991px) {
    /* The bar at the bottom is the one Continue / Place order: the summary's own copy is hidden (still clicked). */
    .g2-co--focused .g2-sum .place-order { display: none; }
    .g2-terms-phone { display: block; font-size: 12px; color: var(--g2-dim); text-align: center; }
    .g2-terms-phone a { color: var(--g2-muted) !important; text-decoration: underline !important; }
    .g2-ptiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    /* 16px fields stop iOS zooming in; 44px tap targets. */
    .g2-co :is(input, select, textarea).g2-input, .g2-asheet__input, .g2-co .g2-pickup__search .g2-input { font-size: 16px; }
    .g2-co .g2-input { height: 48px; }
    .g2-pickup__tools { flex-wrap: wrap; }
    .g2-pickup__near { flex: 1 1 100%; }
    .g2-addr__pin, .g2-addr__pinlink { min-height: 44px; }

    /* The sheet fills the screen. */
    .g2-asheet { padding: 0; align-items: stretch; }
    .g2-asheet__panel { width: 100%; max-height: none; height: 100%; border-radius: 0; border: 0; transform: translateY(24px); }
    .g2-asheet__head { padding: 10px 12px 10px 16px; }
    .g2-asheet__body { padding: 14px 16px 18px; }
    .g2-asheet__foot { padding-inline: 16px; }
    .g2-asheet__foot .g2-btn { flex: 1 1 0; }
    .g2-asheet__arearow { flex-wrap: wrap; }
    .g2-asheet__locate { flex: 1 1 100%; }
    .g2-asheet__map { height: 220px; }
    .g2-asheet[data-mode="pin"] .g2-asheet__map { height: calc(100vh - 230px); }
    .g2-asheet__manual { grid-template-columns: minmax(0, 1fr); }
    .g2-asheet__grid { grid-template-columns: 1fr 1fr; gap: 12px 10px; }

    .g2-empty2 { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 20px 16px; }
    .g2-empty2__actions { justify-content: center; }
    .g2-empty2__actions .g2-btn { flex: 1 1 100%; height: 46px; }
    .g2-empty2__facts { justify-content: center; }
    .g2-ptile { height: 48px; font-size: 14px; }

    .g2-locate__card, .g2-locate__done { margin-top: 12px; }
    .g2-locate__map { height: 58vh; }
}

@media (prefers-reduced-motion: reduce) {
    .g2-asheet__backdrop, .g2-asheet__panel, .g2-switch, .g2-switch::after { transition: none !important; }
    .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; }

/* ---------- desktop widths ---------- */
@media (min-width: 1600px) {
    .g2-co__grid { grid-template-columns: minmax(0, 1fr) 420px; }
    .g2-acc { grid-template-columns: 260px minmax(0, 1fr); }
}

/* ---------- below 992px: one column; the phone summary and bar ---------- */
@media (max-width: 991px) {
    .g2-co__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .g2-co__side { position: static; }
    /* Delivery and Payment: the summary first, folded under "Show order summary". */
    .g2-co--focused .g2-co__side { order: -1; }
    .g2-co--focused .g2-sum { padding: 0; gap: 0; }
    .g2-co--focused .g2-sum__toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 14px; font-size: 13.5px; color: var(--g2-text); }
    .g2-co--focused .g2-sum__toggle .g2-icon { transition: transform .2s ease; }
    .g2-co--focused .g2-sum__toggle-total { margin-inline-start: auto; font-size: 15px; }
    .g2-co--focused .g2-sum.is-open .g2-sum__toggle .g2-icon { transform: rotate(180deg); }
    .g2-co--focused .g2-sum__body { display: none; padding: 0 14px 14px; }
    .g2-co--focused .g2-sum.is-open .g2-sum__body { display: flex; }

    /* Fixed to the screen's bottom (a sticky bar stopped mid-screen on a short page, under the chat bubble); the page
       keeps its height as bottom padding so the end of the page and the slim footer are never hidden under it. */
    .g2-mbar {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 1030;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        background: rgba(17, 20, 26, .96);
        border-top: 1px solid var(--g2-line2);
        box-shadow: 0 -10px 30px rgba(0, 0, 0, .45);
    }

    .g2-mbar__total { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
    .g2-mbar__total small { font-size: 11.5px; color: var(--g2-muted); }
    .g2-mbar__total b { font-size: 18px; font-weight: 800; }
    .g2-mbar__go { flex: 0 1 auto; max-width: 62%; height: 46px; white-space: normal; text-align: center; line-height: 1.2; }
    .g2-mbar__go.is-disabled { background: var(--g2-raised) !important; color: #c9ced4 !important; font-size: 12.5px; }

    .g2-success__cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .g2-odetail__grid { grid-template-columns: minmax(0, 1fr); }
    .g2-acc { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .g2-anav { display: none; }
    .g2-mtabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; padding-bottom: 2px; }
    .g2-mtabs::-webkit-scrollbar { display: none; }
    .g2-mtabs__tab { display: inline-flex; align-items: center; flex: 0 0 auto; 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-muted) !important; white-space: nowrap; }
    .g2-mtabs__tab.is-current { background: var(--g2-text); border-color: var(--g2-text); color: #0b0d10 !important; }
}

/* ---------- phones ---------- */
@media (max-width: 767px) {
    .g2-ptitle { padding-block: 16px 12px; }
    .g2-ptitle h1 { font-size: 22px; }
    .g2-card { padding: 16px; border-radius: 16px; }
    .g2-co .g2-card.dark_container { border-radius: 16px !important; }

    .g2-ckhead__bar { gap: 8px; height: 56px; }
    .g2-ckhead__logo-img { height: 20px; }
    .g2-steps { gap: 5px; min-width: 0; font-size: 13px; }
    .g2-steps__step { gap: 5px; }
    .g2-steps__link { gap: 6px; }
    .g2-steps__name { font-size: 13px; }
    .g2-steps__dot { width: 26px; height: 26px; font-size: 12.5px; border-width: 1.5px; }
    .g2-steps__line { width: 10px; }
    .g2-ckhead__end { gap: 8px; }
    .g2-steps__name { display: none; }
    .g2-steps__step.is-current .g2-steps__name { display: inline; }
    .g2-ckhead__secure-text, .g2-ckhead__hotline-label, .g2-ckhead__hotline b { display: none; }
    .g2-ckhead__hotline { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--g2-input); color: var(--g2-text) !important; }

    .g2-citem { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
    .g2-citem__frame { width: 76px; }
    .g2-citem__title { font-size: 13.5px !important; }
    .g2-citem__side { grid-column: 2; flex-direction: row-reverse; justify-content: space-between; align-items: center; flex-wrap: wrap; }
    .g2-citem__price { font-size: 16px; }
    .g2-citem__remove span { display: none; }
    .g2-trust { grid-template-columns: minmax(0, 1fr); }

    .g2-opts { grid-template-columns: minmax(0, 1fr); }
    .g2-opt__label { padding: 12px; gap: 10px; }
    .g2-opt__icon { width: 34px; height: 34px; }
    .g2-addrs { grid-template-columns: minmax(0, 1fr); }

    .g2-pm { grid-template-columns: auto auto minmax(0, 1fr); }
    .g2-pm__side { grid-column: 3; align-items: flex-start; }
    .g2-co .g2-logos { justify-content: flex-start; }
    .g2-shipto__row { grid-template-columns: auto minmax(0, 1fr); }
    .g2-shipto__map { grid-column: 2; justify-self: start; }

    .g2-okhero { padding: 24px 0 18px; }
    .g2-okhero h1 { font-size: 22px; }
    .g2-fawryref__number { font-size: 24px; }
    .g2-timeline { grid-template-columns: minmax(0, 1fr); }
    .g2-timeline__step { flex-direction: row; align-items: center; }
    .g2-request { flex-direction: column; align-items: stretch; }
    .g2-request__ref { align-items: flex-start; }
    .g2-payments__pending { flex-direction: column; text-align: center; }

    .g2-kpis { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .g2-orow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id total" "stack status"; gap: 8px 10px; padding: 12px 2px; }
    .g2-orow__id { grid-area: id; }
    .g2-orow__total { grid-area: total; }
    .g2-stack { grid-area: stack; }
    .g2-orow__status { grid-area: status; justify-self: end; }
    .g2-orow__go { display: none; }
    .g2-track { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .g2-track__step { flex-direction: row; text-align: start; gap: 12px; }
    .g2-track__step::before { display: none; }
    .g2-form { grid-template-columns: minmax(0, 1fr); }
    .g2-howto { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .g2-banner--action { flex-wrap: wrap; }
}

/* Narrow phones: the checkout header keeps the logo, the steps and the hotline; the lock goes. */
@media (max-width: 399px) {
    .g2-ckhead__logo-img { height: 18px; }
    .g2-ckhead__secure { display: none; }
}

@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; }
    .g2-opt, .g2-addr, .g2-pm, .g2-branch, .g2-radio, .g2-orow, .g2-sum__toggle .g2-icon { transition: 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;
    }
}

/* ============================================================================================================
   CALMER CHECKOUT AND ACCOUNT, BRAND WALL, BOUGHT TOGETHER
   Delivery (mode control, address rows, pickup list), Payment (tiles, "Delivering to"), Cart, the account home,
   Orders, order success, the home brand wall and the product page's "Bought together". Selected = a brand border
   and a check, never a filled colour block.
   ============================================================================================================ */

/* ---------- the check mark of a selected row or tile ---------- */
.g2-check { display: grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #3a414b; color: transparent; transition: background-color .15s, border-color .15s; }
:is(.g2-branch.is-selected, .address-box.selected) .g2-check { background: var(--g2-brand); border-color: var(--g2-brand); color: #0b0d10; }
:is(.g2-opt, .g2-pm) .g2-radio { position: relative; width: 20px; height: 20px; border: 1.5px solid #3a414b; }
:is(.g2-opt.selected, .g2-pm.selected) .g2-radio { border: 1.5px solid var(--g2-brand); background: var(--g2-brand); }
:is(.g2-opt.selected, .g2-pm.selected) .g2-radio::after { content: ""; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 10px; border: solid #0b0d10; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.g2-opt.selected, .g2-pm.selected, .g2-branch.is-selected { background: var(--g2-input); box-shadow: none; }

/* ---------- small popovers ("i": an address, a branch) ---------- */
.g2-pop { position: relative; flex: 0 0 auto; }
.g2-pop__btn { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--g2-dim); cursor: pointer; list-style: none; }
.g2-pop__btn::-webkit-details-marker { display: none; }
.g2-pop__btn::marker { content: ""; }
.g2-pop__btn:hover, .g2-pop[open] .g2-pop__btn { background: var(--g2-raised); color: var(--g2-text); }
.g2-pop__body { position: absolute; z-index: 30; top: calc(100% + 6px); inset-inline-end: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: max-content; max-width: min(300px, 78vw); padding: 10px 12px; border-radius: 12px; border: 1px solid var(--g2-line2); background: var(--g2-raised); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--g2-text); white-space: normal; text-align: start; }
.g2-pop__body [dir="auto"] { unicode-bidi: plaintext; }

/* ---------- Delivery: the mode control ---------- */
.g2-opts { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.g2-opt__label { padding: 12px 14px; }
.g2-opt__icon { width: 36px; height: 36px; border-radius: 10px; }
.g2-opt__text b { font-size: 14px; }
.g2-opt__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- address rows (Delivery, My addresses, the account home, order pages) ---------- */
.g2-arows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.g2-addr.g2-arow, .g2-arow {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    grid-template-areas: "check l1 l1" "check l2 end" "check l3 end";
    column-gap: 12px;
    row-gap: 3px;
    align-items: center;
}
#memberAddresses li .address-box.g2-arow { padding: 12px 14px; }
#memberAddresses li .address-box.g2-arow.selected { background-color: var(--g2-input); }
.g2-arow__check { grid-area: check; align-self: start; margin-top: 2px; }
.g2-arow__l1 { grid-area: l1; display: flex; align-items: center; gap: 8px; min-width: 0; padding-inline-end: 32px; }
.g2-arow__place { display: flex; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; font-size: 14px; font-weight: 700; color: var(--g2-text); white-space: nowrap; }
.g2-arow__place bdi { overflow: hidden; text-overflow: ellipsis; }
.g2-arow__city { flex: 0 0 auto; font-weight: 600; color: var(--g2-muted); }
.g2-arow__pinned { display: inline-flex; flex: 0 0 auto; margin-inline-start: auto; color: #7be8a8; font-size: 15px; }
.g2-arow__pin, .g2-co .g2-arow__pin { flex: 0 0 auto; min-height: 28px; margin-inline-start: auto; padding: 0; font-size: 12px; white-space: nowrap; }
.g2-arow__l2 { grid-area: l2; display: flex; align-items: center; gap: 4px; min-width: 0; }
.g2-arow__street { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #c9ced4; unicode-bidi: plaintext !important; }
.g2-arow__l3 { grid-area: l3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--g2-muted); unicode-bidi: plaintext !important; }
.g2-arow__end { grid-area: end; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.g2-arow__fee { height: 26px; padding: 0 10px; background: var(--g2-raised); color: var(--g2-text); font-size: 13px; }
.g2-arow__fee .g2e-price { font-size: 13px; }
.g2-arow__end .g2-link { font-size: 12px; }
.g2-arow.is-off > :not(.g2-arow__end) { opacity: .55; }
.g2-arow .g2-addr__type { flex: 0 0 auto; height: 22px; }
.g2-arow--static { grid-template-columns: minmax(0, 1fr); grid-template-areas: "l1" "l2" "l3"; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--g2-line2); background: var(--g2-input); }
.g2-arow--static .g2-arow__l1 { padding-inline-end: 0; }
.g2-arow--account { grid-template-columns: 28px minmax(0, 1fr); grid-template-areas: "star l1" "star l2" "star l3"; column-gap: 10px; }
.g2-arow--account .g2-arow__l1 { padding-inline-end: 32px; }
.g2-arow__star { grid-area: star; align-self: start; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--g2-dim); fill: none; }
.g2-arow__star svg { fill: none; }
.g2-arow__star:hover { color: var(--g2-gold); background: var(--g2-raised); }
.g2-arow.is-default { border-color: rgba(244, 182, 61, .45); }
.g2-arow.is-default .g2-arow__star { color: var(--g2-gold); }
.g2-arow.is-default .g2-arow__star svg { fill: currentColor; }
.g2-arows__status { margin-top: 10px !important; font-size: 13px; color: var(--g2-muted); }
.g2-arows__add .g2-addr--add { min-height: 64px; }
.g2-addr__menu-list a.g2-addr__menu-item { color: var(--g2-text) !important; }
.g2-addr__menu-list a.g2-addr__menu-item:hover { background: var(--g2-input); }

/* ---------- Delivery: the pickup list ---------- */
.g2-pickup__facts { gap: 6px; margin: 0 0 12px !important; }
.g2-pickup__facts li.g2-chip { height: 24px; font-size: 12px; color: var(--g2-muted); }
.g2-pickup__none { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--g2-line2); background: var(--g2-input); }
.g2-pickup__none p { font-size: 13.5px; }
.g2-pickup__none [hidden], .g2-branch__detail [hidden] { display: none; }
.g2-branch__pick { min-height: 56px; padding: 8px 12px !important; gap: 10px; }
.g2-branch__chip { flex: 0 0 auto; }
.g2-branch__where { font-size: 12px; color: var(--g2-muted); }
.g2-branch__info { align-self: center; margin-inline-end: 8px; }
.g2-branch__detail { display: flex; flex-direction: column; gap: 10px; padding: 0 12px 12px; }
.g2-branch__detail[hidden] { display: none; }
.g2-bmiss { display: flex; flex-direction: column; gap: 8px; margin: 0 !important; padding: 0 !important; }
.g2-bmiss__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--g2-raised); }
.g2-bmiss__frame { width: 44px; padding: 4px; border-radius: 8px; }
.g2-bmiss__text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; font-size: 13px; }
.g2-bmiss__text b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.34; }
.g2-boff { margin-top: 10px; border-radius: 14px; border: 1px solid var(--g2-line); }
.g2-boff__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 14px; font-size: 13.5px; color: var(--g2-muted); cursor: pointer; list-style: none; }
.g2-boff__head::-webkit-details-marker { display: none; }
.g2-boff__head::marker { content: ""; }
.g2-boff__chev { display: inline-flex; transition: transform .2s; }
.g2-boff[open] .g2-boff__chev { transform: rotate(180deg); }
.g2-boff__list { display: flex; flex-direction: column; margin: 0 !important; padding: 0 14px 10px !important; }
.g2-boff__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; padding: 8px 0; border-top: 1px solid var(--g2-line); opacity: .7; }
.g2-boff__row .g2-branch__text b { font-size: 13.5px; }
.g2-boff__missing { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.g2-boff__missing .g2-chip { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; line-height: 22px; }

/* ---------- Payment: compact tiles, "Delivering to" ---------- */
.g2-pgroup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.g2-pgroup__title { grid-column: 1 / -1; }
.g2-pm { min-height: 64px; padding: 10px 12px; gap: 10px; }
.g2-pm__text b { font-size: 14px; }
.g2-pm__text small { display: none; }
.g2-pm.selected .g2-pm__text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g2-pm__text small.g2-pm__why { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.g2-pm__side { gap: 4px; }
.g2-co .g2-logos { gap: 4px; }
.g2-co .g2-logo { height: 20px; padding: 0 6px; font-size: 10px; }
.g2-shipto__text { gap: 4px; min-width: 0; }
.g2-shipto__who { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.g2-shipto__who b { font-size: 14px; }
.g2-shipto__addr { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; color: #c9ced4 !important; unicode-bidi: plaintext !important; }
.g2-shipto__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.g2-shipto__chips:empty { display: none; }

/* ---------- Cart: remove is an icon ---------- */
.g2-citem__remove { justify-content: center; width: 36px; height: 36px; border-radius: 10px; }
.g2-citem__remove:hover { background: rgba(255, 107, 91, .1); }

/* ---------- the account home ---------- */
.g2-anav__who { color: inherit !important; border-radius: 12px 12px 0 0; }
.g2-anav__who:hover .g2-anav__name b { color: var(--g2-brand-hover); }
.g2-prof { gap: 14px; }
.g2-prof__who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.g2-prof__avatar { display: grid; place-items: center; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; background: var(--g2-brand-soft); color: var(--g2-brand); font-size: 20px; font-weight: 800; }
.g2-prof__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.g2-prof__name b { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g2-prof__name small { font-size: 12.5px; color: var(--g2-muted); }
.g2-prof__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.g2-prof__chips .g2-chip { height: 26px; max-width: 100%; font-size: 12px; }
.g2-prof__chips .g2-chip bdi { overflow: hidden; text-overflow: ellipsis; }
.g2-prof__done { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 13px; color: var(--g2-muted); }
.g2-prof__bar { display: block; height: 6px; border-radius: 3px; background: var(--g2-line2); overflow: hidden; }
.g2-prof__bar i { display: block; height: 100%; border-radius: 3px; background: var(--g2-brand); }
.g2-about__form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.g2-about__form fieldset legend { float: none; width: auto; margin: 0 0 6px; }
.g2-about__form .g2-field { max-width: 560px; }
.g2-about__date { display: grid; grid-template-columns: 84px minmax(0, 1fr) 104px; gap: 8px; }
.g2-co .g2-about__date select.g2-input { padding-inline: 12px 28px; }
.g2-field__help { font-size: 12px; color: var(--g2-dim); }
.g2-browse__row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.g2-browse__label { min-width: 84px; font-size: 12.5px; color: var(--g2-muted); }
.g2-browse__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.g2-prof__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.g2-lastorder { gap: 12px; }
.g2-lastorder__row { display: flex; align-items: center; gap: 14px; color: var(--g2-text) !important; }
.g2-lastorder__frame { width: 72px; }
.g2-lastorder__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.g2-lastorder__line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.g2-lastorder__line small { font-size: 12.5px; color: var(--g2-muted); }
.g2-lastorder__total { font-size: 16px; font-weight: 800; }
.g2-lastorder__track { align-self: flex-start; }
.g2-kpi__worth { align-self: flex-start; height: 26px; font-size: 12.5px; }
.g2-kpi__label { margin: 0 !important; font-weight: 500 !important; }
.g2-idchip.g2-num { height: 26px; padding: 0 10px; font-size: 12.5px; font-weight: 700; color: var(--g2-muted); }
.g2-banner--link { color: var(--g2-text) !important; border: 1px solid var(--g2-line2); background: var(--g2-input); }
.g2-banner--link:hover { border-color: #3a4049; }

/* ---------- Orders ---------- */
.g2-ofilters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.g2-ofilters::-webkit-scrollbar { display: none; }
.g2-ofilters .g2-pill2[aria-current="page"] { background: var(--g2-text) !important; border-color: var(--g2-text) !important; color: #0b0d10 !important; }
.g2-oprog__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.g2-ocard { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--g2-line); background: var(--g2-input); }
.g2-ocard__top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.g2-ocard__frame { width: 48px; }
.g2-ocard__info { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; min-width: 0; }
.g2-ocard__line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.g2-ocard__line small { font-size: 12px; color: var(--g2-muted); }
.g2-ocard__total { flex: 0 0 auto; font-size: 15px; font-weight: 800; }
.g2-ominitrack { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0 !important; padding: 0 !important; list-style: none; }
.g2-ominitrack__step { height: 4px; border-radius: 2px; background: var(--g2-line2); }
.g2-ominitrack__step.is-done, .g2-ominitrack__step.is-current { background: var(--g2-brand); }
.g2-ocard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.g2-ocard__stepname { font-size: 13px; font-weight: 600; }
.g2-omonth { margin: 18px 0 2px !important; padding: 0 4px; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--g2-dim) !important; }
[dir="rtl"] .g2-omonth { letter-spacing: 0 !important; }
.g2-olist > .g2-omonth:first-child { margin-top: 0 !important; }
.g2-omonth + .g2-orow { border-top: 0; }
.g2-ocancel { border-top: 1px solid var(--g2-line); }
.g2-ocancel__head { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 4px; font-size: 13px; color: var(--g2-muted); cursor: pointer; list-style: none; }
.g2-ocancel__head::-webkit-details-marker { display: none; }
.g2-ocancel__head::marker { content: ""; }
.g2-ocancel__head::after { content: "+"; font-size: 17px; }
.g2-ocancel[open] .g2-ocancel__head::after { content: "−"; }
.g2-ocancel .g2-orow { opacity: .8; }

/* ---------- order success ---------- */
.g2-okhero__next { max-width: 560px; font-size: 14.5px !important; font-weight: 600; color: var(--g2-text) !important; }
.g2-okhero__ids .g2-idchip span { color: var(--g2-muted); }
.g2-infocard p.g2-infocard__who { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.g2-infocard__action { align-self: flex-start; }
.g2-pinprompt { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(244, 182, 61, .3); background: rgba(244, 182, 61, .07); font-size: 13px; color: var(--g2-text); }
.g2-pinprompt[hidden] { display: none; }
.g2-pinprompt--ok { justify-content: flex-start; border-color: rgba(61, 220, 132, .3); background: rgba(61, 220, 132, .07); color: #7be8a8; }
.g2-payref { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border-radius: 12px; border: 1px dashed rgba(244, 182, 61, .45); background: var(--g2-input); }
.g2-payref small { font-size: 12px; color: var(--g2-muted); }
.g2-payref__number { font-size: 26px; font-weight: 800; letter-spacing: .05em; color: var(--g2-text); direction: ltr; }
.g2-oline { grid-template-columns: 64px minmax(0, 1fr) auto; }
.g2-oline__frame { width: 64px; }
.g2-okactions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; }
.g2-okactions__call { font-size: 13.5px; }

/* ---------- Cart: a suggestion rail with fewer cards than columns fills the row (desktop; phones scroll) ---------- */
@media (min-width: 768px) {
    .g2-co .g2-rail--square:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .g2-co .g2-rail--square:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    .g2-co .g2-rail--square:has(> :nth-child(6):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1600px) {
    .g2-co .g2-rail--square:has(> :nth-child(7):last-child) { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .g2-co .g2-rail--square:has(> :nth-child(8):last-child) { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* ---------- home: the brand wall fills the row ----------
   Two full rows of equal tiles (8 a row, 10 from 1600px, 6 at 768-1099, 3 × 4 on phones); every logo gets the same
   box: up to 92% of the tile's width and 40px of height, so a long wordmark is as wide as it can be. */
.g2-logos { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.g2-logos > :nth-child(n + 17) { display: none; }
.g2-logos__item { height: 84px; padding: 8px 6px; }
.g2-logos__img { max-width: 92%; max-height: 40px; }

/* ---------- product page: Bought together, bigger covers ---------- */
.g2-together__item { grid-template-columns: 22px 72px minmax(0, 1fr); padding: 12px; }
.g2-together__frame { position: relative; isolation: isolate; width: 72px; height: 88px; overflow: hidden; border-radius: 10px; background: #0f1215; }
.g2-together__fill { position: absolute; inset: -20%; z-index: -1; width: 140%; height: 140%; object-fit: cover; filter: blur(14px) saturate(1.1); opacity: .45; }
.g2-together__frame .g2-media { padding: 4px; }

@media (min-width: 1600px) {
    .g2-logos { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .g2-logos > :nth-child(n + 17) { display: flex; }
    .g2-logos > :nth-child(n + 21) { display: none; }
}

@media (min-width: 768px) and (max-width: 1099px) {
    .g2-logos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .g2-logos > :nth-child(n + 9) { display: flex; }
    .g2-logos > :nth-child(n + 13) { display: none; }
}

@media (max-width: 991px) {
    .g2-pgroup { grid-template-columns: minmax(0, 1fr); }
    .g2-prof__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
    /* Delivery on phones: the summary bar, the mode control, the list, the Continue bar - nothing else between them. */
    .g2-co:has(#frmShipping) .g2-ptitle, #frmShipping .g2-co__main > .g2-card > .g2-card__head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .g2-co:has(#frmShipping) .g2-wrap { padding-top: 12px; }
    #frmShipping .g2-co__main > .g2-card { gap: 12px; padding: 12px; }

    .g2-opts { display: flex; gap: 0; padding: 3px; border-radius: 14px; border: 1px solid var(--g2-line2); background: var(--g2-input); }
    .g2-opt { flex: 1 1 0; min-width: 0; border: 1px solid transparent; border-radius: 11px; background: none; }
    .g2-opt.selected { border-color: var(--g2-brand); background: var(--g2-surface); }
    .g2-opt__label { justify-content: center; height: 44px; padding: 0 8px; gap: 8px; }
    .g2-opt__icon { width: auto; height: auto; background: none; }
    .g2-opt__text { flex: 0 1 auto; }
    .g2-opt__text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
    .g2-opt__text small, .g2-opt__list, .g2-opt .g2-radio { display: none; }

    .g2-arows { grid-template-columns: minmax(0, 1fr); }
    .g2-arow__pin, .g2-co .g2-arow__pin { min-height: 32px; }

    .g2-pm { grid-template-columns: auto auto minmax(0, 1fr) auto; }
    .g2-pm__side { grid-column: auto; align-items: flex-end; }
    .g2-co .g2-logos { justify-content: flex-end; }
    .g2-co .g2-logos > :nth-child(n + 3) { display: none; }

    .g2-prof__done { grid-template-columns: minmax(0, 1fr) auto; }
    .g2-prof__bar { grid-column: 1 / -1; grid-row: 2; }
    .g2-oprog__list { grid-template-columns: minmax(0, 1fr); }
    .g2-okactions .g2-btn { flex: 1 1 100%; }

    .g2-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .g2-logos > :nth-child(n + 13) { display: none; }
    .g2-logos__item { height: 72px; }

    .g2-together__item { grid-template-columns: 22px 60px minmax(0, 1fr); }
    .g2-together__frame { width: 60px; height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
    .g2-check, .g2-boff__chev { transition: none !important; }
}

/* PRODUCT PAGE - "In the news": up to three news stories that link to the product, each a small row. */
.g2-pnews__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.g2-pnews__item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; border: 1px solid var(--g2-line); background: var(--g2-surface); color: var(--g2-text) !important; }
.g2-pnews__item:hover { background: var(--g2-raised); }
.g2-pnews__thumb { width: 96px; height: 54px; flex: none; border-radius: 8px; object-fit: cover; background: var(--g2-input); }
.g2-pnews__body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.g2-pnews__title { font-size: 14px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g2-pnews__date { font-size: 12px; color: var(--g2-dim); }
.g2-pnews__hub { align-self: flex-start; }
@media (min-width: 992px) { .g2-pnews__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 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; }
}