/** Shopify CDN: Minification failed

Line 162:9 Cannot use type selector "--empty" directly after nesting selector "&"
Line 178:13 Cannot use type selector "__text" directly after nesting selector "&"
Line 185:13 Cannot use type selector "__background" directly after nesting selector "&"

**/
/**
 * P80 Cart Drawer Styles
 * Based on: snippets/header-actions.liquid styles (Horizon)
 *
 * Contains cart drawer styles for the p80-cart-drawer component.
 * These styles mirror Horizon's native cart drawer styles to ensure
 * consistent behavior, with hooks for future p80 customizations.
 *
 * Dependencies:
 * - base.css (Horizon) - Must be loaded first for CSS variables
 *
 * Usage:
 * Included via {% stylesheet 'p80-cart-drawer.css' %} in theme.liquid
 * or rendered within the p80-cart-drawer snippet.
 */

/* ==========================================================================
   Cart Drawer Base Styles
   ========================================================================== */

.p80-cart-drawer,
cart-drawer-component {
    --cart-drawer-padding: var(--padding-xl) var(--padding-lg);
    --cart-drawer-padding-desktop: var(--padding-xl) var(--padding-2xl);

    @media screen and (min-width: 750px) {
        margin-inline-end: calc(var(--gap-xs) * -1);
    }
}

/* ==========================================================================
   p80-cart-drawer-component — all descendant styles nested here
   ========================================================================== */

