/* EM Popup Cart — the slide-out cart drawer.
 *
 * LOOK: deliberately Flatsome's own off-canvas mini cart, as EarthyMamma has
 * it — the figures below are taken from flatsome.css / flatsome-shop.css
 * (3.20.4): a 360px panel in 95% white with a 10px shadow over a .6 dark
 * overlay, 30px padding, the centred uppercase title over a 30×3 divider,
 * 60px square thumbnails on 80px rows split by #ececec rules, the grey
 * "1 × $8.99" line, the 24px circled ×, and a white footer with the subtotal
 * between rules over full-width primary / secondary buttons. What this plugin
 * adds is motion, not a new look.
 *
 * Every rule is scoped under #empc-drawer. Flatsome styles bare button, input,
 * ul/li and h2 elements generously, and an ID outranks all of it without
 * !important. Colours follow Flatsome's custom properties (--fs-color-primary
 * #333, --fs-color-secondary the pink #fc8498 on EarthyMamma) with plain
 * fallbacks; colours chosen on the settings page arrive inline and win.
 */

#empc-drawer {
    --empc-width: 360px;
    --empc-duration: 450ms;
    --empc-overlay: .6;
    --empc-panel-bg: rgba(255, 255, 255, .95);
    --empc-footer-bg: #fff;
    --empc-checkout-bg: var(--fs-color-secondary, #333);
    --empc-view-cart-bg: var(--fs-color-primary, #333);
    --empc-accent: var(--empc-checkout-bg);
    --empc-text: var(--fs-color-base, #444);
    --empc-heading: #333;
    --empc-link: var(--fs-experimental-link-color, #333);
    --empc-link-hover: var(--fs-experimental-link-color-hover, #111);
    --empc-line: #ececec;
    /* Out: decelerate into place. In (closing): accelerate away. Spring: a
       small overshoot for the playful bits. */
    --empc-ease: cubic-bezier(.22, 1, .36, 1);
    --empc-ease-in: cubic-bezier(.55, 0, .75, .2);
    --empc-spring: cubic-bezier(.34, 1.56, .64, 1);
    /* +1 for a drawer on the right, -1 on the left: which way things travel. */
    --empc-dir: 1;

    position: fixed;
    inset: 0;
    /* Above Flatsome's header (1001), Magnific Popup (1045), the admin bar
       (99999) and the EM Quick Options modal (100000), so a drawer opened by
       a quick add lands on top of the modal that triggered it. */
    z-index: 100010;
    visibility: hidden;
    pointer-events: none;
    /* Stay visible while the closing transition plays, then hide. */
    transition: visibility 0s linear var(--empc-duration);
}

#empc-drawer.empc-drawer--left {
    --empc-dir: -1;
}

#empc-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

/* ---------- Overlay (Flatsome's .mfp-bg: #0b0b0b at .6) ---------- */

#empc-drawer .empc-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(11, 11, 11, var(--empc-overlay));
    opacity: 0;
    cursor: pointer;
    transition: opacity var(--empc-duration) ease;
}

#empc-drawer.is-open .empc-drawer__overlay {
    opacity: 1;
}

/* ---------- Panel ---------- */

#empc-drawer .empc-drawer__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: min(var(--empc-width), calc(100vw - 40px));
    display: flex;
    flex-direction: column;
    background: var(--empc-panel-bg);
    color: var(--empc-text);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
    outline: none;
    overflow: hidden;
    transform: translate3d(calc(100% * var(--empc-dir)), 0, 0);
    /* Closing uses the accelerating curve; .is-open swaps in the decelerating
       one, since a transition runs on the destination state's timing. */
    transition: transform var(--empc-duration) var(--empc-ease-in),
                opacity var(--empc-duration) var(--empc-ease-in);
    will-change: transform;
}

#empc-drawer.empc-drawer--left .empc-drawer__panel {
    right: auto;
    left: 0;
}

#empc-drawer.is-open .empc-drawer__panel {
    transform: none;
    transition-timing-function: var(--empc-ease);
}

/* "Fade in with a short drift": the panel starts in place but transparent,
   a little off to the side and a hair small. */
#empc-drawer.empc-anim--fade .empc-drawer__panel {
    opacity: 0;
    transform: translate3d(calc(36px * var(--empc-dir)), 0, 0) scale(.985);
}

#empc-drawer.empc-anim--fade.is-open .empc-drawer__panel {
    opacity: 1;
    transform: none;
}

/* Something was added while the drawer was already open: a small shove
   toward the page, so the change is noticed without a re-open. */
