/** Shopify CDN: Minification failed

Line 389:53 Unexpected bad string token
Line 389:77 Unterminated string token
Line 456:22 Unexpected "{"
Line 456:31 Expected ":"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:announcement (INDEX:1) */
.announcement__wrapper { /* or sticky */
  z-index: 0;       /* or inherited from header */
}
/* END_SECTION:announcement */

/* START_SECTION:collection-hero (INDEX:17) */
.collection__heading,
.hero__content,
.collection__text-content {
  text-transform: uppercase;
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  font-family: helvetica, sans-serif;
}

/* The rule above forces left alignment with !important, which is what actually
   defeats the section's own text_align setting -- that setting is already
   align--middle-center on all 6 collection templates, it just never won. Centre
   the collection heading only; .hero__content and .collection__text-content are
   shared with other heroes and stay left. Same specificity as the rule above,
   later in source, so it wins. */
.collection__heading {
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
}

.collection__heading h1,
.hero__title {
  font-family: helvetica, sans-serif;
  font-size: 15px !important;
  line-height: 1.2;
  letter-spacing: 1.2px;
  font-weight: 400;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.collection__heading .rte,
.hero__description {
  font-family: helvetica, sans-serif;
  font-size: 10px !important;
  line-height: 1.5;
  letter-spacing: 0.8px;
  color: #797979;
}

.collection__description {
  display: block !important;
  max-width: 720px;
  margin: 8px 0 16px;
  padding: 0;
  font-family: helvetica, sans-serif;
  font-size: 10px !important;
  line-height: 1.5;
  letter-spacing: 0.8px;
  color: #797979;
  text-transform: uppercase;
}

.collection__description p {
  font-size: 10px !important;
  margin: 0;
}

.collection__hero .section--image {
  aspect-ratio: 15 / 8;
  height: auto !important;
  min-height: unset !important;
  max-height: none !important;
  overflow: hidden;
}

.collection__hero .image-parallax,
.collection__hero .image-parallax img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 750px) {
  .collection__hero {
    display: none !important;
  }
}

.collection__text-content {
  margin-left: 0 !important;
}