p80-cart-drawer-component {
    --cart-drawer-padding: var(--padding-xl) var(--padding-lg);
    --cart-drawer-padding-desktop: var(--padding-xl) var(--padding-2xl);

    @media screen and (min-width: 750px) {
        margin-inline-end: calc(var(--gap-xs) * -1);
    }

    /* ---- Empty state modifier ---- */
    &.cart-drawer--empty {
        .cart-drawer__content {
            text-align: center;
            min-height: auto;
        }

        .cart-drawer__heading {
            margin-bottom: var(--margin-md);
        }

        .cart-drawer__inner {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100dvh;
            margin-top: 0;
        }

        .cart-drawer__header {
            justify-content: right;
            border-bottom: none;
            padding-bottom: 0;
        }
    }

    &:not(:has(.cart-form)) .cart-drawer__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    /* ---- Dialog ---- */
    .cart-drawer__dialog {
        position: fixed;
        overflow: hidden;
        border-radius: 0;
        width: calc(100% - 2.8125rem);
        height: 100%;
        margin: 0 0 0 auto;
        padding: 0;
        border-left: var(--style-border-drawer);
        box-shadow: var(--shadow-drawer);
        background-color: var(--color-background);

        @media screen and (min-width: 750px) {
            width: 100%;
            max-width: 30rem;
        }

        /* Needed to ensure the drawer is full height */
        &:modal {
            max-height: 100dvh;
            overflow-y: hidden;
        }

        &[cart-summary-sticky='false'] {
            .cart-drawer__summary {
                position: static;
                mask-image: none;
            }

            .cart-drawer__items {
                overflow: unset;
            }
        }
    }

    /* ---- Inner & content ---- */
    .cart-drawer__inner {
        height: 100%;
        overflow: hidden;
    }

    .cart-drawer__content {
        height: calc(100% - var(--header-height));
        display: flex;
        flex-direction: column;
        padding: 0;
        background-color: var(--color-background);
        flex-grow: 1;
        overflow-y: auto;
    }

    /* ---- Header ---- */
    .cart-drawer__header {
        background-color: var(--color-background);
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: var(--cart-drawer-padding);
        border-bottom: var(--style-border-width) solid rgb(var(--color-light-line));
        position: sticky;
        top: 0;
        z-index: 1;

        @media screen and (min-width: 750px) {
            padding-block: 1.375rem;
            padding-inline: var(--cart-drawer-padding-desktop);
        }
    }

    .cart-drawer__heading {
        display: flex;
        align-items: center;
        gap: var(--gap-xs);
        margin-bottom: 0;

        &--empty {
            display: flex;
            justify-content: center;
        }

        .cart-bubble {
            width: fit-content;
            border-radius: var(--style-border-radius-buttons-primary);
            aspect-ratio: auto;
            padding: var(--cart-padding);

            &[data-maintain-ratio] {
                width: min(1lh, 22px);
                height: min(1lh, 22px);
            }

            &__text {
                color: var(--color-foreground);
                font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
                font-family: var(--font-paragraph--family);
                font-weight: var(--font-paragraph--weight);
            }

            &__background {
                background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
            }
        }
    }

    .cart-drawer__close-button {
        margin-right: calc(var(--padding-sm) * -1);
        top: var(--margin-sm);

        @media screen and (max-width: 749px) {
            top: var(--margin-2xs);
        }
    }

    /* ---- Items ---- */
    .cart-drawer__items {
        display: flex;
        flex-direction: column;
        padding-inline: 0;
        overflow-y: auto;
        height: 100%;

        &:not(:has(table)) {
            height: auto;
        }

        .cart-items__table-row {
            border-bottom: var(--style-border-width) solid rgb(var(--color-light-line));
            margin: 0;
            padding: var(--cart-drawer-padding);
            grid-template-columns: 106px minmax(0, 1fr) auto;

            &:has(+ .cart-items__nested-line) {
                border-bottom: none;
                margin-bottom: 0;
            }

            &:last-child {
                border-bottom: none;
                padding-block-end: var(--padding-xl);
                margin-block-end: 0;
            }

            &:has(+ .cart-items__table-row--addons) {
                border-bottom: none;
                margin-bottom: 0;
            }

            @media screen and (min-width: 750px) {
                &:last-child {
                    padding-block-end: var(--padding-2xl);
                }
            }
        }

        .cart-items__table-row--addons {
            grid-template-columns: 1fr;
            grid-template-areas: none;
            padding-block-start: 0;
            display: none;
        }

        .cart-items__table-row--need-assembly + .cart-items__table-row--addons {
            display: grid;
        }
    }

    /* ---- Summary (sticky footer) ---- */
    .cart-drawer__summary {
        --cart-drawer-summary-padding: var(--padding-xl) var(--padding-lg);

        position: sticky;
        bottom: 0;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--gap-lg);
        padding: var(--cart-drawer-summary-padding);
        margin-top: auto;
        background-color: var(--color-background);
        border-top: solid 1px rgb(var(--color-light-line));
        mask-image: unset;

        @media screen and (min-width: 750px) {
            --cart-drawer-summary-padding: var(--padding-2xl);
        }

        .cart-totals__total {
            color: rgb(var(--color-dark));
        }

        .cart-totals__tax-note {
            color: rgb(var(--color-grey));
            font-size: var(--font-size--sm);
        }

        .cart-totals:not(:has(.cart-actions)) {
            padding-block-start: 0;
        }

        .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
            border-block-start: var(--style-border-width) solid var(--color-border);
            padding-block-start: var(--padding-2xl);
        }

        .cart-note {
            @media screen and (min-width: 750px) {
                margin-block-start: var(--margin-3xs);
            }
        }
    }

    /* ---- Cart actions ---- */
    .cart-actions summary {
        padding-inline: 0;
        padding-block: var(--padding-sm);
        line-height: 1.2;
        min-height: var(--minimum-touch-target);
    }

    /* ---- Cart icon / bubble badge ---- */
    .header-actions__cart-icon {
        --cart-bubble-size: 1rem;
        --cart-bubble-top: -5px;
        --cart-bubble-right: -10px;

        position: relative;

        .cart-bubble {
            position: absolute;
            width: var(--cart-bubble-size, 20px);
            top: var(--cart-bubble-top);
            right: var(--cart-bubble-right);
        }

        .cart-bubble__text {
            font-family: var(--font-paragraph--family);
            font-weight: var(--font-paragraph--weight);
        }

        &.header-actions__cart-icon--has-cart svg {
            /* Create donut mask where the cart bubble sits */
            mask: radial-gradient(
                calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right))
                    var(--cart-bubble-top),
                transparent 45.45%,
                #fff 45.45%,
                #fff 100%
            );
        }

        @media screen and (min-width: 750px) {
            &.header-actions__cart-icon--text .cart-bubble {
                position: relative;
                top: 0;
            }
        }
    }

    .cart-bubble--animating {
        .cart-bubble__background {
            animation: grow var(--animation-speed) var(--animation-easing);
        }

        .cart-bubble__text {
            --start-y: -1em;
            --start-opacity: 1;

            /* Set initial transform state before animation starts */
            transform: translate(0, var(--start-y, -1em));
            opacity: var(--start-opacity, 1);
            animation: move-and-fade var(--animation-speed) var(--animation-easing);
        }
    }

    cart-icon:has(.cart-bubble__text-count:empty) {
        --cart-bubble-size: 10px;
        --cart-bubble-top: 9px;
        --cart-bubble-right: 9px;

        .svg-wrapper {
            --cart-bubble-top: 4px;
            --cart-bubble-right: 4px;
        }

        @media screen and (min-width: 750px) {
            &.header-actions__cart-icon--text {
                --cart-bubble-right: 2.5px;
            }
        }
    }

    /* ---- View transitions ---- */
    @media screen and (prefers-reduced-motion: no-preference) {
        html:active-view-transition-type(empty-cart-drawer) & {
            .cart-drawer__close-button {
                view-transition-name: cart-drawer-close-button;
            }

            .cart-items-component {
                view-transition-name: cart-drawer-content;
            }
        }
    }

    :active-view-transition {
        & .cart-drawer__header,
        & .cart-drawer__content {
            background: transparent;
        }
    }
}

