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

/* The breadcrumbs (.g2-crumbs__*) are in site.css "SHARED PARTS" (the product and status pages use them too). */

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

/* Desktop sort menu (<details>): the summary looks like the toolbar's other buttons; the options are links. */
.g2-sortdd { position: relative; }
.g2-sortdd__summary { list-style: none; user-select: none; }
.g2-sortdd__summary::-webkit-details-marker { display: none; }
.g2-sortdd__summary::marker { content: ""; }
.g2-sortdd__summary:focus-visible { outline: 2px solid var(--g2-brand); outline-offset: 2px; }
.g2-sortdd__label { font-size: 12px; font-weight: 600; color: var(--g2-dim); }
.g2-sortdd__chev { opacity: .6; transition: transform .15s; }
.g2-sortdd[open] .g2-sortdd__chev { transform: rotate(180deg); }
.g2-sortdd__panel {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 220px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid #2a2f37;
    background: #1a1d22;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .45);
}
.g2-sortdd__option {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 40px;
    padding-inline: 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #c9ced4 !important;
    text-decoration: none !important;
    white-space: nowrap;
}
.g2-sortdd__option:hover, .g2-sortdd__option:focus-visible { background: #23272e; color: #eef0f3 !important; }
.g2-sortdd__option.is-current { color: #bcd767 !important; }
.g2-sortdd__check { flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .g2-sortdd__chev { transition: 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__tag--addon { background: rgba(138, 184, 255, .14); color: #a9c4ea; }
.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__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--center { justify-content: center; margin-block: 24px; }

.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. (The .g2-about card itself and the
   Metacritic tones of .g2-lcard__meta: site.css "SHARED PARTS".) */
.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; 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, .g2-sortdd { display: none !important; }
    .g2-ltools__button { height: 42px; border-radius: 12px !important; font-size: 13.5px !important; font-weight: 700; }

    .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;
        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; }
    /* (hiding .g2-crumbs, .g2-ihead__desc, .g2-isubs, .g2-ltools__shown: site.css "SHARED PARTS") */
    .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-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; }
/* Cards added by "Load more" / load on scroll (never the server-rendered first page): fade and rise 8px one after
   another (--i = the card's place in the batch, at most 23); the script drops the class on animationend. */
@keyframes g2CardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.g2-card-in, .is-swapped .g2-lgrid > .g2-card-in { animation: g2CardIn 260ms ease-out both; animation-delay: calc(var(--i, 0) * 25ms); }

@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, .g2-card-in, .is-swapped .g2-lgrid, .g2-lpill { animation: none !important; }
    .g2-lcard:hover, .g2-lcard:hover .g2-lcard__cover { transform: none !important; }
}

/* ---------- category intro text + FAQ (Products/Index, page 1 of a plain category URL; admin "Search (SEO)") ----------
   The About card's look (.g2-about) without its clamp; the FAQ uses .g2-faq__item. Renders only when filled. */
.g2-catseo__intro { max-width: 75ch; font-size: 15px; line-height: 1.7; color: #c9ced4; }
.g2-catseo__intro p { margin: 0 0 12px; }
.g2-catseo__intro p:last-child { margin-bottom: 0; }
.g2-catseo__subtitle { margin: 8px 0 0; font-size: 16px; font-weight: 700; color: var(--g2-text); text-transform: none; }
.g2-catseo__faq { display: flex; flex-direction: column; max-width: 75ch; }
.g2-catseo__faq .g2-faq__item p { margin: 0; }
.g2-catseo__faq .g2-faq__item p + p { margin-top: 8px; }
.g2-catseo__faq .g2-faq__item summary { color: var(--g2-text); text-transform: none; }