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

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

/* The header link sits on the title's row (its own line height), not at the subtitle's bottom. */
.g2-sec__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

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

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

.g2-sec__sub { max-width: 60ch; margin: var(--g2-sub-gap) 0 0; font-size: 13.5px; line-height: var(--g2-text-lh); text-wrap: pretty; color: var(--g2-muted); }

.g2-sec__actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; min-height: calc(var(--g2-title-size) * 1.2); }

.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 itself, the titles' clamp, the mini link and the action's focus ring: site.css "SHARED PARTS") */
.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 { 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); }
}

/* Product card, "mini" (_G2Card with ViewData G2CardSize = "mini"): a compact horizontal tile - 64 x 80 cover, title (2
   lines), category, price - with a round 36px action beside the link (the site's .addToCart, or an arrow to the product
   page). The doubled class beats checkout.css's .g2-card panel rules, which share the name. */
.g2-card.g2-card--mini {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
    padding-inline-start: 10px;
    border-radius: 16px;
    border: 1px solid var(--g2-line);
    background: var(--g2-raised);
    transition: border-color .2s;
}
.g2-card.g2-card--mini .g2-card__frame { width: 64px; height: 80px; aspect-ratio: auto; padding: 4px; border-radius: 10px; }
.g2-card--mini .g2-media__img { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4)); }
.g2-card--mini .g2-card__body { gap: 2px; }
.g2-card.g2-card--mini .g2-card__title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.34;
    max-height: 2.68em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--g2-text) !important;
}
.g2-card--mini .g2-card__category { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g2-card--mini .g2-price-row { margin-top: 2px; min-height: 0; font-size: 15px; }
.g2-card__act {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--g2-line2);
    background: transparent;
    color: var(--g2-text) !important;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.g2-card__act--add { border-color: var(--g2-brand); background: var(--g2-brand); color: var(--g2-page) !important; }
@media (hover: hover) {
    .g2-card.g2-card--mini:hover { border-color: var(--g2-line2); }
    .g2-card--mini:hover .g2-card__frame { transform: none; }
    .g2-card__act:hover { border-color: var(--g2-brand); color: var(--g2-brand) !important; }
    .g2-card__act--add:hover { background: var(--g2-brand-hover); border-color: var(--g2-brand-hover); color: var(--g2-page) !important; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
    .g2-card.g2-card--mini, .g2-card__act { transition: none; }
    .g2-card__act--add:hover { transform: none; }
}

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

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

/* ---------- Brands, the default grid (Brands/Default.cshtml): the logo wall's tiles, but the invocation's columns,
   gap and colours come in as data values (--brands-*) on the section. Phones: 3 a row whatever the columns. ---------- */
.g2-brandgrid { background: var(--brands-bg, transparent); border-radius: 16px; }
.g2-brandgrid__title { color: var(--brands-title, var(--g2-text)); }
.g2-brandgrid__sub { color: var(--brands-sub, var(--g2-muted)); }
.g2-brandgrid__grid { display: grid; grid-template-columns: repeat(var(--brands-columns, 5), minmax(0, 1fr)); gap: var(--brands-gap, 10px); }
.g2-brandgrid__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(--brands-card-bg, var(--g2-surface));
    transition: border-color .2s, background-color .2s, transform .2s;
}
.g2-brandgrid__item picture { display: contents; }
.g2-brandgrid__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-brandgrid__item:hover { border-color: var(--g2-line2); background: var(--brands-card-hover, var(--g2-raised)); transform: translateY(-3px); }
.g2-brandgrid__item:hover .g2-brandgrid__img { filter: none; }
.g2-brandgrid__sep { margin-block: 24px; border: 0; border-top: 1px solid var(--g2-line); }
@media (max-width: 767px) {
    .g2-brandgrid__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .g2-brandgrid__item { transition: none; }
    .g2-brandgrid__item:hover { transform: 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; 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-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: var(--g2-content-gap); 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; }
}