/*
 * Admin phone shell with desktop-site content parity.
 *
 * Main administration pages retain the 1440px desktop geometry (1170px after
 * the desktop sidebar) and are scaled as one canvas to the phone viewport.
 * Navigation and overlay surfaces remain at the phone's native scale.
 */

.admin-sidebar-overlay,
.admin-sidebar-overlay[hidden] {
    display: none;
}

.global-search-mobile-toggle {
    display: none;
}

@media (max-width: 900px) {
    :root {
        /* Existing 1440px desktop geometry minus the 270px desktop sidebar. */
        --sc-admin-mobile-canvas: calc(1440px - var(--sidebar-width));
        --sc-admin-mobile-scale: 1;
        --sc-admin-mobile-inverse-scale: 1;
        --sc-admin-mobile-content-min-height: 100vh;
    }

    html {
        min-width: 0;
        overflow-x: auto;
        overscroll-behavior-inline: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y pinch-zoom;
    }

    body {
        min-width: 0;
        overflow-x: visible;
        overscroll-behavior-inline: auto;
        touch-action: pan-x pan-y pinch-zoom;
    }

    body.mobile-sidebar-open {
        overflow: hidden;
        overscroll-behavior: contain;
    }

    .admin-wrapper {
        width: 100%;
        min-width: 0;
        padding-top: var(--topbar-height);
        overflow: visible;
        touch-action: pan-x pan-y pinch-zoom;
    }

    .admin-content,
    body.sidebar-collapsed .admin-content {
        box-sizing: border-box;
        width: var(--sc-admin-mobile-canvas);
        min-width: var(--sc-admin-mobile-canvas);
        margin-right: 0;
        padding: 25px;
        min-height: var(--sc-admin-mobile-content-min-height);
        zoom: var(--sc-admin-mobile-scale);
        overflow: visible;
        touch-action: pan-x pan-y pinch-zoom;
    }

    /* CSS zoom is intentionally limited to page content. Fixed interaction
       surfaces cancel it so they continue to use the visual viewport. */
    html.sc-admin-mobile-parity .admin-content :where(
        .sc-modal,
        .modal-overlay,
        .requirement-modal,
        .integration-test-all-overlay,
        .actions-dropdown,
        .sc-bulk-bar,
        .sc-developer-payment-notice
    ) {
        zoom: var(--sc-admin-mobile-inverse-scale) !important;
    }

    /* These are the only content sizes based on vw rather than their desktop
       container. Pin them to their 1440px-desktop result before scaling. */
    html.sc-admin-mobile-parity .product-form-page--edit .page-heading {
        font-size: 30px;
    }

    html.sc-admin-mobile-parity .sc-developer-page .sc-dev-billing__due {
        font-size: 31px;
    }

    /* The sidebar remains the existing phone drawer. */
    .sidebar,
    body.sidebar-collapsed .sidebar {
        top: var(--topbar-height);
        width: min(var(--sidebar-width), 86vw);
        max-width: 300px;
        height: calc(100vh - var(--topbar-height));
        height: calc(100dvh - var(--topbar-height));
        transform: translateX(105%);
        overflow-y: auto;
        overscroll-behavior: contain;
        transition: transform 0.25s ease;
        z-index: 1200;
    }

    body.mobile-sidebar-open .sidebar,
    body.mobile-sidebar-open.sidebar-collapsed .sidebar {
        transform: translateX(0);
    }

    body.sidebar-collapsed .sidebar .brand span:not(.brand-star),
    body.sidebar-collapsed .sidebar .menu-text,
    body.sidebar-collapsed .sidebar .menu-title {
        display: block;
    }

    body.sidebar-collapsed .sidebar .menu-count {
        display: inline-flex;
    }

    body.sidebar-collapsed .sidebar .brand {
        display: flex;
    }

    body.sidebar-collapsed .sidebar .menu-item {
        justify-content: flex-start;
    }

    .admin-sidebar-overlay {
        position: fixed;
        inset: var(--topbar-height) 0 0;
        display: block;
        width: 100%;
        padding: 0;
        border: 0;
        background: rgba(2, 6, 23, 0.58);
        backdrop-filter: blur(2px);
        cursor: pointer;
        z-index: 1100;
    }

    .admin-sidebar-overlay[hidden] {
        display: none !important;
    }

    /* Topbar and its menus stay attached to the phone viewport. */
    .topbar,
    body.sidebar-collapsed .topbar {
        right: 0;
        left: 0;
        width: auto;
        z-index: 1300;
        overflow: visible;
    }

    .topbar-right,
    .topbar-left {
        min-width: 0;
    }

    .topbar-right {
        flex: 1 1 0;
    }

    .topbar-left,
    .notification-menu,
    .admin-menu,
    .admin-menu-trigger {
        flex: 0 0 auto;
        min-width: 0;
    }

    .global-search {
        flex: 1 1 220px;
        width: auto;
        min-width: 0;
        max-width: 520px;
    }

    .notification-dropdown {
        position: fixed !important;
        top: calc(var(--topbar-height) + 6px) !important;
        right: auto !important;
        left: 8px !important;
        width: min(340px, calc(100vw - 16px)) !important;
        min-width: 0 !important;
        max-width: 340px !important;
        max-height: min(420px, calc(100vh - var(--topbar-height) - 20px)) !important;
        max-height: min(420px, calc(100dvh - var(--topbar-height) - 20px)) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        z-index: 1600 !important;
    }

    .admin-menu-dropdown {
        position: fixed !important;
        top: calc(var(--topbar-height) + 6px) !important;
        right: auto !important;
        left: 8px !important;
        width: min(250px, calc(100vw - 16px)) !important;
        min-width: 0 !important;
        max-width: 250px !important;
        max-height: calc(100dvh - var(--topbar-height) - 20px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        z-index: 1600 !important;
    }

    html.sc-admin-mobile-parity .admin-content .sc-developer-payment-notice {
        box-sizing: border-box;
        width: calc(100vw - 24px);
        max-width: 720px;
        margin: 0 auto 14px;
    }

    /* Wide tables remain readable and expose their own touch pan where their
       existing wrappers are present. */
    .table-wrapper,
    .table-responsive,
    .sc-table-wrap,
    .sc-orders-table-wrap,
    .sc-deposits-table-wrap,
    .sc-funds-table-wrap,
    .sc-ledger-table-wrap,
    .sc-pm-inv-table-wrap,
    .sc-dev-ledger-wrap,
    .sc-developer-updates-table-wrap,
    .sc-tx-table-wrap {
        overflow-x: auto;
        overscroll-behavior-inline: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y pinch-zoom;
    }

    /* Dialogs and floating panels are the intentional viewport-safe
       exceptions to the desktop-width content canvas. */
    .sc-modal,
    .modal-overlay,
    .modal-overlay.show {
        padding: 8px;
    }

    .sc-modal__dialog,
    .modal-box,
    .sc-modal-box,
    .admin-content dialog {
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
    }

    .sc-modal__body,
    .modal-body {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: auto;
    }

    .category-combobox-panel,
    .searchable-combobox-panel,
    .actions-dropdown {
        max-height: min(70dvh, 540px);
        overflow-y: auto;
        overscroll-behavior: auto;
    }

    #globalSearchModal .gs-modal-dialog {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px) !important;
    }
}

