/*
 * VASKA GAME desktop-only presentation layer.
 *
 * The storefront's mobile contract ends at 991.98px. Every rule in this file
 * is intentionally contained by the desktop media queries below so the
 * existing mobile header, navigation, cards, checkout and safe-area behavior
 * remain owned by their current stylesheets.
 */

@media screen and (min-width: 992px) {
    :root {
        --vaska-desktop-max: 1440px;
        --vaska-desktop-gutter: clamp(24px, 2.5vw, 40px);
        --vaska-desktop-section-gap: 24px;
        --vaska-desktop-card-gap: 16px;
        --vaska-desktop-header-line: 1340px;
    }

    /* One measured content line shared by desktop sections. */
    .homepage-refined .anaslider_alan > .container,
    body.homepage-page .vaska-category-grid-section .container,
    body.homepage-page .home-products-section .container,
    .homepage-refined .container,
    .category-page .category-shell,
    .balance-page .balance-shell,
    .digex-footer .footer-shell {
        width: min(calc(100% - (2 * var(--vaska-desktop-gutter))), var(--vaska-desktop-max));
        max-width: var(--vaska-desktop-max);
        margin-inline: auto;
        box-sizing: border-box;
    }

    .homepage-refined .anaslider_alan > .container,
    body.homepage-page .vaska-category-grid-section .container,
    body.homepage-page .home-products-section .container,
    .homepage-refined .container {
        padding-inline: 0;
    }

    /* The old duplicate desktop bars remain in the DOM for compatibility,
       but the canonical desktop shells below own the visual presentation. */
    .storefront-header > .topbar,
    .storefront-header > .headbar,
    .storefront-header + .searchbar {
        display: none !important;
    }

    .storefront-header:not(.useractive) > .site-desktop-header,
    .storefront-header.useractive > .guest-desktop-header {
        display: none !important;
    }

    .storefront-header {
        position: relative;
        z-index: 120;
    }

    /* Authenticated header: logo / search / actions on one line, with a
       separate category strip below it. */
    .storefront-header.useractive > .site-desktop-header {
        display: block;
        background:
            radial-gradient(circle at 9% 0%, rgba(124, 58, 237, .20), transparent 30%),
            radial-gradient(circle at 91% 0%, rgba(20, 184, 166, .13), transparent 27%),
            linear-gradient(180deg, #14171d 0%, #101216 100%);
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        box-shadow: 0 12px 30px rgba(0, 0, 0, .20);
    }

    .storefront-header.useractive .site-desktop-header .site-topline,
    .storefront-header.useractive .site-desktop-header .site-mainline {
        width: min(calc(100% - (2 * var(--vaska-desktop-gutter))), var(--vaska-desktop-header-line));
        max-width: var(--vaska-desktop-header-line);
        margin-inline: auto;
        padding-inline: 0;
        box-sizing: border-box;
    }

    .storefront-header.useractive .site-desktop-header .site-topline {
        height: 34px;
        border-bottom-color: rgba(255, 255, 255, .07);
        font-size: 12px;
    }

    .storefront-header.useractive .site-desktop-header .site-mainline {
        min-height: 0;
        display: grid;
        grid-template-columns: minmax(220px, 240px) minmax(260px, 1fr) auto;
        grid-template-rows: 72px 40px;
        grid-template-areas:
            "logo search actions"
            "categories categories categories";
        align-items: center;
        gap: 0 22px;
        flex-wrap: nowrap;
    }

    .storefront-header.useractive .site-desktop-header .site-logo {
        grid-area: logo;
        min-width: 0;
        max-width: 240px;
        overflow: visible;
    }

    .storefront-header.useractive .site-desktop-header .site-logo .horizontal-header-logo,
    .storefront-header.useractive .site-desktop-header .site-logo img.horizontal-header-logo {
        display: block;
        width: auto;
        max-width: 220px;
        height: 68px;
        max-height: 68px;
        object-fit: contain;
        object-position: left center;
        transform: none;
        transform-origin: center;
    }

    .storefront-header.useractive .site-desktop-header .site-search {
        grid-area: search;
        min-width: 0;
        width: 100%;
        flex: 0 1 auto;
    }

    .storefront-header.useractive .site-desktop-header .site-search input {
        height: 44px;
        border-radius: 13px;
        padding-left: 15px;
        padding-right: 54px;
        font-size: 14px;
    }

    .storefront-header.useractive .site-desktop-header .site-search-submit {
        right: 5px;
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .storefront-header.useractive .site-desktop-header .site-search-submit i {
        font-size: 18px !important;
    }

    .storefront-header.useractive .site-desktop-header .site-actions {
        grid-area: actions;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 7px;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .storefront-header.useractive .site-desktop-header .site-actions > .site-user-chip.primary {
        max-width: 142px;
    }

    .storefront-header.useractive .site-desktop-header .site-actions > .site-user-chip.balance {
        min-width: 70px;
        max-width: 86px;
    }

    .storefront-header.useractive .site-desktop-header .site-user-chip,
    .storefront-header.useractive .site-desktop-header .site-icon-btn {
        min-height: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .storefront-header.useractive .site-desktop-header .site-user-chip.primary {
        padding: 0 9px;
        gap: 8px;
    }

    .storefront-header.useractive .site-desktop-header .site-user-chip.balance {
        padding: 0 10px;
    }

    .storefront-header.useractive .site-desktop-header .site-avatar,
    .storefront-header.useractive .site-desktop-header .site-avatar img,
    .storefront-header.useractive .site-desktop-header .site-avatar span {
        width: 30px;
        height: 30px;
    }

    .storefront-header.useractive .site-desktop-header .site-avatar span {
        font-size: 13px;
    }

    .storefront-header.useractive .site-desktop-header .site-user-chip.primary > div:last-child {
        min-width: 0;
        overflow: hidden;
    }

    .storefront-header.useractive .site-desktop-header .site-user-chip.primary > div:last-child > div,
    .storefront-header.useractive .site-desktop-header .site-user-chip.balance > div > div {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .storefront-header.useractive .site-desktop-header .site-icon-btn {
        width: 40px;
        min-width: 40px;
        padding: 0;
    }

    .storefront-header.useractive .site-desktop-header .site-icon-btn i {
        font-size: 18px;
    }

    .storefront-header.useractive .site-desktop-header .site-categories {
        grid-area: categories;
        min-width: 0;
        width: 100%;
        height: 46px;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        flex: 0 0 auto;
        order: 0;
        flex-wrap: nowrap;
        border-top: 1px solid rgba(255, 255, 255, .07);
        scrollbar-width: thin;
    }

    .storefront-header.useractive .site-desktop-header .site-categories > a {
        height: 32px;
        flex: 0 0 auto;
        padding: 0 10px;
        gap: 7px;
        border-radius: 9px;
        color: rgba(255, 255, 255, .78);
        font-size: 12px;
        font-weight: 800;
    }

    .storefront-header.useractive .site-desktop-header .site-categories > a:first-child {
        padding-inline: 11px;
        color: #fff;
        background: rgba(255, 255, 255, .10);
    }

    .storefront-header.useractive .site-desktop-header .site-categories > a:hover,
    .storefront-header.useractive .site-desktop-header .site-categories > a:focus-visible {
        color: #fff;
        background: rgba(124, 58, 237, .30);
        outline: none;
    }

    .storefront-header.useractive .site-desktop-header .site-categories .cat-icon-wrap,
    .storefront-header.useractive .site-desktop-header .all-categories-link .cat-icon-wrap {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        border-radius: 7px;
    }

    .storefront-header.useractive .site-desktop-header .site-categories img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .storefront-header.useractive .site-desktop-header .site-categories .cat-label {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Guest header: retain its current menu and destinations, but give it the
       same centered line and clearer top/main/nav hierarchy. */
    .storefront-header:not(.useractive) > .guest-desktop-header {
        display: block;
        background: #111318;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        box-shadow: 0 12px 30px rgba(0, 0, 0, .20);
    }

    .storefront-header:not(.useractive) .guest-topline .container,
    .storefront-header:not(.useractive) .guest-mainline,
    .storefront-header:not(.useractive) .guest-navline {
        width: min(calc(100% - (2 * var(--vaska-desktop-gutter))), var(--vaska-desktop-header-line));
        max-width: var(--vaska-desktop-header-line);
        margin-inline: auto;
        padding-inline: 0;
        box-sizing: border-box;
    }

    .storefront-header:not(.useractive) .guest-topline {
        padding: 8px 0;
        background: linear-gradient(90deg, #4f46e5, #6257ff);
    }

    .storefront-header:not(.useractive) .guest-topline .container,
    .storefront-header:not(.useractive) .guest-mainline,
    .storefront-header:not(.useractive) .guest-navline {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
    }

    .storefront-header:not(.useractive) .guest-top-links,
    .storefront-header:not(.useractive) .guest-top-actions {
        gap: 18px;
    }

    .storefront-header:not(.useractive) .guest-top-links a,
    .storefront-header:not(.useractive) .guest-top-actions a {
        font-size: 12px;
    }

    .storefront-header:not(.useractive) .guest-mainline {
        min-height: 64px;
        display: grid;
        grid-template-columns: minmax(220px, 240px) minmax(260px, 1fr) auto;
        grid-template-areas: "logo search actions";
        gap: 22px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .storefront-header:not(.useractive) .guest-logo {
        grid-area: logo;
        min-width: 0;
        max-width: 240px;
        overflow: visible;
        display: inline-flex;
        align-items: center;
    }

    .storefront-header:not(.useractive) .guest-logo .horizontal-header-logo {
        display: block;
        width: auto;
        max-width: 220px;
        height: 68px;
        max-height: 68px;
        object-fit: contain;
        object-position: left center;
    }

    .storefront-header:not(.useractive) .guest-search {
        grid-area: search;
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .storefront-header:not(.useractive) .guest-search input {
        height: 44px;
        border-radius: 13px;
        padding-left: 15px;
        padding-right: 54px;
    }

    .storefront-header:not(.useractive) .guest-search button {
        width: 36px;
        height: 36px;
        right: 5px;
    }

    .storefront-header:not(.useractive) .guest-main-actions {
        grid-area: actions;
        gap: 7px;
        white-space: nowrap;
    }

    .storefront-header:not(.useractive) .guest-main-actions a {
        height: 40px;
        padding-inline: 13px;
        border-radius: 10px;
        gap: 7px;
        font-size: 12px;
    }

    .storefront-header:not(.useractive) .guest-navline {
        min-height: 46px;
        background: var(--dx-surface-2);
        border-top: 1px solid rgba(255, 255, 255, .07);
        padding-top: 0;
        padding-bottom: 0;
    }

    .storefront-header:not(.useractive) .guest-nav-links {
        width: 100%;
        min-width: 0;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

    .storefront-header:not(.useractive) .guest-nav-links button,
    .storefront-header:not(.useractive) .guest-nav-links a {
        height: 32px;
        flex: 0 0 auto;
        padding-inline: 11px;
        border-radius: 9px;
        font-size: 12px;
        color: var(--dx-text-strong);
    }

    .storefront-header:not(.useractive) .guest-mainline {
        background: var(--dx-surface);
    }

    .storefront-header:not(.useractive) .guest-nav-links .categories-trigger {
        background: #5b55f6;
    }

    .storefront-header:not(.useractive) .guest-nav-links .featured-link img {
        width: 22px;
        height: 22px;
    }

    /* Compact desktop account drawer, retaining all existing routes and JS. */
    html body .account-drawer {
        max-width: 380px;
    }

    html body .account-drawer .account-drawer-body {
        padding: 16px;
        gap: 12px;
    }

    html body .account-drawer .account-drawer-nav a {
        min-height: 44px;
        padding: 7px 10px;
    }

    /* Homepage hero: the height is tied to both viewport and width. This
       keeps the hero prominent while bringing the category section into the
       first 720/768px viewport without imposing a fixed 560px banner. */
    .homepage-refined .bloghead {
        background: var(--dx-bg, #f5f7fb);
    }

    .homepage-refined .bloghead::before,
    .homepage-refined .bloghead::after {
        content: none;
        display: none;
        background: none;
    }

    /* When there are no side promos, keep the capped banner and its shell
       aligned so the empty desktop space is balanced on both sides. */
    .homepage-refined .hero-shell:has(> .row > .col-12) {
        width: min(100%, clamp(720px, calc(100vh + 120px), 1020px));
        margin-inline: auto;
    }

    .homepage-refined .anaslider_alan {
        padding: 12px 0 8px;
    }

    .homepage-refined .hero-shell,
    .homepage-refined .anaslider_alan .row,
    .homepage-refined .homeslider,
    .homepage-refined .homeSliderSwiper,
    .homepage-refined .homeSliderSwiper .swiper-slide {
        height: auto !important;
        min-height: 0 !important;
    }

    .homepage-refined .homeSliderSwiper {
        float: none;
    }

    .homepage-refined .homeSliderSwiper .swiper-wrapper {
        align-items: stretch;
    }

    .homepage-refined .homeSliderSwiper .swiper-slide .home-slider-frame {
        display: flex;
        align-items: center;
        justify-content: center;
        width: min(100%, clamp(720px, calc(100vh + 120px), 1020px));
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 2 / 1;
        border-radius: 18px;
        background: transparent;
        margin-inline: auto;
    }

    .homepage-refined .homeSliderSwiper .swiper-slide picture {
        display: block;
        width: 100%;
        height: 100%;
    }

    .homepage-refined .homeSliderSwiper .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: contain !important;
        object-position: center;
        border-radius: 18px;
    }

    .homepage-refined .anasliderdoping {
        height: 100%;
        min-height: 0;
        display: grid;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .homepage-refined .anasliderdoping .item {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .homepage-refined .anasliderdoping .item:first-child {
        margin-bottom: 0;
    }

    .homepage-refined .anasliderdoping .item > div {
        display: grid;
        grid-template-columns: 156px minmax(0, 1fr);
        align-items: center;
        gap: 15px;
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 14px 16px;
        position: relative;
    }

    .homepage-refined .anasliderdoping .item > div::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
            linear-gradient(115deg, rgba(168, 85, 247, 0.22), transparent 42%),
            radial-gradient(circle at 90% 12%, rgba(236, 72, 153, 0.15), transparent 30%);
        pointer-events: none;
    }

    .homepage-refined .anasliderdoping .item > div > img {
        width: 156px;
        height: 156px;
        min-width: 156px;
        border-radius: 22px;
        object-fit: contain;
        background: var(--dx-surface-3);
        border: 1px solid var(--dx-border);
        padding: 8px;
        position: relative;
        z-index: 2;
        transition: transform 0.35s ease;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.1),
            0 0 0 5px rgba(168, 85, 247, 0.07),
            0 16px 32px rgba(2, 6, 23, 0.26);
    }

    .homepage-refined .anasliderdoping .item:hover > div > img {
        transform: scale(1.04);
    }

    .homepage-refined .anasliderdoping .item img {
        object-fit: contain;
    }

    body.homepage-page .vaska-category-grid-section,
    body.homepage-page .home-products-section {
        padding-top: 20px;
        padding-bottom: 30px;
    }

    body.homepage-page .vaska-category-grid-section .vaska-category-grid-head,
    body.homepage-page .home-products-section .home-product-title {
        margin-bottom: 16px;
    }

    body.homepage-page .vaska-category-grid-section .vaska-category-grid {
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
        gap: var(--vaska-desktop-card-gap);
        align-items: stretch;
    }

    body.homepage-page .vaska-category-grid-section .vaska-category-card {
        height: 100%;
        min-height: 0;
    }

    body.homepage-page .vaska-category-grid-section .vaska-category-card__media {
        min-height: 0;
        aspect-ratio: 3 / 2;
        padding: 10px;
    }

    body.homepage-page .vaska-category-grid-section .vaska-category-card__media img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

    body.homepage-page .vaska-category-grid-section .vaska-category-card__body {
        min-height: 58px;
        display: flex;
        align-items: center;
        padding: 11px 13px;
    }

    body.homepage-page .vaska-category-grid-section .vaska-category-card__title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.homepage-page .home-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
        gap: var(--vaska-desktop-card-gap);
    }
}

@media screen and (min-width: 1200px) {
    body.homepage-page .vaska-category-grid-section .vaska-category-grid,
    body.homepage-page .home-product-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media screen and (min-width: 992px) {
    /* Category center: compact premium page header, persistent left navigation,
       and equal card geometry in the available right-hand area. */
    html body .category-page {
        padding: 26px 0 60px;
    }

    html body .category-page .category-shell {
        padding: 0;
    }

    html body .category-page .category-hero {
        min-height: 132px;
        align-items: center;
        gap: 18px;
        padding: 22px 24px;
        border-radius: 18px;
        background:
            linear-gradient(120deg, rgba(17, 24, 39, .96), rgba(30, 41, 59, .86)),
            url('/frontend/assets/img/blogheadimg.jpg') center/cover;
        box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
    }

    html body .category-page .category-hero::before {
        display: none;
    }

    html body .category-page .category-hero h1 {
        margin: 10px 0 6px;
        font-size: clamp(30px, 3vw, 42px);
    }

    html body .category-page .category-total {
        min-width: 130px;
        padding: 13px 15px;
        border-radius: 12px;
    }

    html body .category-page .category-total strong {
        font-size: 24px;
    }

    html body .category-page .category-total .category-total-mobile {
        display: none;
    }

    html body .category-page .category-total .category-total-desktop {
        display: block;
    }

    html body .category-page .category-toolbar {
        margin: 16px 0;
    }

    html body .category-page .category-layout {
        grid-template-columns: 248px minmax(0, 1fr);
        gap: var(--vaska-desktop-section-gap);
    }

    html body .category-page .category-sidebar {
        top: 18px;
        padding: 14px;
    }

    html body .category-page .category-nav {
        gap: 6px;
    }

    html body .category-page .category-nav a {
        min-height: 42px;
        padding-inline: 11px;
        border-radius: 10px;
    }

    html body .category-page .category-content {
        padding: 20px;
    }

    html body .category-page .category-grid,
    html body .category-page .category-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
        gap: var(--vaska-desktop-card-gap);
    }

    html body .category-page .category-card {
        min-height: 0;
        justify-content: initial;
        border-radius: 14px;
    }

    html body .category-page .category-card-media {
        position: relative;
        inset: auto;
        aspect-ratio: 4 / 3;
        min-height: 0;
        padding: 12px;
        flex: 0 0 auto;
    }

    html body .category-page .category-card-media img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    html body .category-page .category-card-body {
        min-height: 78px;
        padding: 12px 13px;
        background: var(--dx-surface-2);
    }

    html body .category-page .category-card-meta {
        margin-top: 8px;
    }

    /* Category detail: make the existing category image a balanced header and
       let child/product cards enter the first screen sooner. */
    html body .category-modern {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        padding: 14px 0 56px;
    }

    html body .category-modern .cat-hero-banner {
        height: clamp(156px, 13vw, 210px);
        aspect-ratio: auto;
        border-radius: 18px;
    }

    html body .category-modern .cat-hero-banner img {
        object-fit: contain;
        object-position: center;
        background: var(--dx-surface-2);
    }

    html body .category-modern .cat-hero-meta {
        gap: 10px;
        padding-top: 8px;
    }

    html body .category-modern .cat-hero-badge {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    html body .category-modern .cat-hero-titles h1 {
        font-size: clamp(22px, 2.2vw, 32px);
    }

    html body .category-modern .category-tabbar-modern {
        gap: 8px;
        padding: 10px 0 2px;
    }

    html body .category-modern .category-tab-modern {
        padding: 10px 13px;
        border-radius: 13px;
    }

    html body .category-modern .category-modern-layout {
        grid-template-columns: 1fr;
        gap: var(--vaska-desktop-section-gap);
        margin-top: 12px;
    }

    html body .category-modern .category-main-panel {
        padding: 16px;
        border-radius: 18px;
    }

    html body .category-modern .category-section-head-modern {
        margin-bottom: 12px;
    }

    html body .category-modern .cat-child-grid,
    html body .category-modern .cat-grid {
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
        gap: var(--vaska-desktop-card-gap);
    }

    html body .category-modern .cat-child-grid.is-single {
        grid-template-columns: minmax(220px, 280px);
    }

    html body .category-modern .cat-child-card {
        border-radius: 15px;
    }

    html body .category-modern .cat-child-card-media {
        aspect-ratio: 16 / 9;
    }

    html body .category-modern .cat-child-card-body {
        min-height: 68px;
        height: auto;
        flex-basis: auto;
        padding: 10px 12px;
    }

    html body .category-modern .cat-card {
        min-height: 0;
        border-radius: 15px;
    }

    html body .category-modern .cat-card-thumb {
        aspect-ratio: 4 / 3;
        height: auto;
        min-height: 0;
        padding: 10px;
    }

    html body .category-modern .cat-card-body {
        min-height: 0;
        padding: 11px;
    }

    html body .category-modern .cat-grid--non-pubg-products .cat-card-thumb,
    html body .category-modern .cat-card--compact .cat-card-thumb {
        height: 132px;
        aspect-ratio: auto;
    }

    /* Preserve the existing native artwork geometry for these two families. */
    html body .category-modern .cat-child-grid[data-parent="point-blank"] .cat-child-card-media,
    html body .category-modern .cat-child-grid[data-parent="zula"] .cat-child-card-media {
        aspect-ratio: 3 / 2;
    }

    /* Balance: use the available desktop line for payment methods while
       preserving every existing form, upload, polling and history element. */
    html body.balance-page .balance-shell {
        width: min(calc(100% - (2 * var(--vaska-desktop-gutter))), var(--vaska-desktop-max));
        max-width: var(--vaska-desktop-max);
        padding: 26px 0 72px;
    }

    html body.balance-page .balance-hero {
        margin-bottom: 20px;
        padding: 18px 20px;
        border-radius: 14px;
    }

    html body.balance-page .balance-total-amount-value {
        font-size: clamp(30px, 3.2vw, 44px);
    }

    html body.balance-page .balance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    html body.balance-page .balance-method {
        border-radius: 12px;
    }

    html body.balance-page .balance-history {
        margin-top: 22px;
        padding: 18px;
        border-radius: 12px;
    }

    /* Auth: a quiet centered desktop form with the existing fields, OAuth
       action, validation and route behavior unchanged. */
    html body.auth-page-body .digex-auth-page {
        min-height: calc(100vh - 154px);
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 44px 0 72px;
    }

    html body.auth-page-body .digex-auth-wrap {
        width: min(100%, 560px);
        grid-template-columns: minmax(0, 560px);
        margin-inline: auto;
    }

    html body.auth-page-body .digex-auth-card {
        width: 100%;
        max-width: 560px;
        margin-inline: auto;
    }
}

@media screen and (min-width: 1280px) {
    html body .category-page .category-grid,
    html body .category-page .category-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    }
}

@media screen and (min-width: 992px) and (max-width: 1199.98px) {
    /* Keep the action cluster usable at the narrowest desktop width. */
    .storefront-header.useractive .site-desktop-header .site-mainline,
    .storefront-header:not(.useractive) .guest-mainline {
        grid-template-columns: minmax(190px, 210px) minmax(200px, 1fr) auto;
        gap: 12px;
    }

    .storefront-header.useractive .site-desktop-header .site-logo,
    .storefront-header:not(.useractive) .guest-logo {
        max-width: 210px;
    }

    .storefront-header.useractive .site-desktop-header .site-logo .horizontal-header-logo,
    .storefront-header.useractive .site-desktop-header .site-logo img.horizontal-header-logo,
    .storefront-header:not(.useractive) .guest-logo .horizontal-header-logo {
        max-width: 178px;
        height: 56px;
        max-height: 56px;
    }

    .storefront-header.useractive .site-desktop-header .site-actions > .site-user-chip.primary {
        max-width: 40px;
        padding-inline: 5px;
    }

    .storefront-header.useractive .site-desktop-header .site-user-chip.primary > div:last-child,
    .storefront-header.useractive .site-desktop-header .site-user-chip.balance small {
        display: none;
    }

    .storefront-header.useractive .site-desktop-header .site-actions > .site-user-chip.balance {
        min-width: 54px;
        padding-inline: 6px;
    }

    html body .category-page .category-layout {
        grid-template-columns: 228px minmax(0, 1fr);
        gap: 16px;
    }

    html body .category-modern .category-modern-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    html body .category-page .category-grid,
    html body .category-page .category-product-grid,
    html body .category-modern .cat-child-grid,
    html body .category-modern .cat-grid {
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    }
}