/* =========================================================
   NANCYS CART UX V2.1
   Eat-style presentation layer
   ========================================================= */


/* ---------------------------------------------------------
   Drawer shell
   --------------------------------------------------------- */

body.nancys-cart-open {
    overflow: hidden;
}


.nancys-brand-cart-drawer {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, 480px);
}


.nancys-brand-cart-backdrop {
    background:
        rgba(12, 22, 36, 0.42);

    -webkit-backdrop-filter:
        blur(4px);

    backdrop-filter:
        blur(4px);
}


.nancys-brand-cart-panel {
    width: 100%;
    max-width: 480px;

    height: 100dvh;

    display: flex;
    flex-direction: column;

    background:
        #fffdf9;

    color:
        var(--nancys-ink);

    box-shadow:
        -22px 0 70px
        rgba(12, 35, 64, 0.18);
}


/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.nancys-brand-cart-heading {
    flex: 0 0 auto;

    padding:
        26px 26px
        20px;

    border-bottom:
        1px solid
        rgba(7, 60, 115, 0.10);

    background:
        rgba(
            255,
            253,
            249,
            0.96
        );

    -webkit-backdrop-filter:
        blur(14px);

    backdrop-filter:
        blur(14px);
}


.nancys-brand-cart-heading h2 {
    margin: 3px 0 0;

    color:
        var(--nancys-navy);

    font-size:
        clamp(
            26px,
            3vw,
            34px
        );

    line-height: 1;
}


.nancys-brand-cart-kicker {
    color:
        var(--nancys-blue);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 0.15em;
    text-transform: uppercase;
}


.nancys-brand-cart-close {
    width: 42px;
    height: 42px;

    border:
        1px solid
        rgba(7, 60, 115, 0.12);

    border-radius: 50%;

    background: #fff;

    color:
        var(--nancys-navy);

    font-size: 25px;
}


/* ---------------------------------------------------------
   Scroll area
   --------------------------------------------------------- */

.nancys-brand-cart-slot {
    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto;

    padding:
        22px 26px 30px;

    overscroll-behavior:
        contain;
}


/* Existing dark cart UI -> light shop UI */

.nancys-cart-ui {
    gap: 0;
}


.nancys-cart-ui__eyebrow {
    display: none;
}


/* ---------------------------------------------------------
   Empty cart
   --------------------------------------------------------- */

.nancys-cart-ui__empty {
    gap: 10px;

    padding:
        42px 12px;

    color:
        var(--nancys-muted);

    text-align: center;
}


.nancys-cart-ui__empty::before {
    content: "🛒";

    display: block;

    margin-bottom: 7px;

    font-size: 38px;
}


.nancys-cart-ui__empty strong {
    color:
        var(--nancys-navy);

    font-size: 20px;
}


.nancys-cart-ui__empty span {
    max-width: 300px;

    margin-inline: auto;

    font-size: 14px;
    line-height: 1.5;
}


.nancys-cart-ui__empty-link {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 46px;

    margin:
        12px auto 0;

    padding:
        0 20px;

    border-radius:
        999px;

    background:
        var(--nancys-navy);

    color: #fff;

    font-weight: 900;
    text-decoration: none;
}


/* ---------------------------------------------------------
   Cart line
   --------------------------------------------------------- */

.nancys-cart-ui__item {
    position: relative;

    display: grid;

    gap: 12px;

    margin-bottom: 14px;

    padding:
        16px;

    border:
        1px solid
        rgba(7, 60, 115, 0.10);

    border-radius:
        20px;

    background: #fff;

    box-shadow:
        0 8px 28px
        rgba(22, 43, 70, 0.055);
}


.nancys-cart-ui__item:first-of-type {
    padding-top: 16px;

    border-top:
        1px solid
        rgba(7, 60, 115, 0.10);
}


.nancys-cart-ui__item-top {
    display: grid;

    grid-template-columns:
        72px
        minmax(0, 1fr)
        auto;

    align-items: start;

    gap: 13px;
}