.collection__text-content.section-padding {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

@media (min-width: 750px) {
  .collection__text-content.section-padding {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

.collection-sale-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #d0021b;
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1;
  padding: 13px 16px;
  white-space: nowrap;
  margin-top: 14px;
}
.collection-sale-strip__clock {
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.8px;
}
@media (min-width: 750px) {
  .collection-sale-strip { font-size: 13px; }
  .collection-sale-strip__clock { font-size: 19px; }
}
.collection-sale-strip { animation: saleStripPulse 1.5s ease-in-out infinite; }
.collection-sale-strip > span:first-child { animation: saleClockBlink 1.5s ease-in-out infinite; }
@keyframes saleClockBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes saleStripPulse { 0%, 100% { background: #d0021b; } 50% { background: #ec1330; } }
@media (prefers-reduced-motion: reduce) {
  .collection-sale-strip, .collection-sale-strip > span:first-child { animation: none; }
}

.custom_collection_filter {
  display: flex;
  justify-content: center !important;
  align-items: center;
  gap: 3px;
  width: 100%;
  margin-top: 12px;
  padding-bottom: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.custom_collection_filter::-webkit-scrollbar {
  display: none;
}

.custom_collection_filter > div {
  flex: 0 0 auto;
}

.custom_collection_filter a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid #000;
  border-radius: 5px;
  background: #000;
  color: #fff;
  font-family: helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: 0.3px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ACTIVE = inverted so the selected pill stands out */
.Most_Viewed.active a,
.Best_Deals.active a,
.Summer_Friendly.active a,
.Under_3999.active a {
  background: #fff;
  color: #000;
  border-color: #000;
}

@media (min-width: 750px) {
  .custom_collection_filter {
    flex-wrap: wrap;
    overflow: visible;
    gap: 10px;
  }
}

.collection__top-banner {
  width: 100%;
  margin: 0 0 16px;
  text-align: center;
}
.collection__top-banner__link { display: inline-block; max-width: 100%; }
.collection__top-banner__img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 50vh !important;
  margin: 0 auto;
  border-radius: 6px;
}
.collection__heading h1.collection__title--sale {
  font-size: 22px !important;
  font-weight: 400;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.collection__heading .collection__description--sale {
  color: #6b6b6b;
  letter-spacing: 1px;
}
@media (min-width: 750px) {
  .collection__heading h1.collection__title--sale { font-size: 26px !important; }
}
/* END_SECTION:collection-hero */

/* START_SECTION:product (INDEX:64) */
@media only screen and (min-width: 768px) {
  .product-single .product__inner {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
@media only screen and (max-width: 767px) {
    .product__mobile--carousel .media__thumb__holder {
        display: block;
        margin-top: 3px;
    }
   .product__mobile--carousel .media__thumb {
    width: 50px;
    height: 50px;
    margin: 0;
}
}

.custom-product-gallery{
  padding-left:6px;
  padding-right:6px;
  padding-top: 6px;
  position: relative;
}


/* MAIN IMAGE */

.custom-product-gallery__main{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  margin-bottom:2px;
}

.custom-product-gallery__main::-webkit-scrollbar{
  display:none;
}

.custom-product-gallery__slide{
  flex:0 0 100%;
  scroll-snap-align:start;
  position:relative;
}

/* 4:5 ratio */

.custom-product-gallery__slide img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
}

/* THUMBNAILS */

.custom-product-gallery__thumbs{
  display:flex;
  gap:2px;
  overflow-x:auto;
  scrollbar-width:none;
}

.custom-product-gallery__thumbs::-webkit-scrollbar{
  display:none;
}

.custom-product-gallery__thumb{
  border:none;
  padding:0;
  background:none;
  cursor:pointer;
  flex:0 0 auto;
}

.custom-product-gallery__thumb img{
  width:40px;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
}

.gallery-fit-pill{
  font-family: 'helvetica', sans-serif;
  position:absolute;
  bottom:6px;
  left:6px;
  background:#e9dfd3;
  color:#111;
  font-size:10px;
  letter-spacing: 0.5px;
  padding:8px 12px;
  border-radius:2px;
  display:flex;
  align-items:center;
  gap:4px;
}

.gallery-fit-pill .star{
  color:#2e7d32;
}

@media(min-width: 750px){
  .gallery-fit-pill{
    display:none;
  }
}


.gallery-color-switch{
  position:absolute;
  right:6px;
  bottom:6px;
  display:flex;
  gap: 4px;
  z-index:5;
}

.gallery-color{
  width:26px;
  height:26px;
  border-radius:3px;
  border:2px solid white;
  cursor:pointer;
}

.custom-product-gallery{
  position:relative;
}

.product__media__wrapper{
  position:relative;
}

/* --- Stop the PDP layout shift ------------------------------------------
   Before Flickity boots, every product image sits in normal flow, so the
   gallery renders many screens tall; the moment Flickity initialises it
   collapses to a single slide and the whole page jumps up.
   The theme's own .flickity-lock-height rule can't prevent this because it
   targets .flickity-viewport, an element Flickity only creates at runtime.
   So reserve the final height on the container itself and clip the stacked
   images until Flickity takes over and removes the :not(.flickity-enabled)
   match. If JS never runs, the first image still shows.
   --cls-ratio is the TALLEST media's height as a % of slide width (unitless),
   used above the mobile breakpoint where images keep their natural ratio. */
   The reservation must stay applied THROUGH Flickity's init, not just before
   it: Flickity adds .flickity-enabled before it gives .flickity-viewport a
   height, so releasing on that class leaves a frame with neither -> the
   gallery collapses to the thumbnails and springs back (a two-stage jump).
   Using aspect-ratio keeps the box the right height in every state; once
   Flickity sizes the viewport the two agree, so nothing moves. */
/* Above the mobile breakpoint: reserve before init only (desktop gallery
   heights are not measured here, so nothing is forced once Flickity owns it). */
.product__grid.flickity-lock-height:not(.flickity-enabled) {
  height: 0;
  padding-bottom: calc(var(--cls-ratio, 125) * 1%);
  overflow: hidden;
}
/* At <=750px theme.css forces product images to `aspect-ratio: 4 / 6` (1.5),
   so the natural media ratio is irrelevant there. Full-width slides settle at
   150%; the carousel layout makes each slide 85% wide, so 85% x 150% = 127.5%.
   Measured: 693.59px on a 544px container, in all three states. */
@media only screen and (max-width: 750px) {
  .product__grid.flickity-lock-height {
    aspect-ratio: 1 / 1.5;
    min-height: 0;
  }
  .product__mobile--carousel .product__grid.flickity-lock-height {
    aspect-ratio: 1 / 1.275;
  }
  /* aspect-ratio drives the height here, so drop the padding reservation */
  .product__grid.flickity-lock-height:not(.flickity-enabled) {
    height: auto;
    padding-bottom: 0;
  }
  /* Flickity centres the 85%-wide cell, leaving 7.5% of the container to its
     left (the peek of the previous slide). Before init the cell sits flush at
     0, so the first image would visibly slide right as Flickity takes over.
     margin-left resolves against the container width, matching it exactly
     without altering the cell's own 85% width. */
  .product__mobile--carousel .product__grid.flickity-lock-height:not(.flickity-enabled) > .product__media {
    margin-left: 7.5%;
  }
}

.size-chart-trigger {
  display: block;
  margin-top: 16px;
  position: relative;
  top: 6px;
}
/* Selected PDP variant option: black filled button */
.product-section [data-product-form-wrapper] input[type="radio"]:checked + label:not(.swatch__label),
.product-section [data-product-form-wrapper] input[type="radio"]:checked ~ label:not(.swatch__label),
.product-section [data-product-form-wrapper] .radio__button input[type="radio"]:checked + label,
.product-section [data-product-form-wrapper] .radio__button input[type="radio"]:checked ~ label {
  background: #ecdcc7a0 !important;
  border-color: #000 !important;
  color: #fff !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Keep text inside selected option white */
.product-section [data-product-form-wrapper] input[type="radio"]:checked + label * ,
.product-section [data-product-form-wrapper] input[type="radio"]:checked ~ label * {
  color: #000000ff !important;
}
/* END_SECTION:product */

/* START_SECTION:section-hero (INDEX:87) */
@media (max-width: 767px) {
    #shopify-section-{{ section.id }} .hero__btn {
      display: none !important;
    }
  }
/* END_SECTION:section-hero */

/* START_SECTION:section-richtext (INDEX:102) */
.text__standard {
  display: flex;
  flex-direction: column;
  row-gap: 3px !important;
}
/* END_SECTION:section-richtext */

/* START_SECTION:survey (INDEX:107) */
/* The theme's header paints 80px but reserves 0px of flow (.header__backfill is
     display:none and the sticky wrapper collapses), so page content sits under
     it at scroll 0. --survey-header-h is measured at runtime; the fallback keeps
     this sane if the script never runs. */
  .survey {
    max-width: 980px;
    margin: 0 auto;
    padding: calc(var(--survey-header-h, 80px) + 24px) 20px 72px;
    color: #000;
    scroll-margin-top: var(--survey-header-h, 80px);
  }
  .survey__panel { display: none; }
  .survey__panel.is-active { display: block; }
  .survey__pool { display: none; }

  .survey__panel--intro,
  .survey__panel--capture,
  .survey__panel--done { text-align: center; }

  /* Closed state: centred, generous whitespace, same type scale as the survey. */
  .survey--closed {
    min-height: 46vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .survey__closed { text-align: center; max-width: 460px; }
  .survey__closed .survey__title { margin-bottom: 16px; }
  /* Body message in Helvetica (not Neue, not Arimo), per request. */
  .survey .survey__closed .survey__lede {
    font-family: Helvetica, Arial, sans-serif;
  }

  .survey__kicker {
    font-family: arimo, helvetica, arial, sans-serif;
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    margin: 0 0 18px;
    opacity: 0.45;
  }
  .survey__title {
    font-family: helvetica, Helvetica, arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 17px;
    letter-spacing: 1.2px;
    line-height: 1.35;
    margin: 0 0 14px;
  }
  .survey__title--sm { font-size: 14px; }
  /* .rte from theme.css also sets a size on this element and loads later, so it
     needs the extra specificity to hold. */
  .survey .survey__lede {
    font-family: arimo, helvetica, arial, sans-serif;
    font-size: 13px;
    line-height: 1.75;
    max-width: 420px;
    margin: 0 auto 26px;
    opacity: 0.6;
  }
  .survey__meta {
    font-family: arimo, helvetica, arial, sans-serif;
    font-size: 12px;
    opacity: 0.55;
    margin: 18px 0 0;
  }

  .survey__btn {
    display: inline-block;
    font-family: arimo, helvetica, arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: #000;
    color: #fff;
    border: 1px solid #000;
    padding: 17px 54px;
    min-width: 240px;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .survey__btn:hover { background: #fff; color: #000; }
  .survey__btn[disabled] { opacity: 0.35; cursor: default; }
  .survey__btn[disabled]:hover { background: #000; color: #fff; }

  .survey__nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 36px;
  }
  .survey__nav .survey__btn { min-width: 180px; }
  .survey__btn--ghost { background: #fff; color: #000; border-color: rgba(236, 220, 199, 1); }
  .survey__btn--ghost:hover { background: #000; color: #fff; border-color: #000; }

  .survey__promo {
    font-family: arimo, helvetica, arial, sans-serif;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding-bottom: 14px;
    position: relative;
    /* table = shrink-to-fit but still block-level, so the button below stays on
       its own line while the accent rule underneath tracks the text width. */
    display: table;
    margin: 0 auto 30px;
  }
  .survey__promo::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 40px;
    height: 3px;
    margin-left: -20px;
    background: rgba(236, 220, 199, 1);
    border-radius: 5px;
  }
  .survey__promo__amount {
    font-family: helvetica, Helvetica, arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .survey__hero { padding: 8px 0 0; }
  .survey__hero__strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 44px;
  }
  .survey__hero__cell {
    aspect-ratio: 1023 / 1537;
    overflow: hidden;
    border-radius: 5px;
    background: rgba(236, 220, 199, 0.5);
  }
  .survey__hero__cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
  }
  /* The outer two sit back so the eye lands in the middle, where the copy is. */
  .survey__hero__cell:first-child,
  .survey__hero__cell:last-child { margin-top: 34px; }
  .survey__hero__body { padding-bottom: 8px; }

  /* Progress */
  .survey__progress { margin-bottom: 36px; }
  .survey__progress__bar {
    height: 2px;
    background: rgba(236, 220, 199, 0.5);
    position: relative;
    overflow: hidden;
    border-radius: 5px;
  }
  .survey__progress__bar span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: #000;
    transition: width 0.35s ease;
  }
  .survey__progress__label {
    font-family: arimo, helvetica, arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 12px;
    opacity: 0.55;
  }

  .survey__q__title {
    font-family: helvetica, Helvetica, arial, sans-serif;
    font-weight: var(--FONT-WEIGHT-HEADING);
    text-transform: capitalize;
    font-size: 14px;
    line-height: 1.3;
    text-align: center;
    margin: 0 0 28px;
  }

  .survey__opts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  .survey__opt {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: center;
    font-family: arimo, helvetica, arial, sans-serif;
    animation: survey-in 0.3s ease both;
  }
  @keyframes survey-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
  .survey__opt__media {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    background: rgba(236, 220, 199, 0.5);
    /* Exactly the ratio of the nine 1023x1537 shots, so they crop by zero pixels.
       2/3 (0.6667) is close but not equal to 0.6656 and still shaved an edge. */
    aspect-ratio: 1023 / 1537;
    outline: 1px solid transparent;
    outline-offset: -1px;
    transition: outline-color 0.18s ease;
  }
  .survey__opt__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Anchor the crop to the top: the odd-sized images lose their hem, not the
       model's head. */
    object-position: top center;
    display: block;
    transition: transform 0.4s ease;
  }
  .survey__opt:hover .survey__opt__img { transform: scale(1.04); }
  .survey__opt:hover .survey__opt__media { outline-color: rgba(236, 220, 199, 1); }
  /* An outline here sat under the image on some browsers, so the selected state
     was invisible. A pseudo-element paints above it reliably. */
  .survey__opt.is-picked .survey__opt__media::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 4px solid rgba(236, 220, 199, 0.5);
    border-radius: 5px;
    pointer-events: none;
  }
  .survey__opt.is-picked .survey__opt__media {
    outline: none;
  }
  .survey__opt.is-picked .survey__opt__tick {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    /* Solid white, not the translucent accent: this sits on top of photography
       and has to read against a pale kaftan as clearly as a dark saree. */
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  }
  .survey__opt.is-picked .survey__opt__tick svg {
    width: 15px;
    height: 15px;
    fill: #980d1e;
    display: block;
  }
  .survey__opt__tick { display: none; }
  .survey__opt__ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    opacity: 0.25;
  }
  .survey__opt__label {
    display: block;
    font-size: 12px;
    margin-top: 10px;
    opacity: 0.7;
  }
  .survey__opt.is-picked .survey__opt__label { opacity: 1; font-weight: 700; }

  /* Restart confirmation */
  .survey__modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .survey__modal[hidden] { display: none; }
  .survey__modal__box {
    background: #fff;
    max-width: 420px;
    width: 100%;
    padding: 32px 28px;
    text-align: center;
    border-radius: 5px;
  }
  .survey__modal__title {
    font-family: helvetica, Helvetica, arial, sans-serif;
    font-weight: var(--FONT-WEIGHT-HEADING);
    text-transform: capitalize;
    font-size: 14px;
    margin: 0 0 10px;
  }
  .survey__modal__text {
    font-family: arimo, helvetica, arial, sans-serif;
    font-size: 12px;
    line-height: 1.6;
    opacity: 0.7;
    margin-bottom: 24px;
  }
  .survey__modal__actions { display: flex; gap: 10px; }
  .survey__modal__actions .survey__btn { flex: 1; min-width: 0; padding: 14px 10px; }

  /* Capture */
  .survey__field { max-width: 420px; margin: 0 auto 18px; text-align: left; }
  .survey__field label {
    display: block;
    font-family: arimo, helvetica, arial, sans-serif;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: capitalize;
    margin-bottom: 7px;
    opacity: 0.6;
  }
  .survey__field input {
    width: 100%;
    font-family: arimo, helvetica, arial, sans-serif;
    font-size: 12px;
    padding: 13px 14px;
    border: 1px solid rgba(236, 220, 199, 1);
    background: #fff;
    color: #000;
    border-radius: 5px;
  }
  .survey__field input:focus { outline: none; border-color: #000; }

  .survey__error {
    font-family: arimo, helvetica, arial, sans-serif;
    font-size: 12px;
    color: #980d1e;
    margin: 0 0 14px;
  }
  .survey__note {
    font-family: arimo, helvetica, arial, sans-serif;
    font-size: 12px;
    line-height: 1.6;
    max-width: 460px;
    margin: 26px auto 0;
    opacity: 0.55;
  }
  .survey__note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

  @media (max-width: 768px) {
    .survey { padding: calc(var(--survey-header-h, 80px) + 16px) 16px 56px; }
    .survey__title { font-size: 14px; letter-spacing: 1px; }
    .survey__title--sm { font-size: 13px; }
    .survey__hero__strip { grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 30px; }
    .survey__hero__cell:first-child,
    .survey__hero__cell:last-child { margin-top: 18px; }
    .survey__q__title { margin-bottom: 20px; }
    .survey__opts { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .survey__btn { width: 100%; padding: 16px 20px; }
    /* min-width would overflow a narrow screen; let the two share the row instead. */
    .survey__nav { gap: 10px; margin-top: 28px; }
    .survey__nav .survey__btn { min-width: 0; flex: 1; padding: 15px 10px; }
  }
/* END_SECTION:survey */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:cart-drawer (INDEX:142) */
.cart__drawer.cart__drawer--checkout-active {
  height: var(--cart-drawer-mobile-height, 100vh);
  max-height: var(--cart-drawer-mobile-height, 100vh);
}

.cart__drawer.cart__drawer--checkout-active .drawer__content {
  height: var(--cart-drawer-mobile-height, 100vh);
  max-height: var(--cart-drawer-mobile-height, 100vh);
  display: flex;
  flex-direction: column;
}

.cart__drawer.cart__drawer--checkout-active .drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.cart__drawer.cart__drawer--checkout-active .drawer__bottom {
  flex: 0 0 auto;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.cart-upsell {
  padding: 20px 16px 10px;
  background: #fff;
}

.cart-upsell__title {
  font-family: Helvetica, sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.cart-upsell__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.cart-upsell__item .product-grid-item {
  aspect-ratio: 4 / 5;
}

.cart-upsell__item .product__grid__title {
  font-size: 10px !important;
  text-transform: uppercase;
}

.cart-upsell__item .product__grid__price {
  font-size: 10px !important;
}

.cart-upsell .product-grid-item {
  position: relative;
}

.cart-upsell .inline-add-product {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

.cart-upsell .product-grid-item__images {
  position: relative;
  padding-bottom: 0 !important;
}

.cart-upsell .product-grid-item__actions {
  position: absolute !important;
  bottom: 0 !important;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.cart-upsell .product-grid-item__btn {
  width: 100%;
  margin: 0 !important;
  padding-top: 15px;
  padding-bottom: 25px;
  border-radius: 0;
}

.cart-upsell .inline-add-product__trigger {
  width: 100%;
  display: block;
}

.cart-upsell .inline-add-product__button-facade-wrapper {
  width: 100%;
  display: block;
}

.cart-upsell .inline-add-product__button-facade-label {
  width: 100%;
  display: block;
  text-align: center;
}

.cart-upsell .inline-add-product__options-menu {
  padding-left: 0;
  padding-right: 0;
}

.cart-upsell .inline-add-product__options-menu-list {
  background: #ecdcc7 !important;
  border-radius: 0;
  padding: 0;
}

.cart-upsell .product-grid-item a {
  pointer-events: none;
  cursor: default;
}

.cart__drawer__checkout-slot {
  position: relative;
  z-index: 5;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 0;
  background: #000;
}

.cart__drawer__checkout-slot .shiprocket-headless {
  display: block;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 0;
}

.cart__drawer__checkout-slot .sr-headless-checkout {
  width: 100% !important;
  min-height: 56px;
  margin: 0 !important;
  border-radius: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.cart__drawer__checkout-fallback {
  width: 100%;
  min-height: 56px;
  margin: 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.cart__drawer__checkout-fallback.is-hidden {
  display: none !important;
}

/* Auto-discount note above the cart totals.
   Horizontal inset matches the TOTAL row (var(--gutter)) so the edges line up. */
.cart-autodisc {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 9px;
  /* #ECDCC7 @ 50% with a lighter band that sweeps across */
  background-image: linear-gradient(
    100deg,
    rgba(236, 220, 199, 0.5) 0%,
    rgba(236, 220, 199, 0.5) 38%,
    rgba(255, 252, 246, 0.92) 50%,
    rgba(236, 220, 199, 0.5) 62%,
    rgba(236, 220, 199, 0.5) 100%
  );
  background-color: rgba(236, 220, 199, 0.5);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: cad-sheen 3.4s ease-in-out infinite;
  border-radius: 5px;
  padding: 11px 13px;
  margin: 0 var(--gutter) 12px;
  color: #000;
  font-family: Helvetica, Arial, sans-serif;
}
@keyframes cad-sheen {
  0%   { background-position: 190% 0; }
  55%  { background-position: -90% 0; }
  100% { background-position: -90% 0; }
}
.cart-autodisc__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  line-height: 0;
}
.cart-autodisc__text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 11px;                 /* space between the two halves */
  font-size: 11.5px;
  letter-spacing: 0.05em;
  line-height: 1.3;
  text-transform: uppercase;
}
.cart-autodisc__hl { font-weight: 700; }
.cart-autodisc__sub {
  font-weight: 500;
  animation: cad-pulse 2.6s ease-in-out infinite;
}
@keyframes cad-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cart-autodisc { animation: none; background-position: 0 0; }
  .cart-autodisc__sub { animation: none; opacity: 1; }
}

/* USP row directly above the checkout button */

/* ---- Reward ledger line: a sub-line of the order summary ----
   Full bleed with the same 16px inset as .cart__footer__itemtotal, so the money
   column shares an edge with the total. The hairline underneath is the shared
   edge with TOTAL and doubles as the progress track - there is no bar object. */
.rw {
  font-family: Helvetica, Arimo, Arial, sans-serif;
  padding: 10px var(--gutter) 0;
  background: rgba(236, 220, 199, .3);   /* same field in every state */
}
.rw__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: start;
}
.rw__col { display: flex; flex-direction: column; min-width: 0; }
.rw__col--r { text-align: right; }
.rw__col--r:empty { display: none; }

.rw__label {
  font-size: 9px; line-height: 13px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: #6f6f6f;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rw__value {
  font-size: 12px; line-height: 15px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: #111;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.rw__ask-b {
  font-size: 9px; line-height: 13px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: #6f6f6f;
  white-space: nowrap;
}
.rw__ask-a {
  font-size: 12px; line-height: 15px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: #111;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

.rw__rule {
  display: block;
  height: 3px;
  margin: 10px calc(var(--gutter) * -1) 0;
  background:
    linear-gradient(#111, #111) left center / var(--rw, 0%) 3px no-repeat,
    #e6e6e6;
}

/* fully earned: one quiet line on the house cream, and no track at all */
.rw__done { display: none; }
.rw--earned .rw__grid { display: none; }
.rw--earned .rw__done {
  display: block;
  font-size: 10px; line-height: 14px; font-weight: 400;
  letter-spacing: .04em; text-transform: uppercase; color: #111;
}
.rw--earned .rw__done b { font-weight: 700; }
/* the rule stays black at 100% - the ladder is complete, not switched off */

/* The ledger's hairline IS the top edge of TOTAL, so drop the row's own border.
   Scoped to the adjacent-sibling case: with milestones switched off .rw is not
   rendered, the selector stops matching and theme.css keeps its border. */
.rw + .drawer__footer__subtotal .cart__footer__itemtotal { border-top: 0 !important; }

@media (max-width: 359px) {
  .rw__value { font-size: 11px; }
  .rw__ask-a { font-size: 11px; }
  .rw__ask-b { font-size: 8px; }
}

  /* Quantity editing: the theme already ships a working stepper at
     .cart__items__quantity but hides it. The pencil just reveals it, so cart
     updates keep going through the theme's own handlers (and its gift-wrap
     sync) rather than a second implementation. */
  .qty-line { display: inline-flex; align-items: center; gap: 6px; }
  .qty-line__edit {
    background: none; border: 0; padding: 0; margin: 0;
    line-height: 0; cursor: pointer; color: #111; opacity: .55;
    transition: opacity .15s ease;
  }
  .qty-line__edit:hover, .qty-line__edit[aria-expanded="true"] { opacity: 1; }
  .qty-line__edit svg { width: 12px; height: 12px; display: block; }

  .cart__items__row .cart__items__quantity { display: none; }
  /* opened inline, immediately after the pencil - the node is moved into the
     quantity paragraph on open, since it lives elsewhere in the row markup */
  .cart__items__row.qty-open .cart__items__quantity {
    display: inline-flex !important;
    margin: 0 0 0 8px;
    vertical-align: middle;
  }
  .cart__items__row.qty-open .quantity__wrapper {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    height: 22px !important;
    padding: 0 !important;
    border: 1px solid rgba(17,17,17,.18) !important;
    border-radius: 4px !important;
    background: none !important;
    position: relative !important;
    width: 76px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    overflow: hidden;
  }
  /* the visually-hidden label still occupied ~6px of the flex row, nudging the
     number off centre */
  .cart__items__row.qty-open .quantity__wrapper > label {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: 0 !important;
    overflow: hidden !important; clip: rect(0 0 0 0) !important;
    white-space: nowrap !important; border: 0 !important;
  }
  /* theme.css sets padding:0 12px on the buttons and 11px 30px / 16px on the
     input, which is what was blowing the stepper apart - override all of it */
  .cart__items__row.qty-open .quantity__button {
    /* theme.css absolutely positions these (minus left:0, plus left:51px) inside
       a relative wrapper, which parked the number underneath the minus */
    position: static !important;
    flex: 0 0 22px !important;
    width: 22px !important; height: 22px !important;
    min-width: 0 !important; padding: 0 !important; margin: 0 !important;
    border: 0 !important; background: none !important;
    font-size: 13px !important; line-height: 1 !important; color: #111 !important;
    display: inline-flex !important; align-items: center; justify-content: center;
  }
  .cart__items__row.qty-open .quantity__input {
    position: static !important; order: 0 !important;
    /* fill whatever is left between the buttons so the digit is always centred,
       regardless of stray sub-pixel space in the wrapper */
    flex: 1 1 auto !important;
    width: auto !important; height: 22px !important;
    min-width: 0 !important; padding: 0 !important; margin: 0 !important;
    border: 0 !important; background: none !important;
    text-align: center !important; color: #111 !important;
    font-family: Helvetica, Arimo, Arial, sans-serif !important;
    font-size: 11px !important; line-height: 22px !important;
    pointer-events: none; caret-color: transparent; user-select: none;
    -moz-appearance: textfield;
  }
  .cart__items__row.qty-open .quantity__input::-webkit-outer-spin-button,
  .cart__items__row.qty-open .quantity__input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
  }

.cart-usp {
  font-family: Helvetica, Arial, sans-serif;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 var(--gutter) 10px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #111;
}
.cart-usp__item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cart-usp__ic { width: 14px; height: 14px; flex: 0 0 auto; }

/* The drawer forces `fill: #000 !important` on every svg, which turns these
   outline icons into solid blobs. Override with higher specificity so they
   render exactly like the PDP row above Add to Cart. */
.cart-usp svg.cart-usp__ic,
.cart-usp svg.cart-usp__ic path,
.cart-usp svg.cart-usp__ic circle,
.cart-usp svg.cart-usp__ic line,
.cart-usp svg.cart-usp__ic rect {
  fill: none !important;
  stroke: currentColor !important;
}

/* Discount badge: filled black disc with the percent knocked out in white. */
.cart-autodisc svg.cart-autodisc__ic circle.cad-bg {
  fill: #000 !important;
  stroke: none !important;
}
.cart-autodisc svg.cart-autodisc__ic .cad-fg line,
.cart-autodisc svg.cart-autodisc__ic .cad-fg circle {
  fill: none !important;
  stroke: #fff !important;
}
@media (max-width: 360px) {
  .cart-usp { font-size: 9px; gap: 6px; }
  .cart-usp__ic { width: 12px; height: 12px; }
}
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:product-price (INDEX:280) */
.product__price__wrap {
  font-family: "Helvetica", sans-serif;
}

.product__price__group {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  row-gap: 10px;
}

.product__price__lines {
  display: flex;
  flex-direction: column;
}

.price__row__1 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sale_percentage {
  color: red;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.product__price__helper {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.price__row__2 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
  flex-wrap: wrap;
}

.product__compare__price {
  font-size: 10px;
  color: #777;
  text-decoration: line-through;
}

.product__inc__text {
  font-size: 10px;
  letter-spacing: 1px;
  color: #555;
}

.sale_percentage.up {
  color: rgb(197, 36, 4);
  font-weight: 600;
  font-size: 16px !important;
}

.sale_percentage.down {
  color: rgb(43, 183, 0);
  font-weight: 600;
  font-size: 16px !important;
}

.sale_percentage__arrow {
  color: red;
  font-size: 12px;
}

/* The PDP discount is a saffron badge, matching the sale accent used across the
   announcement bar, sticky ATC and reward ladder. Scoped to [data-price-off] so the
   separate .up / .down price-movement indicators keep their own red/green. */
.sale_percentage[data-price-off] {
  color: #fff;
  background: #fe7f00;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  padding: 3px 8px;
  border-radius: 4px;
  line-height: 1.35;
}

.product__flat__badge {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding-left: 7px;
  background: #d0021b;
  color: #fff;
  font-family: "Helvetica", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
  border-radius: 8px;
}

.product__flat__badge span:first-child {
  font-size: 16px;
  font-weight: 800;
}

.pdp-sale-timer {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  justify-content: center;
  height: 64px;
  padding: 0 16px;
  background: #d0021b;
  color: #fff;
  border-radius: 6px;
  font-family: "Helvetica", sans-serif;
  line-height: 1;
  text-align: center;
}
.pdp-sale-timer.hide { display: none !important; }
.pdp-sale-timer__label {
  width: 100%;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 0;
  line-height: 1.2;
}
.pdp-sale-timer__l1 { font-size: 1.3em; line-height: 1.15; }
.pdp-sale-timer__l2 { line-height: 1.15; letter-spacing: 1.9px; }
.pdp-sale-timer__clock {
  width: 100%;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .product__price__group { flex-wrap: nowrap; align-items: center; column-gap: 10px; }
  .product__price__lines { min-width: 0; }
  .pdp-sale-timer { margin-left: auto; flex-shrink: 0; height: 54px; padding: 0 11px; }
  .pdp-sale-timer__label { font-size: 13px; letter-spacing: 0.8px; margin-bottom: 0; }
  .pdp-sale-timer__l2 { letter-spacing: 1.2px; }
  .pdp-sale-timer__clock { font-size: 13px; }
}
.pdp-sale-timer__clock [data-st-h],
.pdp-sale-timer__clock [data-st-m],
.pdp-sale-timer__clock [data-st-s] { display: inline-block; min-width: 17px; }
@keyframes saleRoll { 0% { transform: translateY(-0.7em); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.pdp-sale-timer__clock .sale-roll { animation: saleRoll .3s ease; }
@media (prefers-reduced-motion: reduce) { .pdp-sale-timer__clock .sale-roll { animation: none; } }
.pdp-sale-timer__u { font-size: 9px; font-weight: 600; opacity: .9; margin: 0 4px 0 1px; }
.pdp-sale-timer { animation: pdpStripPulse 1s ease-in-out infinite; }
@keyframes pdpClockBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes pdpStripPulse { 0%, 100% { background: #d0021b; } 50% { background: #ec1330; } }
@media (prefers-reduced-motion: reduce) { .pdp-sale-timer, .pdp-sale-timer__label { animation: none; } }

.product__savings {
  font-family: "Helvetica", sans-serif;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 500;
  color: #555;
  letter-spacing: 0.2px;
}

.product__savings[hidden] { display: none; }

.product__savings [data-savings-amount] {
  font-weight: 700;
  color: #000;
}

.product__savings__nocode {
  font-weight: 500;
  color: #555;
}

.product__onsale__badge {
  display: inline-flex;
  align-items: center;
  font-family: "Helvetica", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  background: #d0021b;
  padding: 4px 7px;
  border-radius: 4px;
  white-space: nowrap;
}

.product__onsale__badge.hide { display: none; }
/* END_SNIPPET:product-price */