@media (max-width: 560px) {
    :root {
        --topbar-height: 64px;
    }

    .topbar {
        gap: 6px;
        padding-inline: 8px;
    }

    .topbar-right,
    .topbar-left {
        gap: 6px;
    }

    .sc-topbar-active-op,
    .sc-developer-updates-topbar {
        display: none !important;
    }

    .global-search-mobile-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .global-search {
        display: none !important;
    }

    .global-search.is-mobile-open {
        position: fixed;
        top: calc(var(--topbar-height) + 6px);
        right: 8px;
        left: 8px;
        z-index: 1650;
        display: block !important;
        width: auto;
        max-width: none;
        padding: 8px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        background: var(--card-color);
        box-shadow: var(--shadow);
    }

    .global-search.is-mobile-open input {
        width: 100%;
    }

    .topbar-right {
        flex: 0 0 auto;
    }

    .topbar-left {
        margin-inline-start: auto;
    }

    .sidebar-toggle,
    .topbar-button {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }

    .admin-avatar {
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 430px) {
    .topbar {
        padding-inline: 6px;
    }

    .topbar-right,
    .topbar-left {
        gap: 4px;
    }
}

/* Authentication is outside the wide authenticated administration canvas. */
@media (max-width: 520px) {
    .auth-shell {
        min-width: 0;
        padding: 72px 10px 16px;
    }

    .auth-card {
        min-width: 0;
        max-width: 100%;
        padding: 20px 16px;
    }

    .auth-field .field,
    .auth-submit {
        width: 100%;
        max-width: 100%;
    }
}

/* Running operations — phone visual zoom only */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content:has(.sc-ops-table) > .page-header,
    html.sc-admin-mobile-parity .admin-content:has(.sc-ops-table) > .sc-active-op-banner,
    html.sc-admin-mobile-parity .admin-content:has(.sc-ops-table) > .table-card {
        --sc-operations-mobile-page-width: calc(100vw - 20px);
        box-sizing: border-box !important;
        width: var(--sc-operations-mobile-page-width) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-inline: auto !important;
        zoom: var(--sc-admin-mobile-inverse-scale);
    }
}

