/*
 * Shared viewport-safety layer for the customer storefront.
 * Keep page-specific presentation in shop-app.css and feature stylesheets.
 */

html,
body.sc-body {
    max-width: 100%;
}

.sc-main,
.sc-main > *,
.sc-container,
.sc-panel,
.sc-card,
.sc-page-header,
.sc-page-section,
.sc-form-grid,
.sc-grid {
    min-width: 0;
    max-width: 100%;
}

.sc-main img,
.sc-main video,
.sc-main canvas,
.sc-main iframe {
    max-width: 100%;
}

.sc-main pre {
    max-width: 100%;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.sc-main code,
.sc-main .sc-breakable,
.sc-main [data-copy-value] {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sc-table-wrap,
.sc-table-scroll,
.sc-orders-table-wrap,
.sc-api-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 700px) {
    .sc-container {
        padding-inline: 12px;
    }

    .sc-main {
        padding-top: 14px;
        padding-bottom: calc(var(--sc-bottom-h, 64px) + var(--sc-safe-b, 0px) + 18px);
    }

    .sc-page-header,
    .sc-section-header,
    .sc-card__header,
    .sc-panel__header {
        min-width: 0;
        flex-wrap: wrap;
        gap: 10px;
    }

    .sc-page-header > *,
    .sc-section-header > *,
    .sc-card__header > *,
    .sc-panel__header > * {
        min-width: 0;
    }

    .sc-page-header h1,
    .sc-page-header h2,
    .sc-section-header h2,
    .sc-section-header h3 {
        overflow-wrap: anywhere;
    }

    .sc-topbar .sc-dropdown__panel,
    .sc-topbar .sc-notify-dropdown {
        position: fixed;
        top: calc(var(--sc-header-h, 64px) + 6px);
        right: 8px;
        left: 8px;
        width: auto;
        max-width: none;
        max-height: min(72vh, 620px);
        max-height: min(72dvh, 620px);
    }

    .sc-modal,
    .sc-product-modal,
    .sc-order-action-modal,
    .sc-group-goal-modal,
    .sc-md-date {
        padding: 8px;
    }

    .sc-modal__dialog,
    .sc-product-dialog,
    .sc-product-modal__loading,
    .sc-product-modal__load-error,
    .sc-order-action-modal__dialog,
    .sc-group-goal-modal__dialog,
    .sc-md-date__dialog {
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
        min-width: 0;
    }

    .sc-modal__body,
    .sc-product-dialog__body,
    .sc-order-action-modal__body,
    .sc-group-goal-modal__body,
    .sc-md-date__body {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .sc-modal__footer,
    .sc-dialog-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    .sc-modal__footer > *,
    .sc-dialog-actions > * {
        min-width: 0;
        max-width: 100%;
    }

    .sc-input,
    .sc-select,
    .sc-textarea,
    .sc-field input,
    .sc-field select,
    .sc-field textarea,
    .sc-main input,
    .sc-main select,
    .sc-main textarea {
        max-width: 100%;
        min-width: 0;
    }

    .sc-tabs,
    .sc-segmented,
    .sc-filter-tabs,
    .sc-pagination {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .sc-tabs > *,
    .sc-segmented > *,
    .sc-filter-tabs > * {
        flex: 0 0 auto;
    }

    .sc-auth-shell {
        width: 100%;
        min-height: auto;
        padding: 16px 0;
    }

    .sc-auth-card {
        width: 100%;
        max-width: 100%;
        padding-inline: 18px;
    }

    .sc-static-page-content,
    .sc-api-docs,
    .sc-developer-page {
        overflow-wrap: anywhere;
    }

    .sc-static-page-content table,
    .sc-api-docs table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sc-toast-area {
        right: 10px;
        left: 10px;
        width: auto;
    }

    /* Customer orders: preserve every existing value while replacing nine
       full-width label rows with a compact three-column summary grid. */
    .sc-orders-page .sc-orders-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2px 4px;
        margin-bottom: 6px;
        padding: 4px;
    }

    .sc-orders-page .sc-orders-table .sc-orders-row > td {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-content: center;
        justify-items: center;
        gap: 1px;
        min-width: 0;
        min-height: 36px;
        padding: 3px 4px;
        font-size: 10px;
        line-height: 1.25;
        text-align: center;
    }

    .sc-orders-page .sc-orders-table .sc-orders-row > td::before {
        font-size: 7.5px;
        line-height: 1.15;
        text-align: center;
    }

    .sc-orders-page .sc-orders-table .sc-orders-row.is-pending > td:nth-child(8) {
        display: grid;
        grid-column: 1 / -1;
        min-height: 0;
        padding-block: 5px;
    }

    .sc-orders-page .sc-orders-row :is(.sc-orders-number, .sc-orders-status-text, .sc-orders-product, .sc-orders-category, .sc-orders-balance-label) {
        max-width: 100%;
        margin-inline: auto;
        font-size: inherit;
        line-height: 1.2;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .sc-orders-page .sc-orders-row :is(.sc-orders-requirements, .sc-order-wait-actions) {
        gap: 1px;
        margin: 0;
        font-size: inherit;
        line-height: 1.2;
    }

    .sc-orders-page .sc-orders-row :is(.sc-orders-money, time, strong, span, dd) {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .sc-orders-page .sc-orders-row .sc-orders-repurchase {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        min-height: 30px;
        padding: 4px 5px;
        font-size: 9.5px;
    }

    .sc-orders-page .sc-orders-summary {
        gap: 5px;
        margin-bottom: 5px;
    }

    .sc-orders-page .sc-orders-statuses {
        gap: 4px;
    }

    .sc-orders-page .sc-orders-status {
        min-height: 36px;
        padding: 4px 6px;
        font-size: 9.5px;
        line-height: 1.2;
    }

    .sc-orders-page .sc-orders-status strong {
        min-width: 19px;
        font-size: 10.5px;
    }

    .sc-orders-page .sc-orders-consumed {
        min-height: 36px;
        padding: 5px 7px;
    }

    /* Wallet summary cards stay readable in pairs instead of becoming four
       separate full-width blocks on narrow phones. */
    .sc-wallet-page .sc-wallet-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        margin-bottom: 6px;
    }

    .sc-wallet-page .sc-wallet-stat {
        min-height: 50px;
        gap: 2px;
        padding: 5px 7px;
        border-radius: 9px;
    }

    .sc-wallet-page .sc-wallet-stat > span {
        font-size: 8.8px;
        line-height: 1.2;
    }

    .sc-wallet-page .sc-wallet-stat strong {
        font-size: 13px;
        line-height: 1.2;
    }

    .sc-wallet-page .sc-wallet-stat__totals {
        gap: 3px;
    }

    /* Every ledger field remains present; two concise label/value cells share
       each line and a long final reference receives the full last line. */
    .sc-wallet-page .sc-wallet-table tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 7px;
        margin-bottom: 6px;
        padding: 5px;
    }

    .sc-wallet-page .sc-wallet-table td {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 4px;
        width: auto;
        min-width: 0;
        min-height: 27px;
        padding: 2px 3px !important;
        font-size: 10px;
        line-height: 1.25;
    }

    .sc-wallet-page .sc-wallet-table td::before {
        font-size: 7.8px;
        line-height: 1.15;
        white-space: nowrap;
    }

    .sc-wallet-page .sc-wallet-table td:last-child {
        grid-column: 1 / -1;
    }

    .sc-wallet-page :is(.sc-wallet-kind, .sc-wallet-money, .sc-wallet-balance, .sc-wallet-order-link) {
        min-width: 0;
        max-width: 100%;
        font-size: 10px;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    /* Agent customer cards retain all values/actions, with denser spacing and
       a swipeable single action row instead of a tall two-row button grid. */
    .sc-agent-clients-page .sc-agent-customer-row {
        gap: 4px 7px;
        margin-bottom: 6px;
        padding: 7px;
    }

    .sc-agent-clients-page .sc-agent-customer-number {
        margin-top: 1px;
    }

    .sc-agent-clients-page .sc-agent-vip-badge {
        min-width: 50px;
        min-height: 24px;
        padding: 2px 6px;
        font-size: 0.68rem;
    }

    .sc-agent-clients-page .sc-agent-money-grid {
        gap: 5px;
    }

    .sc-agent-clients-page .sc-agent-money-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 4px;
        min-height: 30px;
        padding: 4px 5px;
        text-align: start;
    }

    .sc-agent-clients-page .sc-agent-money-item span {
        margin: 0;
        font-size: 0.61rem;
    }

    .sc-agent-clients-page .sc-agent-money-item strong {
        font-size: 0.7rem;
        text-align: end;
    }

    .sc-agent-clients-page .sc-agent-customer-cell--actions > .sc-agent-mobile-label {
        display: none;
    }

    .sc-agent-clients-page .sc-agent-action-grid {
        grid-template-columns: repeat(4, minmax(76px, 1fr));
        gap: 4px;
        max-width: 100%;
        padding-bottom: 2px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .sc-agent-clients-page .sc-agent-action-grid .sc-btn {
        min-height: 32px;
        padding: 4px 5px;
        font-size: 0.64rem;
        line-height: 1.2;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    /* The base header hides this control at 480px; mobile correction keeps
       the existing theme menu available without changing its behavior. */
    .sc-topbar .sc-theme-control {
        display: block;
        flex: 0 0 auto;
    }
}

@media (max-width: 430px) {
    .sc-container {
        padding-inline: 10px;
    }

    .sc-main {
        padding-top: 10px;
    }

    .sc-modal__header,
    .sc-modal__body,
    .sc-modal__footer {
        padding-inline: 14px;
    }

    .sc-modal__footer,
    .sc-dialog-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .sc-modal__footer .sc-btn,
    .sc-dialog-actions .sc-btn {
        width: 100%;
        justify-content: center;
    }

    .sc-wallet-head {
        align-items: flex-start;
        gap: 5px;
    }

    .sc-wallet-head h1 {
        font-size: 20px;
    }

    .sc-wallet-head .sc-btn {
        width: auto;
        min-height: 34px;
    }
}

@media (max-width: 340px) {
    .sc-orders-page .sc-orders-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sc-orders-page .sc-orders-table .sc-orders-row > td:last-child,
    .sc-orders-page .sc-orders-table .sc-orders-row.is-pending > td:nth-child(8) {
        grid-column: 1 / -1;
    }
}

/* Mobile product purchase modal refinement */
@media (max-width: 699px) {
    .sc-product-modal {
        align-items: center;
        padding: 10px;
    }

    .sc-product-modal__shell,
    .sc-product-dialog {
        width: 100%;
        max-width: 100%;
        max-height: calc(88dvh);
        min-height: 0;
    }

    .sc-product-dialog {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .sc-product-dialog__head {
        flex: 0 0 auto;
        padding: 11px 12px;
        gap: 10px;
    }

    .sc-product-dialog__head h1 {
        font-size: 16px;
        line-height: 1.35;
    }

    .sc-product-price-badge {
        min-height: 30px;
        padding: 4px 8px;
        font-size: 11.5px;
    }

    .sc-product-dialog__scroll {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 11px 12px 12px;
    }

    .sc-product-dialog .form-row {
        margin-bottom: 9px;
    }

    .sc-product-dialog .sc-label {
        margin-bottom: 4px;
        font-size: 11.5px;
    }

    .sc-product-dialog .sc-input,
    .sc-product-dialog .sc-select {
        min-height: 40px;
        font-size: 13px;
    }

    .sc-product-requirements,
    .sc-product-note {
        margin-top: 10px;
    }

    .sc-product-dialog__actions {
        gap: 8px;
        margin-top: 12px;
    }

    .sc-product-dialog__buy,
    .sc-product-dialog__cancel {
        min-height: 40px;
        font-size: 13px;
        padding: 7px 12px;
    }
}

@media (max-width: 699px) {
    .sc-product-modal {
        z-index: 2000;
    }
}

/* Customer orders mobile: remove redundant labels and status text */
@media (max-width: 699px) {
    .sc-orders-page .sc-orders-table .sc-orders-row > td::before {
        display: none;
    }

    .sc-orders-page .sc-orders-row .sc-orders-status-text {
        display: none;
    }
}

/* Pending customer orders: compact two-column mobile layout */
@media (max-width: 699px) {
    .sc-orders-page .sc-orders-row.is-pending {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    .sc-orders-page .sc-orders-table .sc-orders-row.is-pending > td:nth-child(7) {
        grid-column: 1 / -1;
    }

    .sc-orders-page .sc-orders-table .sc-orders-row.is-pending > td:nth-child(8) {
        grid-column: auto;
        min-height: 0;
    }

    .sc-orders-page .sc-orders-table .sc-orders-row.is-pending > td:nth-child(9) {
        grid-column: auto;
        min-height: 0;
    }

    .sc-orders-page .sc-orders-row.is-pending .sc-order-wait-actions,
    .sc-orders-page .sc-orders-row.is-pending .sc-orders-repurchase {
        width: 100%;
        max-width: 100%;
    }
}

/* Pending orders: remove wasted mobile grid space */
@media (max-width: 699px) {
    .sc-orders-page .sc-orders-row.is-pending {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row;
        align-items: stretch;
    }

    .sc-orders-page .sc-orders-table .sc-orders-row.is-pending > td:nth-child(7),
    .sc-orders-page .sc-orders-table .sc-orders-row.is-pending > td:nth-child(8) {
        grid-column: auto;
    }

    .sc-orders-page .sc-orders-table .sc-orders-row.is-pending > td:nth-child(9):not(:has(.sc-orders-repurchase)) {
        display: none;
    }

    .sc-orders-page .sc-orders-table .sc-orders-row.is-pending > td {
        min-height: 0;
    }
}

/* Pending orders: 3 columns to reduce vertical space */
@media (max-width: 699px) {
    .sc-orders-page .sc-orders-row.is-pending {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2px 4px;
    }

    .sc-orders-page .sc-orders-table .sc-orders-row.is-pending > td:nth-child(7),
    .sc-orders-page .sc-orders-table .sc-orders-row.is-pending > td:nth-child(8),
    .sc-orders-page .sc-orders-table .sc-orders-row.is-pending > td:nth-child(9) {
        grid-column: auto;
    }

    .sc-orders-page .sc-orders-row .sc-orders-balance-label {
        display: none;
    }
}

/* Pending orders: requested compact 3-column placement */
@media (max-width: 699px) {
    .sc-orders-page .sc-orders-row.is-pending {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Row 1: order | product | date */
    .sc-orders-page .sc-orders-row.is-pending > td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .sc-orders-page .sc-orders-row.is-pending > td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .sc-orders-page .sc-orders-row.is-pending > td:nth-child(7) {
        grid-column: 3;
        grid-row: 1;
    }

    /* Row 2: requirements | deducted amount | response time */
    .sc-orders-page .sc-orders-row.is-pending > td:nth-child(4) {
        grid-column: 1;
        grid-row: 2;
    }

    .sc-orders-page .sc-orders-row.is-pending > td:nth-child(5) {
        grid-column: 2;
        grid-row: 2;
    }

    .sc-orders-page .sc-orders-row.is-pending > td:nth-child(8) {
        grid-column: 3;
        grid-row: 2;
    }

    /* Row 3: quantity under requirements | balance under amount */
    .sc-orders-page .sc-orders-row.is-pending > td:nth-child(3) {
        grid-column: 1;
        grid-row: 3;
    }

    .sc-orders-page .sc-orders-row.is-pending > td:nth-child(6) {
        grid-column: 2;
        grid-row: 3;
    }

    .sc-orders-page .sc-orders-row.is-pending > td:nth-child(9) {
        grid-column: 3;
        grid-row: 3;
    }
}

/* Rejected orders: same compact placement for review */
@media (max-width: 699px) {
    .sc-orders-page .sc-orders-row--rejected {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sc-orders-page .sc-orders-row--rejected > td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .sc-orders-page .sc-orders-row--rejected > td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .sc-orders-page .sc-orders-row--rejected > td:nth-child(7) {
        grid-column: 3;
        grid-row: 1;
    }

    .sc-orders-page .sc-orders-row--rejected > td:nth-child(4) {
        grid-column: 1;
        grid-row: 2;
    }

    .sc-orders-page .sc-orders-row--rejected > td:nth-child(5) {
        grid-column: 2;
        grid-row: 2;
    }

    .sc-orders-page .sc-orders-row--rejected > td:nth-child(8) {
        grid-column: 3;
        grid-row: 2;
    }

    .sc-orders-page .sc-orders-row--rejected > td:nth-child(3) {
        grid-column: 1;
        grid-row: 3;
    }

    .sc-orders-page .sc-orders-row--rejected > td:nth-child(6) {
        grid-column: 2;
        grid-row: 3;
    }

    .sc-orders-page .sc-orders-row--rejected > td:nth-child(9) {
        grid-column: 3;
        grid-row: 3;
    }
}

/* Rejected orders: reduce vertical space only */
@media (max-width: 699px) {
    .sc-orders-page .sc-orders-row--rejected {
        gap: 1px 4px;
        padding-block: 2px;
        margin-bottom: 4px;
    }

    .sc-orders-page .sc-orders-table .sc-orders-row--rejected > td {
        min-height: 28px;
        padding-top: 1px;
        padding-bottom: 1px;
        align-content: center;
    }
}

/* Rejected orders: tighter vertical packing */
@media (max-width: 699px) {
    .sc-orders-page .sc-orders-row--rejected {
        row-gap: 0;
        padding-block: 1px;
    }

    .sc-orders-page .sc-orders-table .sc-orders-row--rejected > td {
        min-height: 0;
        padding-top: 2px;
        padding-bottom: 2px;
        line-height: 1.15;
    }
}

/* Completed orders: match rejected compact mobile layout */
@media (max-width: 699px) {
    .sc-orders-page .sc-orders-row--completed {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 0;
        column-gap: 4px;
        padding-block: 1px;
        margin-bottom: 4px;
    }

    .sc-orders-page .sc-orders-row--completed > td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .sc-orders-page .sc-orders-row--completed > td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .sc-orders-page .sc-orders-row--completed > td:nth-child(7) {
        grid-column: 3;
        grid-row: 1;
    }

    .sc-orders-page .sc-orders-row--completed > td:nth-child(4) {
        grid-column: 1;
        grid-row: 2;
    }

    .sc-orders-page .sc-orders-row--completed > td:nth-child(5) {
        grid-column: 2;
        grid-row: 2;
    }

    .sc-orders-page .sc-orders-row--completed > td:nth-child(8) {
        grid-column: 3;
        grid-row: 2;
    }

    .sc-orders-page .sc-orders-row--completed > td:nth-child(3) {
        grid-column: 1;
        grid-row: 3;
    }

    .sc-orders-page .sc-orders-row--completed > td:nth-child(6) {
        grid-column: 2;
        grid-row: 3;
    }

    .sc-orders-page .sc-orders-row--completed > td:nth-child(9) {
        grid-column: 3;
        grid-row: 3;
    }

    .sc-orders-page .sc-orders-table .sc-orders-row--completed > td {
        min-height: 0;
        padding-top: 2px;
        padding-bottom: 2px;
        line-height: 1.15;
    }
}


/* Customer orders mobile: countdown lives inside cancel button */
@media (max-width: 699px) {
    .sc-orders-page .sc-order-cancel-countdown {
        display: none;
    }
}

/* Pending orders: tighter vertical packing */
@media (max-width: 699px) {
    .sc-orders-page .sc-orders-row.is-pending {
        row-gap: 0;
        padding-block: 1px;
        margin-bottom: 4px;
    }

    .sc-orders-page .sc-orders-table .sc-orders-row.is-pending > td {
        min-height: 0;
        padding-top: 2px;
        padding-bottom: 2px;
        line-height: 1.15;
    }

    .sc-orders-page .sc-orders-row.is-pending .sc-order-wait-actions {
        gap: 2px;
    }
}

/* Pending orders: extra vertical compression */
@media (max-width: 699px) {
    .sc-orders-page .sc-orders-row.is-pending {
        row-gap: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .sc-orders-page .sc-orders-table .sc-orders-row.is-pending > td {
        min-height: 0;
        padding-top: 1px;
        padding-bottom: 1px;
    }

    .sc-orders-page .sc-orders-row.is-pending .sc-order-wait-actions {
        gap: 0;
        margin: 0;
        line-height: 1.05;
    }

    .sc-orders-page .sc-orders-row.is-pending .sc-order-cancel {
        margin: 0;
    }

    .sc-orders-page .sc-orders-row.is-pending .sc-order-cancel button {
        min-height: 26px;
        padding-top: 2px;
        padding-bottom: 2px;
        line-height: 1.1;
    }
}

/* Pending orders: match rejected card height as closely as possible */
@media (max-width: 699px) {
    .sc-orders-page .sc-orders-row.is-pending {
        row-gap: 0;
        column-gap: 4px;
        padding-block: 1px;
        margin-bottom: 4px;
    }

    .sc-orders-page .sc-orders-table .sc-orders-row.is-pending > td {
        min-height: 0;
        padding-top: 2px;
        padding-bottom: 2px;
        line-height: 1.15;
    }

    .sc-orders-page .sc-orders-row.is-pending .sc-order-wait-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 0;
        margin: 0;
        line-height: 1;
    }

    .sc-orders-page .sc-orders-row.is-pending .sc-order-wait-actions > strong {
        margin: 0;
        line-height: 1;
        white-space: nowrap;
    }

    .sc-orders-page .sc-orders-row.is-pending .sc-order-cancel {
        margin: 0;
        flex: 0 0 auto;
    }

    .sc-orders-page .sc-orders-row.is-pending .sc-order-cancel button {
        min-height: 24px;
        padding: 2px 6px;
        line-height: 1;
    }
}

/* Pending orders: cancel button above response duration */
@media (max-width: 699px) {
    .sc-orders-page .sc-orders-row.is-pending .sc-order-wait-actions {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        gap: 1px;
        min-height: 0;
        margin: 0;
    }

    .sc-orders-page .sc-orders-row.is-pending .sc-order-cancel {
        margin: 0;
        line-height: 1;
    }

    .sc-orders-page .sc-orders-row.is-pending .sc-order-wait-actions > strong {
        margin: 0;
        line-height: 1;
    }
}

/* Pending orders: use free space below date for cancel controls */
@media (max-width: 699px) {
    .sc-orders-page .sc-orders-row.is-pending > td:nth-child(8) {
        grid-row: 1 / span 2;
        grid-column: 3;
        align-self: end;
        min-height: 0;
        padding-top: 0;
        padding-bottom: 1px;
    }

    .sc-orders-page .sc-orders-row.is-pending .sc-order-wait-actions {
        justify-content: flex-end;
        gap: 1px;
        min-height: 0;
    }
}

/* Pending orders: exact rejected 3x3 layout, cancel replaces repurchase */
@media (max-width: 699px) {
    .sc-orders-page .sc-orders-row.is-pending {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 0;
        column-gap: 4px;
        padding-block: 1px;
        margin-bottom: 4px;
    }

    .sc-orders-page .sc-orders-table .sc-orders-row.is-pending > td {
        min-height: 0;
        padding-top: 2px;
        padding-bottom: 2px;
        line-height: 1.15;
    }

    /* Row 1 */
    .sc-orders-page .sc-orders-row.is-pending > td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .sc-orders-page .sc-orders-row.is-pending > td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    .sc-orders-page .sc-orders-row.is-pending > td:nth-child(7) {
        grid-column: 3;
        grid-row: 1;
    }

    /* Row 2 */
    .sc-orders-page .sc-orders-row.is-pending > td:nth-child(4) {
        grid-column: 1;
        grid-row: 2;
    }

    .sc-orders-page .sc-orders-row.is-pending > td:nth-child(5) {
        grid-column: 2;
        grid-row: 2;
    }

    /* Let response duration + cancel form occupy separate grid cells */
    .sc-orders-page .sc-orders-table .sc-orders-row.is-pending > td:nth-child(8) {
        display: contents;
    }

    .sc-orders-page .sc-orders-row.is-pending .sc-order-wait-actions {
        display: contents;
    }

    .sc-orders-page .sc-orders-row.is-pending .sc-order-wait-actions > strong {
        grid-column: 3;
        grid-row: 2;
        align-self: center;
        justify-self: center;
        margin: 0;
        line-height: 1.15;
        white-space: nowrap;
    }

    /* Row 3 */
    .sc-orders-page .sc-orders-row.is-pending > td:nth-child(3) {
        grid-column: 1;
        grid-row: 3;
    }

    .sc-orders-page .sc-orders-row.is-pending > td:nth-child(6) {
        grid-column: 2;
        grid-row: 3;
    }

    .sc-orders-page .sc-orders-row.is-pending > td:nth-child(9) {
        display: none;
    }

    .sc-orders-page .sc-orders-row.is-pending .sc-order-cancel {
        grid-column: 3;
        grid-row: 3;
        align-self: center;
        justify-self: stretch;
        margin: 0;
    }

    .sc-orders-page .sc-orders-row.is-pending .sc-order-cancel button {
        width: 100%;
        min-height: 24px;
        padding: 2px 5px;
        line-height: 1;
    }
}

/* Order details mobile: compact two-card layout */
@media (max-width: 699px) {

    /* Information + times: two cards per row */
    [data-order-details] .sc-order-detail-grid,
    [data-order-details] .sc-order-detail-grid--info,
    [data-order-details] .sc-order-details__section--times .sc-order-detail-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    /* Requirements: two cards per row */
    [data-order-details] .sc-order-detail-requirements {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    [data-order-details] .sc-order-detail-requirements > div {
        width: auto;
        max-width: none;
        min-width: 0;
        padding: 5px 6px;
    }

    /* Money: two cards per row */
    [data-order-details] .sc-order-detail-grid--money {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    [data-order-details] .sc-order-detail-grid--money > div {
        width: auto;
        max-width: none;
        min-width: 0;
        padding: 5px 6px;
    }

    /* Keep cards compact vertically */
    [data-order-details] .sc-order-detail-grid > div {
        min-height: 0;
        padding: 5px 6px;
    }
}

/* Order details mobile: make every result visibly carded */
@media (max-width: 699px) {
    [data-order-details] .sc-order-detail-grid > div,
    [data-order-details] .sc-order-detail-requirements > div {
        border: 1px solid var(--sc-border);
        border-radius: var(--sc-radius);
    }

    [data-order-details] .sc-order-details__section--times .sc-order-detail-grid > div {
        background: var(--sc-surface);
    }

    [data-order-details] .sc-order-details__section--money .sc-order-detail-grid > div {
        border: 1px solid var(--sc-border);
    }

    [data-order-details] .sc-order-details__section--requirements .sc-order-detail-requirements > div {
        background: var(--sc-surface);
    }
}

/* Customer orders mobile: separate each order with storefront topbar color */
@media (max-width: 699px) {
    .sc-orders-page .sc-orders-row {
        border: 1px solid var(--sc-topbar-bg);
        border-radius: var(--sc-radius);
        overflow: hidden;
    }
}

/* Customer orders mobile: unified status colors in dark mode only */
@media (max-width: 699px) {
    html[data-theme="dark"] .sc-orders-page .sc-orders-row--completed {
        background: rgba(22, 163, 74, 0.24) !important;
    }

    html[data-theme="dark"] .sc-orders-page .sc-orders-row--rejected {
        background: rgba(220, 38, 38, 0.24) !important;
    }

    html[data-theme="dark"] .sc-orders-page .sc-orders-row--pending {
        background: rgba(217, 154, 0, 0.34) !important;
    }

    html[data-theme="dark"] .sc-orders-page .sc-orders-row--completed > td,
    html[data-theme="dark"] .sc-orders-page .sc-orders-row--rejected > td,
    html[data-theme="dark"] .sc-orders-page .sc-orders-row--pending > td {
        background: transparent !important;
    }
}

@media (max-width: 699px) and (prefers-color-scheme: dark) {
    html[data-theme="system"] .sc-orders-page .sc-orders-row--completed {
        background: rgba(22, 163, 74, 0.24) !important;
    }

    html[data-theme="system"] .sc-orders-page .sc-orders-row--rejected {
        background: rgba(220, 38, 38, 0.24) !important;
    }

    html[data-theme="system"] .sc-orders-page .sc-orders-row--pending {
        background: rgba(217, 154, 0, 0.34) !important;
    }

    html[data-theme="system"] .sc-orders-page .sc-orders-row--completed > td,
    html[data-theme="system"] .sc-orders-page .sc-orders-row--rejected > td,
    html[data-theme="system"] .sc-orders-page .sc-orders-row--pending > td {
        background: transparent !important;
    }
}

/* Customer deposits: match order status colors */

/* Light mode */
.sc-deposit-history {
    --sc-deposit-pending-tint: var(--sc-warning-bg);
    --sc-deposit-accepted-tint: var(--sc-success-bg);
    --sc-deposit-rejected-tint: var(--sc-danger-bg);
}

/* Dark mode */
html[data-theme="dark"] .sc-deposit-history {
    --sc-deposit-pending-tint: rgba(217, 154, 0, 0.34);
    --sc-deposit-accepted-tint: rgba(22, 163, 74, 0.24);
    --sc-deposit-rejected-tint: rgba(220, 38, 38, 0.24);
}

/* System theme when device is dark */
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] .sc-deposit-history {
        --sc-deposit-pending-tint: rgba(217, 154, 0, 0.34);
        --sc-deposit-accepted-tint: rgba(22, 163, 74, 0.24);
        --sc-deposit-rejected-tint: rgba(220, 38, 38, 0.24);
    }
}

/* Customer deposits mobile: topbar-colored frame around each deposit */
@media (max-width: 699px) {
    .sc-deposit-history .sc-deposit-summary-row {
        outline: 1px solid var(--sc-topbar-bg);
        outline-offset: -1px;
        border-radius: var(--sc-radius);
        overflow: hidden;
    }
}

/* Wallet + monthly inventory mobile: keep date text clear of calendar icon */
@media (max-width: 699px) {
    .sc-wallet-page .sc-wallet-date-filter .sc-date-pill__input {
        padding-inline: 10px 48px;
        box-sizing: border-box;
    }
}

/* Wallet + monthly inventory mobile: correct calendar-icon spacing */
@media (max-width: 699px) {
    .sc-wallet-page .sc-wallet-date-filter .sc-date-pill__input {
        padding-left: 48px !important;
        padding-right: 10px !important;
    }
}