/* Shared responsive hardening for the admin and storefront shells. */
html,
body {
    max-width: 100%;
}
.admin-shell,
.store-shell {
    overflow-x: hidden;
}
.admin-shell .main-content,
.admin-shell .page-content,
.store-shell #main-content {
    min-width: 0;
    max-width: 100%;
}
.admin-shell img,
.store-shell img,
.admin-shell video,
.store-shell video,
.admin-shell canvas,
.store-shell canvas {
    max-width: 100%;
}
.admin-shell input,
.admin-shell select,
.admin-shell textarea,
.store-shell input,
.store-shell select,
.store-shell textarea {
    min-width: 0;
}
.admin-shell tbody td > .flex.items-center {
    /* an icon + name cell never shrinks below its content, so the name cannot run into the next column */
    min-width: max-content;
}
.admin-shell .table-wrap,
.store-shell .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}
.admin-shell .card-header,
.admin-shell .admin-card-header {
    gap: 12px;
    min-width: 0;
}
.admin-shell .admin-license-warning {
    min-width: 0;
}
@media (max-width: 768px) {.admin-shell .card-header,
    .admin-shell .admin-card-header {
        flex-wrap: wrap;
        padding: 14px 16px;
    }.admin-shell .card-body,
    .admin-shell .admin-card-body {
        padding: 16px;
    }.admin-shell .table-wrap {
        scrollbar-width: thin;
        /* soft edge shadows show on the side where more columns are hidden */
        background:
            linear-gradient(to right, var(--wh-surface) 30%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat local,
            linear-gradient(to left, var(--wh-surface) 30%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, .16), rgba(15, 23, 42, 0)) left center / 10px 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, .16), rgba(15, 23, 42, 0)) right center / 10px 100% no-repeat scroll;
    }.admin-shell .admin-license-warning {
        align-items: flex-start !important;
        flex-wrap: wrap;
    }.admin-shell .admin-license-warning > a {
        margin-inline-start: 26px;
    }.admin-shell .language-translate-toolbar {
        margin: -16px -16px 18px;
        padding: 12px 16px;
    }.store-shell .section-head {
        gap: 12px;
    }.store-shell .section-title {
        min-width: 0;
        font-size: 18px;
    }.store-shell .auth-gate-box {
        padding: 30px 22px;
        border-radius: 18px;
    }.admin-shell .wh-toast-wrap {
        top: calc(var(--wh-topbar-h, 60px) + 8px);
        inset-inline-end: 12px;
        inset-inline-start: 12px;
    }.admin-shell .wh-toast {
        width: 100%;
        max-width: none;
    }}
/* Grid cells may shrink below their content, so long labels and hints wrap instead of widening the page. */
.admin-shell .grid > * { min-width: 0; }
.admin-shell .product-gpc-help { overflow-wrap: anywhere; }
@media (max-width: 640px) {.admin-shell .card-header,
    .admin-shell .admin-card-header {
        padding: 13px 14px;
    }.admin-shell .card-body,
    .admin-shell .admin-card-body {
        padding: 14px;
    }.admin-shell .grid.grid-cols-2,
    .admin-shell .grid.grid-cols-3,
    .admin-shell .grid.grid-cols-4 {
        grid-template-columns: minmax(0, 1fr) !important;
    }.admin-shell .grid.grid-cols-2 > .col-span-2,
    .admin-shell .grid.grid-cols-3 > .col-span-2,
    .admin-shell .grid.grid-cols-4 > .col-span-2{
        grid-column: 1 / -1 !important;
    }.admin-shell .language-edit-actions {
        flex-wrap: wrap;
    }.admin-shell .language-edit-translations {
        margin-inline-start: 0 !important;
        width: 100%;
    }.admin-shell .product-edit-nav {
        flex-wrap: wrap;
    }.admin-shell .product-edit-nav > .ml-auto {
        margin-inline-start: 0 !important;
        width: 100%;
    }.admin-shell .language-translate-toolbar {
        position: static;
        margin: 0 0 16px;
        padding: 10px 0;
    }.admin-shell .language-translate-identity {
        min-width: 0;
    }.admin-shell .language-translate-progress {
        flex-basis: 100%;
        order: 3;
        width: 100%;
    }.admin-shell .language-translate-actions {
        display: grid;
        flex-basis: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-inline-start: 0 !important;
        order: 4;
        width: 100%;
    }.admin-shell .language-translate-actions > .btn {
        justify-content: center;
        width: 100%;
    }/* Several legacy admin views use inline desktop grids. Keep their data
       unchanged, but make the layout readable on phones. */
    .admin-shell .page-content [style*="grid-template-columns:repeat(4"],
    .admin-shell .page-content [style*="grid-template-columns:1fr 1fr 1fr 1fr"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }.admin-shell .page-content [style*="grid-template-columns:1fr 1fr"],
    .admin-shell .page-content [style*="grid-template-columns:1fr 320px"],
    .admin-shell .page-content [style*="grid-template-columns:1fr 380px"],
    .admin-shell .page-content [style*="grid-template-columns:auto 1fr"],
    .admin-shell .page-content [style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }.admin-shell .page-content [style*="justify-content:space-between"] {
        min-width: 0;
        flex-wrap: wrap;
    }.admin-shell .page-content [style*="justify-content:space-between"] > * {
        min-width: 0;
        max-width: 100%;
    }.admin-shell .btn:not(.btn-sm) {
        min-height: 42px;
    }.admin-shell .admin-footer {
        padding: 16px 12px 88px;
    }.admin-shell .admin-footer .af-sep {
        display: none;
    }.admin-shell .admin-footer span {
        display: block;
        line-height: 1.6;
    }.store-shell .site-header-row {
        min-width: 0;
    }.store-shell .site-header-actions {
        min-width: 0;
    }.store-shell .section-head {
        align-items: flex-start;
        margin-bottom: 16px;
    }.store-shell .section-link {
        flex-shrink: 0;
        padding-top: 2px;
    }.store-shell #main-content {
        overflow-wrap: anywhere;
    }.store-shell button,
    .store-shell a,
    .admin-shell button,
    .admin-shell a {
        -webkit-tap-highlight-color: transparent;
    }}
@media (max-width: 360px) {.admin-shell .card-header,
    .admin-shell .admin-card-header,
    .admin-shell .card-body,
    .admin-shell .admin-card-body {
        padding-inline: 12px;
    }}