/* ==========================================================================
   Cart Drawer Dialog (class / legacy custom-element versions)
   ========================================================================== */

.cart-drawer__dialog {
    position: fixed;
    overflow: hidden;
    border-radius: 0;
    width: calc(100% - 45px);
    height: 100%;
    margin: 0 0 0 auto;
    padding: 0;
    border-left: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);

    @media screen and (min-width: 750px) {
        width: 100%;
        max-width: 480px;
    }
}

/* Needed to ensure the drawer is full height */
.cart-drawer__dialog:modal {
    max-height: 100dvh;
    overflow-y: hidden;
}

/* ==========================================================================
   Cart Drawer Inner & Content
   ========================================================================== */

.cart-drawer__inner {
    height: 100%;
    overflow: hidden;
}

.cart-drawer__content {
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    overflow-y: auto;
}

/* ==========================================================================
   Cart Drawer Header
   ========================================================================== */

.cart-drawer__heading {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin-bottom: 0;
}

.cart-drawer__close-button {
    margin-right: calc(var(--padding-sm) * -1);
    top: var(--margin-sm);

    @media screen and (max-width: 749px) {
        top: var(--margin-2xs);
    }
}

/* ==========================================================================
   Empty Cart State
   ========================================================================== */

.cart-drawer--empty .cart-drawer__content {
    text-align: center;
    min-height: auto;
}

.cart-drawer--empty .cart-drawer__heading {
    margin-bottom: var(--margin-md);
}

.cart-drawer--empty .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    margin-top: 0;
}

.cart-drawer:not(:has(.cart-form)) .cart-drawer__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Note: .cart-drawer__items styles previously here were only ever defined
   for p80-cart-drawer-component — they now live exclusively in that block above. */

/* ==========================================================================
   Cart Drawer Summary (Sticky Footer)
   ========================================================================== */

.cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-lg);

    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-lg);
    padding: var(--cart-drawer-summary-padding);
    margin-top: auto;
    background-color: var(--color-background);
    mask-image: unset;
    border-top: solid 1px rgb(var(--color-light-line));

    .cart__summary-totals {
        border-top: 0;

        &:not(:has(.cart__subtotal-container:empty)) {
            border-block-start: var(--style-border-width) solid var(--color-border);
            padding-block-start: var(--padding-2xl);
        }
    }

    .cart-totals {
        &:not(:has(.cart-actions)) {
            margin: 0;
            padding: 0;
            border: 0;
        }
    }

    @media screen and (min-width: 750px) {
        --cart-drawer-summary-padding: var(--padding-2xl);

        .cart-note {
            margin-block-start: var(--margin-3xs);
        }
    }
}

.p80-cart-drawer__upsells + .cart-drawer__summary {
    margin-top: 0;
}

.cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
}

.cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow: unset;
}

/* ==========================================================================
   Cart Actions
   ========================================================================== */

.cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
}

.cart-drawer__heading--empty {
    display: flex;
    justify-content: center;
}

/* ==========================================================================
   Cart Drawer Header (Sticky)
   ========================================================================== */

.cart-drawer__header {
    background-color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--cart-drawer-padding);
    border-bottom: var(--style-border-width) solid rgb(var(--color-light-line));
    position: sticky;
    top: 0;
    z-index: 1;

    @media screen and (min-width: 750px) {
        padding-block: 1.375rem;
        padding-inline: var(--cart-drawer-padding-desktop);
    }
}

.cart-drawer--empty .cart-drawer__header {
    justify-content: right;
    border-bottom: none;
    padding-bottom: 0;
}

/* ==========================================================================
   Cart Bubble (Item Count Badge)
   ========================================================================== */

