/** Shopify CDN: Minification failed

Line 889:0 Unexpected "%"

**/
/* ==========================================================================
   Saint & Sun — cart drawer: upsell card + item separators + discount badges
   Layout only. Colors stay on the theme's own tokens.

   Shape, matching the Lucky Fours reference one-to-one:

       ┌───────────────────────────────────────────┐
       │ [img]  Product Name runs the full width   │
       │ [img]  $̶2̶4̶9̶ $179.90            [  Add  ]  │
       └───────────────────────────────────────────┘

   The name spans BOTH the price column and the button column, so it gets the
   whole card width before it wraps. The button drops to the price row and sits
   on its bottom edge instead of being centred against the whole card.

   Built as a 3-column grid. `.upsell__content` is display:contents so the title
   and the price, which the theme nests inside it, become grid items themselves.
   Scoped to the cart-drawer upsell container so no other upsell block moves.
   ========================================================================== */

.cart-drawer-upsells-container .upsell {
  --active-padding: 1.8rem;
}

.cart-drawer-upsells-container .upsell__container {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "img title title"
    "img price btn";
  align-items: center;
  column-gap: 1.2rem;
  row-gap: 0.5rem;
}

.cart-drawer-upsells-container .upsell__image {
  grid-area: img;
  margin-right: 0;
  align-self: center;
}

/* promote the title and the price out of their wrapper into the grid */
.cart-drawer-upsells-container .upsell__content {
  display: contents;
}

/* product name — spans the price column AND the button column */
.cart-drawer-upsells-container .upsell__title {
  grid-area: title;
  display: block;
  align-self: end;
  min-width: 0;
}

/* upsell card name: same size as before, a step LIGHTER than the cart items */
.cart-drawer-upsells-container .upsell__title h3 {
  font-weight: 500;
  line-height: 1.25;
}

/* price row: struck compare price first, then the sale price */
.cart-drawer-upsells-container .upsell__price--separate {
  grid-area: price;
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.7rem;
  row-gap: 0.2rem;
  margin-top: 0;
  min-width: 0;
}

.cart-drawer-upsells-container .upsell__price--separate .compare-price {
  order: -1;
  font-size: 0.9em;
}

.cart-drawer-upsells-container .upsell__price--separate .regular-price {
  font-weight: 700;
}

/* Add button — bottom-right, on the price row */
.cart-drawer-upsells-container .upsell__add-btn {
  grid-area: btn;
  align-self: end;
  justify-self: end;
  margin-left: 0;
  min-height: 3.6rem;
  padding: 0 1.8rem;
  font-size: 1.4rem;
  line-height: 1.4;
}

/* the hidden add-to-cart form is a grid child too — park it in the button cell
   at zero size so it stays in the DOM and never claims a row of its own */
.cart-drawer-upsells-container .upsell__container > product-form {
  grid-area: btn;
  width: 0;
  height: 0;
  overflow: hidden;
}

@media screen and (max-width: 479px) {
  .cart-drawer-upsells-container .upsell__container {
    column-gap: 1rem;
  }

  .cart-drawer-upsells-container .upsell__add-btn {
    padding: 0 1.4rem;
    min-height: 3.4rem;
  }
}

/* Narrow phones (iPhone SE / mini, 375px): trim the image, the button padding
   and the price a step so the two prices stay on one line. */
/* Narrow phones (375px). Measured: the price column is ~91px there while the
   two prices need ~106px, so with `nowrap` the price overflowed its grid column
   by 15-16px and ran underneath the Add button. The name override that used to
   live here is gone: it was sized against an 1.8rem base and now reads LARGER
   than the base, which is what pushed the longest SKU onto a second line.
   Buy the missing pixels back from the image, the gap and the button instead. */
@media screen and (max-width: 400px) {
  .cart-drawer-upsells-container .upsell__container {
    column-gap: 0.8rem;
  }

  .cart-drawer-upsells-container .upsell__image img {
    height: 4.8rem;
  }

  .cart-drawer-upsells-container .upsell__price--separate {
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: 1.1rem;
  }

  .cart-drawer-upsells-container .upsell__add-btn {
    padding: 0 0.9rem;
    font-size: 1.2rem;
  }
}