#empc-drawer .empc-drawer__panel.is-nudged {
    animation: empc-nudge .55s var(--empc-ease);
}

@keyframes empc-nudge {
    0% { transform: none; }
    35% { transform: translate3d(calc(-14px * var(--empc-dir)), 0, 0); }
    100% { transform: none; }
}

/* ---------- Close button (the thin × top right, as Flatsome's) ---------- */

#empc-drawer .empc-drawer__close {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: var(--empc-heading);
    opacity: .75;
    line-height: 1;
    cursor: pointer;
    transition: opacity .2s ease, transform .35s var(--empc-spring);
}

#empc-drawer .empc-drawer__close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

#empc-drawer .empc-drawer__close:focus-visible,
#empc-drawer .empc-qty__btn:focus-visible,
#empc-drawer .empc-item__remove:focus-visible,
#empc-drawer .empc-btn:focus-visible {
    outline: 2px solid var(--empc-accent);
    outline-offset: 2px;
}

/* ---------- Busy indicator (a thin bar across the top) ---------- */

#empc-drawer .empc-drawer__progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4;
    height: 3px;
    overflow: hidden;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}

#empc-drawer .empc-drawer__progress::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    background: var(--empc-accent);
    transform: translateX(-100%);
}

#empc-drawer.is-loading .empc-drawer__progress {
    opacity: 1;
}

#empc-drawer.is-loading .empc-drawer__progress::before {
    animation: empc-progress 1.1s ease-in-out infinite;
}

@keyframes empc-progress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(260%); }
}

/* ---------- Notices ---------- */

#empc-drawer .empc-drawer__notice {
    position: absolute;
    top: 90px;
    left: 20px;
    right: 20px;
    z-index: 3;
    margin: 0;
    padding: 10px 14px;
    border-left: 3px solid #b20000;
    background: #fff;
    color: #b20000;
    font-size: .9em;
    line-height: 1.4;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
    animation: empc-drop .35s var(--empc-ease) both;
}

#empc-drawer .empc-drawer__notice[hidden] {
    display: none;
}

@keyframes empc-drop {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: none; }
}

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

#empc-drawer .empc-cart {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

/* Title: Flatsome's .cart-popup-title — heading font, uppercase, 1.125em,
   centred over its .is-divider (30 × 3px, 10% black, 1em margins). */
#empc-drawer .empc-cart__header {
    flex: 0 0 auto;
    padding: 30px 50px 0;
    text-align: center;
}

#empc-drawer .empc-cart__title {
    margin: 0;
    padding: 0;
    color: var(--empc-heading);
    font-size: 1.125em;
    font-weight: inherit;
    line-height: 1.05;
    letter-spacing: .05em;
    text-transform: uppercase;
}

#empc-drawer .empc-cart__header::after {
    content: "";
    display: block;
    width: 30px;
    height: 3px;
    margin: 1em auto;
    background: rgba(0, 0, 0, .1);
}

#empc-drawer .empc-cart__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--empc-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    vertical-align: 2px;
}

#empc-drawer .empc-cart__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 30px;
}

#empc-drawer .empc-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---------- Items (Flatsome's ul.product_list_widget li) ---------- */

#empc-drawer .empc-item {
    margin: 0;
    padding: 0;
    list-style: none;
    /* Visible, so the landing's squash and ring can spill into the list's
       30px side padding; only a collapsing line clips (.is-removing). */
    overflow: visible;
    /* Removal: the script pins the height, then .is-removing collapses it. */
    transition: height .34s var(--empc-ease), opacity .24s ease, transform .34s var(--empc-ease);
}

#empc-drawer .empc-item + .empc-item .empc-item__inner {
    border-top: 1px solid var(--empc-line);
}

#empc-drawer .empc-item__inner {
    position: relative;
    isolation: isolate;
    min-height: 80px;
    padding: 10px 30px 5px 75px;
    line-height: 1.33;
    transition: opacity .2s ease;
}

/* Tint layer for the "just added" highlight. Behind the content, and inside
   the item, whose overflow is hidden for the removal collapse. */
#empc-drawer .empc-item__inner::before {
    content: "";
    position: absolute;
    inset: 2px -6px;
    z-index: -1;
    background: var(--empc-accent);
    opacity: 0;
    pointer-events: none;
}

#empc-drawer .empc-item__thumb {
    position: absolute;
    top: 10px;
    left: 0;
    width: 60px;
    height: 60px;
}

#empc-drawer .empc-item__thumb a {
    display: block;
}