.header-actions__cart-icon {
    --cart-bubble-size: 1rem;
    --cart-bubble-top: -5px;
    --cart-bubble-right: -10px;

    position: relative;
    line-height: 1;
}

.header-actions__cart-icon .cart-bubble {
    position: absolute;
    width: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
}

header-actions .header-actions__action {
    cursor: pointer;
}

@media screen and (min-width: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
        position: relative;
        top: 0;
    }

    header-actions .header-actions__action {
        width: 2.75rem;
        height: 2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    header-actions .account-button.header-actions__action {
        margin-inline-start: calc(var(--gap-sm) * -1);
    }

    header-actions .cart-drawer {
        margin-inline-end: calc(var(--gap-sm) * -1);
    }
}

/* ==========================================================================
   Account Button — shadow DOM icon centering
   ========================================================================== */

header-actions shopify-account {
    width: 44px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

header-actions shopify-account::part(signed-out-avatar) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.cart-drawer__heading .cart-bubble {
    width: fit-content;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
}

.cart-drawer__heading .cart-bubble[data-maintain-ratio] {
    width: min(1lh, 22px);
    height: min(1lh, 22px);
}

.header-actions__cart-icon .cart-bubble__text,
.cart-drawer__heading .cart-bubble__text {
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
}

.header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    /* Create donut mask where the cart bubble sits */
    mask: radial-gradient(
        calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right))
            var(--cart-bubble-top),
        transparent 45.45%,
        #fff 45.45%,
        #fff 100%
    );
}

.cart-drawer__heading .cart-bubble__background {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
}

.cart-drawer__heading .cart-bubble__text {
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
}

.cart-bubble--animating .cart-bubble__background {
    animation: grow var(--animation-speed) var(--animation-easing);
}

.cart-bubble--animating .cart-bubble__text {
    --start-y: -1em;
    --start-opacity: 1;

    /* Set initial transform state before animation starts */
    transform: translate(0, var(--start-y, -1em));
    opacity: var(--start-opacity, 1);
    animation: move-and-fade var(--animation-speed) var(--animation-easing);
}

cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
        --cart-bubble-top: 4px;
        --cart-bubble-right: 4px;
    }
}

@media screen and (min-width: 750px) {
    cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
        --cart-bubble-right: 2.5px;
    }
}

/* ==========================================================================
   View Transitions (Animation)
   ========================================================================== */

@media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
        .cart-drawer__close-button {
            view-transition-name: cart-drawer-close-button;
        }

        .cart-items-component {
            view-transition-name: cart-drawer-content;
        }
    }
}

:active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
        background: transparent;
    }
}

::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing)
        forwards;
}

::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing)
        forwards;
}

@keyframes cart-contents-old {
    to {
        scale: 0.92;
        opacity: 0;
    }
}

@keyframes cart-contents-new {
    from {
        scale: 1.05;
        translate: 0 128px;
        filter: blur(1px);
        opacity: 0;
    }
}

/* ==========================================================================
   Text-style Cart Icon
   ========================================================================== */

@media screen and (min-width: 750px) {
    .header-actions__cart-icon--text {
        display: flex;
        align-items: center;
        gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
        margin-inline-start: 0;
    }
}

/* ==========================================================================
    P80 Customization Hooks
    ========================================================================== */
.p80-cart-drawer__upsells {
    --cart-drawer-summary-padding: var(--padding-lg);
    --padding-block-start: 0;
    --padding-block-end: 0;
    --padding-inline-start: 0;
    --padding-inline-end: 0;
    --gap: 0.75rem;
    --resource-list-column-gap-desktop: 1rem;
    --resource-list-row-gap-desktop: 1rem;
    --resource-list-columns-mobile: repeat(auto-fill, minmax(9.25rem, 1fr));
    --border-radius: 0;

    padding: var(--cart-drawer-summary-padding);
    padding-bottom: 0;
}

.cart-drawer {
    .cart-drawer__heading.h3 {
        color: rgb(var(--color-dark));
    }

    .cart-items__media-container {
        padding: var(--gap-xs);
        background-color: rgb(var(--color-light-background));
    }

    .cart-items__media-image {
        width: 100%;
        height: 100%;
        display: block;
        aspect-ratio: 1;
        object-fit: contain;
        mix-blend-mode: darken;
    }

    .cart-items__quantity,
    .cart-items__details > * + * {
        margin-block-start: var(--margin-lg);
    }
}

@media screen and (min-width: 750px) {
    .p80-cart-drawer__upsells {
        --cart-drawer-summary-padding: var(--padding-2xl);
    }
}