/* ==========================================================================
   Cart drawer — line items
   ========================================================================== */

/* Separator between cart items, like the reference. Last item carries none. */
.cart-drawer .cart-items > .cart-item {
  padding-bottom: 1.4rem;
  border-bottom: 0.1rem solid rgba(11, 47, 36, 0.10);
}

/* every item keeps its line, including the last, so the list closes off */
.cart-drawer .cart-items > .cart-item:last-child {
  padding-bottom: 1.4rem;
}

/* Discount badge on a line item: its own row under the price, light pill.
   The theme renders it inline beside the price, where it gets crushed. */
.cart-drawer .cart-item .cart-drawer__discounts {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
}

.cart-drawer .cart-drawer__discounts .badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border: 0;
  border-radius: 0.4rem;
  background: rgba(11, 47, 36, 0.07);
  color: #0b2f24;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.cart-drawer .cart-drawer__discounts .badge svg {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}


/* ==========================================================================
   Cart drawer — free-shipping progress bar
   ========================================================================== */

/* The bar sat flush against the drawer header (measured gap: 0px).
   The block's own margin_top setting can never work here: base.css carries
       .block-margins > *:first-child { margin-top: 0 !important; }
   and .cart-drawer__body has .block-margins, so the inline margin the block
   writes is killed by !important. Padding on the body is not affected by that
   rule, so the spacing goes here instead. */
.cart-drawer .cart-drawer__body {
  padding-top: 1.6rem;
}


/* ==========================================================================
   Cart drawer — Shipping Protection row
   ========================================================================== */

/* The protection product is a real line item, but it is presented as a footer
   row, so it must never render in the item list or in the upsell carousel. */
.cart-drawer .cart-item--product-shipping-protection-1 {
  display: none !important;
}

.sns-sp {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.2rem 0;
  border-top: 0.1rem solid rgba(11, 47, 36, 0.10);
}

.sns-sp__icon {
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  color: #0b2f24;
}

.sns-sp__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sns-sp__text {
  flex-grow: 1;
  min-width: 0;
}

.sns-sp__title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
  color: #0b2f24;
}

.sns-sp__price {
  margin-left: 0.4rem;
  font-weight: 700;
}

.sns-sp__desc {
  margin: 0.3rem 0 0;
  font-size: 1.2rem;
  line-height: 1.35;
  color: rgba(11, 47, 36, 0.68);
}

/* toggle */
.sns-sp__switch {
  position: relative;
  flex-shrink: 0;
  width: 4.4rem;
  height: 2.4rem;
  margin-top: 0.2rem;
  cursor: pointer;
}

.sns-sp__input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.sns-sp__slider {
  position: absolute;
  inset: 0;
  border-radius: 1.2rem;
  background: rgba(11, 47, 36, 0.20);
  transition: background 0.18s ease-in-out;
  pointer-events: none;
}

.sns-sp__knob {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2);
  transition: transform 0.18s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0b2f24;
}

.sns-sp__spin,
.sns-sp__check {
  width: 1.1rem;
  height: 1.1rem;
  display: none;
}

/* Pressed but not confirmed: the knob has moved but the track stays HALF lit
   while the spinner runs. The extra .sns-sp__switch in the selector is load
   bearing - without it this ties with `.sns-sp__input:checked + .sns-sp__slider`
   on specificity, that rule wins on source order, and the track jumps to full
   colour the instant it is clicked instead of waiting for the cart. */
.sns-sp.is-pending .sns-sp__switch .sns-sp__slider {
  background: rgba(11, 47, 36, 0.45);
}

.sns-sp.is-pending .sns-sp__spin {
  display: block;
  animation: sns-sp-spin 0.7s linear infinite;
}

/* Confirmed: full colour and a tick. The knob position is driven by :checked
   alone, so turning the row OFF slides it back instead of sticking right. */
.sns-sp.is-done .sns-sp__switch .sns-sp__slider {
  background: #0b2f24;
}

.sns-sp.is-done .sns-sp__check {
  display: block;
}

@keyframes sns-sp-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .sns-sp.is-pending .sns-sp__spin { animation: none; }
}