#empc-drawer .empc-item__thumb img {
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 0 5px;
    object-fit: cover;
    object-position: 50% 50%;
    border-radius: 0;
    box-shadow: none;
}

/* No images: the row closes up, as Flatsome's would without them. */
#empc-drawer .empc-cart.no-thumbnails .empc-item__inner {
    min-height: 0;
    padding-left: 0;
}

#empc-drawer .empc-item__details {
    min-width: 0;
}

#empc-drawer .empc-item__name {
    margin-bottom: 5px;
    line-height: 1.3;
}

#empc-drawer .empc-item__name a {
    display: block;
    overflow: hidden;
    padding: 0;
    color: var(--empc-link);
    text-decoration: none;
    text-overflow: ellipsis;
}

#empc-drawer .empc-item__name a:hover {
    color: var(--empc-link-hover);
}

#empc-drawer .empc-item__meta {
    font-size: .8em;
}

#empc-drawer .empc-item__meta dl {
    margin: 0;
    padding: 0;
    border: 0;
}

#empc-drawer .empc-item__meta dt,
#empc-drawer .empc-item__meta dd {
    display: inline;
    margin: 0;
    padding: 0;
    float: none;
}

#empc-drawer .empc-item__meta dd::after {
    content: "";
    display: block;
}

#empc-drawer .empc-item__meta dd p {
    display: inline;
    margin: 0;
}

/* "1 × $8.99": .85em, 60% opacity, the price bold as Flatsome's .amount. */
#empc-drawer .empc-item__row .quantity {
    display: block;
    margin-top: 3px;
    font-size: .85em;
    opacity: .6;
}

#empc-drawer .empc-item .amount {
    color: #111;
    font-weight: 700;
    white-space: nowrap;
}

/* With quantity controls switched on: the stepper and the line total. */
#empc-drawer .empc-item__row--controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    font-size: .9em;
}

#empc-drawer .empc-item__each {
    margin-top: 2px;
    font-size: .8em;
    opacity: .6;
}

#empc-drawer .empc-item__fixed-qty {
    font-size: .85em;
    opacity: .6;
}

/* The circled × — Flatsome's a.remove: 24px, 2px border, #ccc, bold 15px. */
#empc-drawer .empc-item__remove {
    position: absolute;
    top: 10px;
    right: 0;
    display: block;
    width: 24px;
    height: 24px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 2px solid currentColor;
    border-radius: 100%;
    background: transparent;
    box-shadow: none;
    color: #ccc;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: color .2s ease, transform .3s var(--empc-spring);
}

#empc-drawer .empc-item__remove:hover {
    color: var(--empc-link-hover);
    transform: rotate(90deg);
}

/* ---------- Quantity stepper (off by default; Flatsome-like box) ---------- */

#empc-drawer .empc-qty {
    display: inline-flex;
    align-items: stretch;
    height: 30px;
    border: 1px solid #ddd;
    background: #fff;
}

#empc-drawer .empc-qty__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #f9f9f9;
    box-shadow: none;
    color: var(--empc-heading);
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease;
}

#empc-drawer .empc-qty__btn:hover:not(:disabled) {
    background: #eee;
}

#empc-drawer .empc-qty__btn:disabled {
    color: #ccc;
    cursor: default;
}

#empc-drawer .empc-qty__btn svg {
    transition: transform .15s ease;
}

#empc-drawer .empc-qty__btn:active:not(:disabled) svg {
    transform: scale(.8);
}

#empc-drawer .empc-qty__input {
    width: 34px;
    height: 28px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    color: var(--empc-heading);
    font-size: 14px;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

#empc-drawer .empc-qty__input::-webkit-outer-spin-button,
#empc-drawer .empc-qty__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#empc-drawer .empc-qty__input:focus {
    outline: none;
    box-shadow: inset 0 -2px 0 var(--empc-accent);
}

/* ---------- Footer (Flatsome's sticky .ux-mini-cart-footer) ---------- */

#empc-drawer .empc-cart__footer {
    flex: 0 0 auto;
    padding: 10px 30px 30px;
    border-top: 1px solid #f1f1f1;
    background: var(--empc-footer-bg);
}

/* Subtotal between rules: none above (first in the footer), 2px below. */
#empc-drawer .empc-subtotal {
    display: flex;
    gap: 15px;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 .5em;
    padding: 10px 0;
    border-bottom: 2px solid var(--empc-line);
    color: var(--empc-heading);
}

#empc-drawer .empc-subtotal__label {
    font-weight: 700;
}

