/*
 * 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 inner frame owns the width. A second cap here would shrink Catalog
 * again and misalign it with the header on wide screens. */
body.marketplace-surface .market-catalog-page {
    width: 100%;
    max-width: none;
    margin-inline: auto;
}

body.marketplace-surface .market-catalog-results {
    min-width: 0;
}

/* Shopping pages get a wider frame; forms, articles and Admin keep theirs.
 * Reuse the frame token so the header, cover and footer stay aligned.
 * Existing laptop/mobile column rules remain unchanged up to 1440px. */
@media (min-width: 1441px) {
    body.marketplace-surface:has(.market-main > :is(.market-catalog-page, .market-store-page)) {
        --layout-public-max: 1920px;
    }

    body.marketplace-surface .market-store-page .market-product-collection:not(.is-list) {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (min-width: 1600px) {
    body.marketplace-surface .market-catalog-page .market-product-collection:not(.is-list) {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 1800px) {
    body.marketplace-surface .market-store-page .market-product-collection:not(.is-list) {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (min-width: 2200px) {
    /* Ultrawide shopping uses the available space instead of a 1920px cap.
     * Scope these tokens to shopping routes, leaving Admin and reading pages
     * unchanged. Ticker gutters remain independent of the content frame. */
    body.marketplace-surface:has(.market-main > :is(.market-catalog-page, .market-store-page)) {
        --layout-public-max: 100%;
        --layout-frame-width: 94%;
    }

    /* Add columns as space grows without shrinking text or stretching a few
     * filtered results across the entire row. List view keeps its own rules. */
    body.marketplace-surface .market-catalog-page .market-product-collection:not(.is-list),
    body.marketplace-surface .market-store-page .market-product-collection:not(.is-list) {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }

    /* Do not magnify and crop the banner artwork as its row grows wider. */
    body.marketplace-surface .market-catalog-page .market-weekly-offer {
        grid-template-columns: minmax(0, 1fr) min(48%, 640px);
    }

    /* Public account and content pages use the same broad outer frame as the
     * catalog on ultrawide displays. The route-level :has() scope deliberately
     * excludes every Admin page. Individual grids below preserve compact side
     * rails and readable text instead of simply stretching every component. */
    body.marketplace-surface:has(.market-main > :is(
        .customer-dashboard,
        .market-home,
        .developer-docs-page,
        .blog-hub-v5,
        .faq-hub-v5,
        .account-profile-page,
        .account-settings-page,
        .orders-workspace,
        .wallet-deposit-v4
    )) {
        --layout-public-max: 100%;
        --layout-frame-width: 94%;
    }

    /* Seller submission and private backup lookup are composed of separate
     * sibling sections rather than one .mock-page. Scope the wider frame to
     * their own page markers so unrelated utility pages remain unchanged. */
    body.marketplace-surface:has(.market-main .ctv-seller-row),
    body.marketplace-surface:has(.market-main .fb-backup-page) {
        --layout-public-max: 100%;
        --layout-frame-width: 94%;
    }

    /* Signed-in home dashboard: retain a deliberate utility rail while the
     * order workspace gets the added desktop room. */
    body.marketplace-surface .customer-dashboard.dashboard-v2 {
        max-width: none !important;
    }

    body.marketplace-surface .customer-dashboard .dashboard-command-band {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    }

    body.marketplace-surface .customer-dashboard .dashboard-workspace-grid {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
    }

    /* Anonymous home: keep the hero copy and illustration at useful visual
     * sizes, align them with the broader frame, and add cards rather than
     * enlarging a small set of products indefinitely. */
    body.marketplace-surface .market-home .market-home-hero > .market-container {
        grid-template-columns: minmax(620px, 760px) minmax(520px, 700px);
        justify-content: space-between;
        gap: 48px;
    }

    body.marketplace-surface .market-home .market-home-showcase {
        width: 100%;
        max-width: 700px;
        justify-self: end;
    }

    body.marketplace-surface .market-home .shop-product-grid {
        /* Reserve regular product slots across ultrawide screens. auto-fit
         * collapses unused slots then space-between turns the spare width
         * into large, distracting gaps between the visible products. */
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 16px;
        justify-content: start;
    }

    body.marketplace-surface .market-home .market-home-flow li p {
        max-width: 42ch;
    }

    /* Developer reference: a stable endpoint directory avoids a very wide
     * navigation rail while code and reference material use the added space. */
    body.marketplace-surface .developer-docs-page {
        width: 100% !important;
        max-width: none !important;
    }

    body.marketplace-surface .developer-docs-page .api-workbench {
        grid-template-columns: minmax(360px, 420px) minmax(0, 1fr);
    }

    /* Blogs and FAQ: cards fill the new frame, while prose remains within a
     * comfortable reading measure and the FAQ help panel remains compact. */
    body.marketplace-surface .content-hub-v5 .content-hero-grid-v5 {
        grid-template-columns: minmax(0, 1fr) minmax(380px, 520px);
        gap: clamp(42px, 5vw, 100px);
    }

    body.marketplace-surface .blog-hub-v5 .blog-feature-v5 {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
    }

    body.marketplace-surface .blog-hub-v5 .blog-row-copy-v5 h3 {
        max-width: 72ch;
    }

    body.marketplace-surface .blog-hub-v5 .blog-row-copy-v5 > p {
        max-width: 96ch;
    }

    body.marketplace-surface .faq-hub-v5 .faq-layout-v5 {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 380px);
    }

    body.marketplace-surface .faq-hub-v5 .faq-answer-v5 p {
        max-width: 100ch;
    }

    /* Profile panels may span the workspace; preserve a compact editing area
     * so text fields never become difficult to scan from edge to edge. */
    body.marketplace-surface .account-profile-page .profile-media-grid {
        max-width: 1440px;
    }

    body.marketplace-surface .account-profile-page .profile-information-form {
        max-width: 1280px;
    }

    /* Account activity, security and password settings share the public
     * ultrawide frame, while their controls stay deliberately compact. This
     * uses the extra width for the settings workspace and not for a single
     * difficult-to-scan row of text or a full-screen password field. */
    body.marketplace-surface .account-settings-page {
        max-width: none !important;
    }

    body.marketplace-surface .account-settings-page .account-settings-layout {
        grid-template-columns: minmax(282px, 340px) minmax(0, 1fr);
        gap: clamp(20px, 1.2vw, 32px);
    }

    body.marketplace-surface .account-settings-page .account-settings-panel-header > div {
        max-width: 1000px;
    }

    /* Activity history is now able to use the wider panel, but descriptions
     * and device metadata retain a comfortable reading measure. */
    body.marketplace-surface .account-settings-page .account-activity-copy > p {
        max-width: 100ch;
    }

    body.marketplace-surface .account-settings-page .account-activity-copy dl {
        grid-template-columns: minmax(150px, .5fr) minmax(150px, .5fr) minmax(360px, 2fr);
        max-width: 1840px;
    }

    /* Two-factor setup can be information-dense. Keep the QR guide, secret
     * and password controls within purposeful column widths inside the wider
     * security panel. */
    body.marketplace-surface .account-settings-page .two-factor-setup,
    body.marketplace-surface .account-settings-page .two-factor-enabled {
        max-width: 1560px;
    }

    body.marketplace-surface .account-settings-page .authenticator-enrollment,
    body.marketplace-surface .account-settings-page .security-key-field,
    body.marketplace-surface .account-settings-page .security-uri-details {
        max-width: 1320px;
    }

    body.marketplace-surface .account-settings-page .two-factor-form,
    body.marketplace-surface .account-settings-page .two-factor-disable-form {
        max-width: 1160px;
    }

    body.marketplace-surface .account-settings-page .security-confirmation,
    body.marketplace-surface .account-settings-page .security-guidance {
        max-width: 1320px;
    }

    body.marketplace-surface .account-settings-page .recovery-code-grid {
        max-width: 1240px;
    }

    /* CTV: let the seller workspace use the expanded frame while keeping the
     * product, status and encrypted-stock columns intentional and scannable. */
    body.marketplace-surface .ctv-seller-row {
        grid-template-columns: minmax(320px, 1.35fr) minmax(220px, .7fr) minmax(190px, .7fr) minmax(430px, 1.35fr);
    }

    body.marketplace-surface .ctv-stock-form {
        grid-template-columns: minmax(300px, 1fr) auto;
    }

    body.marketplace-surface .table-shell:has(.ctv-seller-row) .admin-form > :is(label, button) {
        max-width: 1040px;
    }

    /* Backup lookup is loaded after this layout stylesheet. The added
     * customer/page qualifiers intentionally keep this outer-frame rule ahead
     * of its legacy 1180px cap without touching the Admin backup manager. */
    body.marketplace-surface.customer-surface:has(.fb-backup-page) .fb-backup-page {
        width: var(--layout-frame-width) !important;
        max-width: none !important;
    }

    body.marketplace-surface.customer-surface .fb-backup-hero {
        grid-template-columns: auto minmax(0, 1.35fr) minmax(340px, 420px);
    }

    /* Orders receive room for both the list and selected-order detail. The
     * two balanced panes prevent a wide monitor from turning either side into
     * an unreadable, overly long single column. */
    body.marketplace-surface .orders-workspace {
        max-width: none !important;
    }

    body.marketplace-surface .orders-workspace .orders-layout {
        grid-template-columns: minmax(780px, 1.1fr) minmax(780px, .9fr);
        gap: clamp(18px, 1.2vw, 32px);
    }

    body.marketplace-surface .orders-workspace .orders-filter-bar {
        grid-template-columns: minmax(360px, 1.35fr) minmax(180px, .82fr) minmax(180px, .82fr) auto auto;
    }

    /* An account without a selected order has no detail pane in the Razor
     * markup. Let the useful list/empty state occupy the workspace, while
     * retaining a compact filter row rather than a full-width search field. */
    body.marketplace-surface .orders-workspace .orders-layout:not(:has(.order-detail-pane)) {
        grid-template-columns: minmax(0, 1fr);
    }

    body.marketplace-surface .orders-workspace .orders-layout:not(:has(.order-detail-pane)) .orders-filter-bar {
        max-width: 1800px;
    }

    /* Wallet keeps a fixed-width status rail and uses the new width for the
     * payment and invoice panels without changing any payment interaction. */
    body.marketplace-surface .wallet-deposit-v4 {
        width: 100% !important;
        max-width: none !important;
    }

    body.marketplace-surface .wallet-deposit-v4 .wallet-page-grid {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
    }

    /* Keep deposit controls easy to scan on 4K displays. The information is
     * still inside the full-width payment panel, but the amount and summary
     * form a purposeful two-column workspace instead of one extremely long
     * row of inputs. */
    body.marketplace-surface .wallet-deposit-v4 .payment-method-card form > .deposit-step,
    body.marketplace-surface .wallet-deposit-v4 .crypto-form {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(360px, .75fr);
        align-items: start;
        gap: 10px 18px;
    }

    body.marketplace-surface .wallet-deposit-v4 .payment-method-card form > .deposit-step > h2 {
        grid-column: 1 / -1;
    }

    body.marketplace-surface .wallet-deposit-v4 .crypto-form > input[type="hidden"] {
        display: none;
    }

    body.marketplace-surface .wallet-deposit-v4 :is(.payment-method-card form > .deposit-step, .crypto-form) > :is(.amount-selector, .deposit-amount-input, .validation) {
        grid-column: 1;
    }

    body.marketplace-surface .wallet-deposit-v4 :is(.payment-method-card form > .deposit-step, .crypto-form) > .deposit-totals {
        grid-column: 2;
        grid-row: 1 / span 3;
        min-height: 100%;
        margin-top: 0;
    }

    body.marketplace-surface .wallet-deposit-v4 .crypto-form > .deposit-totals {
        grid-row: 1 / span 3;
    }

    body.marketplace-surface .wallet-deposit-v4 :is(.payment-method-card form > .deposit-step, .crypto-form) > :is(.gateway-selector, .bank-transfer-box) {
        grid-column: 1 / -1;
        width: min(100%, 1600px);
    }

    body.marketplace-surface .wallet-deposit-v4 :is(.payment-method-card form > .deposit-step, .crypto-form) > .mock-primary.full {
        grid-column: 1;
        width: min(100%, 960px);
    }

    body.marketplace-surface .wallet-deposit-v4 .crypto-form > .amount-selector {
        grid-template-columns: repeat(5, minmax(120px, 1fr));
    }
}

/* At tablet widths the toolbar must wrap instead of forcing the grid wider
 * than its frame. On phones the existing grid-based toolbar takes over. */
@media (min-width: 761px) {
    body.marketplace-surface .market-catalog-page .market-results-toolbar {
        flex-wrap: wrap;
    }

    body.marketplace-surface .market-catalog-page .market-results-toolbar > nav {
        max-width: 100%;
        flex-wrap: wrap;
    }
}

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

/* Catalog page-size selector: an explicit, keyboard-accessible control that
 * matches the existing marketplace toolbar in either colour scheme. */
body.marketplace-surface .market-catalog-page .market-page-size-picker {
    display: flex;
    align-items: center;
    margin: 0;
}

body.marketplace-surface .market-catalog-page .market-page-size-picker label {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px 0 12px;
    border: 1px solid var(--sa-line);
    border-radius: 10px;
    background: rgb(255 255 255 / 66%);
    color: var(--sa-muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

html[data-color-scheme="dark"] body.marketplace-surface .market-catalog-page .market-page-size-picker label {
    background: rgb(16 28 48 / 78%);
}

body.marketplace-surface .market-catalog-page .market-page-size-picker select {
    min-width: 58px;
    min-height: 30px;
    padding: 0 3px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--sa-ink);
    font: inherit;
    cursor: pointer;
}

body.marketplace-surface .market-catalog-page .market-page-size-picker label:focus-within {
    border-color: var(--sa-cobalt-500);
    box-shadow: 0 0 0 3px rgb(32 92 242 / 16%);
}

/* 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%;
        grid-row: 4;
    }

    body.marketplace-surface .market-catalog-page .market-page-size-picker {
        grid-column: 1 / -1;
        grid-row: 3;
        min-width: 0;
    }

    body.marketplace-surface .market-catalog-page .market-page-size-picker label {
        width: 100%;
        justify-content: space-between;
    }

    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%;
        grid-row: 4;
    }

    body.marketplace-surface .market-catalog-page .market-page-size-picker {
        grid-column: 1 / -1;
        grid-row: 3;
        min-width: 0;
    }

    body.marketplace-surface .market-catalog-page .market-page-size-picker label {
        width: 100%;
        justify-content: space-between;
    }

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

/* Tickers span the viewport, independently of the centered storefront frame.
 * Keep a small edge gutter so ultrawide screens do not gain a large blank
 * pinned area before the announcement and activity labels. */
body.marketplace-surface .market-ticker-pin-v10 {
    padding-left: min(var(--layout-gutter), 24px) !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;
    }
}

@media (max-width: 580px) {
    body.marketplace-surface .market-catalog-page .market-page-size-picker {
        grid-column: 1;
        grid-row: 1;
    }

    body.marketplace-surface .market-catalog-page .market-results-toolbar .market-view-switch {
        grid-row: 3;
    }
}