.sns-sp__input:checked + .sns-sp__slider {
  background: #0b2f24;
}

.sns-sp__input:checked + .sns-sp__slider .sns-sp__knob {
  transform: translateX(2rem);
}

.sns-sp__input:focus-visible + .sns-sp__slider {
  outline: 0.2rem solid #c8a24a;
  outline-offset: 0.2rem;
}

.sns-sp__input:disabled + .sns-sp__slider {
  opacity: 0.55;
}


/* The per-unit price under the title repeats the line total sitting on the right.
   Hide the price only; the discount badge lives in the same wrapper and stays.
   With quantity > 1 the per-unit figure is no longer shown, which matches the
   reference layout. */
.cart-drawer .cart-drawer-item__single-item-prices > span:first-child {
  display: none;
}

.cart-drawer .cart-drawer-item__single-item-prices {
  margin-top: 0;
}

/* bigger shield on the protection row */
.sns-sp__icon {
  width: 3.4rem;
  height: 3.4rem;
}

/* "Add to cart" is a longer label than "Add" - keep it off the price on phones */
@media screen and (max-width: 430px) {
  .cart-drawer-upsells-container .upsell__add-btn {
    font-size: 1.25rem;
    padding: 0 1.1rem;
  }
}


/* ==========================================================================
   Cart drawer — footer as its own visual block
   ========================================================================== */

.cart-drawer .drawer__footer {
  background: #f5f4f1;
  padding-top: 4.6rem;
  padding-bottom: 1.6rem;
}

/* the protection row opens the footer, so it does not need its own top rule */
.cart-drawer .drawer__footer .sns-sp {
  border-top: 0;
  padding-top: 0;
}

/* the discount pill sat on a near-identical tint; white keeps it readable on
   the grey without touching the discount's own green */
.cart-drawer .drawer__footer .cart-drawer__discounts .badge {
  background: #fff;
}

/* a little air under the discounts line, but the button stays tucked up to it */
.cart-drawer .drawer__footer #CartDrawer-Checkout {
  margin-top: 0.4rem;
}

/* The trust-badge PNG at the bottom of the footer is a palette image with NO
   alpha and a near-white ground (corners read 253-254), so the grey footer
   turned it into a white rectangle. The artwork is dark line art, so multiply
   drops the white into the footer tone and leaves the strokes untouched.
   Verified offline: the corner lands on 244,243,240 against the footer's
   245,244,241. Replacing the asset with a transparent PNG would also work. */
.cart-drawer .drawer__footer img {
  mix-blend-mode: multiply;
}


/* ==========================================================================
   Cart drawer — the savings figure
   ==========================================================================
   The savings_color setting can only point at the theme palette, and every
   accent in this theme is #0b2f24 - the brand's dark green, which reads as
   black next to the price. No editor setting can produce a green that looks
   green here, so the colour is stated outright. */
.cart-drawer .cart-drawer-item__saving,
.cart-drawer .cart-drawer-item__saving * {
  color: #15803d;
}


/* ==========================================================================
   Round 8 — footer breathing room, bigger upsell card, bolder item name
   ========================================================================== */

/* the discounts line drops a little further from the protection row, while the
   checkout button stays tucked up under it */
.cart-drawer .drawer__footer .cart-drawer__footer__discounts {
  margin-top: 1.4rem;
}

/* Bigger upsell card. Grown on the VERTICAL axis and on the image only - the
   type stays exactly where it is, and the content column keeps its width so
   the name still fits on one line and the button cannot reach the price. */
.cart-drawer-upsells-container .upsell {
  --active-padding: 2.2rem;
}

.cart-drawer-upsells-container .upsell__container {
  row-gap: 0.8rem;
}

.cart-drawer-upsells-container .upsell__image img {
  height: calc(var(--image-size) * 1.15);
}

/* Cart line item name: BOLD, and smaller. It inherits .h4 from the theme and
   was rendering at 19.55px - larger than the upsell card's name at 18px, which
   is what made it look oversized. */
.cart-drawer .cart-item__name {
  font-size: 1.65rem;
  margin-top: 0.3rem;
  font-weight: 700;
  line-height: 1.3;
}

