/*
 * ShopAccount layout rhythm v13
 * One outer frame for storefront pages and one for the admin workspace.
 * Loaded last so older page-specific widths cannot create uneven edges or
 * double horizontal padding.
 */

:root {
    --layout-public-max: 1800px;
    --layout-admin-max: 1920px;
    --layout-gutter: clamp(16px, 2vw, 40px);
    --layout-frame-width: calc(100% - var(--layout-gutter) - var(--layout-gutter));
    --layout-page-top: 32px;
    --layout-page-bottom: 64px;
    --layout-section-gap: 24px;
}

/*
 * Old storefront styles use several independent caps (1320/1364/1400px).
 * Keep the shell constrained to the viewport so a wide ticker, table or nav
 * cannot enlarge the containing block and visually push centered content to
 * one side on ultrawide displays.
 */
html,
body {
    max-width: 100%;
}

html {
    scrollbar-gutter: stable;
}

body.marketplace-surface,
body.marketplace-surface .market-shell,
body.marketplace-surface .market-main {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    overflow-x: clip;
}

/* Storefront: shared left and right edges. */
body.marketplace-surface .market-container,
body.marketplace-surface .content-container-v5,
body.marketplace-surface .auth-marketplace-inner {
    box-sizing: border-box;
    width: min(var(--layout-frame-width), var(--layout-public-max)) !important;
    max-width: var(--layout-public-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.marketplace-surface .market-main > .mock-page {
    box-sizing: border-box;
    width: min(var(--layout-frame-width), var(--layout-public-max)) !important;
    max-width: var(--layout-public-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: var(--layout-page-top) 0 var(--layout-page-bottom);
}

/* The legacy catalog root is capped at 1520px; center that root as well. */
body.marketplace-surface .market-catalog-page {
    width: 100%;
    margin-inline: auto;
}

/* Marketplace commerce pages use the same vertical rhythm. */
body.marketplace-surface :is(.market-product-page, .market-checkout-page) {
    padding-top: var(--layout-page-top);
    padding-bottom: var(--layout-page-bottom);
}

body.marketplace-surface .market-catalog-page .market-page-heading {
    padding-top: var(--layout-page-top);
    padding-bottom: 20px;
}

body.marketplace-surface .market-catalog-page .market-catalog-layout {
    padding-bottom: var(--layout-page-bottom);
}

/* Store cover and inventory align with the other commerce pages. */
body.marketplace-surface .market-store-cover {
    width: min(var(--layout-frame-width), var(--layout-public-max));
    max-width: var(--layout-public-max);
    margin: var(--layout-page-top) auto 0 !important;
    border: 1px solid #203b52;
    border-radius: 18px;
}

body.marketplace-surface .market-store-cover > .market-container {
    width: 100% !important;
    max-width: none !important;
    padding-inline: var(--layout-section-gap);
}

body.marketplace-surface .market-store-content {
    padding-top: var(--layout-section-gap);
    padding-bottom: var(--layout-page-bottom);
}

/* Legacy utility pages use the same outer frame instead of vw-based padding. */
body.marketplace-surface .market-main > :is(.page-hero, .table-shell, .contact-layout, .tool-grid, .legal-page, .error-page) {
    box-sizing: border-box;
    width: min(var(--layout-frame-width), var(--layout-public-max)) !important;
    max-width: var(--layout-public-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.marketplace-surface .market-main > .page-hero {
    margin-top: var(--layout-page-top);
    padding: 28px 32px;
    border: 1px solid var(--line);
    border-radius: 16px;
}

body.marketplace-surface .market-main > :is(.table-shell, .contact-layout, .tool-grid) {
    padding: var(--layout-section-gap) 0 var(--layout-page-bottom);
}

body.marketplace-surface .contact-layout > .contact-grid {
    padding-inline: 0;
}

/* Forms and articles stay readable while sharing the same vertical rhythm. */
body.marketplace-surface .market-main > .narrow-form {
    width: min(var(--layout-frame-width), 760px);
    max-width: 760px;
    margin: var(--layout-page-top) auto var(--layout-page-bottom);
    padding-inline: 0;
}

body.marketplace-surface .market-main > .article-page {
    width: min(var(--layout-frame-width), 900px);
    max-width: 900px;
    margin: var(--layout-page-top) auto var(--layout-page-bottom);
    padding-inline: 0;
}

body.marketplace-surface .market-main > :is(.legal-page, .error-page) {
    margin-top: var(--layout-page-top);
    margin-bottom: var(--layout-page-bottom);
    padding: clamp(24px, 4vw, 40px);
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--paper);
}

body.marketplace-surface .market-main > :is(.legal-page, .error-page) > :first-child {
    margin-top: 0;
}

body.marketplace-surface .market-main > :is(.legal-page, .error-page) > :last-child {
    margin-bottom: 0;
}

/* Admin: remove outer + inner padding and keep one deliberate frame. */
body.admin-surface .workspace-main,
body.admin-surface .workspace-main:has(.admin-compact-v2) {
    min-width: 0;
    padding: 0 !important;
}

body.admin-surface .admin-page {
    box-sizing: border-box;
    width: min(var(--layout-frame-width), var(--layout-admin-max)) !important;
    max-width: var(--layout-admin-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: var(--layout-page-top) 0 72px !important;
}

/* Wide tables scroll inside their own frame, not on the page. */
body :is(.table-shell, .mock-panel, .admin-panel, .data-table, .mock-table) {
    min-width: 0;
}

@media (max-width: 760px) {
    :root {
        --layout-gutter: 16px;
        --layout-frame-width: calc(100% - var(--layout-gutter) - var(--layout-gutter));
        --layout-page-top: 24px;
        --layout-page-bottom: 48px;
        --layout-section-gap: 18px;
    }

    body.marketplace-surface .market-main > .page-hero {
        padding: 22px 20px;
        border-radius: 14px;
    }

    body.marketplace-surface .market-store-cover {
        border-radius: 14px;
    }

    body.marketplace-surface .market-catalog-page .market-results-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    body.marketplace-surface .market-catalog-page .market-results-toolbar > nav {
        grid-column: 1 / -1;
        max-width: 100%;
    }

    body.marketplace-surface .market-catalog-page .market-toolbar-action {
        grid-column: 2;
        grid-row: 1;
        margin-left: 0;
    }

    body.marketplace-surface .market-catalog-page .market-view-switch {
        grid-column: 1 / -1;
        width: 100%;
    }

    body.marketplace-surface .market-catalog-page .market-results-toolbar .market-view-switch a {
        min-width: 0;
        flex: 1 1 0;
    }

    body.marketplace-surface .market-store-cover > .market-container {
        padding-inline: 18px;
    }

    body.marketplace-surface .market-store-page .market-product-collection {
        grid-template-columns: 1fr;
    }

    body.marketplace-surface .market-store-page .market-product-card {
        grid-template-columns: 132px minmax(0, 1fr);
    }

    body.admin-surface .admin-page {
        padding: 20px 0 48px !important;
    }
}

@media (max-width: 430px) {
    :root {
        --layout-gutter: 12px;
        --layout-frame-width: calc(100% - var(--layout-gutter) - var(--layout-gutter));
        --layout-page-top: 20px;
        --layout-page-bottom: 40px;
    }

    body.marketplace-surface .market-main > .page-hero {
        padding: 20px 16px;
    }

    body.marketplace-surface .market-catalog-page .market-results-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    body.marketplace-surface .market-catalog-page .market-results-toolbar > nav {
        grid-column: 1 / -1;
        max-width: 100%;
    }

    body.marketplace-surface .market-catalog-page .market-toolbar-action {
        grid-column: 2;
        grid-row: 1;
        margin-left: 0;
    }

    body.marketplace-surface .market-catalog-page .market-view-switch {
        grid-column: 1 / -1;
        width: 100%;
    }

    body.marketplace-surface .market-catalog-page .market-results-toolbar .market-view-switch a {
        min-width: 0;
        flex: 1 1 0;
    }

    body.marketplace-surface .market-store-page .market-product-card {
        grid-template-columns: 118px minmax(0, 1fr);
    }

    body.admin-surface .admin-page {
        padding: 16px 0 40px !important;
    }
}

/* Product purchase panel: keep supporting copy comfortably readable. */
body.marketplace-surface .market-purchase-panel form > header > span {
    font-size: 11px;
}

body.marketplace-surface .market-purchase-panel form > header > small {
    font-size: 10px;
}

body.marketplace-surface .market-package-options label small,
body.marketplace-surface .market-coupon-field > small,
body.marketplace-surface .market-purchase-total small,
body.marketplace-surface .market-purchase-panel form > p {
    font-size: 9px;
    line-height: 1.45;
}

body.marketplace-surface .market-purchase-total span {
    font-size: 10px;
}


/* Header navigation fit: keep user nav centered after adding API docs. */
body.marketplace-surface .market-header-unified {
    grid-template-columns: auto minmax(230px, 340px) minmax(0, 1fr) auto;
    gap: clamp(8px, 1vw, 14px);
}

body.marketplace-surface .market-navigation,
body.marketplace-surface .market-navigation-inner,
body.marketplace-surface .market-primary-nav {
    min-width: 0;
}

body.marketplace-surface .market-navigation-inner,
body.marketplace-surface .market-primary-nav {
    align-items: center;
}

body.marketplace-surface .market-primary-nav {
    max-width: 100%;
    flex-wrap: nowrap;
    justify-content: center;
    overflow: hidden;
}

body.marketplace-surface .market-primary-nav a {
    min-width: 0;
    justify-content: center;
    gap: 6px;
    padding-inline: clamp(6px, .7vw, 10px);
}

body.marketplace-surface .market-primary-nav a span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.marketplace-surface .market-actions {
    min-width: max-content;
}

@media (min-width: 1181px) and (max-width: 1520px) {
    body.marketplace-surface .market-header-unified {
        grid-template-columns: auto minmax(220px, 300px) minmax(0, 1fr) auto;
        gap: 8px;
    }

    body.marketplace-surface .market-brand small {
        display: none;
    }

    body.marketplace-surface .market-primary-nav a {
        min-height: 64px;
        gap: 5px;
        padding-inline: 5px;
        font-size: 12px;
    }

    body.marketplace-surface .market-primary-nav a .ui-icon {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
    }

    body.marketplace-surface .market-search {
        max-width: 300px;
    }
}

@media (min-width: 1181px) and (max-width: 1360px) {
    body.marketplace-surface .market-header-unified {
        grid-template-columns: auto minmax(200px, 260px) minmax(0, 1fr) auto;
    }

    body.marketplace-surface .market-primary-nav a {
        padding-inline: 4px;
        font-size: 11.5px;
    }

    body.marketplace-surface .market-wallet-shortcut {
        padding-inline: 9px;
    }
}

/* Both announcement rows use the same left edge as the storefront frame. */
body.marketplace-surface .market-ticker-pin-v10 {
    padding-left: max(
        var(--layout-gutter),
        calc((100vw - var(--layout-public-max)) / 2)
    ) !important;
}

body.marketplace-surface .market-ticker-viewport-v10 {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* Disable the obsolete generated label from the pre-v10 ticker layer. */
body.marketplace-surface .market-live-ticker::before {
    content: none !important;
    margin-left: 0 !important;
}

@media (max-width: 760px) {
    body.marketplace-surface .market-ticker-pin-v10 {
        padding-left: var(--layout-gutter) !important;
    }
}