/*
 * Must use the same cascade layer as Site theme (default.css @layer page_elements).
 * Unlayered rules override all @layer rules and break sticky cart (.cart.fixed).
 */
@layer page_elements {
    header .cart:not(.fixed) { position: relative; }
    header .cart .container { min-width: min-content; width: 100%; }
    header .cart .cart-summary { white-space: nowrap; }
    header .cart #cart-content { position: absolute; top: 100%; right: 0; z-index: 100; pointer-events: none; }
    header .cart:hover #cart-content,
    header .cart:focus-within #cart-content,
    header .cart:has(.cart-summary:hover) #cart-content,
    header .cart.is-open #cart-content {
        pointer-events: auto;
        display:      block;
    }
    header .cart.cart-preview-locked #cart-content .cart-dropdown,
    header .cart #cart-content .cart-dropdown.is-busy {
        pointer-events: none;
        opacity: 0.65;
        cursor: default;
    }
    header .cart.cart-preview-locked #cart-content .cart-dropdown-qty-btn,
    header .cart.cart-preview-locked #cart-content .cart-dropdown-remove,
    header .cart.cart-preview-locked #cart-content .cart-dropdown-clear,
    header .cart #cart-content .cart-dropdown.is-busy .cart-dropdown-qty-btn,
    header .cart #cart-content .cart-dropdown.is-busy .cart-dropdown-remove,
    header .cart #cart-content .cart-dropdown.is-busy .cart-dropdown-clear {
        cursor: default;
    }
    header .cart #cart-content .cart-dropdown-qty-btn svg,
    header .cart #cart-content .cart-dropdown-remove svg,
    header .cart #cart-content .cart-dropdown-qty-btn svg *,
    header .cart #cart-content .cart-dropdown-remove svg * {
        pointer-events: none;
    }
    header .cart #cart-content .cart-dropdown {
        display:          none;
        pointer-events:   auto;
        position:         relative;
        width:            min(480px, calc(100vw - 2rem));
        margin-top:       8px;
        padding:          1rem 1.5rem 1.25rem;
        background-color: white;
        box-shadow:       0 8px 24px rgba(0, 0, 0, 0.12);
        border-radius:    12px;
        font-size:        .875rem;
        line-height:      1.35;
        text-align:       left;
        color:            black;
    }
    header .cart:hover #cart-content .cart-dropdown,
    header .cart:focus-within #cart-content .cart-dropdown,
    header .cart:has(.cart-summary:hover) #cart-content .cart-dropdown,
    header .cart.is-open #cart-content .cart-dropdown { display: block; }
    header .cart #cart-content .cart-dropdown::before {
        content:    "";
        position:   absolute;
        left:       0;
        right:      0;
        top:        -8px;
        height:     8px;
    }
    header .cart #cart-content .cart-dropdown-header {
        display:         flex;
        align-items:     center;
        justify-content: space-between;
        gap:             1rem;
        margin-bottom:   1rem;
    }
    header .cart #cart-content .cart-dropdown-title {
        font-size:   1rem;
        font-weight: 700;
        margin:      0;
        color:       var(--text-color);
    }
    header .cart #cart-content .cart-dropdown-count { font-weight: 700; }
    header .cart #cart-content .cart-dropdown-clear {
        border:          none;
        background:      none;
        padding:         0;
        font-size:       .875rem;
        font-weight:     400;
        color:           var(--text-color);
        cursor:          pointer;
        text-decoration: none;
        white-space:     nowrap;
    }
    header .cart #cart-content .cart-dropdown-clear:hover { color: var(--link-color); }
    header .cart #cart-content .cart-dropdown-items {
        list-style:       none;
        margin:           0;
        padding:          0 14px 0 0;
        max-height:       280px;
        overflow-y:       auto;
        scrollbar-gutter: stable;
    }
    header .cart #cart-content .cart-dropdown-item {
        display:       flex;
        align-items:   center;
        gap:           .75rem;
        padding:       .75rem 0;
    }
    header .cart #cart-content .cart-dropdown-item:not(:last-child) {
        border-bottom: 1px solid var(--gray5);
    }
    header .cart #cart-content .cart-dropdown-image {
        flex:          0 0 56px;
        display:       block;
        width:         56px;
        height:        56px;
        overflow:      hidden;
        border-radius: 8px;
        background:    var(--gray6);
    }
    header .cart #cart-content .cart-dropdown-image img {
        width:      100%;
        height:     100%;
        object-fit: contain;
    }
    header .cart #cart-content .cart-dropdown-body {
        flex:      1;
        min-width: 0;
    }
    header .cart #cart-content .cart-dropdown-name {
        display:       block;
        color:         var(--text-color);
        font-weight:   500;
        line-height:   1.3;
        margin-bottom: .25rem;
        text-decoration: none;
    }
    header .cart #cart-content .cart-dropdown-name:hover { color: var(--link-color); }
    header .cart #cart-content .cart-dropdown-qty-control,
    .cart-has-preview .cart-dropdown-qty-control {
        display:     inline-flex;
        align-items: center;
        gap:         .35rem;
        margin-top:  .35rem;
    }
    header .cart #cart-content .cart-dropdown-qty-readonly,
    .cart-has-preview .cart-dropdown-qty-readonly {
        gap: .25rem;
    }
    header .cart #cart-content .cart-dropdown-qty-inc-wrap,
    .cart-has-preview .cart-dropdown-qty-inc-wrap {
        position:        relative;
        display:         inline-flex;
        vertical-align:  middle;
    }
    header .cart #cart-content .cart-dropdown-qty-limit-hint,
    .cart-has-preview .cart-dropdown-qty-limit-hint {
        display:          none;
        position:         absolute;
        right:            0;
        bottom:           calc(100% + 6px);
        z-index:          20;
        max-width:        11rem;
        padding:          .3rem .45rem;
        border-radius:    6px;
        background:       var(--gray8, #333);
        color:            var(--white, #fff);
        font-size:        .6875rem;
        line-height:      1.25;
        text-align:       center;
        white-space:      normal;
        box-shadow:       0 2px 8px rgba(0, 0, 0, .18);
        pointer-events:   none;
    }
    header .cart #cart-content .cart-dropdown-qty-inc-wrap.is-at-limit:hover .cart-dropdown-qty-limit-hint,
    header .cart #cart-content .cart-dropdown-qty-inc-wrap.is-at-limit:focus-within .cart-dropdown-qty-limit-hint,
    .cart-has-preview .cart-dropdown-qty-inc-wrap.is-at-limit:hover .cart-dropdown-qty-limit-hint,
    .cart-has-preview .cart-dropdown-qty-inc-wrap.is-at-limit:focus-within .cart-dropdown-qty-limit-hint {
        display: block;
    }
    header .cart #cart-content .cart-dropdown-qty-inc-wrap.is-at-limit .cart-dropdown-qty-btn,
    .cart-has-preview .cart-dropdown-qty-inc-wrap.is-at-limit .cart-dropdown-qty-btn {
        pointer-events: none;
    }
    header .cart #cart-content .cart-dropdown-qty-btn {
        display:         flex;
        align-items:     center;
        justify-content: center;
        width:           28px;
        height:          28px;
        padding:         0;
        border:          1px solid var(--gray5);
        border-radius:   6px;
        background:      var(--white);
        color:           var(--text-color);
        cursor:          pointer;
    }
    header .cart #cart-content .cart-dropdown-qty-btn:hover:not(:disabled) {
        border-color: var(--gray);
        background:   var(--gray6);
    }
    header .cart #cart-content .cart-dropdown-qty-btn:disabled,
    .cart-has-preview .cart-dropdown-qty-btn:disabled {
        opacity: .45;
        cursor:  not-allowed;
    }
    header .cart #cart-content .cart-dropdown-qty-value {
        min-width:   1.25rem;
        font-weight: 600;
        font-size:   .875rem;
        text-align:  center;
    }
    header .cart #cart-content .cart-dropdown-qty-unit {
        color:     var(--gray);
        font-size: .8125rem;
    }
    header .cart #cart-content .cart-dropdown-item.is-updating {
        opacity: .55;
        pointer-events: none;
    }
    header .cart #cart-content .cart-dropdown-side {
        display:        flex;
        flex-direction: column;
        align-items:    flex-end;
        gap:            .5rem;
        flex-shrink:    0;
    }
    header .cart #cart-content .cart-dropdown-price {
        font-weight: 700;
        font-size:   .9375rem;
        white-space: nowrap;
        color:       var(--text-color);
    }
    header .cart #cart-content .cart-dropdown-remove {
        display:         flex;
        align-items:     center;
        justify-content: center;
        width:           28px;
        height:          28px;
        padding:         0;
        border:          none;
        background:      transparent;
        color:           var(--gray);
        cursor:          pointer;
        border-radius:   4px;
    }
    header .cart #cart-content .cart-dropdown-remove:hover {
        color:      var(--text-color);
        background: var(--gray6);
    }
    header .cart #cart-content .cart-dropdown-remove svg { display: block; fill: currentColor; }
    header .cart #cart-content .cart-dropdown-footer {
        display:         flex;
        align-items:     flex-end;
        justify-content: space-between;
        gap:             1rem;
        margin-top:      1rem;
        padding-top:     1rem;
        border-top:      1px solid var(--gray5);
    }
    header .cart #cart-content .cart-dropdown-total-label {
        display:       block;
        margin-bottom: .25rem;
    }
    header .cart #cart-content .cart-dropdown-total-value {
        display:     block;
        font-size:   1.375rem;
        font-weight: 700;
        line-height: 1.2;
        color:       var(--text-color);
    }
    header .cart #cart-content .cart-dropdown-checkout {
        display:         inline-flex;
        align-items:     center;
        justify-content: center;
        min-height:      44px;
        padding:         .625rem 1.5rem;
        border-radius:   8px;
        font-weight:     600;
        font-size:       .9375rem;
        text-decoration: none;
        white-space:     nowrap;
        box-shadow:      none;
    }

    /* Site theme hides #cart-content on mobile; preview is desktop-only */
    @media (min-width: 769px) {
        header .cart #cart-content {
            display: block;
        }
    }

    /* Cart summary badge (Site theme vars); scoped so AJAX-mounted #cart keeps the red pill */
    header .cart.cart-has-preview a.cart-summary {
        display:         inline-flex;
        align-items:     center;
        text-decoration: none;
    }
    header .cart.cart-has-preview a.cart-summary .cart-total {
        background-color: var(--header-cart-total-bg-color, var(--red, #e53935));
        border-radius:    50%;
        color:            var(--white, #fff);
        font-size:        12px;
        padding:          2px 6px;
        line-height:      14px;
        font-weight:      400;
        display:          inline-block;
        text-align:       center;
        white-space:      nowrap;
        vertical-align:   baseline;
    }
    header .cart.cart-has-preview a.cart-summary .cart-total:empty {
        padding: 0;
    }

    /* Sticky cart bar on scroll (mirrors Site default.js + default.css) */
    header .cart.fixed.cart-has-preview {
        position:        fixed;
        top:             0;
        left:            0;
        right:           0;
        z-index:         999;
        padding-left:    var(--container-padding, 1rem);
        padding-right:   var(--container-padding, 1rem);
        text-align:      right;
        max-width:       var(--container-max-width, 100%);
        margin:          0 auto;
        justify-content: flex-end;
        flex-wrap:       nowrap;
        align-items:     flex-start;
    }
    header .cart.fixed.cart-has-preview a.cart-summary {
        text-align:      center;
        border-top:      none;
        background-color: var(--red, #e53935);
        color:           var(--white, #fff);
        padding:         4px 10px 6px 10px;
        box-shadow:      var(--shadow1, 0 2px 8px rgba(0, 0, 0, 0.12));
        border-radius:   0 0 clamp(0px, var(--element-border-radius, 8px), 1rem) clamp(0px, var(--element-border-radius, 8px), 1rem);
    }
    header .cart.fixed.cart-has-preview a.cart-summary:hover {
        background-color: #d33 !important;
    }
    header .cart.fixed.cart-has-preview a.cart-summary .cart-total {
        background-color: var(--white, #fff);
        color:            var(--red, #e53935);
    }
    header .cart.fixed.cart-has-preview #cart-content {
        position: absolute;
        top:      100%;
        right:    0;
        z-index:  1001;
    }
    header .cart.fixed.cart-has-preview #cart-content a:not(.cart-dropdown-checkout) {
        text-align:      left;
        border-top:      none;
        background:      transparent;
        color:           var(--text-color);
        padding:         0;
        box-shadow:      none;
        border-radius:   0;
    }
    header .cart.fixed.cart-has-preview #cart-content a:not(.cart-dropdown-checkout):hover {
        background: transparent !important;
        color:      var(--link-color);
    }
    header .cart.fixed.cart-has-preview #cart-content .cart-dropdown-checkout {
        text-align:      center;
        background:      var(--orange, #f2994a);
        color:           var(--white) !important;
        padding:         .625rem 1.5rem;
        box-shadow:      none;
        border-radius:   8px;
    }
    header .cart.fixed.cart-has-preview #cart-content .cart-dropdown-checkout:hover {
        background: color-mix(in srgb, var(--orange, #f2994a) 88%, black 12%) !important;
        color:      var(--white) !important;
    }

    @media (max-width: 768px) {
        header .cart.cart-has-preview,
        header .cart.fixed.cart-has-preview {
            min-width: 0 !important;
            position:  static;
        }
        header .cart.fixed.cart-has-preview a.cart-summary {
            background:  transparent;
            padding:     16px 9px 15px 17px;
            border-radius: 0;
            box-shadow:  none;
        }
        header .cart.fixed.cart-has-preview a.cart-summary:hover {
            background: transparent !important;
        }
        header .cart.cartpreview-custom-host #cart-content,
        .cart-has-preview.cartpreview-custom-host #cart-content {
            display: none;
        }
    }

    /* Custom theme cart block (target CSS selector in plugin settings) */
    .cart-has-preview.cartpreview-custom-host {
        position: relative;
    }
    .cart-has-preview.cartpreview-custom-host #cart-content {
        position:       absolute;
        top:            100%;
        right:          0;
        z-index:        100;
        pointer-events: none;
    }
    .cart-has-preview.cartpreview-custom-host:hover #cart-content,
    .cart-has-preview.cartpreview-custom-host:focus-within #cart-content,
    .cart-has-preview.cartpreview-custom-host.is-open #cart-content {
        pointer-events: auto;
        display:        block;
    }
    @media (min-width: 769px) {
        .cart-has-preview.cartpreview-custom-host #cart-content {
            display: block;
        }
        .cart-has-preview.cartpreview-custom-host:hover #cart-content .cart-dropdown,
        .cart-has-preview.cartpreview-custom-host:focus-within #cart-content .cart-dropdown,
        .cart-has-preview.cartpreview-custom-host.is-open #cart-content .cart-dropdown {
            display: block;
        }
    }
}