/* Shared native desktop layout foundations for the standalone Store and VS pages. */
:root {
    --pc-page-gutter: clamp(20px, 2vw, 44px);
    --pc-section-gap: clamp(16px, 1.35vw, 28px);
    --pc-store-max: 2300px;
    --pc-vs-max: 2280px;
    --pc-content-max: 1800px;
    --pc-modal-gutter: clamp(16px, 2.5vw, 36px);
}

body[data-pc-page] {
    max-width: 100%;
    min-width: 0;
}

body[data-pc-page] img,
body[data-pc-page] video,
body[data-pc-page] canvas,
body[data-pc-page] svg {
    max-width: 100%;
}

body[data-pc-page] input,
body[data-pc-page] select,
body[data-pc-page] textarea,
body[data-pc-page] button {
    min-width: 0;
}

.pc-nav-shell {
    width: 100%;
    max-width: var(--pc-content-max) !important;
    padding-inline: var(--pc-page-gutter) !important;
}

/* Store home */
body[data-pc-page="store"] .store-nav-shell {
    width: 100%;
    max-width: var(--pc-store-max) !important;
    padding-inline: var(--pc-page-gutter) !important;
}

body[data-pc-page="store"] .store-nav-row {
    gap: var(--pc-section-gap);
}

body[data-pc-page="store"] .store-brand,
body[data-pc-page="store"] .store-nav-actions {
    flex-shrink: 0;
}

body[data-pc-page="store"] .store-search {
    width: clamp(320px, 34vw, 700px);
    max-width: 700px !important;
    min-width: 240px;
    margin-inline: clamp(12px, 1.5vw, 28px) !important;
}

body[data-pc-page="store"] .store-layout {
    width: 100%;
    max-width: var(--pc-store-max) !important;
    padding-inline: var(--pc-page-gutter) !important;
    padding-top: var(--pc-section-gap) !important;
    display: grid !important;
    grid-template-columns: 228px minmax(0, 1fr) 208px;
    align-items: start;
    gap: var(--pc-section-gap) !important;
}

body[data-pc-page="store"] .store-categories,
body[data-pc-page="store"] .store-brands {
    width: auto !important;
    min-width: 0;
}

body[data-pc-page="store"] .store-products {
    grid-column: 2;
    min-width: 0;
}

body[data-pc-page="store"] #productsGrid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
    gap: clamp(16px, 1.1vw, 22px) !important;
}

body[data-pc-page="store"] #productsGrid > * {
    min-width: 0;
}

@media (min-width: 2200px) {
    body[data-pc-page="store"] .store-layout {
        grid-template-columns: 244px minmax(0, 1fr) 224px;
    }
}

@media (min-width: 1700px) {
    body[data-pc-page="store"] .store-categories,
    body[data-pc-page="store"] .store-brands {
        display: block !important;
        grid-row: 1;
    }

    body[data-pc-page="store"] .store-categories {
        grid-column: 1;
    }

    body[data-pc-page="store"] .store-products {
        grid-column: 2;
        grid-row: 1;
    }

    body[data-pc-page="store"] .store-brands {
        grid-column: 3;
    }
}

