/** Shopify CDN: Minification failed

Line 444:15 Expected identifier but found whitespace
Line 444:16 Unexpected "var("
Line 553:93 Expected ":"

**/
/* ============================================================
   cart-drawer-custom.css
   ------------------------------------------------------------
   Single home for all cart-drawer styling. Consolidated from:
     • snippets/cart-products.liquid  (inline <style>, removed)
     • blocks/…summary.liquid         ({% stylesheet %}, removed)
     • snippets/header-actions.liquid ({% stylesheet %}, drawer parts removed)

   WHY it lives here (not inside those snippets): the cart snippet is
   re-rendered + morphed on every add/delete/qty change. When the drawer
   CSS lived inside a morphed fragment, each mutation briefly detached +
   re-attached it, so the <dialog> lost its width/position rules for a
   frame — the "dance"/flicker (drawer shifts, Estimated total blanks).
   Loaded ONCE, globally, from layout/theme.liquid:
     {{ 'cart-drawer-custom.css' | asset_url | stylesheet_tag }}
   the rules are always present and never lost during a morph.

   Native CSS nesting from the source {% stylesheet %} blocks has been
   flattened into standard @media / descendant selectors for a plain
   .css asset.
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   1) DRAWER SHELL — dialog, inner, sizing
   ════════════════════════════════════════════════════════════ */
.cart-drawer {
  --cart-drawer-padding: var(--padding-xl) var(--padding-xl);
  --cart-drawer-padding-desktop: var(--padding-xl) var(--padding-2xl);
}
@media screen and (min-width: 750px) {
  .cart-drawer {
    margin-inline-end: calc(var(--gap-xs) * -1);
  }
  .cart-drawer--text {
    display: flex;
    align-items: center;
  }
}

/* Dialog: theme base merged with the pin fix (top/bottom:0 removes the
   ambiguous space the native <dialog> guesses into when content grows
   after showModal(); fixed 562px width is the intended drawer width). */
.cart-drawer__dialog {
  position: fixed;
  top: 0 !important;
  bottom: 0 !important;
  margin: 0 0 0 auto;
  padding: 0;
  height: 100%;
  width: min(450px, 100vw) !important;
  max-height: 100vh !important;
  max-height: 100svh !important;
  overflow: hidden;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  border-radius: 0;
  border-left: var(--style-border-drawer);
  box-shadow: var(--shadow-drawer);
  background-color: var(--color-background);
  box-sizing: border-box !important;
  z-index: 10050 !important;
}
.cart-drawer__dialog:modal {
  max-height: 100dvh;
  max-height: 100svh;
  overflow-y: hidden;
}

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


/* Checkout button busy loader */
.gokwik-checkout.sw-checkout-busy { position: relative; pointer-events: none; }
.gokwik-checkout.sw-checkout-busy > button {
  opacity: 0.55; cursor: not-allowed !important; pointer-events: none !important;
}
.gokwik-checkout.sw-checkout-busy::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 3px solid rgba(255,255,255,0.4); border-top-color: #fff;
  border-radius: 50%; animation: sw-checkout-spin 0.7s linear infinite; z-index: 5;
}
@keyframes sw-checkout-spin { to { transform: rotate(360deg); } }

/* Checkout gate banner (not-available / updating message) */
.sw-checkout-gate-banner {
  display: block; width: 100%; box-sizing: border-box;
  background: #fff4f4; border: 1px solid #f2c2c2; color: #cc0000;
  font-size: 13px; font-weight: 600; line-height: 1.4;
  padding: 10px 14px; border-radius: 8px; margin: 0 0 12px 0;
  text-align: center; position: relative; z-index: 2;
}


/* ════════════════════════════════════════════════════════════
   2) HEADER — heading, close button, heading cart-bubble
   ════════════════════════════════════════════════════════════ */
.cart-drawer__heading {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 700;
  color: #002c52;
}
.cart-drawer__heading.cart-drawer__heading--empty{ justify-content:center;}
.cart-drawer__heading-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  flex-shrink: 0;
}
.cart-drawer__heading-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.cart-drawer__close-button {
  top: 8px;
  right: 8px;
}
@media screen and (max-width: 749px) {
  .cart-drawer__close-button {
    top: var(--margin-2xs);
  }
}