#empc-drawer .empc-subtotal__amount {
    display: inline-block;
}

#empc-drawer .empc-subtotal__amount .amount {
    color: #111;
    font-weight: 700;
}

#empc-drawer .empc-cart__note {
    margin: 0 0 .5em;
    font-size: .85em;
    opacity: .6;
    text-align: center;
}

/* Buttons: Flatsome's .button — uppercase, bolder, .03em, 2.5em tall,
   square, full width with .5em above each. */
#empc-drawer .empc-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.5em;
    margin: .5em 0 0;
    padding: 0 1.2em;
    border: 0;
    border-radius: 0;
    color: #fff;
    font-size: .97em;
    font-weight: bolder;
    letter-spacing: .03em;
    line-height: 2.4em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: box-shadow .3s ease, opacity .3s ease, filter .2s ease;
}

#empc-drawer .empc-btn:hover {
    color: #fff;
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .2);
}

#empc-drawer .empc-btn--cart {
    background: var(--empc-view-cart-bg);
}

#empc-drawer .empc-btn--checkout {
    background: var(--empc-checkout-bg);
}

#empc-drawer .empc-btn--outline {
    display: inline-flex;
    width: auto;
    border: 2px solid var(--empc-heading);
    background: transparent;
    color: var(--empc-heading);
}

#empc-drawer .empc-btn--outline:hover {
    background: var(--empc-heading);
    box-shadow: none;
    color: #fff;
}

/* ---------- Empty (Flatsome's .ux-mini-cart-empty) ---------- */

#empc-drawer .empc-cart__empty {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px 30px 60px;
    text-align: center;
    animation: empc-rise .5s var(--empc-ease) both;
}

#empc-drawer .empc-cart__empty-icon {
    color: rgba(0, 0, 0, .15);
    animation: empc-sway 3.2s ease-in-out .6s infinite;
}

#empc-drawer .empc-cart__empty-message {
    margin: 0;
}

@keyframes empc-sway {
    0%, 100% { transform: rotate(0); }
    50% { transform: rotate(-6deg) translateY(-2px); }
}

/* ---------- Opening choreography ----------
   .is-entering is on the drawer for the length of the open. Items cascade in
   behind the panel, then the footer rises into place. When the cart is
   replaced mid-open, the script sets --empc-enter-elapsed so the fresh
   elements continue the cascade instead of starting it again. */

#empc-drawer.empc-has-stagger.is-entering .empc-item {
    animation: empc-item-in .5s var(--empc-ease) both;
    animation-delay: calc(var(--i, 0) * 55ms + var(--empc-duration) * .35 - var(--empc-enter-elapsed, 0ms));
}

#empc-drawer.empc-has-stagger.is-entering .empc-cart__header {
    animation: empc-rise .45s var(--empc-ease) both;
    animation-delay: calc(var(--empc-duration) * .25 - var(--empc-enter-elapsed, 0ms));
}

#empc-drawer.empc-has-stagger.is-entering .empc-cart__footer {
    animation: empc-rise-up .5s var(--empc-ease) both;
    animation-delay: calc(var(--empc-duration) * .5 - var(--empc-enter-elapsed, 0ms));
}

@keyframes empc-item-in {
    from { opacity: 0; transform: translate3d(calc(28px * var(--empc-dir)), 0, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes empc-rise {
    from { opacity: 0; transform: translate3d(0, -8px, 0); }
    to { opacity: 1; transform: none; }
}

@keyframes empc-rise-up {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to { opacity: 1; transform: none; }
}

/* ---------- Change feedback ---------- */

/* While the drawer is opening, the cascade above outranks the slide-in below
   on purpose: the added line enters with the others rather than on its own
   timeline, and is picked out by the tint and the landing, which are on
   other elements and run either way.

   Just added: slides in, tint fades out. A second fragment refresh can land
   mid-animation (EM Quick Options applies fragments, then asks for them
   again) and would restart it; the script sets --empc-elapsed to a negative
   delay on the fresh element so it carries on where it was. */
#empc-drawer .empc-item.is-new {
    animation: empc-item-in .55s var(--empc-ease) both;
    animation-delay: var(--empc-elapsed, 0s);
}

#empc-drawer .empc-item.is-new .empc-item__inner::before {
    animation: empc-flash 1.8s ease-out both;
    animation-delay: var(--empc-elapsed, 0s);
}

/* Quantity went up on an item already in the cart. */
#empc-drawer .empc-item.is-bumped .empc-item__inner::before {
    animation: empc-flash 1.4s ease-out both;
    animation-delay: var(--empc-elapsed, 0s);
}