@media (min-width: 1280px) and (max-width: 1699px) {
    body[data-pc-page="store"] .store-layout {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    body[data-pc-page="store"] .store-categories,
    body[data-pc-page="store"] .store-brands {
        display: block !important;
    }

    body[data-pc-page="store"] .store-categories {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    body[data-pc-page="store"] .store-brands {
        grid-column: 2;
        grid-row: 1;
    }

    body[data-pc-page="store"] .store-products {
        grid-column: 2;
        grid-row: 2;
    }

    body[data-pc-page="store"] .store-brands > .sticky {
        position: static;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border: 1px solid rgba(107, 114, 128, 0.16);
        border-radius: 16px;
        background: rgba(22, 31, 46, 0.55);
    }

    body[data-pc-page="store"] .store-brands h3 {
        margin: 0 !important;
        white-space: nowrap;
    }

    body[data-pc-page="store"] #brandSearchContainer {
        grid-column: 1 / -1;
        width: min(100%, 420px);
        margin: 0 !important;
    }

    body[data-pc-page="store"] #brandsList {
        display: flex !important;
        align-items: center;
        gap: 12px !important;
        overflow-x: auto;
        padding: 2px 4px 4px !important;
    }

    body[data-pc-page="store"] #brandsList > * {
        flex: 0 0 72px;
        margin: 0 !important;
    }

    body[data-pc-page="store"] #brandsToggleBtn {
        margin: 0 !important;
        min-width: 90px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    body[data-pc-page="store"] .store-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-pc-page="store"] .store-categories,
    body[data-pc-page="store"] .store-brands,
    body[data-pc-page="store"] .store-products {
        display: block !important;
        grid-column: 1;
        width: 100% !important;
    }

    body[data-pc-page="store"] .store-categories {
        grid-row: 1;
    }

    body[data-pc-page="store"] .store-brands {
        grid-row: 2;
    }

    body[data-pc-page="store"] .store-products {
        grid-row: 3;
    }

    body[data-pc-page="store"] .store-categories > .sticky,
    body[data-pc-page="store"] .store-brands > .sticky {
        position: static;
    }

    body[data-pc-page="store"] .store-categories > .sticky > div:first-child {
        display: none;
    }

    body[data-pc-page="store"] #categoriesList,
    body[data-pc-page="store"] #brandsList {
        display: flex !important;
        gap: 10px !important;
        max-height: none !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 8px !important;
    }

    body[data-pc-page="store"] #categoriesList > *,
    body[data-pc-page="store"] #brandsList > * {
        flex: 0 0 auto;
        min-width: 120px;
    }
}

@media (max-width: 1599px) {
    body[data-pc-page="store"] .store-nav-actions {
        gap: 10px !important;
    }

    body[data-pc-page="store"] .store-nav-actions > button:first-child {
        padding-inline: 12px !important;
    }
}

@media (max-width: 1279px) {
    body[data-pc-page="store"] .store-brand-title {
        display: none;
    }
}

/* Store product details */
body[data-pc-page="store-item"] .store-item-shell {
    max-width: var(--pc-content-max) !important;
    padding-inline: var(--pc-page-gutter) !important;
}

body[data-pc-page="store-item"] #productContainer,
body[data-pc-page="store-item"] #productContainer > .grid,
body[data-pc-page="store-item"] #productContainer > .grid > * {
    min-width: 0;
}

body[data-pc-page="store-item"] #relatedGrid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)) !important;
}

@media (min-width: 1200px) {
    body[data-pc-page="store-item"] #productContainer > .grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(420px, 0.75fr) !important;
        gap: var(--pc-section-gap) !important;
    }

    body[data-pc-page="store-item"] #productContainer > .grid > * {
        grid-column: auto !important;
    }
}

/* Cart, orders and profile */
body[data-pc-page="store-cart"] .store-cart-layout,
body[data-pc-page="store-orders"] .store-orders-shell,
body[data-pc-page="store-profile"] .store-profile-shell {
    width: 100%;
    max-width: var(--pc-content-max) !important;
    padding-inline: var(--pc-page-gutter) !important;
}

body[data-pc-page="store-cart"] .store-cart-items {
    min-width: 0;
}

body[data-pc-page="store-cart"] .store-cart-summary {
    flex: 0 0 clamp(340px, 22vw, 420px);
    width: auto !important;
}

body[data-pc-page="store-cart"] #checkoutModal,
body[data-pc-page="store-cart"] #fibQrModal,
body[data-pc-page="store-profile"] #addressModal {
    padding: var(--pc-modal-gutter) !important;
    overflow-y: auto;
}

body[data-pc-page="store-cart"] #checkoutModal > div,
body[data-pc-page="store-cart"] #fibQrModal > div,
body[data-pc-page="store-profile"] #addressModal > div {
    max-height: calc(100dvh - (var(--pc-modal-gutter) * 2)) !important;
    overflow-y: auto;
}