/* .cart-drawer__heading .cart-bubble {
  width: fit-content;
  border-radius: var(--style-border-radius-buttons-primary);
  aspect-ratio: auto;
  padding: var(--cart-padding);
} */
.cart-drawer__heading .cart-bubble[data-maintain-ratio] {
  /* width: min(1lh, 22px);
  height: min(1lh, 22px); */
  top: -5px;
  right: -5px;
}
.cart-drawer__heading .cart-bubble .cart-bubble__background {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
}
.cart-drawer__heading .cart-bubble__text {
  color: var(--color-foreground);
  font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  font-family: var(--font-paragraph--family);
  font-weight: var(--font-paragraph--weight);
}


/* ════════════════════════════════════════════════════════════
   3) CONTENT + SCROLL + STICKY FOOTER
   The content is a bounded flex column: only .cart-drawer__items
   scrolls; the gift band + summary are a fixed-size footer. This
   replaces the theme's model (whole content scrolled + summary was
   position:sticky), whose sticky offset recalculated on every morph
   and made the summary flicker/jump.
   ════════════════════════════════════════════════════════════ */
.cart-drawer__content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cart-drawer__items {
  display: block !important;
  padding-inline: var(--cart-drawer-padding);
  overflow-y: auto;
  /* the ONLY scroll region; grows to fill space left by the pinned footer */
  flex: 1 1 auto;
  padding-bottom :70px; 
  min-height: 0;
  /* Hide the scrollbar but keep the region scrollable */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* old Edge/IE */
}
.cart-drawer__items::-webkit-scrollbar {
  display: none;              /* Chrome, Safari, new Edge */
  width: 0;
  height: 0;
}

/* Row separators between line items */
.cart-drawer__items .cart-items__table-row {
  padding-bottom: var(--gap-xl);
  border-bottom: var(--style-border-width) solid var(--color-border);
  margin-bottom: var(--gap-xl);
}
.cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
  border-bottom: none;
  margin-bottom: 0;
}
.cart-drawer__items .cart-items__table-row:last-child {
  border-bottom: none;
}

/* Gift band — pinned footer */
.gift-checkbox {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: 0px;
  cursor: pointer;
  width:100%;
}
.gift-checkbox-wrapper { }
@media screen and (min-width: 750px) {
  /* .gift-checkbox {
    padding-inline: var(--cart-drawer-padding-desktop);
  } */
}
.gift-checkbox__input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--sw-navy, #002b5b);
  cursor: pointer;
}
.gift-checkbox__label {
  font-family: var(--font-paragraph--family);
  font-weight: var(--font-paragraph--weight);
  font-size: var(--font-size--sm);
  line-height: 1.2;
  color: var(--color-foreground);
}

/* Summary — pinned footer. position:relative (not sticky) kills the
   morph flicker AND provides the positioning context for the shimmer. */
.cart-drawer__summary {
position:sticky;
bottom: 0px;
gap: 10px;
display: grid;
background: #f5f5f5;
}
.cart-drawer__summary-padd { padding: 10px 10px 0px 10px; width: 100%; display: grid; gap: 10px}
@media screen and (min-width: 750px) {
  .cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-2xl);
  }
}
/* The summary block renders an inner .cart-summary__inner that is
   position:sticky; top:0 (intended for the DESKTOP /cart-page sidebar).
   Inside the drawer it sits in a non-scrolling footer, so neutralize it —
   SCOPED to the drawer only, so the cart-page sticky sidebar is untouched. */
.cart-drawer__summary .cart-summary__inner {
  position: static !important;
  top: auto !important;
}

/* ── Shimmer while a cart-drawer morph is in flight ──
   .cart-drawer__summary lives inside the SAME section that
   swRefreshCartDrawer() morphs; cart-drawer-refresh.js toggles
   .sw-summary-loading for the duration so the real content is dimmed +
   covered by a sweeping shimmer, then revealed once when the morph ends. */