@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content:has(.sc-ops-table) > .page-header .page-title > p {
        display: none !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(.sc-ops-table) > .page-header .header-actions {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(.sc-ops-table) > .page-header .header-actions > * {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content:has(.sc-ops-table) > .page-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(.sc-ops-table) > .page-header .page-title {
        width: 100% !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(.sc-ops-table) > .page-header .page-title > p {
        display: none !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(.sc-ops-table) > .page-header .header-actions {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
    }
}

/* Operation details — compact phone view, visual only */
@media (max-width: 560px) {

    /* Same mobile zoom/parity used by Orders */
    html.sc-admin-mobile-parity .admin-content:has(#opTitle) > .page-header,
    html.sc-admin-mobile-parity .admin-content:has(#opTitle) > .table-card {
        --sc-operation-show-mobile-width: calc(100vw - 20px);
        box-sizing: border-box !important;
        width: var(--sc-operation-show-mobile-width) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-inline: auto !important;
        zoom: var(--sc-admin-mobile-inverse-scale);
    }

    /* Header */
    html.sc-admin-mobile-parity .admin-content:has(#opTitle) > .page-header {
        margin-bottom: 7px !important;
        gap: 6px !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(#opTitle) > .page-header .page-title > p {
        display: none !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(#opTitle) > .page-header h1 {
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    /* Main details card */
    html.sc-admin-mobile-parity .admin-content:has(#opTitle) > .table-card {
        padding: 9px 11px !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(#opTitle) .sc-long-op-kv {
        gap: 8px !important;
        padding: 2px 0 !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(#opTitle) .sc-long-op-kv strong {
        line-height: 1.35 !important;
    }

    /* Notice / result */
    html.sc-admin-mobile-parity .admin-content:has(#opTitle) #opNotice {
        margin-top: 6px !important;
        padding: 6px 8px !important;
        font-size: 10.5px !important;
        line-height: 1.4 !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(#opTitle) #opResultBox {
        margin-top: 7px !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(#opTitle) #opResultBody {
        margin-top: 4px !important;
        padding: 7px !important;
        font-size: 10.5px !important;
        line-height: 1.4 !important;
        max-height: 120px !important;
    }

    /* Technical details */
    html.sc-admin-mobile-parity .admin-content:has(#opTitle) details {
        margin-top: 7px !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(#opTitle) details summary {
        font-size: 11px !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(#opTitle) details .sc-long-op-kv:first-of-type {
        margin-top: 5px !important;
    }

    /* Bottom actions — one compact row */
    html.sc-admin-mobile-parity .admin-content:has(#opTitle) > .table-card > div:last-child {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        margin-top: 8px !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(#opTitle) > .table-card > div:last-child > * {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding-inline: 5px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
    }
}

/* Operation details — compact phone view, visual only */
@media (max-width: 560px) {

    /* Same mobile zoom/parity used by Orders */
    html.sc-admin-mobile-parity .admin-content:has(#opTitle) > .page-header,
    html.sc-admin-mobile-parity .admin-content:has(#opTitle) > .table-card {
        --sc-operation-show-mobile-width: calc(100vw - 20px);
        box-sizing: border-box !important;
        width: var(--sc-operation-show-mobile-width) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-inline: auto !important;
        zoom: var(--sc-admin-mobile-inverse-scale);
    }

    /* Header */
    html.sc-admin-mobile-parity .admin-content:has(#opTitle) > .page-header {
        margin-bottom: 7px !important;
        gap: 6px !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(#opTitle) > .page-header .page-title > p {
        display: none !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(#opTitle) > .page-header h1 {
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    /* Main details card */
    html.sc-admin-mobile-parity .admin-content:has(#opTitle) > .table-card {
        padding: 9px 11px !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(#opTitle) .sc-long-op-kv {
        gap: 8px !important;
        padding: 2px 0 !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(#opTitle) .sc-long-op-kv strong {
        line-height: 1.35 !important;
    }

    /* Notice / result */
    html.sc-admin-mobile-parity .admin-content:has(#opTitle) #opNotice {
        margin-top: 6px !important;
        padding: 6px 8px !important;
        font-size: 10.5px !important;
        line-height: 1.4 !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(#opTitle) #opResultBox {
        margin-top: 7px !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(#opTitle) #opResultBody {
        margin-top: 4px !important;
        padding: 7px !important;
        font-size: 10.5px !important;
        line-height: 1.4 !important;
        max-height: 120px !important;
    }

    /* Technical details */
    html.sc-admin-mobile-parity .admin-content:has(#opTitle) details {
        margin-top: 7px !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(#opTitle) details summary {
        font-size: 11px !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(#opTitle) details .sc-long-op-kv:first-of-type {
        margin-top: 5px !important;
    }

    /* Bottom actions — one compact row */
    html.sc-admin-mobile-parity .admin-content:has(#opTitle) > .table-card > div:last-child {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px !important;
        margin-top: 8px !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(#opTitle) > .table-card > div:last-child > * {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding-inline: 5px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content:has(#opTitle) > .page-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(#opTitle) > .page-header .page-title {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(#opTitle) > .page-header h1 {
        font-size: 14px !important;
        white-space: nowrap !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(#opTitle) > .page-header .header-actions {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        gap: 4px !important;
        width: auto !important;
    }

    html.sc-admin-mobile-parity .admin-content:has(#opTitle) > .page-header .header-actions > * {
        width: auto !important;
        min-width: 0 !important;
        min-height: 30px !important;
        height: 30px !important;
        padding: 0 7px !important;
        margin: 0 !important;
        font-size: 9.5px !important;
        white-space: nowrap !important;
    }
}

/* Activity Log — phone visual zoom only */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content:has(#activityLogSearchForm) > .page-header,
    html.sc-admin-mobile-parity .admin-content:has(#activityLogSearchForm) > .table-card {
        --sc-activity-log-mobile-width: calc(100vw - 20px);
        box-sizing: border-box !important;
        width: var(--sc-activity-log-mobile-width) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-inline: auto !important;
        zoom: var(--sc-admin-mobile-inverse-scale);
    }
}

/* Trash dashboard — phone visual zoom only */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content:has(#trashDashboard) > .page-header,
    html.sc-admin-mobile-parity .admin-content:has(#trashDashboard) > #trashDashboard,
    html.sc-admin-mobile-parity .admin-content:has(#trashDashboard) > #trashHomeStats {
        --sc-trash-mobile-width: calc(100vw - 20px);
        box-sizing: border-box !important;
        width: var(--sc-trash-mobile-width) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-inline: auto !important;
        zoom: var(--sc-admin-mobile-inverse-scale);
    }
}

@media (max-width: 560px) {
    html.sc-admin-mobile-parity #trashHomeStats {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    html.sc-admin-mobile-parity #trashHomeStats .sc-home-card {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Trash type/folder pages — phone visual zoom only */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content #trashTypePage {
        --sc-trash-type-mobile-width: calc(100vw - 20px);
        box-sizing: border-box !important;
        width: var(--sc-trash-type-mobile-width) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-inline: auto !important;
        zoom: var(--sc-admin-mobile-inverse-scale);
    }
}


@media (max-width: 560px) {
    html.sc-admin-mobile-parity #trashTypePage > .page-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "title back"
            "destroy total" !important;
        align-items: center !important;
        gap: 7px 8px !important;
    }

    html.sc-admin-mobile-parity #trashTypePage > .page-header .page-title {
        grid-area: title !important;
        min-width: 0 !important;
    }

    html.sc-admin-mobile-parity #trashTypePage > .page-header .page-title > p {
        display: none !important;
    }

    html.sc-admin-mobile-parity #trashTypePage > .page-header .header-actions {
        display: contents !important;
    }

    html.sc-admin-mobile-parity #trashTypePage > .page-header .header-actions > a {
        grid-area: back !important;
        white-space: nowrap !important;
    }

    html.sc-admin-mobile-parity #trashTypePage #trashDestroyType {
        grid-area: destroy !important;
        justify-self: start !important;
        white-space: nowrap !important;
    }

    html.sc-admin-mobile-parity #trashTypePage .trash-mobile-total {
        grid-area: total !important;
        justify-self: end !important;
        color: var(--muted-color) !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
    }

    html.sc-admin-mobile-parity #trashTypePage .table-card > .table-header {
        display: none !important;
    }

    html.sc-admin-mobile-parity #trashTypePage .sc-orders-footer__meta > span {
        display: none !important;
    }
}

@media (min-width: 561px) {
    #trashTypePage .trash-mobile-total {
        display: none !important;
    }
}

@media (max-width: 560px) {
    html.sc-admin-mobile-parity #trashTypePage > .page-header {
        grid-template-columns: auto auto minmax(0, 1fr) !important;
        grid-template-areas:
            "title title back"
            "destroy total search" !important;
    }

    html.sc-admin-mobile-parity #trashTypePage .trash-mobile-total {
        justify-self: start !important;
        margin: 0 !important;
    }

    html.sc-admin-mobile-parity #trashTypePage #trashTypeFiltersForm {
        grid-area: search !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    html.sc-admin-mobile-parity #trashTypePage #trashTypeFiltersForm .sc-toolbar__top {
        display: block !important;
        width: 100% !important;
    }

    html.sc-admin-mobile-parity #trashTypePage #trashTypeFiltersForm .sc-toolbar__field--search {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    html.sc-admin-mobile-parity #trashTypePage #trashTypeFiltersForm .sc-toolbar__field--search > label,
    html.sc-admin-mobile-parity #trashTypePage #trashTypeFiltersForm .sc-toolbar__field--reset,
    html.sc-admin-mobile-parity #trashTypePage #trashTypeFiltersForm .sc-toolbar__top > .sc-toolbar__field:not(.sc-toolbar__field--search) {
        display: none !important;
    }

    html.sc-admin-mobile-parity #trashTypePage #trashTypeSearch {
        width: 100% !important;
        min-width: 0 !important;
        height: 32px !important;
        min-height: 32px !important;
        font-size: 10.5px !important;
    }
}

/* Full backups — phone visual zoom only */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content #backupsPage {
        --sc-full-backups-mobile-width: calc(100vw - 20px);
        box-sizing: border-box !important;
        width: var(--sc-full-backups-mobile-width) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-inline: auto !important;
        zoom: var(--sc-admin-mobile-inverse-scale);
    }
}


/* Full backups — hide explanatory details on phone only */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content #backupsPage .page-title > p,
    html.sc-admin-mobile-parity .admin-content #backupsPage .backup-retention-card > .limits-text {
        display: none !important;
    }
}

/* Full backups — mobile header/actions arrangement */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content #backupsPage .page-header {
        display: block !important;
    }

    html.sc-admin-mobile-parity .admin-content #backupsPage .page-title {
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    html.sc-admin-mobile-parity .admin-content #backupsPage .header-actions {
        width: 100% !important;
    }

    html.sc-admin-mobile-parity .admin-content #backupsPage .normal-header-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-areas:
            "upload create"
            "verify verify" !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content #backupsPage .normal-header-actions > form {
        grid-area: verify !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content #backupsPage .normal-header-actions > button[data-sc-modal-open="backupUploadModal"] {
        grid-area: upload !important;
    }

    html.sc-admin-mobile-parity .admin-content #backupsPage .normal-header-actions > button[data-sc-modal-open="backupCreateModal"] {
        grid-area: create !important;
    }

    html.sc-admin-mobile-parity .admin-content #backupsPage .normal-header-actions > form > button,
    html.sc-admin-mobile-parity .admin-content #backupsPage .normal-header-actions > button {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        justify-content: center !important;
    }
}

/* Full backups — retention controls on one row on phone */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content #backupsPage .backup-retention-card form {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 10px 8px !important;
        align-items: end !important;
    }

    html.sc-admin-mobile-parity .admin-content #backupsPage .backup-retention-card form > .sc-confirm-check {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    html.sc-admin-mobile-parity .admin-content #backupsPage .backup-retention-card form > div {
        grid-column: 1 !important;
        min-width: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content #backupsPage .backup-retention-card form > button[type="submit"] {
        grid-column: 2 !important;
        width: auto !important;
        min-width: max-content !important;
        margin: 0 !important;
        white-space: nowrap !important;
        align-self: end !important;
    }
}

/* Full backups — prevent double zoom on row actions dropdown */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content #backupsPage .actions-dropdown {
        zoom: 1 !important;
    }
}