/* image gets injected by brand-v1.js */

.nancys-brand-cart-image {
    width: 72px;
    height: 72px;

    grid-column: 1;

    border-radius:
        14px;

    object-fit: cover;

    background:
        var(--nancys-cream);
}


.nancys-cart-ui__identity {
    grid-column: 2;

    gap: 3px;

    padding-top: 2px;
}


.nancys-cart-ui__product {
    color:
        var(--nancys-navy);

    font-size: 16px;
    font-weight: 900;

    line-height: 1.22;
}


.nancys-cart-ui__quantity {
    color:
        var(--nancys-muted);

    font-size: 13px;
}


.nancys-cart-ui__line-total {
    grid-column: 3;

    color:
        var(--nancys-navy);

    font-size: 16px;
    font-weight: 900;
}


.nancys-cart-ui__unit-price {
    margin-left: 85px;

    color:
        var(--nancys-muted);

    font-size: 12px;
}


/* ---------------------------------------------------------
   Existing package pills remain as functional fallback,
   but Cart V2 stepper becomes primary UI.
   --------------------------------------------------------- */

.nancys-cart-ui__packs {
    display: none !important;
}


.nancys-cart-ui__actions {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 14px;

    margin-top: 1px;
}


.nancys-cart-v2-stepper {
    display: inline-grid;

    grid-template-columns:
        38px
        minmax(74px, auto)
        38px;

    align-items: center;

    overflow: hidden;

    border:
        1px solid
        rgba(7, 60, 115, 0.15);

    border-radius:
        999px;

    background:
        #fff;
}


.nancys-cart-v2-stepper__button {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 0;

    background:
        transparent;

    color:
        var(--nancys-navy);

    cursor: pointer;

    font: inherit;
    font-size: 22px;
    font-weight: 700;

    line-height: 1;
}


.nancys-cart-v2-stepper__button:hover {
    background:
        rgba(7, 89, 168, 0.07);
}


.nancys-cart-v2-stepper__button:disabled {
    color:
        rgba(7, 60, 115, 0.28);

    cursor:
        default;
}


.nancys-cart-v2-stepper__value {
    min-width: 74px;

    padding:
        0 8px;

    color:
        var(--nancys-navy);

    font-size: 13px;
    font-weight: 900;

    text-align: center;
}