/* the savings figure carries the same weight as the price it sits under */
.cart-drawer .cart-drawer-item__saving,
.cart-drawer .cart-drawer-item__saving strong,
.cart-drawer .cart-drawer-item__saving * {
  font-weight: 700;
}

/* the scripture on the dial, in the slot the reference uses for "Color" */
.cart-drawer .sns-verse {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.35;
  color: rgba(11, 47, 36, 0.62);
}


/* Add to cart: it sat at 36px tall against a ~104px card, which read thin.
   Grown on the VERTICAL axis and on the corner only - the horizontal padding
   is untouched, so the 12px gap to the price is preserved and the button
   cannot creep back over it. */
.cart-drawer-upsells-container .upsell__add-btn {
  min-height: 4.4rem;
  border-radius: 0.6rem;
  font-weight: 700;
}

@media screen and (max-width: 400px) {
  .cart-drawer-upsells-container .upsell__add-btn {
    min-height: 4rem;
  }
}

/* Requested cart refinement: layout only, scoped to the existing drawer. */

/* Price, savings and discount form the right column. Quantity aligns with
   the savings row, as in the supplied reference; handlers stay untouched. */
.cart-drawer .cart-drawer-item__right {
  min-width: 0;
}

.cart-drawer .cart-drawer-item__single-item-prices {
  display: none;
}

.cart-drawer .cart-drawer-item__quantity-and-prices {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.8rem;
  row-gap: 0.3rem;
  margin-top: 0.6rem;
}

.cart-drawer .cart-item__quantity {
  grid-column: 1;
  grid-row: 2;
  /* Keep the control under the product details, slightly below the savings
     text's centre as in the reference; do not let the badge position it. */
  align-self: center;
  position: relative;
  top: 0.45rem;
}

.cart-drawer .cart-item__totals,
.cart-drawer .cart-item__price-wrapper {
  display: contents;
}

.cart-drawer .cart-item__price-wrapper > * {
  grid-column: 2;
  justify-self: end;
  text-align: right;
}

.cart-drawer .cart-item__price-wrapper > .cart-item__discounted-prices,
.cart-drawer .cart-item__price-wrapper > .regular-price {
  grid-row: 1;
  white-space: nowrap;
}

.cart-drawer .cart-drawer-item__saving {
  grid-row: 2;
  white-space: nowrap;
}

.cart-drawer .cart-item .cart-drawer__discounts {
  grid-column: 2;
  grid-row: 3;
  width: auto;
  max-width: 100%;
  margin-top: 0.2rem;
}

.cart-drawer .cart-item .cart-drawer__discounts .badge {
  padding: 0.2rem 0.6rem;
  font-size: 1rem;
  letter-spacing: 0.02em;
  white-space: normal;
}

/* Neutral, compact quantity control; existing inputs and handlers remain. */
.cart-drawer .cart-item .quantity {
  border-color: #dadada;
  border-radius: 0.4rem;
  background: #fff;
  overflow: hidden;
}

.cart-drawer .cart-item .quantity .quantity__button,
.cart-drawer .cart-item .quantity .quantity__input {
  background: #fff;
  border-radius: 0;
  font-weight: 400;
}

.cart-drawer .cart-item .quantity .quantity__input {
  padding-left: 0.5em;
  padding-right: 0.5em;
  border-color: #e5e5e5;
}

.cart-drawer .cart-items {
  row-gap: 1.2rem;
}

.cart-drawer .cart-items > .cart-item,
.cart-drawer .cart-items > .cart-item:last-child {
  padding-bottom: 0.8rem;
}

/* A small product row: full-width title and prices, then the existing CTA.
   Price and button have separate rows so neither can overlap the other. */
.cart-drawer .cart-drawer-upsells-container {
  margin-top: 1rem !important;
}