#empc-drawer .empc-item.is-bumped .empc-qty__input,
#empc-drawer .empc-item.is-bumped .quantity {
    animation: empc-tick .45s var(--empc-spring) both;
    animation-delay: var(--empc-elapsed, 0s);
}

@keyframes empc-flash {
    0%, 30% { opacity: .1; }
    100% { opacity: 0; }
}

@keyframes empc-tick {
    0% { transform: translateY(-7px); opacity: .2; }
    100% { transform: none; opacity: 1; }
}

#empc-drawer .empc-subtotal__amount.is-changed,
#empc-drawer .empc-cart__count.is-changed {
    animation: empc-tick .5s var(--empc-spring) both;
}

/* The number in the stepper as − or + is pressed. */
#empc-drawer .empc-qty__input.is-ticked {
    animation: empc-tick .3s var(--empc-spring) both;
}

/* ---------- Landing ----------
   While the product's image is flying in, the line's own thumbnail waits
   empty (.is-awaiting); when it arrives the thumbnail takes the hit
   (.is-landed): a squash and settle, and a ring rippling out. */

#empc-drawer .empc-item.is-awaiting .empc-item__thumb img {
    opacity: 0;
}

#empc-drawer .empc-item.is-landed .empc-item__thumb {
    animation: empc-land .6s var(--empc-spring) both;
    animation-delay: var(--empc-land-elapsed, 0s);
}

#empc-drawer .empc-item.is-landed .empc-item__thumb::after {
    content: "";
    position: absolute;
    inset: -3px;
    border: 2px solid var(--empc-accent);
    opacity: 0;
    pointer-events: none;
    animation: empc-ring .75s ease-out both;
    animation-delay: var(--empc-land-elapsed, 0s);
}

@keyframes empc-land {
    0% { transform: scale(1.14); }
    35% { transform: scale(.9, .94); }
    65% { transform: scale(1.04); }
    100% { transform: none; }
}

@keyframes empc-ring {
    0% { opacity: .9; transform: scale(.9); }
    100% { opacity: 0; transform: scale(1.45); }
}

/* Waiting on the server for this item. */
#empc-drawer .empc-item.is-busy .empc-item__inner {
    opacity: .55;
}

#empc-drawer .empc-item.is-busy button,
#empc-drawer .empc-item.is-busy input {
    pointer-events: none;
}

/* Removing: the script pins height first, so this collapses smoothly. */
#empc-drawer .empc-item.is-removing {
    overflow: hidden;
    height: 0 !important;
    opacity: 0;
    transform: translate3d(calc(40px * var(--empc-dir)), 0, 0);
}

/* ---------- Outside the drawer ---------- */

/* Header cart icon bounce. */
.empc-bump {
    animation: empc-bump .7s var(--empc-spring, cubic-bezier(.34, 1.56, .64, 1));
}

@keyframes empc-bump {
    0% { transform: scale(1); }
    30% { transform: scale(1.28); }
    55% { transform: scale(.94); }
    80% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

/* The product image on its way to the cart. The script places it over the
   product's own image, lifts it, and flies it; this only makes it inert. */
.empc-fly {
    position: fixed;
    z-index: 100020;
    margin: 0;
    padding: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

.empc-fly img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    object-fit: cover;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}

/* The celebration canvas: over everything, never in the way. */
.empc-celebration {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100030;
    display: none;
    pointer-events: none;
}

/* Scroll lock while open. --empc-scrollbar keeps the page from shifting
   sideways when the scrollbar disappears. */
html.empc-locked,
html.empc-locked body {
    overflow: hidden !important;
}

html.empc-locked body {
    padding-right: var(--empc-scrollbar, 0);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    #empc-drawer,
    #empc-drawer *,
    #empc-drawer *::before,
    #empc-drawer *::after,
    .empc-bump {
        animation-duration: 1ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        transition-delay: 0s !important;
    }

    .empc-fly,
    .empc-celebration {
        display: none !important;
    }

    #empc-drawer .empc-item.is-awaiting .empc-item__thumb img {
        opacity: 1;
    }
}

/* ---------- Small screens ---------- */

@media (max-width: 480px) {
    #empc-drawer .empc-cart__header {
        padding: 24px 46px 0;
    }

    #empc-drawer .empc-cart__body {
        padding: 0 20px;
    }

    #empc-drawer .empc-cart__footer {
        padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    }
}