/** Shopify CDN: Minification failed

Line 139:25 Expected identifier but found whitespace
Line 140:16 Unexpected "{"
Line 141:24 Expected ":"
Line 323:4 "jusitfy-content" is not a known CSS property
Line 406:10 Expected identifier but found whitespace
Line 407:12 Unexpected "{"
Line 408:20 Expected ":"

**/
/*
  The panel used to carry a cream #edddc33d wash over its whole height, so the
  band behind "your bag is empty" was a third colour between the white rewards
  bar above it and the tinted Popular Picks below. White here means the empty
  bag reads as one white column with a single tinted block at the bottom —
  the same arrangement the cart with items already has.
*/
.my-custom-cart-drawer.drawer--is-open.is-empty .drawer__cart-empty.appear-animation.appear-delay-2 {
    background: var(--color-white-100, #FFF);
    height: 100%;
    display: flex;
    align-items: stretch;
}

.my-custom-cart-drawer.drawer--is-open.is-empty .drawer__scrollable {
    display: flex;
}

.drawer__cart-empty .drawer__scrollable {
    padding-inline: 0;
}

a.cart--empty--btn {
    border-radius: var(--global-buttons-radius, 4px);
    background: var(--color-black-100, #1D1D1D);
    display: flex;
    /*
      327px was a fixed width. The drawer is the full width of the viewport on
      a phone, so on anything narrower than 375px the button ran off the edge
      of it. Same size as before on every screen that fits it.
    */
    width: 100%;
    max-width: 327px;
    min-height: 48px;
    padding: 8px 40px;
    justify-content: center;
    align-items: center;
    color: var(--color-white-100, #FFF);
    text-align: center;
    font-family: var(--global-font-font-button, Montserrat);
    font-size: var(--global-font-size-mobile-button, 14px);
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: var(--global-buttons-letter-spacing, 2px);
    text-transform: uppercase;
    color: white !important;
    text-align: center;
    margin: 0px auto;
    margin-top: 24px;
    position: relative;
}

.cart__empty--subtext {
    color: var(--color-black-100, #1D1D1D);
    text-align: center;
    font-family: var(--global-font-font-body, Montserrat);
    font-size: var(--global-font-size-mobile-base-sm, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: 160%;

}

span.cart__numbers {
    color: var(--color-black-60, rgba(29, 29, 29, 0.60));
    font-family: var(--global-font-font-body, Montserrat);
    font-size: var(--global-font-size-mobile-base-sm, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
}

.cart__empty--header {
    color: var(--color-black-100, #1D1D1D);
    font-family: var(--global-font-font-heading, Montserrat);
    font-size: var(--global-font-size-mobile-H2, 24px);
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: -0.72px;
    text-align: center;
    margin-top: 14px;
}

.svg__icon--m {
    position: absolute;
    right: 20px;
}


.my-custom-cart-drawer .drawer__scrollable {
    padding-inline: 0;
    padding-top: 0;
    margin-inline: 0;
}


@media only screen and (min-width:769px) {
    .cart__page {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
    }

    .cart__page-col:first-child {
        flex: 1 1 60%;
        padding-right: 100px;
    }

    .cart__page-col:last-child {
        position: sticky;
        top: 10%;
        flex: 0 1 35%;
        padding: 30px
    }

    .cart__page-col:last-child:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;

        background-color: {
                {
                settings.color_body_text | default: "#1c1d1d"
            }
        }

        ;
        background-color:var(--colorTextBody);
        opacity:0.03;
    }
}

/*
  Rows used to be 6px of margin plus 6px of padding apart, over a divider that
  inherited a 0.67px #F1F1F1 line — invisible in practice. That put a row's
  quantity stepper closer to the next product's title than to its own, so the
  list read as one run-on block. Give each row real separation and a divider
  that is actually visible.
*/
.cart__item {
    display: flex;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(29, 29, 29, 0.12);
}

.cart__item:first-child {
    padding-top: 10px;
}

.cart__item:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}

.cart__image {
    flex: 0 0 150px;
    margin-right: 12px;
    margin-right: 12px;
}

.cart__image a {
    display: block;
}

.cart__image img {
    width: 100%;
    display: block;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--global-radius-sm, 2px);
    background: rgba(29, 29, 29, 0.10);
}

.drawer .js-qty__num {
    color: #1d1d1d;
    color: var(--colorDrawerText);
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: var(--global-radius, 4px);
    border: 2px solid #E5E5E5;
    background: #FFF;
    height: 46px;
    width: 96px;
    max-width: 96px;
}

.cart__item-sub .js-qty__adjust--plus {
    right: -14px;
}

.cart__item-sub .js-qty__adjust--plus svg,
button.js-qty__adjust.js-qty__adjust--minus svg{
    stroke: #020312;
}

span.cart__price {
    color: var(--color-black-100, #020312);
    leading-trim: both;
    text-edge: cap;
    font-family: var(--global-font-font-body, Montserrat);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
}

.cart__remove a {
    margin-top: 0px;
}

.cart__remove {
    display: flex;
    align-items: flex-start;
}

.cart__titile--mainm {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 5px;
}

.drawer .cart__image {
    flex: 0 0 76px
}

.cart__item-details {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
}

.cart__item-title {
    flex: 1 1 100%
}

.drawer .cart__item-title {
    font-size: calc(var(--typeBaseSize)*0.85)
}

.cart__item-sub {
    flex: 1 1 100%;
    display: flex;
    justify-content: space-between;
    line-height: 1
}

.cart__item-sub>div:first-child {
    margin-right: 10px;
}



.cart__remove a {
    display: inline-block;
    margin-top: 10px;
}



button.btn.cart__checkout {
    display: flex;
    min-height: 48px;
    padding: 8px 48px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: var(--global-buttons-radius, 4px);
    background: var(--color-black-100, #1D1D1D);
    color: var(--color-white-100, #FFF);
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: var(--global-font-font-button, Montserrat);
    font-size: var(--global-font-size-mobile-button, 14px);
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: var(--global-buttons-letter-spacing, 2px);
    text-transform: uppercase;
    position: relative;
    width: 100%;
}

button.btn.cart__checkout svg {
    position: absolute;
    right: 12px;
}

.icon__bottom--cart {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 200px;
}

.icons__main--btm--cart {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    margin-top: 12px;
    margin-bottom: 12px;
    jusitfy-content: space-between;
}

.icon__cart--btm {
    display: flex;
    align-items: center;
}

.icon__cart--text {
    color: var(--color-black-60, rgba(29, 29, 29, 0.60));
    leading-trim: both;
    text-edge: cap;
    font-family: var(--global-font-font-body, Montserrat);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    text-transform: uppercase;
}


.cart__item-name {
    display: block;
    font-size: calc(var(--typeBaseSize) + 1px);
    margin-bottom: 8px;
}

/*
  theme.css.liquid carries `.drawer .cart__remove { display: none }`, so the
  remove control was hidden in every drawer and the only way to take a line out
  of the cart was to hold minus down to zero. The markup and the click handler
  both already existed (custom.js binds `#CartDrawer .cart__remove a`); it just
  needed to be visible. Two classes deep to outrank the theme rule wherever the
  two files land in the cascade, and scoped to the cart so #NavDrawer is
  untouched.
*/
.drawer.my-custom-cart-drawer .cart__remove {
    display: flex;
}

/* The theme's 10px top margin dropped the icon below the product name. */
.drawer.my-custom-cart-drawer .cart__remove a {
    margin-top: 0;
    line-height: 0;
}

.drawer.my-custom-cart-drawer .cart__remove svg {
    width: 18px;
    height: 18px;
}

.cart__item--variants {
    margin-bottom: 10px
}

/*
  The variant, selling-plan and line-property rows inherited .cart__item-title's
  size, so "Deliver Every Month" sat at the same weight and size as the product
  name and read as a second line of it. Drop them a step and mute the colour so
  the name is the only thing at title size. rgba(29,29,29,0.8) is 8.8:1 on the
  white item column, well clear of the 4.5:1 small-text minimum.
*/
.cart__item--variants,
.cart__item--properties {
    font-size: 12px;
    line-height: 160%;
    color: var(--color-black-80, rgba(29, 29, 29, 0.80));
}

/* Option labels ("Colour:") are context, not headline — they sat at 700. */
.cart__item--variants span {
    font-weight: 500;
}

.cart__price {
    display: block;
}

.cart__price--strikethrough {
    text-decoration: line-through;
}

.cart__discount {
    color: {
            {
            settings.color_savings_text | default: "#1c1d1d"
        }
    }

    ;
    color:var(--colorTextSavings);
}

.cart__terms {
    display: flex;
    align-items: center;
    justify-content: center
}

.cart__terms label {
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: 0;
}

.cart__checkout-wrapper {
    margin-top: 20px
}

.cart__checkout-wrapper .additional-checkout-buttons {
    margin-top: 12px;
}

.drawer .additional-checkout-buttons {
    margin: 10px 0
}

.drawer .additional-checkout-buttons [data-shopify-buttoncontainer] {
    justify-content: center
}

.drawer .additional-checkout-buttons [data-shopify-buttoncontainer]>* {
    height: auto !important;
}

iframe.zoid-component-frame {
    z-index: 1 !important;
}


[data-products] {
    padding: 12px 24px;
}

/*
  The shared .drawer__scrollable cream (#edddc32b, custom-style.css) washed the
  whole column one colour, so the tinted cross-sell block below had nothing to
  contrast against. Put the cart's item column on white — the tinted block is
  then the only coloured band, which is what makes it read as an offer rather
  than as something already in the bag. Scoped to the cart's own scroll area so
  #NavDrawer and the empty-cart panel keep their existing background.
*/
.my-custom-cart-drawer .drawer__inner .drawer__scrollable {
    background: var(--color-white, #FFF);
}

/*
  Nearly every string in the drawer was 700, so nothing stood out. Bold is now
  reserved for the numbers and actions a shopper is scanning for — prices, the
  subtotal, section headings and the checkout button — and product names carry
  the lighter 500 so the price beside them wins the eye.
*/
a.cart__item-name {
    color: var(--color-black-100, #1D1D1D);
    leading-trim: both;
    text-edge: cap;
    font-family: var(--global-font-font-body, Montserrat);
    font-size: var(--global-font-size-mobile-base-sm, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: 160%;
}


.drawer__footer {
    border-top: 1px solid;
    border-top-color: #e8e8e1;
    border-top-color: var(--colorDrawerBorder);
    padding-top: 12px;
    padding-bottom: 20px;
    padding-bottom: 12px;
    border-top: var(--global-stroke-weight, 2px) solid var(--color-black-100, #1D1D1D);
    background: var(--color-white-100, #FFF);
    box-shadow: 0 -4px 8px 0 rgba(0, 0, 0, 0.10);
}

@media only screen and (min-width:769px) {

    .drawer__footer {
        padding-top: 22.22222px
    }
}

.drawer__inner.is-loading .drawer__scrollable {
    transition: opacity 0.3s ease 0.7s;
    opacity: 0.4;
}

.cart-notes {
    margin-top: 10px;
    margin-bottom: 10px;
    min-height: 60px;
    height: 60px
}

@media only screen and (min-width:769px) {

    .cart-notes {
        min-height: 80px;
        height: 80px
    }
}

.ajaxcart__subtotal {
    text-transform: uppercase;
    color: var(--color-black-100, #1D1D1D);
    leading-trim: both;
    text-edge: cap;
    font-family: var(--global-font-font-heading, Montserrat);
    font-size: var(--global-font-size-desktop-H4, 19px);
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: -0.57px;
}

.subtotal--main {
    color: var(--color-black-100, #1D1D1D);
    text-align: right;
    font-family: var(--global-font-font-body, Montserrat);
    font-size: var(--global-font-size-desktop-H4, 19px);
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
}

/*
  The savings row reuses .ajaxcart__subtotal / .subtotal--main, so "YOU SAVE"
  rendered at the same 19px/700 as the subtotal and the two prices competed for
  attention. Keep one dominant figure and let the saving read as a supporting
  line underneath it.
*/
.subtotal-save .ajaxcart__subtotal,
.subtotal-save .subtotal--main {
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 0;
}

/* The item count rides with the subtotal label, so it must not inherit its 19px. */
.ajaxcart__subtotal .cart__numbers {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.cart__item-row.text-center small {
    color: var(--color-black-60, rgba(29, 29, 29, 0.60));
    text-align: center;
    font-family: var(--global-font-font-body, Montserrat);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
} 

.my-custom-cart-drawer .drawer__inner .drawer__footer.appear-animation.appear-delay-4 {
    padding-bottom: 0;
}

.my-custom-cart-drawer .cart__item-sub.cart__item-row {
    margin: 0;
}

.my-custom-cart-drawer .cart__item-sub.cart__item-row.subtotal-save {
    margin-top: 4px;
}

.preorder-warning {
    padding-inline: 24px;
    padding-top: 24px;
    font-size: 13px;
    margin: 0;
}

.preorder-warning p{
    margin: 0;
}

.preorder-warning strong {
    color: #F55E77;
}

/*
  The drawer looked like it was floating on the page with nothing behind it.
  The overlay was rendering the whole time — theme.css.liquid fades
  .main-content:after to 0.6 — but --colorModalBg is #E6E6E6, and light grey at
  0.6 over a cream page is no overlay at all. Darken it.

  Scoped to the cart with :has() so #NavDrawer keeps whatever colour the
  merchant set in the theme editor. The second selector covers the 0.25s
  fade-out: close() drops .drawer--is-open immediately and leaves
  .is-transitioning behind, so without it the overlay would flash back to grey
  on the way out. Browsers without :has() just keep the old light overlay.
*/
html:has(#CartDrawer.drawer--is-open) .main-content:after,
html.js-drawer-closing:has(#CartDrawer.is-transitioning) .main-content:after {
    background-color: #000;
    /*
      26 left the overlay under any section that builds its own stacking
      context — on the home page the "Curated inspiration" copy and its button
      stayed at full contrast while the rest of the page dimmed, which looked
      like a rendering fault rather than a dimmed page. Sit one below the
      drawer's 9999 so the overlay covers the page and nothing else.
    */
    z-index: 9998;
}

.drawer--right.my-custom-cart-drawer.drawer--is-open{
    transform: translate(-375px);
    z-index: 9999;
}
.drawer--right.my-custom-cart-drawer {
    width: 375px;
    right: -375px;
    max-width: 100%;
}

small.cart__discount {
    display: none !important;
}

/* ===========================================================================
   Named boxes
   ===========================================================================

   Every block in the drawer is its own element now — <cart-lines>,
   <cart-upsells>, <empty-bag> and the rest — so the markup says what a block
   is instead of leaving it to a class name to hint at. A custom element is
   display:inline until it is told otherwise, so each one needs a box declared
   here or the drawer collapses into a run of inline text.
   =========================================================================== */
rewards-bar,
cart-lines,
cart-free-gifts,
cart-upsells,
cart-note,
cart-summary,
cart-checkout,
empty-bag,
popular-picks {
    display: block;
}

/* ===========================================================================
   Empty bag: Popular Picks holds the bottom of the panel
   ===========================================================================

   An empty bag has no footer — no subtotal, no checkout button — so Popular
   Picks is the last thing in the drawer and belongs against its bottom edge
   rather than trailing whatever height the copy above happened to take.
   margin-top:auto only bites when there is room to spare, so a short phone
   that has to scroll is unaffected.
   =========================================================================== */
.drawer__cart-empty popular-picks.main__bottom--slider {
    margin-top: auto;
}

/*
  Two fixes on the empty panel's scroll area.

  The cream: .drawer__scrollable carries a shared #edddc32b wash from
  custom-style.css. The cart-with-items column was already put on white to
  escape it; the empty panel was left on it, which is why the band between the
  rewards bar and Popular Picks was cream and not the white of the gift bar
  above it. The tint the empty-bag copy sits on is painted by <empty-bag>
  itself now, so hiding that block leaves this column white end to end.

  The padding: free-gift-bar.css reserves 40px under this scroll area. With the
  picks pinned to the bottom that showed as a strip below the tinted block, and
  the picks carry their own 36px of bottom padding already.
*/
.my-custom-cart-drawer .drawer__cart-empty .drawer__scrollable {
    background: var(--color-white-100, #FFF);
    padding-bottom: 0;
}

/*
  The empty-bag copy, centred in the space Popular Picks is not using.

  `flex: 1` takes that space and the two flex properties centre the copy in
  it — but only once this is a flex container. Without the `display` below it
  inherits `block` from the named-boxes rule above, and `flex-direction` and
  `justify-content` are inert on a block: the box still grew to fill the gap
  and still painted the tint, so the copy sat at the top of a 660px block with
  a long empty run beneath it before Popular Picks. Measured at 1080px tall on
  a 1135px panel.

  So `display: flex` is load-bearing here, not decoration. The block was
  behind an A/B test whose control was meant to be `display: none`; that
  never applied either, for the same reason. If it is ever taken off again,
  `display: none` is the switch — never `block`.

  padding-inline because the heading, the subtext and the two buttons sat
  directly in a scroll area with padding-inline:0, so the subtext ran to the
  edges of a phone.
*/
/*
  free-gift-bar.css puts 24px of margin under the rewards bar. That used to sit
  on the scroll area's cream, so it read as part of the tinted block below it;
  with the tint on <empty-bag> the same margin would show as a white strip
  between the two. The wrapper's own border-bottom is the divider — it does not
  need the gap as well. White on white in the hidden variant, so nothing moves
  there.
*/
.drawer__cart-empty .cart-threshold-wrapper {
    margin-bottom: 0;
}

.drawer__cart-empty empty-bag {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    background: #edddc33d;
    padding-inline: 24px;
}

/* Both were divs; as a heading and a paragraph they arrive with UA margins. */
.drawer__cart-empty .cart__empty--header {
    margin: 0 0 8px;
}

.drawer__cart-empty .cart__empty--subtext {
    margin: 0;
}

/* ===========================================================================
   Readability
   =========================================================================== */

/*
  rgba(29,29,29,0.60) resolves to #777 on white — 4.48:1, just under the 4.5:1
  minimum, and every string wearing it is 11-14px. 0.72 is 6.4:1 at the same
  hue and looks the same shade of grey on the page.
*/
span.cart__numbers,
.icon__cart--text,
.cart__item-row.text-center small {
    color: rgba(29, 29, 29, 0.72);
}

/*
  `jusitfy-content` was a typo, so the two guarantees were packed against the
  left of the row with 12px between them. In a 375px drawer "30-Day
  Money-Back Guarantee" then wrapped onto two lines while "Easy Returns" stayed
  on one, and because the row aligned to flex-start the two icons sat at
  different heights — which is the crowding in the screenshot.
*/
.icons__main--btm--cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-top: 16px;
    margin-bottom: 14px;
}

.icon__bottom--cart {
    flex: 1 1 44%;
    min-width: 0;
    max-width: none;
    align-items: center;
}

.icon__cart--btm {
    flex: 0 0 auto;
}

/* 11px uppercase on two lines at line-height:100% had the lines touching. */
.icon__cart--text {
    font-size: 12px;
    line-height: 140%;
    letter-spacing: 0.4px;
}

/*
  padding-bottom was zeroed, so the shipping note sat on the bottom edge of the
  drawer with nothing under it.
*/
.my-custom-cart-drawer .drawer__inner .drawer__footer.appear-animation.appear-delay-4 {
    padding-top: 16px;
    padding-bottom: 14px;
}

/* The subtotal and the checkout button were 4px apart. */
.my-custom-cart-drawer cart-checkout .cart__checkout-wrapper {
    margin-top: 16px;
}

/*
  line-height:1 on the row put the quantity stepper and the price hard against
  the lines above and below them.
*/
.my-custom-cart-drawer .cart__item-sub {
    line-height: 1.3;
}

.my-custom-cart-drawer .cart__item-price-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

/* ===========================================================================
   Accessibility
   =========================================================================== */

/*
  The theme kills every focus outline — `html:not(.no-js):not(.tab-outline)
  :focus { outline: none }` in theme.css.liquid — so tabbing through the drawer
  had nothing to show for it until its own JS put .tab-outline on <html>. Gold
  at a 2px offset, matching the ring the drawer's slider dots already use.

  The #CartDrawer id is what carries this past that rule: it is (0,3,1) and a
  class-only selector here would lose.

  Caveat worth knowing before debugging this again: while the Consentmo
  accessibility widget's keyboard-navigation feature is on, it writes
  `outline: none !important` plus its own blue inset box-shadow **inline** on
  whatever has focus. An inline !important cannot be beaten from a stylesheet,
  so on the live storefront the visible ring is Consentmo's, not this one.
  This is the fallback for every page state where that widget is not running.
*/
#CartDrawer a:focus-visible,
#CartDrawer button:focus-visible,
#CartDrawer input:focus-visible,
#CartDrawer textarea:focus-visible {
    outline: 2px solid #8E7005;
    outline-offset: 2px;
    border-radius: 2px;
}

/*
  The remove control was an 18px icon: an 18x18 tap target, well under the 44px
  minimum, sitting right beside the product link it must not be confused with.
  The negative margins keep it where it looks today — the box grows into the
  row's gutter rather than pushing the title.
*/
.drawer.my-custom-cart-drawer .cart__remove a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -13px -13px -13px 0;
}

/*
  The steppers were a 30px-wide hit area on a 46px-tall box. 34px clears the
  24x24 minimum with room to spare; going all the way to 44 would have put the
  two buttons over the quantity itself inside a 96px stepper.
*/
.drawer.my-custom-cart-drawer .js-qty__adjust {
    padding: 0 12px;
}

/* ===========================================================================
   Progress on the cart's own controls
   ===========================================================================

   Every control in a cart line posts to Shopify and waits on the answer
   before the drawer repaints — measured at 1.3s for /cart/add.js on this
   store, and a remove is the same round trip. Nothing said so: the trash icon
   and the steppers sat looking exactly as they did before the click, which
   reads as a dead control and invites a second press on it.

   The state is already tracked. theme-v1.0.1.js puts .is-loading on the
   .js-qty__wrapper it is working on, and custom.js now marks the .cart__remove
   it proxied a click from. Neither needs clearing: the rebuild that ends the
   wait replaces the row's markup wholesale, so the class goes with the node
   that carried it. quantityChanged clears it by hand on the error path, where
   no rebuild arrives to do it.

   pointer-events is the other half. A second click on a stepper mid-request
   queues a second mutation against a quantity that is about to change under
   it, so the control is inert as well as visibly busy.
   =========================================================================== */

/*
  Reuses `spin` from theme.css.liquid, which is also what .btn--loading rides
  on — one spinner in the theme, not two that drift apart. 3px/24px there is
  sized for a full-width button; these are 16px rings on icon-sized controls,
  so the border steps down to 2px to keep the same proportion.
*/
.drawer.my-custom-cart-drawer .cart__remove.is-removing,
.drawer.my-custom-cart-drawer .js-qty__wrapper.is-loading {
    pointer-events: none;
    position: relative;
}

.drawer.my-custom-cart-drawer .cart__remove.is-removing a::after,
.drawer.my-custom-cart-drawer .js-qty__wrapper.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(29, 29, 29, 0.72);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/*
  visibility rather than display: the icon keeps its box, so the 44px tap
  target does not collapse and the product name beside it does not shift
  sideways for the length of the request.
*/
.drawer.my-custom-cart-drawer .cart__remove.is-removing svg {
    visibility: hidden;
}

/*
  The steppers and the number fade rather than hide, for the same reason — the
  stepper holds its width, so the price column opposite it stays put. 0.35 is
  low enough to read as "not yet" behind the ring sitting over it.
*/
.drawer.my-custom-cart-drawer .js-qty__wrapper.is-loading > * {
    opacity: 0.35;
}

/*
  A spinner is a status indicator, so it is not dropped outright for reduced
  motion — a still ring says nothing at all. Slowed to where it no longer
  reads as spinning while still showing the control is working.
*/
@media (prefers-reduced-motion: reduce) {
    .drawer.my-custom-cart-drawer .cart__remove.is-removing a::after,
    .drawer.my-custom-cart-drawer .js-qty__wrapper.is-loading::after {
        animation-duration: 3s;
    }
}

/* ===========================================================================
   "Updating your bag" — the wait on a Rebuy gift
   ===========================================================================

   Shown while Rebuy has announced a cart change that has not arrived yet, and
   cleared by the repaint that draws it. See cart-drawer.liquid for why that
   gap exists and theme-v1.0.1.js for how it is tracked.
   =========================================================================== */

/*
  The [hidden] rule comes first and carries !important because the rule below
  gives this element a display value, and any display beats the attribute.
  Without it the strip would be permanently visible.
*/
.drawer.my-custom-cart-drawer cart-activity[hidden] {
    display: none !important;
}

/*
  Centred, because this is a status message about the panel rather than a row
  in the list. Left-aligned it started on the same edge as the product titles
  above it and read as a broken line item — one with no image, no price and
  nothing in the columns those set up.
*/
.drawer.my-custom-cart-drawer cart-activity {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 0;
    border-top: 1px solid rgba(29, 29, 29, 0.12);
}

/*
  Same ring as the row controls, at the same 2px weight, so the drawer has one
  loading language rather than a different spinner per place it waits.
*/
.drawer.my-custom-cart-drawer .cart-activity__ring {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(29, 29, 29, 0.72);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/*
  rgba(29,29,29,0.72) is 6.4:1 on white — the same value the other secondary
  strings in the drawer use, and comfortably over 4.5:1 at this size.
*/
.drawer.my-custom-cart-drawer .cart-activity__label {
    color: rgba(29, 29, 29, 0.72);
    font-family: var(--global-font-font-body, Montserrat);
    font-size: 13px;
    line-height: 160%;
}

@media (prefers-reduced-motion: reduce) {
    .drawer.my-custom-cart-drawer .cart-activity__ring {
        animation-duration: 3s;
    }
}

/*
  A line the shopper has just taken to zero. It is still in the cart until the
  response lands, so it is faded rather than removed — claiming it is gone
  before Shopify has said so is a lie the failure path cannot take back.
*/
.drawer.my-custom-cart-drawer .cart__item.is-removing-line {
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.2s ease;
}