.cart-drawer .cart-drawer-upsells-container .upsell {
  --active-padding: 0.6rem;
  background: rgb(var(--color-background));
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.cart-drawer .cart-drawer-upsells-container .upsell__container {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "img title title"
    "img price price"
    "img variant btn";
  column-gap: 1rem;
  row-gap: 0.4rem;
}

.cart-drawer .cart-drawer-upsells-container .upsell__image {
  margin-right: 0;
}

.cart-drawer .cart-drawer-upsells-container .upsell__image img {
  width: 5.6rem;
  height: 5.6rem;
  object-fit: contain;
}

.cart-drawer .cart-drawer-upsells-container .upsell__title {
  font-size: 1.6rem;
}

.cart-drawer .cart-drawer-upsells-container .upsell__price--separate {
  flex-wrap: wrap;
  white-space: normal;
  font-size: 1.3rem;
}

.cart-drawer .cart-drawer-upsells-container .upsell__add-btn {
  min-height: 3.6rem;
  padding: 0 1.2rem;
  font-size: 1.25rem;
}

/* Remove unused space before and inside Shipping Protection. */
.cart-drawer .drawer__footer {
  padding-top: 1.2rem;
}

.cart-drawer .drawer__footer .sns-sp {
  align-items: center;
  gap: 0.8rem;
  padding-bottom: 0.4rem;
}

.cart-drawer .sns-sp__switch {
  margin-top: 0;
}

/* Requested Mix & Match placement and more breathing room in watch rows. */
.cart-drawer .cart-items {
  row-gap: 1.8rem;
}
.cart-drawer .cart-items > .cart-item,
.cart-drawer .cart-items > .cart-item:last-child {
  padding-bottom: 1.6rem;
}
.cart-drawer .cart-drawer-item__quantity-and-prices {
  margin-top: 1.4rem;
  row-gap: 0.5rem;
}
.cart-drawer .cart-item__price-wrapper > .cart-item__discounted-prices {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
}
.cart-drawer .cart-item .cart-drawer__discounts {
  margin-top: 0.4rem;
}

/* Line-item error — 2026-09-10.
   The theme's error <div> is a direct child of the quantity/prices grid with no
   placement, so it auto-flows into the narrow `auto` column: a long message
   widened that column, squeezed the price/BOGO stack to ~10px (vertical text)
   and pushed the row past the drawer edge (horizontal scroll). It now spans the
   whole grid on its own row and wraps. */
.cart-drawer .cart-drawer-item__quantity-and-prices > .cart-item__error {
  grid-column: 1 / -1;
  grid-row: 3;
  min-width: 0;
  justify-self: start;
  text-align: left;
}
.cart-drawer .cart-drawer-item__quantity-and-prices > .cart-item__error .cart-item__error-text {
  white-space: normal;
}

/* Mix & Match belongs to the product scroll area, resting at its bottom
   when space permits and following the products naturally in fuller carts. */
.cart-drawer .cart-drawer__body {
  display: flex;
  flex-direction: column;
}
.cart-drawer .cart-drawer__body > * {
  flex-shrink: 0;
}
.cart-drawer .cart-drawer__body > cart-drawer-items {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.cart-drawer .cart-drawer__body > .cart-drawer-upsells-container {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding-top: 2.4rem;
  padding-bottom: 1.2rem;
}
#shopify-section-cart-drawer .cart-drawer-upsells-container .upsell__outside-title {
  margin: 0 0 0.4rem !important;
  padding: 0;
  font-size: 1.6rem !important;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
}
#shopify-section-cart-drawer .cart-drawer-upsells-container .upsell__outside-title::before,
#shopify-section-cart-drawer .cart-drawer-upsells-container .upsell__outside-title::after {
  content: none;
}
.cart-drawer .sns-mix-match-subtitle {
  margin: 0 0 0.8rem;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.35;
  font-weight: 700;
  font-style: italic;
}
.cart-drawer .cart-drawer-upsells-container .upsell__container {
  grid-template-areas:
    "img title title"
    "img price price"
    "img variant btn";
}
.cart-drawer .drawer__footer {
  padding-top: 1.6rem;
  padding-bottom: 0.8rem;
}
/* Shorten the empty interval above Discounts without shrinking its text. */
.cart-drawer .drawer__footer > .cart-drawer__footer {
  margin-top: 0.8rem !important;
}
@media screen and (max-width: 400px) {
  .cart-drawer .cart-drawer-upsells-container .upsell__add-btn {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }
}
@media screen and (max-width: 350px) {
  .cart-drawer .cart-drawer-upsells-container .upsell__container {
    grid-template-areas:
      "img title title"
      "img price price"
      "img variant btn";
  }
}