/* .cart-drawer__summary.sw-summary-loading {
  pointer-events: none;
}
.cart-drawer__summary.sw-summary-loading > * {
  opacity: 0.35;
  filter: blur(1px);
}
.cart-drawer__summary.sw-summary-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--style-border-radius-lg, 8px);
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgb(var(--color-foreground-rgb) / 0.12) 45%,
    rgb(var(--color-foreground-rgb) / 0.2) 50%,
    rgb(var(--color-foreground-rgb) / 0.12) 55%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: swSummaryShimmer 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cart-drawer__summary.sw-summary-loading::after {
    animation: none;
    background: rgb(var(--color-foreground-rgb) / 0.08);
  }
}
@keyframes swSummaryShimmer {
  0% { background-position: 150% 0; }
  100% { background-position: -50% 0; }
} */

/* .cart-drawer__summary.sw-summary-loading {
  pointer-events: none;
} */
/* Checkout button container ko re-render ke waqt hide hone se rokne ke liye */
.cart__ctas,
.gokwik-checkout,
.gokwik-checkout button,
button[onclick*="onCheckoutNow"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 48px !important; /* Button ki jagah fixed rakhega taaki layout collapse na ho */
}

/* Loading state ya hidden classes ko force-override karne ke liye */
.cart-drawer.is-loading .cart__ctas,
.cart-drawer.is-loading .gokwik-checkout,
.cart__ctas[hidden],
.gokwik-checkout[hidden],
.gokwik-checkout.hidden {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
} 

.cart-drawer__summary.sw-summary-loading > * {
  opacity:1;
}
@media (prefers-reduced-motion: reduce) {
  .cart-drawer__summary.sw-summary-loading > * {
    opacity: 1;
  }
}
/* ════════════════════════════════════════════════════════════
   4) EMPTY STATE
   ════════════════════════════════════════════════════════════ */
.cart-drawer--empty .cart-drawer__content {
  text-align: center;
  min-height: auto;
}
/* .cart-drawer--empty .cart-drawer__heading {
  color: #0f2d52;
  text-transform: uppercase;
  margin-bottom: var(--margin-md);
  justify-content: center;
} */

.custom-cart-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 50vh;
  text-align: center;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}
.custom-cart-empty-state p {
  font-size: 14px;
  color: #0f2d52;
  font-weight: 600;
}
.custom-cart-empty-state p a {
  color: #0077c1;
}
.custom-cart-empty-state .cart-items__empty-button { padding: 12px 32px; font-size: 14px; border-radius: 6px; }


/* ════════════════════════════════════════════════════════════
   5) CART CARD (custom line-item markup from cart-products.liquid)
   ════════════════════════════════════════════════════════════ */
.custom-cart-items-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* padding: 10px; */
}

.custom-cart-card {
  display: grid;
  background: #f5f5f5;
  border: 1px solid #eef1f4;
  border-radius: 10px;
  padding: 10px;
  gap: 8px;
  position: relative;
  grid-template-columns: 1fr 2fr;
  width: 100%
}

/* .custom-cart-card__media {
  width: 190px;
  flex-shrink: 0;
} */

