/* Final responsive safeguards loaded after all storefront styles. */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

main,
.container-xl,
.page-main,
.content-shell,
.account-content,
.account-layout,
.checkout-shell,
.product-detail {
    min-width: 0;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

.table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.form-control,
.form-select,
textarea,
input,
select,
button {
    max-width: 100%;
}

.product-title,
.account-panel,
.policy-card,
.contact-info-panel,
.contact-form-card,
.summary-product,
.payment-method,
.footer-grid > div {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
    .account-layout,
    .checkout-shell,
    .product-detail,
    .contact-layout,
    .policy-layout,
    .review-layout {
        width: 100%;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .account-sidebar,
    .order-summary,
    .policy-nav {
        position: static !important;
    }

    .campaign-grid,
    .curated-grid {
        min-width: 0;
    }
}

@media (max-width: 767.98px) {
    .container-xl,
    .page-main,
    .content-shell,
    .account-shell {
        width: 100%;
        padding-inline: 12px;
    }

    .surface,
    .checkout-card,
    .order-summary,
    .account-panel {
        max-width: 100%;
    }

    .account-sidebar {
        width: 100%;
        padding: 12px;
    }

    .account-user {
        padding: 4px 3px 12px;
    }

    .account-user > div {
        min-width: 0;
    }

    .account-user small {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .account-sidebar nav {
        display: flex;
        gap: 6px;
        margin-inline: -4px;
        padding: 10px 4px;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .account-sidebar nav::-webkit-scrollbar {
        display: none;
    }

    .account-sidebar nav a {
        flex: 0 0 auto;
        min-height: 42px;
        padding: 10px 12px;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    .account-panel {
        width: 100%;
        padding: 14px !important;
    }

    .account-panel .table-responsive {
        overflow: visible;
    }

    .account-orders.orders-table,
    .account-orders.coupons-table {
        display: block;
        width: 100%;
        min-width: 0 !important;
        overflow: visible;
    }

    .orders-table thead,
    .coupons-table thead {
        display: none;
    }

    .orders-table tbody,
    .coupons-table tbody {
        display: grid;
        gap: 12px;
        width: 100%;
    }

    .orders-table tr,
    .coupons-table tr {
        display: grid;
        overflow: hidden;
        width: 100%;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 5px 16px rgba(21, 38, 58, .05);
    }

    .orders-table td,
    .coupons-table td {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 10px 12px !important;
        border-bottom: 1px solid var(--line);
        text-align: right;
        overflow-wrap: anywhere;
    }

    .orders-table td:last-child,
    .coupons-table td:last-child {
        border-bottom: 0;
    }

    .orders-table td::before,
    .coupons-table td::before {
        content: attr(data-label);
        color: #8b94a6;
        font-size: 9px;
        font-weight: 700;
        text-align: left;
        text-transform: uppercase;
    }

    .orders-table td:first-child {
        display: block;
        padding: 12px !important;
        background: #f8fbfd;
        text-align: left;
    }

    .orders-table td:first-child::before {
        display: block;
        margin-bottom: 9px;
    }

    .account-order-product,
    .account-order-product > div {
        min-width: 0;
    }

    .account-order-product span {
        max-width: 100%;
        white-space: normal;
    }

    .account-order-product > img,
    .account-order-image-fallback {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
    }

    .order-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .order-actions a,
    .order-actions button {
        min-height: 38px;
        padding: 9px 11px;
    }

    .orders-table .empty-orders,
    .coupons-table .empty-orders {
        display: flex !important;
        width: 100%;
        padding: 30px 12px !important;
        text-align: center;
    }

    .orders-table .empty-orders::before,
    .coupons-table .empty-orders::before {
        display: none;
    }

    .tracking-head {
        align-items: flex-start;
        gap: 10px;
    }

    .tracking-head > div {
        min-width: 0;
    }

    .tracking-head strong {
        overflow-wrap: anywhere;
    }

    .tracking-steps {
        gap: 2px;
    }

    .tracking-steps > div:not(:last-child)::after {
        left: 58%;
        width: 84%;
    }

    .product-gallery {
        min-width: 0;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .product-thumbs {
        order: 2;
        max-width: 100%;
        padding-bottom: 3px;
        overflow-x: auto;
    }

    .campaign,
    .curated-card,
    .wishlist-card {
        min-width: 0;
    }

    .checkout-info-group,
    .payment-number-box,
    .summary-product {
        min-width: 0;
    }

    .modal-dialog {
        width: auto;
        max-width: calc(100vw - 24px);
        margin: 12px;
    }
}

@media (max-width: 575.98px) {
    .form-control,
    .form-select,
    textarea,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="search"] {
        font-size: 16px !important;
    }

    .checkout-info-group,
    .checkout-details-card,
    .checkout-card,
    .order-summary,
    .product-detail,
    .detail-tabs {
        padding: 13px !important;
    }

    .account-hero {
        padding-inline: 12px;
    }

    .account-hero h1 {
        font-size: 22px;
    }

    .account-stats {
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }

    .account-stats article {
        min-width: 0;
        padding: 12px;
    }

    .orders-table td,
    .coupons-table td {
        grid-template-columns: 76px minmax(0, 1fr);
        padding-inline: 10px !important;
    }

    .order-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .order-actions a,
    .order-actions form,
    .order-actions button {
        width: 100%;
        justify-content: center;
    }

    .tracking-card {
        padding: 12px;
    }

    .tracking-steps i {
        width: 28px;
        height: 28px;
    }

    .tracking-steps > div:not(:last-child)::after {
        top: 13px;
    }

    .summary-product {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .summary-product > strong {
        grid-column: 2;
    }

    .coupon,
    .payment-number-box {
        width: 100%;
    }

    .footer-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 374.98px) {
    .products-grid,
    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .orders-table td,
    .coupons-table td {
        grid-template-columns: 68px minmax(0, 1fr);
    }
}