/* Requested slight boldness increase, using the existing Inter bold face. */
.cart-drawer .cart-drawer-item__saving,
.cart-drawer .cart-drawer-item__saving strong,
.cart-drawer .cart-drawer-item__saving *,
#shopify-section-cart-drawer .cart-drawer-upsells-container .upsell__outside-title {
  -webkit-text-stroke: 0.2px currentColor;
}

/* Mix & Match: a white product card on a light-grey inset, not a title panel.
   Keep the existing slider, prices and native Add to cart form untouched. */
.cart-drawer .cart-drawer-upsells-container[id$="cart_product_upsells_AaWJJp"] .splide__slide__container {
  padding: 0.6rem;
  background: #f2f2f2;
}


/* ==========================================================================
   Cart drawer — EMPTY state — 2026-09-08
   Before: base.css collapsed the header, body and footer to height 0 whenever
   cart-drawer carried .is-empty, so the "Cart / 0" header and the free-shipping
   progress bar both vanished and the drawer showed a single oversized centred
   line on bare white.
   After: the header and the free-shipping bar stay exactly where they sit in a
   full cart; the empty message and Continue shopping occupy the space beneath
   them at cart-body scale. Item list, Mix & Match and the checkout footer stay
   hidden — there is nothing to check out.
   ========================================================================== */

:is(cart-drawer.is-empty, cart-drawer:has(.sns-cart-state[data-empty])) .drawer__inner {
  display: flex;
  flex-direction: column;
  grid-template-rows: none;
  align-items: stretch;
}

/* Header back to its normal full-cart rendering. */
:is(cart-drawer.is-empty, cart-drawer:has(.sns-cart-state[data-empty])) .drawer__header {
  order: 1;
  flex: 0 0 auto;
  height: auto;
  padding: 1.5rem;
  overflow: visible;
}