.custom-cart-card__image-link {
  display: block;
  width: 100%;
   position: relative;
  /* Consume the inline --aspect-ratio so the image box reserves its
     height BEFORE the <img> loads — otherwise images pop in and shove
     the layout every time the cards re-render on add/delete. */
  aspect-ratio: var(--aspect-ratio, 1);
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #eef1f4;
}
/* "FREE GIFT" strip across the bottom of a gift item's image */
/* "FREE GIFT" — golden vertical strip on the right side of the image */
/* "FREE GIFT" — gold corner tag, top-left of the image (like the % OFF badge) */
.custom-cart-card__gift-strip {
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  z-index: 2;
  width: auto;
  padding: 5px 12px;
  background: linear-gradient(180deg, #f6c453 0%, #e0a92e 100%); /* golden */
  color: var(--sw-navy, #002b5b);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  writing-mode: horizontal-tb;   /* reset the earlier vertical mode */
  transform: none;
  border-radius: 0 0 8px 0;       /* rounded bottom-right corner, like the reference */
  pointer-events: none;
}

/* .custom-cart-card--gift {
  background: #fff8e6;                 /* soft gold tint */
  border-color: var(--sw-navy, #002b5b);
} */
.custom-cart-card--gift .custom-price-final {
  color: var(--sw-navy, #002b5b);
  text-transform: uppercase;
}

.custom-cart-card__img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.custom-cart-card__details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.custom-cart-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.custom-cart-card__remove {
  background: none;
  border: none;
  color: #dc3545;
  cursor: pointer;
  padding: 4px;
  transition: transform 0.2s;
}
.custom-cart-card__remove:hover {
  transform: scale(1.1);
}

.custom-cart-card__title {
    font-size: 16px;
    margin: 0;
    line-height: 1.3;
    color: #1a1a1a;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width:220px;
}
.custom-cart-card__title a {
  text-decoration: none;
  color: inherit;
}

.custom-badge {
      font-size: 10px;
    color: #8a8a8a;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* overflow: hidden; */
        display: flex;
    gap: 5px;
    align-items: center;
}

.custom-cart-card__price-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  transition: opacity 0.15s ease;
}
.custom-price-final {
      font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}
.custom-price-compare {
  font-size: 14px;
  color: #888;
  text-decoration: line-through;
}
.custom-discount-badge {
  background: #ffe3e3;
  color: #ff3b30;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
}

.custom-cart-card__delivery {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #555;
}
custom-cart-card__quantity { max-width: 165px}
.custom-cart-card__quantity .quantity-selector {
  height: 38px;
 --quantity-selector-width: 165px !important;
 width: 165px;
  background: #fff;
}
.custom-cart-card__quantity .quantity-selector input { font-size:12px; font-weight:700; color #000;}
.custom-cart-card__quantity .quantity-selector:hover {
  background: #fff;
}
@media screen and (min-width: 750px) {
  .custom-cart-card__quantity .quantity-selector-wrapper {
    width: 250px !important;
    gap: var(--gap-sm);
  }
}

@media (max-width: 576px) {
  .custom-cart-card {
    flex-direction: column;
    padding: 15px;
  }
  .custom-cart-card__media {
    width: 100%;
  }
}


/* ════════════════════════════════════════════════════════════
   6) NATIVE THEME OVERRIDES + misc
   ════════════════════════════════════════════════════════════ */
.gokwik-checkout button {
  max-width: 100%;
  width: 100%;
  border: none;
  display: flex;
  border-radius:6px;
  justify-content: center;
  align-items: center;
  background: #0077c1;
  position: relative;
  cursor: pointer;
  padding: 12px 32px;
  /* height: 52px; */
}
.cart-items-component {
  display: contents !important;
}
.cart-discount {
  width: 100%;
  display: none !important;
}
.cart-items__media {
  grid-area: media;
  padding: 10px !important;
}
.cart-items {
  --cart-item-media-width-min: 2.5rem;
  --cart-item-media-width-max: 7.5rem;
  container-name: cart-items;
  container-type: normal !important;
  width: 100%;
}
.cart-drawer .cart-items__table-row--full-width-variants .cart-items__price {
  min-width: auto;
  width: max-content;
  display: none !important;
}
.cart-totals__total-value { color: #1A1A1A; font-size: 16px; font-weight: 700; }

.cart-drawer__header { position:relative; padding: 18px 22px; background: #ffffff; border-bottom:1px solid #eef1f4; margin-bottom: 10px;}
/* ════════════════════════════════════════════════════════════
   7) SLEEP SETUP (cards injected at runtime by sleep-setup-widget.js)
   ════════════════════════════════════════════════════════════ */
.sleep-setup {
  /* max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  margin: 28px 0 24px;
  padding: 28px 10px 8px !important;
  overflow: hidden; */
  /* border-top: 1px solid #e6e6e6; */
}
.sleep-setup h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 20px 0px;
  color: #0b2e59;
  text-transform: uppercase;
  /* letter-spacing: 1.2px; */
}
.sleep-setup-grid {
  display: flex;
  /* align-items: flex-start; */
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  /* padding-bottom: 10px; */
}
.sleep-setup-grid::-webkit-scrollbar {
  height: 6px;
}
.sleep-setup-grid::-webkit-scrollbar-thumb {
  background: #d5d5d5;
  border-radius: 10px;
}
/* Anti-flicker: on every cart add/delete this snippet re-renders with an
   EMPTY grid, then the widget JS refills it ~350ms later. Hide the whole
   section while the grid is empty so it doesn't flash in on each mutation. */
.sleep-setup:has(#sleep-setup-grid:empty) {
  display: none;
}
/* Smooth: ease the cards in instead of snapping. */
.ss-product-card {
  animation: ssCardIn 0.25s ease both;
}
@keyframes ssCardIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ss-product-card { animation: none; }
}
.ss-product-card {
  min-width: 400px;
  max-width: 400px;
  flex: 0 0 400px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ss-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.09);
}
.ss-product-card .ss-card-top {
  display: flex;
  gap: 12px;
  padding: 12px 12px 0;
}
.ss-product-card .ss-card-img-col {
  flex: 0 0 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ss-product-card .ss-card-img-wrap {
  display: block;
  width: 140px;
  height: 140px;
  border-radius: 10px;
  background: #f5f8fc;
  overflow: hidden;
  text-decoration: none;
}
.ss-product-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.ss-product-card .ss-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ss-product-card .ss-card-body a {
  text-decoration: none;
  color: #222;
}
.ss-product-card .ss-card-title-link {
  order: 1;
}
.ss-product-card .ss-card-title-link h3 {
  font-size: 16px;
  margin: 0;
  line-height: 1.3;
  color: #1A1A1A;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ss-product-card .ss-card-tag {
  order: 2;
  font-size: 10px;
  color: #8a8a8a;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ss-product-card .ss-card-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  color: #555;
  background: #f2f2f2;
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}
.ss-product-card .ss-card-jm-slot {
  order: 3;
  margin: 1px 0 0;
}
.ss-product-card .ss-card-wylt-list {
  order: 4;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 1px 0 0;
  max-height: 76px;
  overflow: hidden;
}
.ss-product-card .ss-card-wylt-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.ss-product-card .ss-card-wylt-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid #e0d4f0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #faf5ff;
}
.ss-product-card .ss-card-wylt-icon img {
  width: 11px;
  height: 11px;
  object-fit: contain;
}
.ss-product-card .ss-card-wylt-icon--dot {
  border: none;
  background: #8b5ca7;
  width: 6px;
  height: 6px;
}
.ss-product-card .ss-card-wylt-text {
  font-size: 11px;
  color: #1a1a2e;
  font-weight: 500;
  line-height: 1.3;
}
.ss-product-card .ss-price-row {
  order: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.ss-product-card .ss-price-now {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
}
.ss-product-card .ss-price-was {
  font-size: 12px;
  color: #888;
  text-decoration: line-through;
}
.ss-product-card .ss-discount {
  font-size: 11px;
  color: #ff0001;
  font-weight: 700;
  background: rgba(255,0,1,0.1);
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.ss-product-card .sw-ss-atc {
  width: calc(100% - 24px);
  margin: 12px;
  height: 42px;
  background: #0072ce;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}
.ss-product-card .sw-ss-atc:hover {
  background: #005bb5;
}
.ss-product-card .sw-ss-atc:disabled {
  opacity: 0.7;
  cursor: default;
}

.sleep-setup-skeleton-card {
  min-width: 400px;
  max-width: 400px;
  flex: 0 0 400px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  overflow: hidden;
  padding: 12px;
  min-height: 200px;
}
.sleep-setup-skeleton-card .ss-skel-row {
  display: flex;
  gap: 12px;
}
.sleep-setup-skeleton-card .ss-skel-img {
  width: 140px;
  height: 140px;
  border-radius: 10px;
  flex-shrink: 0;
  background: linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
  background-size: 200% 100%;
  animation: ssSkeletonLoad 1.5s infinite;
}
.sleep-setup-skeleton-card .ss-skel-line {
  height: 14px;
  border-radius: 4px;
  margin-bottom: 10px;
  background: linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
  background-size: 200% 100%;
  animation: ssSkeletonLoad 1.5s infinite;
}
.sleep-setup-skeleton-card .ss-skel-line.short { width: 50%; }
.sleep-setup-skeleton-card .ss-skel-line.long { width: 90%; }
@keyframes ssSkeletonLoad { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (max-width: 768px) {
  .ss-product-card, .sleep-setup-skeleton-card {
    min-width: 330px;
    max-width: 330px;
    flex: 0 0 330px;
  }
  .ss-product-card .ss-card-img-col {
    flex: 0 0 110px;
  }
  .ss-product-card .ss-card-img-wrap,
  .sleep-setup-skeleton-card .ss-skel-img {
    width: 110px;
    height: 110px;
  }
  .sleep-setup h2 {
    font-size: 22px;
  }
}


/* ════════════════════════════════════════════════════════════
   8) CART DRAWER VIEW TRANSITIONS (moved from header-actions.liquid)
   ════════════════════════════════════════════════════════════ */
@media screen and (prefers-reduced-motion: no-preference) {
  html:active-view-transition-type(empty-cart-drawer) .cart-drawer__close-button {
    view-transition-name: cart-drawer-close-button;
  }
}
:active-view-transition .cart-drawer__header,
:active-view-transition .cart-drawer__content {
  background: transparent;
}
::view-transition-old(cart-drawer-content) {
  transform-origin: 50% 33%;
  animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
}
::view-transition-new(cart-drawer-content) {
  transform-origin: top center;
  animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
}
@keyframes cart-contents-old {
  to { scale: 0.92; opacity: 0; }
}
@keyframes cart-contents-new {
  from { scale: 1.05; translate: 0 128px; filter: blur(1px); opacity: 0; }
}


/* ════════════════════════════════════════════════════════════
   9) SUMMARY BLOCK (moved from blocks/…summary.liquid {% stylesheet %})
   Base .cart-summary__inner keeps its sticky top:0 for the DESKTOP
   /cart-page sidebar; the drawer-scoped override in §3 neutralizes it
   inside the drawer only.
   ════════════════════════════════════════════════════════════ */
.cart-summary__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-2xl);
  container-type: inline-size;
  padding: 0;
  position: sticky;
  top: 0;
  align-self: start;
}
@media screen and (min-width: 750px) {
  .cart-summary__inner {
    padding: var(--padding-5xl);
    grid-row: 1 / -1;
  }
}

body:has(> #header-group header-component[sticky]) .cart-summary__inner {
  top: var(--header-height, 0);
}

@media screen and (max-width: 749px) {
  .cart-summary {
    border: none;
  }
}
@media screen and (min-width: 750px) {
  .cart-summary {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / -1;
  }
}

.cart-summary--extend {
  height: 100%;
}
@media screen and (min-width: 750px) {
  .cart-summary--extend {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  /* If extend is on, only include top and bottom borders when radius is 0. */
  .cart-summary--extend:not(.has-border-radius) {
    border-top: none;
    border-bottom: none;
  }
}

.cart-summary--extend .cart-summary__inner {
  height: 100%;
  padding: var(--padding-md) 0 var(--padding-4xl);
}
@media screen and (min-width: 750px) {
  .cart-summary--extend .cart-summary__inner {
    grid-row: 2 / -1;
    padding-inline: var(--page-margin);
    width: var(--sidebar-width);
  }
}

/* If extend is off, apply the border radius to the inner summary container */
.cart-summary__inner.has-border-radius {
  border-radius: var(--border-radius);
}

@media screen and (max-width: 749px) {
  .inherit-parent-scheme--mobile {
    --color-background: inherit;
    --color-background-rgb: inherit;
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-primary: inherit;
    --color-primary-rgb: inherit;
    --color-primary-hover: inherit;
    --color-primary-hover-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-shadow: inherit;
    --color-shadow-rgb: inherit;
    --color-foreground-heading: inherit;
    --color-primary-button-text: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-border: inherit;
    --color-primary-button-hover-text: inherit;
    --color-primary-button-hover-background: inherit;
    --color-primary-button-hover-border: inherit;
    --color-secondary-button-text: inherit;
    --color-secondary-button-background: inherit;
    --color-secondary-button-border: inherit;
    --color-secondary-button-hover-text: inherit;
    --color-secondary-button-hover-background: inherit;
    --color-secondary-button-hover-border: inherit;
    --color-input-text: inherit;
    --color-input-text-rgb: inherit;
    --color-input-background: inherit;
  }
}