/* Module backups — phone visual zoom only */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content #moduleBackupsPage {
        --sc-module-backups-mobile-width: calc(100vw - 20px);
        box-sizing: border-box !important;
        width: var(--sc-module-backups-mobile-width) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-inline: auto !important;
        zoom: var(--sc-admin-mobile-inverse-scale);
    }

    /* The page is already zoomed; do not inverse-zoom its row dropdown again. */
    html.sc-admin-mobile-parity .admin-content #moduleBackupsPage .actions-dropdown {
        zoom: 1 !important;
    }
}


/* Module backups — mobile header layout */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content #moduleBackupsPage .page-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    html.sc-admin-mobile-parity .admin-content #moduleBackupsPage .page-title {
        width: 100% !important;
        margin: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content #moduleBackupsPage .page-title p {
        display: none !important;
    }

    html.sc-admin-mobile-parity .admin-content #moduleBackupsPage .header-actions {
        width: 100% !important;
        margin: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content #moduleBackupsPage .normal-header-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    html.sc-admin-mobile-parity .admin-content #moduleBackupsPage .normal-header-actions > button {
        width: 100% !important;
        margin: 0 !important;
        justify-content: center !important;
    }
}

/* Module backups — mobile module cards: two square cards per row */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content #moduleBackupsPage .module-cards {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    html.sc-admin-mobile-parity .admin-content #moduleBackupsPage .module-card {
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }
}

/* Module backups — white cards on desktop + mobile */
#moduleBackupsPage .module-card {
    background: #ffffff !important;
}

#moduleBackupsPage .module-card h3 {
    color: #111827 !important;
}

/* Module backups — collapsible descriptions on phone only */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content #moduleBackupsPage .module-card {
        cursor: pointer;
    }

    html.sc-admin-mobile-parity .admin-content #moduleBackupsPage .module-card > p {
        display: none;
    }

    html.sc-admin-mobile-parity .admin-content #moduleBackupsPage .module-card.is-open > p {
        display: block;
    }
}

/* Module backups — collapsed phone cards must actually save vertical space */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content #moduleBackupsPage .module-cards {
        align-items: start !important;
    }

    html.sc-admin-mobile-parity .admin-content #moduleBackupsPage .module-card {
        aspect-ratio: auto !important;
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
    }

    html.sc-admin-mobile-parity .admin-content #moduleBackupsPage .module-card > p {
        display: none !important;
    }

    html.sc-admin-mobile-parity .admin-content #moduleBackupsPage .module-card.is-open > p {
        display: block !important;
    }
}

/* Module backups — respect Star Cash light/dark design tokens */
#moduleBackupsPage .module-card {
    background: var(--card-color) !important;
}

#moduleBackupsPage .module-card h3 {
    color: var(--text-color) !important;
    font-weight: 800 !important;
}

/* Module backups — phone-only collapsible indicator */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content #moduleBackupsPage .module-card h3 {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
    }

    html.sc-admin-mobile-parity .admin-content #moduleBackupsPage .module-card h3::after {
        content: "⌄";
        flex: 0 0 auto;
        color: var(--text-color);
        font-size: 17px;
        font-weight: 900;
        line-height: 1;
        transition: transform 0.18s ease;
    }

    html.sc-admin-mobile-parity .admin-content #moduleBackupsPage .module-card.is-open h3::after {
        transform: rotate(180deg);
    }
}

/* Backup trash — phone visual zoom only */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content #backupTrashPage {
        --sc-backup-trash-mobile-width: calc(100vw - 20px);
        box-sizing: border-box !important;
        width: var(--sc-backup-trash-mobile-width) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-inline: auto !important;
        zoom: var(--sc-admin-mobile-inverse-scale);
    }

    /* The page is already zoomed; do not inverse-zoom its row dropdown again. */
    html.sc-admin-mobile-parity .admin-content #backupTrashPage .actions-dropdown {
        zoom: 1 !important;
    }
}

/* Backup trash — compact phone header only */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content #backupTrashPage .page-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    html.sc-admin-mobile-parity .admin-content #backupTrashPage .page-title {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content #backupTrashPage .page-title p {
        display: none !important;
    }

    html.sc-admin-mobile-parity .admin-content #backupTrashPage .header-actions,
    html.sc-admin-mobile-parity .admin-content #backupTrashPage .normal-header-actions {
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content #backupTrashPage > .limits-text {
        display: none !important;
    }
}


/* Global server info — independent phone sizing outside dashboard */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity
    .admin-content
    .sc-global-server-info--global {
        box-sizing: border-box !important;
        width: calc(100vw - 20px) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-inline: auto !important;
        zoom: var(--sc-admin-mobile-inverse-scale);
    }
}

/* Customer notifications — phone visual zoom only */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content #customerNotificationsPage {
        --sc-customer-notifications-mobile-width: calc(100vw - 20px);
        box-sizing: border-box !important;
        width: var(--sc-customer-notifications-mobile-width) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-inline: auto !important;
        zoom: var(--sc-admin-mobile-inverse-scale);
    }
}

/* Customer notifications — compact phone header + equal search/mode */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content #customerNotificationsPage > .page-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    html.sc-admin-mobile-parity .admin-content #customerNotificationsPage > .page-header .page-title {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content #customerNotificationsPage > .page-header .header-actions {
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content #customerNotificationsPage > .page-header .add-button {
        margin: 0 !important;
        white-space: nowrap !important;
    }

    html.sc-admin-mobile-parity .admin-content #customerNotificationsPage #notificationFiltersForm .sc-toolbar__top {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    html.sc-admin-mobile-parity .admin-content #customerNotificationsPage #notificationFiltersForm .sc-toolbar__field {
        min-width: 0 !important;
        width: 100% !important;
    }

    html.sc-admin-mobile-parity .admin-content #customerNotificationsPage #notificationFiltersForm .sc-toolbar__search-wrap,
    html.sc-admin-mobile-parity .admin-content #customerNotificationsPage #notificationFiltersForm .sc-st-control {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html.sc-admin-mobile-parity .admin-content #customerNotificationsPage #notificationsSearch,
    html.sc-admin-mobile-parity .admin-content #customerNotificationsPage #filter_mode {
        width: 100% !important;
        min-width: 0 !important;
        height: 36px !important;
        min-height: 36px !important;
    }
}

/* Customer notifications — hide title description on phone only */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content #customerNotificationsPage > .page-header .page-title > p {
        display: none !important;
    }
}

