/* GM STORES v1.0 Stable — Storefront stabilization, mobile resilience and dark-mode contrast */

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

body.gm-brand-v013 {
    overflow-x: clip;
}

.gm-brand-v013 :where(.summary-card, .coupon-box, .checkout-summary, .mini-cart-drawer, .quick-view-dialog, .live-search-panel),
.gm-brand-v013 :where(.row, [class*="col-"], .cart-product-copy, .cart-quantity-wrap, .input-group, .form-floating) {
    min-width: 0;
}

.gm-brand-v013 :where(.cart-product-name, .mini-cart-product a, .live-search-item strong, .order-list-item strong, .account-address-card, .saved-address-option, .tracking-card, .review-card, .alert, .toast-body) {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Bootstrap components inherit the storefront palette rather than reverting to white surfaces. */
html[data-color-scheme="dark"] body.gm-brand-v013 {
    --bs-body-color: var(--gm-ink);
    --bs-body-bg: var(--gm-bg);
    --bs-secondary-color: var(--gm-muted);
    --bs-tertiary-color: var(--gm-muted);
    --bs-border-color: var(--gm-border);
    --bs-heading-color: var(--gm-ink);
    --bs-link-color: var(--gm-primary);
    --bs-link-hover-color: var(--gm-accent);
    --bs-card-color: var(--gm-ink);
    --bs-card-bg: var(--gm-surface);
    --bs-modal-color: var(--gm-ink);
    --bs-modal-bg: var(--gm-surface);
    --bs-dropdown-color: var(--gm-ink);
    --bs-dropdown-bg: var(--gm-surface);
    --bs-dropdown-border-color: var(--gm-border);
    --bs-list-group-color: var(--gm-ink);
    --bs-list-group-bg: var(--gm-surface);
    --bs-list-group-border-color: var(--gm-border);
    --bs-form-control-bg: color-mix(in srgb, var(--gm-bg) 82%, var(--gm-surface));
    --bs-form-control-color: var(--gm-ink);
    --bs-form-control-border-color: var(--gm-border);
}

html[data-color-scheme="dark"] body.gm-brand-v013 :where(
    .card,
    .card-body,
    .modal-content,
    .toast,
    .popover,
    .offcanvas,
    .list-group-item,
    .nav-tabs,
    .tab-content,
    .pagination,
    .page-link,
    .breadcrumb,
    .live-search-panel,
    .mini-cart-drawer,
    .quick-view-dialog,
    .quick-view-content,
    .commerce-toast,
    .contact-form-card,
    .order-list-item,
    .payment-option,
    .premium-payment-option,
    .saved-address-option,
    .account-address-card,
    .account-order-card,
    .product-detail-panel,
    .product-info-panel,
    .product-gallery,
    .checkout-card,
    .checkout-section,
    .bank-transfer-card,
    .shipping-progress,
    .invoice-status-card
) {
    background-color: var(--gm-surface) !important;
    color: var(--gm-ink) !important;
    border-color: var(--gm-border) !important;
}

html[data-color-scheme="dark"] body.gm-brand-v013 :where(
    .table-light,
    .table-light > tr,
    .table-light > tr > *,
    .card-header,
    .card-footer,
    .modal-header,
    .modal-footer,
    .list-group-item-action:hover,
    .list-group-item-action:focus,
    .page-link:hover,
    .page-link:focus,
    .live-search-state,
    .mini-cart-footer,
    .quick-view-loading,
    .product-spec-row:nth-child(odd)
) {
    background-color: color-mix(in srgb, var(--gm-bg) 78%, var(--gm-surface)) !important;
    color: var(--gm-ink) !important;
    border-color: var(--gm-border) !important;
}

html[data-color-scheme="dark"] body.gm-brand-v013 :where(
    .alert-light,
    .badge.text-bg-light,
    .text-bg-light,
    .bg-body,
    .bg-body-tertiary,
    .bg-body-secondary
) {
    background-color: color-mix(in srgb, var(--gm-bg) 72%, var(--gm-surface)) !important;
    color: var(--gm-ink) !important;
    border-color: var(--gm-border) !important;
}

html[data-color-scheme="dark"] body.gm-brand-v013 :where(.alert, .toast, .popover, .tooltip-inner) {
    color: var(--gm-ink);
    border-color: var(--gm-border);
}

html[data-color-scheme="dark"] body.gm-brand-v013 .alert-success {
    background-color: color-mix(in srgb, #198754 16%, var(--gm-surface));
}

html[data-color-scheme="dark"] body.gm-brand-v013 .alert-danger {
    background-color: color-mix(in srgb, #dc3545 16%, var(--gm-surface));
}

html[data-color-scheme="dark"] body.gm-brand-v013 .alert-warning {
    background-color: color-mix(in srgb, #ffc107 15%, var(--gm-surface));
}

html[data-color-scheme="dark"] body.gm-brand-v013 .alert-info {
    background-color: color-mix(in srgb, #0dcaf0 14%, var(--gm-surface));
}

html[data-color-scheme="dark"] body.gm-brand-v013 :where(.nav-tabs, .nav-tabs .nav-link) {
    border-color: var(--gm-border);
}

html[data-color-scheme="dark"] body.gm-brand-v013 .nav-tabs .nav-link {
    color: var(--gm-muted);
}

html[data-color-scheme="dark"] body.gm-brand-v013 .nav-tabs .nav-link:hover,
html[data-color-scheme="dark"] body.gm-brand-v013 .nav-tabs .nav-link:focus,
html[data-color-scheme="dark"] body.gm-brand-v013 .nav-tabs .nav-link.active {
    background: color-mix(in srgb, var(--gm-primary) 10%, var(--gm-surface));
    color: var(--gm-ink);
    border-color: var(--gm-border);
}

html[data-color-scheme="dark"] body.gm-brand-v013 .page-link {
    color: var(--gm-ink);
}

html[data-color-scheme="dark"] body.gm-brand-v013 .page-item.active .page-link {
    background: var(--gm-primary) !important;
    color: var(--gm-on-primary) !important;
    border-color: var(--gm-primary) !important;
}

html[data-color-scheme="dark"] body.gm-brand-v013 :where(.input-group-text, .form-control, .form-select) {
    background-color: color-mix(in srgb, var(--gm-bg) 82%, var(--gm-surface)) !important;
    color: var(--gm-ink) !important;
    border-color: var(--gm-border) !important;
}

html[data-color-scheme="dark"] body.gm-brand-v013 :where(.form-control, .form-select):disabled,
html[data-color-scheme="dark"] body.gm-brand-v013 :where(.form-control, .form-select)[readonly] {
    background-color: color-mix(in srgb, var(--gm-bg) 92%, var(--gm-surface)) !important;
    color: var(--gm-muted) !important;
}

html[data-color-scheme="dark"] body.gm-brand-v013 .form-check-input {
    background-color: color-mix(in srgb, var(--gm-bg) 78%, var(--gm-surface));
    border-color: color-mix(in srgb, var(--gm-ink) 38%, var(--gm-border));
}

html[data-color-scheme="dark"] body.gm-brand-v013 .form-check-input:checked {
    background-color: var(--gm-primary);
    border-color: var(--gm-primary);
}

html[data-color-scheme="dark"] body.gm-brand-v013 .btn-light {
    background-color: var(--gm-surface);
    color: var(--gm-ink);
    border-color: var(--gm-border);
}

html[data-color-scheme="dark"] body.gm-brand-v013 .btn-light:hover,
html[data-color-scheme="dark"] body.gm-brand-v013 .btn-light:focus-visible {
    background-color: color-mix(in srgb, var(--gm-primary) 10%, var(--gm-surface));
    color: var(--gm-ink);
    border-color: var(--gm-primary);
}

html[data-color-scheme="dark"] body.gm-brand-v013 .btn-close {
    filter: invert(1) grayscale(100%) brightness(180%);
}

html[data-color-scheme="dark"] body.gm-brand-v013 :where(.dropdown-divider, .modal-header, .modal-footer, .card-header, .card-footer) {
    border-color: var(--gm-border) !important;
}

html[data-color-scheme="dark"] body.gm-brand-v013 :where(.product-card-media, .product-image-wrap, .cart-thumb, .mini-cart-thumb, .quick-view-media) {
    background-color: color-mix(in srgb, var(--gm-bg) 82%, var(--gm-border));
}

html[data-color-scheme="dark"] body.gm-brand-v013 .mobile-commerce-dock {
    background: color-mix(in srgb, var(--gm-surface) 94%, transparent);
    border-color: var(--gm-border);
    box-shadow: 0 -18px 46px rgba(0, 0, 0, .32);
}

html[data-color-scheme="dark"] body.gm-brand-v013 .mobile-search-backdrop {
    background: rgba(0, 0, 0, .66);
}

/* Clear keyboard focus without depending on hover states. */
.gm-brand-v013 :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--gm-primary) 48%, transparent);
    outline-offset: 3px;
}

@media (max-width: 767.98px) {
    :root {
        --gm-mobile-dock-height: 68px;
    }

    body.gm-brand-v013.mobile-search-open {
        overflow: hidden;
        touch-action: none;
    }

    .gm-brand-v013 .brand-header .premium-header-main {
        min-height: 56px;
    }

    .gm-brand-v013 .brand-signature .store-brand-logo,
    .gm-brand-v013 .brand-signature .store-brand-logo img {
        max-height: 34px;
        height: 34px;
    }

    .gm-brand-v013 .brand-signature .store-brand-copy small {
        display: none;
    }

    .gm-brand-v013 .brand-signature .store-brand-copy strong {
        max-width: min(52vw, 220px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-commerce-dock {
        contain: layout paint;
        overscroll-behavior: contain;
    }

    .mobile-commerce-dock {
        transition: transform .2s ease;
    }

    .mobile-commerce-dock.has-keyboard {
        pointer-events: none;
        transform: translateY(110%);
    }

    .mobile-commerce-dock a,
    .mobile-commerce-dock button {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .mobile-commerce-dock a:active,
    .mobile-commerce-dock button:active {
        transform: scale(.96);
    }

    .mobile-commerce-dock .is-active::after {
        position: absolute;
        bottom: 2px;
        left: 50%;
        width: 18px;
        height: 3px;
        border-radius: 99px;
        background: var(--gm-primary);
        content: "";
        transform: translateX(-50%);
    }

    .gm-brand-v013 .brand-search {
        max-height: calc(var(--gm-visual-viewport-height, 100vh) - var(--gm-mobile-dock-height) - 34px);
    }

    .gm-brand-v013 .brand-search .nav-search {
        width: 100%;
    }

    .gm-brand-v013 .brand-search .nav-search input {
        min-width: 0;
        font-size: 16px;
    }

    .gm-brand-v013 .brand-search .live-search-panel {
        overscroll-behavior: contain;
    }

    .cart-layout-row,
    .cart-items-card,
    .cart-update-form,
    .cart-table-shell,
    .cart-table,
    .cart-table tbody,
    .cart-table .cart-line-item {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .cart-table .cart-line-item {
        isolation: isolate;
    }

    .cart-table .cart-line-item > td {
        overflow: hidden;
    }

    .cart-product-cell,
    .cart-product,
    .cart-product-copy,
    .cart-product-name {
        max-width: 100%;
        min-width: 0;
    }

    .cart-product-name {
        hyphens: auto;
    }

    .cart-price-cell,
    .cart-total-cell {
        min-height: 59px;
    }

    .cart-cell-value {
        max-width: 100%;
        overflow-wrap: normal;
        text-overflow: ellipsis;
    }

    .cart-quantity-wrap {
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .cart-quantity-cell .quantity-stepper {
        flex: 0 0 122px;
        max-width: 100%;
    }

    .cart-update-bar {
        transform: translateZ(0);
    }

    .checkout-summary {
        position: static !important;
        top: auto !important;
        overflow: hidden;
    }

    .checkout-summary :where(.summary-line, .d-flex) {
        min-width: 0;
    }

    .checkout-summary :where(.summary-line span, .summary-line strong) {
        overflow-wrap: anywhere;
    }

    .coupon-box .input-group > .form-control {
        width: 100%;
    }

    .premium-footer {
        padding-bottom: 18px;
    }
}

@media (max-width: 359.98px) {
    .mobile-commerce-dock {
        padding-right: 4px;
        padding-left: 4px;
    }

    .mobile-commerce-dock a,
    .mobile-commerce-dock button {
        padding-right: 1px;
        padding-left: 1px;
    }

    .mobile-commerce-dock small {
        font-size: .5rem;
    }

    .cart-table .cart-line-item {
        grid-template-columns: 1fr;
    }

    .cart-price-cell,
    .cart-total-cell {
        align-items: center !important;
        flex-direction: row;
        text-align: left;
    }

    .cart-total-cell {
        border-top: 1px solid var(--gm-border) !important;
    }

    .cart-quantity-cell {
        grid-column: 1;
    }
}

@media (max-width: 767.98px) and (orientation: landscape) and (max-height: 520px) {
    :root {
        --gm-mobile-dock-height: 58px;
    }

    .mobile-commerce-dock {
        min-height: calc(var(--gm-mobile-dock-height) + env(safe-area-inset-bottom));
        padding-top: 3px;
        padding-bottom: calc(3px + env(safe-area-inset-bottom));
    }

    .mobile-commerce-dock a,
    .mobile-commerce-dock button {
        min-height: 48px;
        gap: 2px;
    }

    .mobile-commerce-dock svg {
        width: 18px;
        height: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-commerce-dock a,
    .mobile-commerce-dock button,
    .gm-brand-v013 .brand-search {
        transition: none !important;
    }
}