.nancys-cart-ui__remove {
    flex: 0 0 auto;

    color:
        #a84c4c;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}


.nancys-cart-ui__remove:hover {
    color:
        #7b2525;

    text-decoration: underline;
}


/* ---------------------------------------------------------
   Bonus
   --------------------------------------------------------- */

.nancys-cart-ui__bonus {
    gap: 8px;

    margin:
        14px 0;

    padding:
        15px 16px;

    border:
        1px solid
        rgba(243, 181, 27, 0.32);

    border-radius:
        16px;

    background:
        #fff7db;

    color:
        var(--nancys-ink);
}


.nancys-cart-ui__bonus-title {
    color:
        #8a6400;
}


.nancys-cart-ui__bonus-line {
    color:
        var(--nancys-ink);
}


/* ---------------------------------------------------------
   Loading / delivery / total
   --------------------------------------------------------- */

.nancys-cart-ui__loading,
.nancys-cart-ui__delivery-summary {
    margin-top: 15px;

    padding-top: 15px;

    border-top:
        1px solid
        rgba(7, 60, 115, 0.10);

    color:
        var(--nancys-muted);
}


.nancys-cart-ui__total {
    margin-top: 18px;

    padding-top: 18px;

    border-top:
        1px solid
        rgba(7, 60, 115, 0.13);
}


.nancys-cart-ui__total span {
    color:
        var(--nancys-muted);
}


.nancys-cart-ui__total strong {
    color:
        var(--nancys-navy);

    font-size: 28px;
}


/* ---------------------------------------------------------
   Sticky footer / checkout CTA
   --------------------------------------------------------- */

.nancys-brand-cart-footer {
    flex: 0 0 auto;

    padding:
        18px 26px
        max(
            22px,
            env(safe-area-inset-bottom)
        );

    border-top:
        1px solid
        rgba(7, 60, 115, 0.10);

    background:
        rgba(
            255,
            253,
            249,
            0.98
        );

    box-shadow:
        0 -14px 35px
        rgba(17, 42, 71, 0.07);

    -webkit-backdrop-filter:
        blur(16px);

    backdrop-filter:
        blur(16px);
}


.nancys-brand-cart-footer p {
    display: none;
}


.nancys-brand-cart-checkout {
    min-height: 54px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding:
        0 21px;

    border-radius:
        15px;

    background:
        linear-gradient(
            135deg,
            #0870c7,
            var(--nancys-navy)
        );

    color: #fff;

    box-shadow:
        0 12px 28px
        rgba(7, 60, 115, 0.22);

    font-size: 16px;
    font-weight: 900;

    text-decoration: none;
}


/* ---------------------------------------------------------
   V2 checkout text injected into CTA
   --------------------------------------------------------- */

.nancys-brand-cart-checkout
.nancys-cart-v2-checkout-total {
    margin-left: auto;
    margin-right: 10px;

    color:
        rgba(255,255,255,0.84);

    font-size: 14px;
}


/* ---------------------------------------------------------
   Desktop animation
   --------------------------------------------------------- */

@media (min-width: 761px) {

    .nancys-brand-cart-panel {
        animation:
            nancys-cart-v2-enter
            220ms ease-out;
    }


    @keyframes nancys-cart-v2-enter {

        from {
            transform:
                translateX(24px);

            opacity: 0.7;
        }

        to {
            transform:
                translateX(0);

            opacity: 1;
        }
    }

}


/* ---------------------------------------------------------
   Mobile = bottom/full-height sheet
   --------------------------------------------------------- */

@media (max-width: 760px) {

    .nancys-brand-cart-drawer {
        display: flex;

        align-items: flex-end;

        padding-top:
            max(
                24px,
                env(safe-area-inset-top)
            );
    }


    .nancys-brand-cart-panel {
        width: 100%;
        max-width: none;

        height:
            min(
                92dvh,
                880px
            );

        margin-top: auto;

        border-radius:
            26px 26px 0 0;

        box-shadow:
            0 -22px 60px
            rgba(11, 27, 49, 0.21);
    }


    .nancys-brand-cart-heading {
        padding:
            20px 18px
            16px;
    }


    .nancys-brand-cart-slot {
        padding:
            18px 16px
            24px;
    }


    .nancys-brand-cart-footer {
        padding:
            14px 16px
            max(
                16px,
                env(safe-area-inset-bottom)
            );
    }


    .nancys-cart-ui__item {
        padding:
            14px;
    }


    .nancys-cart-ui__item-top {
        grid-template-columns:
            62px
            minmax(0, 1fr);
    }


    .nancys-brand-cart-image {
        width: 62px;
        height: 62px;
    }


    .nancys-cart-ui__line-total {
        grid-column: 2;

        justify-self: start;

        margin-top: 5px;
    }


    .nancys-cart-ui__unit-price {
        margin-left: 75px;
    }


    .nancys-cart-ui__actions {
        align-items: center;
        flex-direction: row;
    }


    .nancys-cart-v2-stepper {
        grid-template-columns:
            40px
            minmax(70px, auto)
            40px;
    }


    .nancys-cart-v2-stepper__button {
        width: 40px;
        height: 40px;
    }

}


/* ---------------------------------------------------------
   Accessibility
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .nancys-brand-cart-panel {
        animation: none !important;
    }

}

/* =========================================================
   NANCYS CART UX V2.1.1
   Hide unit price in cart / checkout summary
   ========================================================= */

.nancys-cart-ui__unit-price {
    display: none !important;
}