/* Customer notifications — phone filter layout */
@media (max-width: 560px) {
    /* Hide "سجل الإرسال اليدوي" on phone only */
    html.sc-admin-mobile-parity .admin-content
    #customerNotificationsPage > .table-card > .table-header {
        display: none !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #customerNotificationsPage #notificationFiltersForm .sc-toolbar__top {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-areas:
            "audience mode"
            "search search"
            "reset reset" !important;
        gap: 8px !important;
        width: 100% !important;
    }

    /* Search */
    html.sc-admin-mobile-parity .admin-content
    #customerNotificationsPage #notificationFiltersForm
    .sc-toolbar__field--search {
        grid-area: search !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Mode */
    html.sc-admin-mobile-parity .admin-content
    #customerNotificationsPage #notificationFiltersForm
    .sc-toolbar__field:nth-child(2) {
        grid-area: mode !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Audience */
    html.sc-admin-mobile-parity .admin-content
    #customerNotificationsPage #notificationFiltersForm
    .sc-toolbar__field:nth-child(3) {
        grid-area: audience !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Reset — only exists when filters are active */
    html.sc-admin-mobile-parity .admin-content
    #customerNotificationsPage #notificationFiltersForm
    .sc-toolbar__field--reset {
        grid-area: reset !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #customerNotificationsPage #filter_mode,
    html.sc-admin-mobile-parity .admin-content
    #customerNotificationsPage #filter_audience,
    html.sc-admin-mobile-parity .admin-content
    #customerNotificationsPage #notificationsSearch {
        width: 100% !important;
        min-width: 0 !important;
        height: 36px !important;
        min-height: 36px !important;
        box-sizing: border-box !important;
    }
}

/* Customer notification create/edit — product-form mobile parity reference */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content #notificationCreatePage {
        box-sizing: border-box !important;
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        min-width: 0 !important;
        margin-inline: auto !important;
        overflow-x: clip !important;
        zoom: var(--sc-admin-mobile-inverse-scale);
    }

    html.sc-admin-mobile-parity #notificationCreatePage > .page-header {
        gap: 10px !important;
        margin-bottom: 12px !important;
    }

    html.sc-admin-mobile-parity #notificationCreatePage .page-title h1 {
        font-size: 20px !important;
        line-height: 1.35 !important;
    }

    html.sc-admin-mobile-parity #notificationCreatePage .page-title > p,
    html.sc-admin-mobile-parity #notificationCreatePage .form-card-head > p {
        display: none !important;
    }

    html.sc-admin-mobile-parity #notificationCreatePage form,
    html.sc-admin-mobile-parity #notificationCreatePage .notification-form-cards,
    html.sc-admin-mobile-parity #notificationCreatePage .form-card,
    html.sc-admin-mobile-parity #notificationCreatePage .notification-audience-grid,
    html.sc-admin-mobile-parity #notificationCreatePage .notification-content-grid,
    html.sc-admin-mobile-parity #notificationCreatePage .notification-schedule-grid {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html.sc-admin-mobile-parity #notificationCreatePage .notification-form-cards {
        gap: 12px !important;
    }

    html.sc-admin-mobile-parity #notificationCreatePage .form-card {
        padding: 14px !important;
        border-radius: var(--radius-md) !important;
    }

    html.sc-admin-mobile-parity #notificationCreatePage .form-card-head {
        margin-bottom: 10px !important;
    }

    html.sc-admin-mobile-parity #notificationCreatePage .form-card-head h3 {
        font-size: 14px !important;
    }

    html.sc-admin-mobile-parity #notificationCreatePage .notification-audience-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    html.sc-admin-mobile-parity #notificationCreatePage .notification-content-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    html.sc-admin-mobile-parity #notificationCreatePage .notification-content-title,
    html.sc-admin-mobile-parity #notificationCreatePage .notification-content-link {
        grid-column: auto !important;
    }

    html.sc-admin-mobile-parity #notificationCreatePage .notification-editor-field {
        grid-column: 1 / -1 !important;
    }

    html.sc-admin-mobile-parity #notificationCreatePage .notification-schedule-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    html.sc-admin-mobile-parity #notificationCreatePage .notification-delivery-mode,
    html.sc-admin-mobile-parity #notificationCreatePage .notification-mode-help {
        grid-column: 1 / -1 !important;
    }

    html.sc-admin-mobile-parity #notificationCreatePage .notification-field,
    html.sc-admin-mobile-parity #notificationCreatePage .notification-audience-type,
    html.sc-admin-mobile-parity #notificationCreatePage .audience-target,
    html.sc-admin-mobile-parity #notificationCreatePage input,
    html.sc-admin-mobile-parity #notificationCreatePage select,
    html.sc-admin-mobile-parity #notificationCreatePage textarea,
    html.sc-admin-mobile-parity #notificationCreatePage .sc-st-control,
    html.sc-admin-mobile-parity #notificationCreatePage .sc-form-control,
    html.sc-admin-mobile-parity #notificationCreatePage .sc-date-pill {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html.sc-admin-mobile-parity #notificationCreatePage .form-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
    }

    html.sc-admin-mobile-parity #notificationCreatePage .form-actions > * {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
    }

    /* Same phone toolbar behavior as Product Description TinyMCE. */
    body.sc-notification-editor-page #notificationCreatePage .tox-tinymce {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    body.sc-notification-editor-page #notificationCreatePage .tox-editor-header,
    body.sc-notification-editor-page #notificationCreatePage .tox-toolbar-overlord {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    body.sc-notification-editor-page #notificationCreatePage .tox-toolbar__primary {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        white-space: normal !important;
    }

    body.sc-notification-editor-page #notificationCreatePage .tox-toolbar__group {
        display: flex !important;
        flex: 0 0 auto !important;
        flex-wrap: nowrap !important;
    }

    body.sc-notification-editor-page #notificationCreatePage .tox-toolbar__overflow {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }
}

/* Admin — slim modern scrollbars */
html,
body,
.sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, .58) transparent;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.sidebar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .50);
    border-radius: 999px;
    border: 1px solid transparent;
    background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(71, 85, 105, .72);
    background-clip: padding-box;
}

body.dark-mode,
body.dark-mode .sidebar {
    scrollbar-color: rgba(148, 163, 184, .46) transparent;
}

body.dark-mode::-webkit-scrollbar-thumb,
body.dark-mode .sidebar::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .42);
    background-clip: padding-box;
}

body.dark-mode::-webkit-scrollbar-thumb:hover,
body.dark-mode .sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(203, 213, 225, .60);
    background-clip: padding-box;
}

/* Countries — phone visual zoom only */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content #countriesPage {
        --sc-countries-mobile-width: calc(100vw - 20px);
        box-sizing: border-box !important;
        width: var(--sc-countries-mobile-width) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-inline: auto !important;
        zoom: var(--sc-admin-mobile-inverse-scale);
    }

    /* Page is already inverse-zoomed; keep row actions dropdown at normal size. */
    html.sc-admin-mobile-parity .admin-content #countriesPage .actions-dropdown {
        zoom: 1 !important;
    }
}

/* Countries — compact phone header */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content #countriesPage > .page-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    html.sc-admin-mobile-parity .admin-content #countriesPage > .page-header .page-title {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content #countriesPage > .page-header .page-title > p {
        display: none !important;
    }

    html.sc-admin-mobile-parity .admin-content #countriesPage > .page-header .header-actions {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        gap: 6px !important;
        width: auto !important;
        margin: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content #countriesPage > .page-header .header-actions > * {
        width: auto !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }
}

/* Country create/edit — phone visual zoom + one field per row */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content #countryFormPage {
        box-sizing: border-box !important;
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        min-width: 0 !important;
        margin-inline: auto !important;
        zoom: var(--sc-admin-mobile-inverse-scale);
    }

    html.sc-admin-mobile-parity .admin-content #countryFormPage form,
    html.sc-admin-mobile-parity .admin-content #countryFormPage .form-cards,
    html.sc-admin-mobile-parity .admin-content #countryFormPage .form-card,
    html.sc-admin-mobile-parity .admin-content #countryFormPage .grid,
    html.sc-admin-mobile-parity .admin-content #countryFormPage .sc-actions-row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html.sc-admin-mobile-parity .admin-content #countryFormPage .grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    html.sc-admin-mobile-parity .admin-content #countryFormPage .grid > div,
    html.sc-admin-mobile-parity .admin-content #countryFormPage .field {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Storefront Settings — General phone visual zoom only */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--general {
        --sc-storefront-general-mobile-width: calc(100vw - 20px);

        box-sizing: border-box !important;
        width: var(--sc-storefront-general-mobile-width) !important;
        max-width: none !important;
        min-width: 0 !important;

        margin-inline: auto !important;

        zoom: var(--sc-admin-mobile-inverse-scale);
    }
}