/* Body back, but only the free-shipping bar is allowed to render in it. */
:is(cart-drawer.is-empty, cart-drawer:has(.sns-cart-state[data-empty])) .cart-drawer__body {
  order: 2;
  flex: 0 0 auto;
  height: auto;
  overflow: visible;
  padding: 1.6rem 1.5rem 0;
}
:is(cart-drawer.is-empty, cart-drawer:has(.sns-cart-state[data-empty])) .cart-drawer__body > cart-drawer-items,
:is(cart-drawer.is-empty, cart-drawer:has(.sns-cart-state[data-empty])) .cart-drawer__body > .cart-drawer-upsells-container,
:is(cart-drawer.is-empty, cart-drawer:has(.sns-cart-state[data-empty])) .cart-drawer__body > .cart-timer {
  display: none !important;
}
:is(cart-drawer.is-empty, cart-drawer:has(.sns-cart-state[data-empty])) .cart-drawer__body > .cart-progress {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* The empty message fills what is left, centred, at body scale. */
/* The message centres on the whole drawer, not on the space left under the
   shipping bar — it was landing ~61px low at every viewport. Overlaying it and
   letting clicks through keeps the header's close button reachable. */
:is(cart-drawer.is-empty, cart-drawer:has(.sns-cart-state[data-empty])) .drawer__inner { position: relative; }
:is(cart-drawer.is-empty, cart-drawer:has(.sns-cart-state[data-empty])) .drawer__inner-empty {
  position: absolute;
  inset: 0;
  order: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* The theme paints this panel opaque white. Once it overlays the drawer that
     white covers the shipping-bar text, which sits in the normal flow while the
     overlay sits in the positioned layer. */
  background: transparent;
}
:is(cart-drawer.is-empty, cart-drawer:has(.sns-cart-state[data-empty])) .cart-drawer__empty-content {
  padding: 0 1.5rem;
}
/* 12% under the theme's own h2, expressed through --font-heading-scale so it
   keeps tracking the theme across viewports (26px -> 22.9, 31.2px -> 27.5). */
:is(cart-drawer.is-empty, cart-drawer:has(.sns-cart-state[data-empty])) .cart__empty-text {
  margin: 0;
  font-size: calc(var(--font-heading-scale) * 2rem * 0.88);
}
@media only screen and (min-width: 750px) {
  /* The theme lifts h2 to 2.4rem at this breakpoint; track it or desktop would
     lose 27% instead of 12%. */
  :is(cart-drawer.is-empty, cart-drawer:has(.sns-cart-state[data-empty])) .cart__empty-text {
    font-size: calc(var(--font-heading-scale) * 2.4rem * 0.88);
  }
}
/* Continue shopping removed at Adam's request 2026-09-09 — the drawer's own
   close button is the way out, and the empty cart carries one message only. */
:is(cart-drawer.is-empty, cart-drawer:has(.sns-cart-state[data-empty])) .cart-drawer__empty-content .button {
  display: none !important;
}
/* The drawer already has one close button in the header. */
:is(cart-drawer.is-empty, cart-drawer:has(.sns-cart-state[data-empty])) .cart-drawer__warnings .drawer__close {
  display: none !important;
}

/* Footer stays collapsed and last in the empty drawer. */
%s .drawer__footer {
  order: 4;
}

/* ==========================================================================
   Empty state driven by the RENDER, not by the JS class — 2026-09-10
   The theme's JS drops cart-drawer.is-empty whenever the raw item_count is
   non-zero, and the hidden Shipping Protection line counts. So for one frame
   after the last watch is removed, the drawer held the empty-state markup with
   the NOT-empty styling: "Continue shopping" inline, header pushed down, and a
   footer offering Checkout • $4.99. Every rule above now also matches
   cart-drawer:has(.sns-cart-state[data-empty]) — an attribute Liquid renders —
   and the two base.css collapses that key on the class are mirrored here.
   ========================================================================== */
cart-drawer:has(.sns-cart-state[data-empty]) .drawer__footer {
  height: 0;
  padding: 0;
  overflow: hidden;
}
cart-drawer:has(.sns-cart-state[data-empty]) .cart-drawer__warnings,
cart-drawer:has(.sns-cart-state[data-empty]) .cart-drawer__collection {
  height: auto;
  overflow: visible;
}

/* Cart drawer close button — 2026-09-09.
   The bare × now sits in a soft rounded square, and the glyph itself is 20%
   smaller so the mark reads as an icon in a chip rather than a loose cross.
   Scoped to the cart drawer header — the menu and facet drawers keep theirs. */
.cart-drawer .drawer__header .drawer__close {
  justify-content: center;
  border-radius: 0.8rem;
  background-color: rgba(var(--color-foreground), 0.06);
}
.cart-drawer .drawer__header .drawer__close .x-svg {
  width: calc(var(--btn-size) * var(--x-scale) * 0.8);
  height: calc(var(--btn-size) * var(--x-scale) * 0.8);
}


/* ==========================================================================
   Cart line item — tighten the price / savings / discount stack — 2026-09-09
   The quantity control sat in row 2 of the price grid, alongside the savings
   text. Its 27px height set that row's height, and align-items:center then
   floated the 15px savings line in the middle of it — opening a 12.4px gap
   above and a 13.4px gap below, which is what read as too much air between
   the price, the savings and the BOGO tag.
   Spanning the control across all three rows lets each text row size to its
   own content again, so row-gap alone sets the spacing.
   The BOGO tag keeps its exact live position; the tightened price + savings
   pair drops 15px to meet it (grid margin-top 1.4rem -> 2.9rem), so the line
   item keeps its overall height instead of shrinking. Approved as option D.
   Measured live at 390px: price->savings 12.4 -> 5px, savings->tag 13.4 -> 6px,
   tag bottom 269.7 -> 269.9px, card height 147.2 -> 147.4px.
   No font size, weight, colour or horizontal position changes.
   ========================================================================== */
.cart-drawer .cart-drawer-item__quantity-and-prices {
  row-gap: 0.2rem;
  align-items: center;
  margin-top: 2.9rem;
}

.cart-drawer .cart-item__quantity {
  grid-row: 1 / span 3;
  align-self: center;
  top: 0;
}

.cart-drawer .cart-item .cart-drawer__discounts {
  margin-top: 0.4rem;
}