/** Shopify CDN: Minification failed

Line 126:25 Expected identifier but found whitespace
Line 127:16 Unexpected "{"
Line 128:24 Expected ":"
Line 310:4 "jusitfy-content" is not a known CSS property
Line 393:10 Expected identifier but found whitespace
Line 394:12 Unexpected "{"
Line 395:20 Expected ":"

**/
.my-custom-cart-drawer.drawer--is-open.is-empty .drawer__cart-empty.appear-animation.appear-delay-2 {
    background: #edddc33d;
    height: 100%;
    display: flex;
    align-items: center;
}

.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;
    width: 327px;
    height: 48px;
    padding: 8px 48px;
    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;
    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;
}


div[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-100, #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;
}

body.template-index.template-.snize-search-idle.jdgm--leex-script-loaded.smart-cart--enabled.rebuy-cart-visible .free-shipping-bar-section{
        z-index: 9;
}

/*
  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;
}