/* Storefront Settings — General hide descriptions on phone */
@media (max-width: 560px) {
    /* Main page description */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--general
    > .page-header .page-title > p {
        display: none !important;
    }

    /* Card descriptions: maintenance, policies, sound alerts, etc. */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--general
    .form-card-head > p {
        display: none !important;
    }

    /* All helper/description text inside General only */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--general
    small {
        display: none !important;
    }
}


/* Storefront Settings — General tabs below title on phone */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--general {
        display: block !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--general
    > .page-header {
        display: block !important;
        width: 100% !important;
        margin: 0 0 8px !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--general
    > .page-header .page-title {
        width: 100% !important;
        margin: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--general
    > .page-header .page-title h1 {
        margin: 0 !important;
    }

    /* Tabs stay directly below the title, in one draggable horizontal row. */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--general
    > .sc-tabs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 0 12px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--general
    > .sc-tabs > a {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
}

/* Storefront Settings — General centered section headings */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--general
    .form-card-head {
        text-align: center !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--general
    .form-card-head > h3 {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        text-align: center !important;
        justify-content: center !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

/* Storefront General — maintenance field and start button one row */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--general
    form[action*="/storefront-settings/maintenance/start"] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: end !important;
        gap: 8px !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--general
    form[action*="/storefront-settings/maintenance/start"] > .grid {
        grid-column: 1 !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--general
    form[action*="/storefront-settings/maintenance/start"] > .form-actions {
        grid-column: 2 !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: end !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--general
    form[action*="/storefront-settings/maintenance/start"] > .form-actions button {
        width: auto !important;
        min-width: max-content !important;
        min-height: 40px !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }
}

/* Storefront General — maintenance label one line */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--general
    label[for="maintenance_minutes"] {
        white-space: nowrap !important;
    }
}

/* Storefront General — sound toggle beside account approval */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--general
    .storefront-general-policies-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--general
    .storefront-general-policies-grid > .toggle-row {
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /*
     * The master sound toggle is moved into the policies grid on phone.
     * Hide its now-empty original holder so it leaves no blank space.
     */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--general
    .admin-sound-master-grid:empty {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Storefront Settings — Identity phone visual zoom and tabs */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--identity {
        --sc-storefront-identity-mobile-width: calc(100vw - 20px);

        box-sizing: border-box !important;
        width: var(--sc-storefront-identity-mobile-width) !important;
        max-width: none !important;
        min-width: 0 !important;

        margin-inline: auto !important;

        zoom: var(--sc-admin-mobile-inverse-scale);
        display: block !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--identity
    > .page-header {
        display: block !important;
        width: 100% !important;
        margin: 0 0 8px !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--identity
    > .page-header .page-title {
        width: 100% !important;
        margin: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--identity
    > .page-header .page-title h1 {
        margin: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--identity
    > .sc-tabs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 0 12px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--identity
    > .sc-tabs > a {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
}

/* Storefront Settings — Identity hide descriptions on phone */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--identity
    > .page-header .page-title > p {
        display: none !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--identity
    .form-card-head > p {
        display: none !important;
    }
}

/* Identity image fields one per row on phone */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--identity
    .storefront-identity-images-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/*
 * Storefront Settings — Banners phone zoom with isolated saved-list pan
 *
 * Page: same accepted inverse-zoom geometry as General / Identity.
 * Saved banners only: same independent horizontal-pan principle as Orders.
 */
@media (max-width: 560px) {

    /* ---------- Page zoom ---------- */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banners {
        --sc-storefront-banners-mobile-width: calc(100vw - 20px);

        box-sizing: border-box !important;
        width: var(--sc-storefront-banners-mobile-width) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-inline: auto !important;

        zoom: var(--sc-admin-mobile-inverse-scale);
        display: block !important;
    }

    /* ---------- Header ---------- */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banners
    > .page-header {
        display: block !important;
        width: 100% !important;
        margin: 0 0 8px !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banners
    > .page-header .page-title {
        width: 100% !important;
        margin: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banners
    > .page-header .page-title h1 {
        margin: 0 !important;
    }

    /* ---------- Tabs: one horizontal draggable row ---------- */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banners
    > .sc-tabs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 0 12px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banners
    > .sc-tabs > a {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    /* ---------- Saved banners: isolated horizontal pan ---------- */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banners
    .storefront-banner-index-card {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /*
     * Same pan behaviour used by Orders:
     * only this area moves horizontally, not the whole page.
     */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banners
    .storefront-banner-index-card .storefront-banner-list {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;

        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banners
    .storefront-banner-index-card .storefront-banner-list::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    /*
     * Existing saved-banner link geometry is exactly:
     * 58 + 150 + 66 + 82 + 82 + 48 + five 8px gaps = 526px.
     * Preserve that existing desktop row geometry inside its own pan area.
     */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banners
    .storefront-banner-index-card .storefront-banner-row {
        grid-template-columns: 526px auto !important;
        width: max-content !important;
        min-width: 100% !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banners
    .storefront-banner-index-card .storefront-banner-row__link {
        width: 526px !important;
        min-width: 526px !important;
    }
}

/* Storefront Banner Form — phone visual zoom */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banner-form {
        --sc-storefront-banner-form-mobile-width: calc(100vw - 20px);

        box-sizing: border-box !important;
        width: var(--sc-storefront-banner-form-mobile-width) !important;
        max-width: none !important;
        min-width: 0 !important;

        margin-inline: auto !important;

        zoom: var(--sc-admin-mobile-inverse-scale);
    }
}

/* Storefront Banners — hide global page description on phone */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banners
    > .page-header .page-title > p {
        display: none !important;
    }
}

/* Banner Form — hide page description on phone */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banner-form
    > .page-header .page-title > p {
        display: none !important;
    }
}

/* Banner Form — hide card description on phone */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banner-form
    .form-card-head > div > p {
        display: none !important;
    }
}

/* Banner Form — mobile title placement category sort rows */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banner-form
    .storefront-banner-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        column-gap: 8px !important;
        row-gap: 9px !important;
    }

    /* Row 1: title + placement */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banner-form
    .storefront-banner-field--title {
        grid-column: span 6 !important;
        min-width: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banner-form
    .storefront-banner-field--placement {
        grid-column: span 6 !important;
        min-width: 0 !important;
    }

    /* Row 2 when placement = category: category gets more room, sort stays compact */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banner-form
    .storefront-banner-field--category.is-visible {
        grid-column: span 8 !important;
        min-width: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banner-form
    .storefront-banner-field--sort {
        grid-column: span 4 !important;
        min-width: 0 !important;
    }

    /*
     * When no category selector is visible, order may use the row normally
     * instead of leaving a large empty gap.
     */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banner-form
    .storefront-banner-field--category:not(.is-visible)
    + .storefront-banner-field--sort {
        grid-column: span 12 !important;
    }

    /* Existing full-width fields must remain full width in the 12-column grid. */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banner-form
    .storefront-banner-grid > .full {
        grid-column: 1 / -1 !important;
        min-width: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banner-form
    .storefront-banner-field--category > *,
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banner-form
    .storefront-banner-field--sort > * {
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* Banner Form — restore remaining fields in 12-column grid */
@media (max-width: 560px) {

    /* Dates: same original two-field row */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banner-form
    .storefront-banner-grid
    > .storefront-date-control {
        grid-column: span 6 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    /*
     * Remaining ordinary div fields are the two image upload fields.
     * Keep them in the original two-column layout.
     */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banner-form
    .storefront-banner-grid
    > div:not(.full):not(.storefront-banner-field--title):not(.storefront-banner-field--placement):not(.storefront-banner-field--category):not(.storefront-banner-field--sort) {
        grid-column: span 6 !important;
        min-width: 0 !important;
    }
}

/* Storefront Settings — Announcement phone zoom and compact descriptions */
@media (max-width: 560px) {

    /* Same accepted storefront-settings mobile zoom */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--announcement {
        --sc-storefront-announcement-mobile-width: calc(100vw - 20px);

        box-sizing: border-box !important;
        width: var(--sc-storefront-announcement-mobile-width) !important;
        max-width: none !important;
        min-width: 0 !important;

        margin-inline: auto !important;

        zoom: var(--sc-admin-mobile-inverse-scale);
        display: block !important;
    }

    /* Hide global page description */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--announcement
    > .page-header .page-title > p {
        display: none !important;
    }

    /* Hide section descriptions */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--announcement
    .form-card-head > p {
        display: none !important;
    }

    /* Hide helper descriptions inside Announcement */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--announcement
    small {
        display: none !important;
    }

    /* Header geometry */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--announcement
    > .page-header {
        display: block !important;
        width: 100% !important;
        margin: 0 0 8px !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--announcement
    > .page-header .page-title {
        width: 100% !important;
        margin: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--announcement
    > .page-header .page-title h1 {
        margin: 0 !important;
    }

    /* Same one-row draggable tabs */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--announcement
    > .sc-tabs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 0 12px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--announcement
    > .sc-tabs > a {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
}

/* Storefront Settings — Social phone zoom and descriptions */
@media (max-width: 560px) {

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--social {
        --sc-storefront-social-mobile-width: calc(100vw - 20px);

        box-sizing: border-box !important;
        width: var(--sc-storefront-social-mobile-width) !important;
        max-width: none !important;
        min-width: 0 !important;

        margin-inline: auto !important;

        zoom: var(--sc-admin-mobile-inverse-scale);
        display: block !important;
    }

    /* Hide global page description */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--social
    > .page-header .page-title > p {
        display: none !important;
    }

    /* Hide section descriptions */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--social
    .form-card-head > p {
        display: none !important;
    }

    /* Hide helper descriptions inside Social only */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--social
    small {
        display: none !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--social
    > .page-header {
        display: block !important;
        width: 100% !important;
        margin: 0 0 8px !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--social
    > .page-header .page-title {
        width: 100% !important;
        margin: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--social
    > .page-header .page-title h1 {
        margin: 0 !important;
    }

    /* Tabs: one draggable row */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--social
    > .sc-tabs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 0 12px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--social
    > .sc-tabs > a {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
}

/* Banner Form — mobile save cancel half row */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banner-form
    .storefront-form-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banner-form
    .storefront-form-actions > .sc-ui-btn,
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--banner-form
    .storefront-form-actions > .cancel-order-button {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* Storefront Settings — Pages phone zoom and product-reference editor */
@media (max-width: 560px) {

    /* Same accepted storefront mobile zoom */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--pages {
        --sc-storefront-pages-mobile-width: calc(100vw - 20px);

        box-sizing: border-box !important;
        width: var(--sc-storefront-pages-mobile-width) !important;
        max-width: none !important;
        min-width: 0 !important;

        margin-inline: auto !important;

        zoom: var(--sc-admin-mobile-inverse-scale);
        display: block !important;
    }

    /* Hide global Storefront Settings description */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--pages
    > .page-header .page-title > p {
        display: none !important;
    }

    /* Hide Pages card description */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--pages
    .form-card-head > p {
        display: none !important;
    }

    /* Compact header */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--pages
    > .page-header {
        display: block !important;
        width: 100% !important;
        margin: 0 0 8px !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--pages
    > .page-header .page-title {
        width: 100% !important;
        margin: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--pages
    > .page-header .page-title h1 {
        margin: 0 !important;
    }

    /* Tabs stay in one horizontal draggable row */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--pages
    > .sc-tabs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 0 12px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--pages
    > .sc-tabs > a {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    /* Editor itself must stay inside the available page width */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--pages
    .storefront-editor-field,
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--pages
    .tox-tinymce {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Storefront Settings — Menu phone zoom and descriptions */
@media (max-width: 560px) {

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--menu {
        --sc-storefront-menu-mobile-width: calc(100vw - 20px);

        box-sizing: border-box !important;
        width: var(--sc-storefront-menu-mobile-width) !important;
        max-width: none !important;
        min-width: 0 !important;

        margin-inline: auto !important;

        zoom: var(--sc-admin-mobile-inverse-scale);
        display: block !important;
    }

    /* Hide global Storefront Settings description */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--menu
    > .page-header .page-title > p {
        display: none !important;
    }

    /* Hide Menu card description */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--menu
    .form-card-head > p {
        display: none !important;
    }

    /* Compact page header */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--menu
    > .page-header {
        display: block !important;
        width: 100% !important;
        margin: 0 0 8px !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--menu
    > .page-header .page-title {
        width: 100% !important;
        margin: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--menu
    > .page-header .page-title h1 {
        margin: 0 !important;
    }

    /* Same one-row draggable tabs */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--menu
    > .sc-tabs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 0 12px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--menu
    > .sc-tabs > a {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
}

/* Storefront Settings — Security phone zoom and descriptions */
@media (max-width: 560px) {

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--security {
        --sc-storefront-security-mobile-width: calc(100vw - 20px);

        box-sizing: border-box !important;
        width: var(--sc-storefront-security-mobile-width) !important;
        max-width: none !important;
        min-width: 0 !important;

        margin-inline: auto !important;

        zoom: var(--sc-admin-mobile-inverse-scale);
        display: block !important;
    }

    /* Hide global page description */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--security
    > .page-header .page-title > p {
        display: none !important;
    }

    /* Hide security card description */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--security
    .form-card-head > p {
        display: none !important;
    }

    /* Compact header */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--security
    > .page-header {
        display: block !important;
        width: 100% !important;
        margin: 0 0 8px !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--security
    > .page-header .page-title {
        width: 100% !important;
        margin: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--security
    > .page-header .page-title h1 {
        margin: 0 !important;
    }

    /* Same one-row draggable tabs */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--security
    > .sc-tabs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 0 12px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--security
    > .sc-tabs > a {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
}

/* Storefront Settings — Appearance phone zoom two-color rows */
@media (max-width: 560px) {

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance {
        --sc-storefront-appearance-mobile-width: calc(100vw - 20px);

        box-sizing: border-box !important;
        width: var(--sc-storefront-appearance-mobile-width) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-inline: auto !important;

        zoom: var(--sc-admin-mobile-inverse-scale);
        display: block !important;
    }

    /* Hide page/card/helper descriptions */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    > .page-header .page-title > p,

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    .form-card-head > p,

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    .storefront-field-help,

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    .storefront-theme-mode > small {
        display: none !important;
    }

    /* Compact header */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    > .page-header {
        display: block !important;
        width: 100% !important;
        margin: 0 0 8px !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    > .page-header .page-title {
        width: 100% !important;
        margin: 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    > .page-header .page-title h1 {
        margin: 0 !important;
    }

    /* Same horizontal tab strip */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    > .sc-tabs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 0 12px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    > .sc-tabs > a {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    /* Keep exactly two appearance fields per row */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    form[data-storefront-appearance-form]
    .form-card > .grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px 8px !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    form[data-storefront-appearance-form]
    .form-card > .grid > div {
        min-width: 0 !important;
    }

    /* Light / dark headings remain full row */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    .storefront-theme-mode {
        grid-column: 1 / -1 !important;
    }

    /* Make picker + HEX fit comfortably inside each half row */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    .form-card > .grid .storefront-color-control {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 6px !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    .form-card > .grid .storefront-color-picker {
        width: 44px !important;
        height: 40px !important;
        flex: 0 0 44px !important;
        min-width: 44px !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    .form-card > .grid .storefront-color-value {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding-inline: 5px !important;
        font-size: 11px !important;
        box-sizing: border-box !important;
    }
}






/* Appearance isolated heading and default-theme centering */
@media (max-width: 560px) {

    /* Only the two Light / Dark section headings */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    .storefront-appearance-theme-heading {
        text-align: center !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    .storefront-appearance-theme-heading > strong {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* Default theme is the final unpaired field: own full row */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    .storefront-appearance-default-theme {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    .storefront-appearance-default-theme
    > label {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* Fallback native select before enhancement */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    .storefront-appearance-default-theme
    > #appearance_default_theme {
        width: min(100%, 280px) !important;
        max-width: 280px !important;
        margin-inline: auto !important;
        text-align: center !important;
        text-align-last: center !important;
    }

    /* Only the enhanced select generated inside this exact field */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    .storefront-appearance-default-theme
    > .sc-native-select {
        width: min(100%, 280px) !important;
        max-width: 280px !important;
        margin-inline: auto !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    .storefront-appearance-default-theme
    > .sc-native-select
    > .sc-native-select__trigger {
        position: relative !important;
        justify-content: center !important;
        text-align: center !important;
        padding-inline: 34px !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    .storefront-appearance-default-theme
    .sc-native-select__value {
        width: 100% !important;
        text-align: center !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    .storefront-appearance-default-theme
    .sc-native-select__chevron {
        position: absolute !important;
        inset-inline-end: 10px !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    .storefront-appearance-default-theme
    .sc-native-select__option {
        text-align: center !important;
    }
}

/* Appearance full-theme card centered */
@media (max-width: 560px) {

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    .storefront-theme-proposal {
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    .storefront-theme-proposal
    > label {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--appearance
    .storefront-theme-proposal
    > .storefront-color-control {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin-inline: auto !important;
    }
}

/* Storefront Ready Replies — phone zoom square cards */
@media (max-width: 560px) {

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--ready-replies {
        --sc-ready-replies-mobile-width: calc(100vw - 20px);

        box-sizing: border-box !important;
        width: var(--sc-ready-replies-mobile-width) !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-inline: auto !important;

        zoom: var(--sc-admin-mobile-inverse-scale);
        display: block !important;
    }

    /* Compact page header */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--ready-replies
    > .page-header {
        display: block !important;
        width: 100% !important;
        margin: 0 0 8px !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--ready-replies
    > .page-header .page-title {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Keep tabs on one horizontal row */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--ready-replies
    > .sc-tabs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 0 12px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--ready-replies
    > .sc-tabs > a {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    /* Two saved replies per row */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--ready-replies
    .ready-replies-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* Each saved reply is its own square card */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--ready-replies
    .ready-reply-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: space-between !important;

        width: 100% !important;
        min-width: 0 !important;
        aspect-ratio: 1 / 1 !important;

        padding: 10px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Edit area fills the card */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--ready-replies
    .ready-reply-row__link {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--ready-replies
    .ready-reply-row__link strong {
        display: block !important;
        width: 100% !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        text-align: center !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--ready-replies
    .ready-reply-row__type {
        display: block !important;
        width: 100% !important;
        margin-top: 5px !important;
        text-align: center !important;
    }

    /* Delete stays inside the same card */
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--ready-replies
    .ready-reply-delete {
        width: 100% !important;
        margin: 8px 0 0 !important;
    }

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--ready-replies
    .ready-reply-delete > button {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* Ready Replies — hide descriptions on phone */
@media (max-width: 560px) {
    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--ready-replies
    > .page-header .page-title > p,

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--ready-replies
    .form-card-head > p,

    html.sc-admin-mobile-parity .admin-content
    #storefrontSettingsPage.storefront-settings-page--ready-replies
    .form-card-head > div > p {
        display: none !important;
    }
}

/*
 * STAR CASH — ADMIN DESKTOP PARITY 901–1599 — 2026-09-24
 *
 * Preserve the full 1600px administration geometry on narrower
 * desktop/laptop/tablet-landscape viewports. The page content scales
 * as one canvas instead of reflowing cards, grids and tables.
 *
 * <= 900px remains owned by the existing mobile parity system.
 */
@media (min-width: 901px) and (max-width: 1599px) {
    :root {
        --sc-admin-desktop-canvas: calc(1600px - var(--sidebar-width));
        --sc-admin-desktop-scale: 1;
        --sc-admin-desktop-inverse-scale: 1;
        --sc-admin-desktop-margin-right: var(--sidebar-width);
        --sc-admin-desktop-padding-top: calc(var(--topbar-height) + 25px);
        --sc-admin-desktop-content-min-height: 100vh;
    }

    html.sc-admin-desktop-parity,
    html.sc-admin-desktop-parity body {
        min-width: 0;
        overflow-x: hidden;
    }

    html.sc-admin-desktop-parity .admin-content,
    html.sc-admin-desktop-parity body.sidebar-collapsed .admin-content {
        box-sizing: border-box;
        width: var(--sc-admin-desktop-canvas);
        min-width: var(--sc-admin-desktop-canvas);
        margin-right: var(--sc-admin-desktop-margin-right);
        padding: var(--sc-admin-desktop-padding-top) 25px 25px;
        min-height: var(--sc-admin-desktop-content-min-height);
        zoom: var(--sc-admin-desktop-scale);
        overflow: visible;
        transition: none;
    }

    /*
     * Fixed interaction surfaces stay viewport-native instead of being
     * double-scaled by the page canvas.
     */
    html.sc-admin-desktop-parity .admin-content :where(
        .sc-modal,
        .modal-overlay,
        .requirement-modal,
        .integration-test-all-overlay,
        .actions-dropdown,
        .sc-bulk-bar,
        .sc-developer-payment-notice
    ) {
        zoom: var(--sc-admin-desktop-inverse-scale) !important;
    }

    /*
     * These values already have explicit 1440px reference sizes in the
     * mobile parity implementation. Keep the same reference on laptops.
     */
    html.sc-admin-desktop-parity .product-form-page--edit .page-heading {
        font-size: 30px;
    }

    html.sc-admin-desktop-parity .sc-developer-page .sc-dev-billing__due {
        font-size: 31px;
    }
}