body[data-pc-page="store-orders"] .orders-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
}

body[data-pc-page="store-orders"] .orders-table-scroll table {
    min-width: 880px !important;
    font-size: 14px;
}

body[data-pc-page="store-profile"] .store-profile-layout {
    min-width: 0;
}

@media (min-width: 1200px) {
    body[data-pc-page="store-profile"] .store-profile-layout {
        grid-template-columns: minmax(340px, 400px) minmax(0, 1fr) !important;
    }

    body[data-pc-page="store-profile"] .store-profile-layout > :first-child {
        grid-column: 1 !important;
    }

    body[data-pc-page="store-profile"] .store-profile-layout > :last-child {
        grid-column: 2 !important;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    body[data-pc-page="store-cart"] .store-cart-layout {
        flex-direction: column !important;
    }

    body[data-pc-page="store-cart"] .store-cart-summary {
        flex-basis: auto;
        width: 100% !important;
    }

    body[data-pc-page="store-profile"] .store-profile-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-pc-page="store-profile"] .store-profile-layout > * {
        grid-column: 1 !important;
    }

    body[data-pc-page="store-profile"] .store-profile-layout > :first-child > .sticky {
        position: static;
    }
}

/* Store PC builder */
body[data-pc-page="store-build"] .store-build-layout {
    max-width: var(--pc-content-max) !important;
    padding-inline: var(--pc-page-gutter) !important;
    gap: var(--pc-section-gap) !important;
}

body[data-pc-page="store-build"] .store-build-main,
body[data-pc-page="store-build"] .store-build-summary {
    min-width: 0;
}

@media (min-width: 1280px) {
    body[data-pc-page="store-build"] .store-build-layout {
        grid-template-columns: minmax(0, 1fr) clamp(360px, 25vw, 420px) !important;
    }

    body[data-pc-page="store-build"] .store-build-main,
    body[data-pc-page="store-build"] .store-build-summary {
        grid-column: auto !important;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    body[data-pc-page="store-build"] .store-build-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-pc-page="store-build"] .store-build-main,
    body[data-pc-page="store-build"] .store-build-summary {
        grid-column: 1 !important;
    }

    body[data-pc-page="store-build"] .store-build-summary .sticky {
        position: static;
    }
}

/* Login/setup cards keep a stable, readable native size. */
body[data-pc-page="store-login"],
body[data-pc-page="store-setup"],
body[data-pc-page="vs-login"],
body[data-pc-page="vs-setup"] {
    min-height: 100dvh;
    padding: clamp(24px, 4vh, 48px) var(--pc-page-gutter);
}

body[data-pc-page] .pc-auth-card {
    width: 100%;
    margin-inline: auto !important;
    padding: clamp(28px, 3vw, 40px) !important;
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
}

body[data-pc-page="store-login"] .pc-auth-card,
body[data-pc-page="vs-login"] .pc-auth-card {
    max-width: 460px !important;
}

body[data-pc-page="store-setup"] .pc-auth-card,
body[data-pc-page="vs-setup"] .pc-auth-card {
    max-width: 520px !important;
}

@media (max-height: 900px) {
    body[data-pc-page] .pc-auth-card {
        padding-block: 28px !important;
    }

    body[data-pc-page] .pc-auth-card > :first-child {
        margin-bottom: 20px !important;
    }
}

/* Invoice remains a centered paper document at native size. */
body[data-pc-page="store-invoice"] {
    padding-inline: var(--pc-page-gutter);
}

body[data-pc-page="store-invoice"] .invoice-container {
    width: min(100%, 850px);
}

/* VS */
body[data-pc-page="vs"] .vs-nav-shell {
    width: 100%;
    max-width: var(--pc-vs-max) !important;
    padding-inline: var(--pc-page-gutter) !important;
    gap: var(--pc-section-gap);
}

body[data-pc-page="vs"] .vs-primary-nav,
body[data-pc-page="vs"] .vs-nav-actions {
    min-width: 0;
    flex-shrink: 0;
}

body[data-pc-page="vs"] .vs-layout {
    width: min(75vw, 1600px);
    max-width: none !important;
    padding-inline: var(--pc-page-gutter) !important;
    gap: var(--pc-section-gap) !important;
}

body[data-pc-page="vs"] #main_sidebar {
    width: 230px !important;
}

body[data-pc-page="vs"] .vs-content {
    width: 100%;
    min-width: 0;
}

body[data-pc-page="vs"] #events_grid,
body[data-pc-page="vs"] #home_featured_grid,
body[data-pc-page="vs"] #friends_tab_list:not([hidden]),
body[data-pc-page="vs"] #friends_tab_requests:not([hidden]) {
    display: grid !important;

    gap: clamp(16px, 1.2vw, 24px) !important;
}

body[data-pc-page="vs"] #friends_tab_list[hidden],
body[data-pc-page="vs"] #friends_tab_requests[hidden] {
    display: none !important;
}

body[data-pc-page="vs"] #events_grid > *,
body[data-pc-page="vs"] #home_featured_grid > *,
body[data-pc-page="vs"] #friends_tab_list > *,
body[data-pc-page="vs"] #friends_tab_requests > * {
    min-width: 0;
}

body[data-pc-page="vs"] .round-col {
    width: clamp(220px, 13vw, 260px);
}

body[data-pc-page="vs"] .bracket-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

body[data-pc-page="vs"] .overlay-container {
    padding: var(--pc-modal-gutter);
    overflow-y: auto;
}

body[data-pc-page="vs"] .overlay-content {
    width: min(100%, 1200px);
    height: min(90dvh, 900px);
    max-height: calc(100dvh - (var(--pc-modal-gutter) * 2));
}

body[data-pc-page="vs"] #player_overlay_content {
    width: min(100%, 620px);
    height: auto;
    max-height: calc(100dvh - (var(--pc-modal-gutter) * 2));
    overflow-y: auto;
}

body[data-pc-page="vs"] #quick_chat_sidebar {
    width: clamp(320px, 22vw, 400px) !important;
    max-width: 100%;
}

body[data-pc-page="vs"] #full_chat_modal > div:last-child {
    max-width: var(--pc-content-max) !important;
    padding-inline: var(--pc-page-gutter) !important;
}

body[data-pc-page="vs"] #team_members_modal,
body[data-pc-page="vs"] #create_grp_modal,
body[data-pc-page="vs"] #manage_chat_grp_modal,
body[data-pc-page="vs"] #manage_team_modal,
body[data-pc-page="vs"] #edit_name_modal {
    padding: var(--pc-modal-gutter);
    overflow-y: auto;
}

body[data-pc-page="vs"] #team_members_modal > div,
body[data-pc-page="vs"] #create_grp_modal > div,
body[data-pc-page="vs"] #manage_chat_grp_modal > div,
body[data-pc-page="vs"] #manage_team_modal > div,
body[data-pc-page="vs"] #edit_name_modal > div {
    max-height: calc(100dvh - (var(--pc-modal-gutter) * 2));
    overflow-y: auto;
}

@media (max-width: 1699px) {
    body[data-pc-page="vs"] #main_sidebar {
        width: 205px !important;
    }

    body[data-pc-page="vs"] .vs-primary-nav .nav-link {
        padding-inline: 12px !important;
    }

    body[data-pc-page="vs"] .vs-nav-actions {
        gap: 8px !important;
    }

    body[data-pc-page="vs"] #nav_search {
        width: 180px !important;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    body[data-pc-page="vs"] #main_sidebar {
        display: none !important;
    }

    body[data-pc-page="vs"] .vs-layout {
        flex-direction: column !important;
    }
}

@media (max-width: 1023px) {
    body[data-pc-page="vs"] .vs-layout {
        width: 100%;
        max-width: none !important;
    }
}

@media (max-width: 1450px) {
    body[data-pc-page="vs"] .vs-nav-actions > .relative.hidden.lg\:block {
        display: none !important;
    }
}

@media print {
    body[data-pc-page="store-invoice"] {
        padding: 0;
    }
}