/** Shopify CDN: Minification failed

Line 5155:2 Unexpected "{"
Line 5155:3 Expected identifier but found "%"
Line 5156:2 Unexpected "{"
Line 5156:3 Expected identifier but found "%"
Line 5157:53 Expected identifier but found whitespace
Line 5159:77 Unterminated string token
Line 5166:67 Unterminated string token
Line 5167:3 Expected identifier but found "%"
Line 5169:2 Unexpected "{"
Line 5169:3 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:bw-actives-list (INDEX:1) */
.bw-act {
  position: relative;
  isolation: isolate;
  background: var(--bwact-bg, var(--bw-bg));
  color: var(--bwact-fg, var(--bw-fg));
  transition: background-color var(--bw-dur-theme) var(--bw-ease),
              color var(--bw-dur-theme) var(--bw-ease);
}

/* --- Photograph ----------------------------------------------------------
   Under everything, clipped to the band, with the ground colour beneath it as
   the underlay. */
.bw-act__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* <picture> is an inline box with no height of its own, so the image's
   height:100% below had nothing to resolve against and fell back to the
   file's intrinsic height — which is object-fit:cover being handed a box the
   same shape as the picture, i.e. no cropping and no filling. The wrapper has
   to carry the height for the image to cover anything. */
.bw-act__bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

.bw-act__bgimg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--bwact-bg-pos, center);
}

/* Outlined capsules are a hairline of type on whatever is behind them, so
   this carries more of the work than a scrim usually does: a photograph with
   any local contrast will break a 1px border in half. Flat rather than
   graded — the capsules are spread across the full width and there is no one
   corner the copy sits in to weight it towards. */
.bw-act__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(12, 10, 9, var(--bwact-scrim, .5));
}

/* Weighted to the side the copy is on, not laid flat across the frame.

   The poster puts every word in the left column and nothing but the
   photograph on the right, so an even wash heavy enough to carry the
   headline also greys out the half of the picture that is doing the work.
   This spends the darkening where the type is and lets the subject keep its
   colour — the same trade the hero makes for the same reason.

   The stops are fractions of the one scrim setting rather than separate
   numbers, so the whole gradient still moves with a single slider. */
.bw-act.is-poster .bw-act__bg::after {
  /* Held at full strength right across the copy column, then dropped. An
     even fade from the left edge sounds gentler but puts the weakest part of
     the wash under the right-hand end of every line of type — which is
     exactly where a headline is hardest to read, because that is where the
     eye is travelling fastest. The falloff starts where the words stop. */
  background:
    linear-gradient(to right,
      rgba(12, 10, 9, var(--bwact-scrim, .5)) 0%,
      rgba(12, 10, 9, calc(var(--bwact-scrim, .5) * .94)) 48%,
      rgba(12, 10, 9, calc(var(--bwact-scrim, .5) * .52)) 76%,
      rgba(12, 10, 9, calc(var(--bwact-scrim, .5) * .3)) 100%),
    linear-gradient(to top,
      rgba(12, 10, 9, calc(var(--bwact-scrim, .5) * .5)) 0%,
      rgba(12, 10, 9, 0) 58%);
}

/* Stacked, the copy runs the full width and there is no side to favour, so
   the wash goes back to even — with the bottom still carried, because that
   is where the headline and the button end up. */
@media screen and (max-width: 899px) {
  .bw-act.is-poster .bw-act__bg::after {
    background:
      linear-gradient(to top,
        rgba(12, 10, 9, var(--bwact-scrim, .5)) 0%,
        rgba(12, 10, 9, calc(var(--bwact-scrim, .5) * .82)) 60%,
        rgba(12, 10, 9, calc(var(--bwact-scrim, .5) * .7)) 100%);
  }
}

.bw-act.has-photo .bw-act__inner { position: relative; z-index: 1; }

/* Type over a photograph, held up locally rather than by darkening the whole
   picture. A scrim heavy enough to carry the type on its own flattens the
   image everywhere, including the parts doing the work; a shadow under the
   letters buys the same legibility where it is actually needed and leaves the
   photograph alone.

   Two layers: a tight one that separates the letterform from whatever is
   immediately behind it, and a wide soft one that lifts the whole word off a
   busy patch. text-shadow inherits, so the eyebrow, headline, supporting
   line, capsules and count line are all covered from here.

   The capsule takes a matching box-shadow because its border is a hairline
   with the same problem as the type — the shadow under the words with a
   floating outline around them would read as two different treatments. */
.bw-act.has-photo .bw-act__inner {
  text-shadow:
    0 1px 2px rgba(12, 10, 9, var(--bwact-shadow, .3)),
    0 2px 14px rgba(12, 10, 9, calc(var(--bwact-shadow, .3) * .62));
}

.bw-act.has-photo .bw-act__pill {
  box-shadow: 0 1px 10px rgba(12, 10, 9, calc(var(--bwact-shadow, .3) * .5));
}

/* Filled, and no longer sitting on the photograph — the shadow that was
   holding it up now only muddies dark type on a light capsule. */
.bw-act.has-photo .bw-act__pill:hover {
  text-shadow: none;
  box-shadow: none;
}

.bw-act.has-rule-top    { border-top: var(--bw-border-w) solid var(--bw-hairline); }
.bw-act.has-rule-bottom { border-bottom: var(--bw-border-w) solid var(--bw-hairline); }

.bw-act__inner {
  max-width: var(--bwact-measure);
  margin-inline: auto;
  padding-inline: var(--bwact-rail);
  padding-block: var(--bwact-pad-y);
}

/* Eyebrow left, blend switcher right, on one line until there is no room for
   two. The gap between them is the eyebrow's own bottom margin moved sideways,
   so a section with no switcher looks exactly as it did before. */
.bw-act__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px var(--bw-space-4);
  margin-bottom: var(--bwact-eyebrow-mb);
}

.bw-act__top .bw-act__eyebrow { margin-bottom: 0; }

.bw-act__eyebrow {
  margin: 0 0 var(--bwact-eyebrow-mb);
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bwact-eyebrow);
  letter-spacing: var(--bw-ls-eyebrow);
  line-height: 1.5;
  text-transform: uppercase;
}

.bw-act__head {
  margin: 0 0 var(--bwact-head-mb);
  font-size: var(--bwact-head);
  line-height: var(--bwact-head-lh);
  text-transform: uppercase;
}

.bw-act__head p { margin: 0; }

/* ==========================================================================
   POSTER

   The section doubling as the pitch for the pair. Everything sits in one
   column down the left over a full-bleed photograph, in the order the
   argument is actually made — what you get, then how much of it, then the
   line that names the offer — with the button holding the opposite corner.

   The children are the same elements the flowing layout uses, reordered
   rather than re-emitted: one set of markup, one claims gate, one place to
   fix anything. Grid `order` is what makes that possible, and it is safe to
   use here because the DOM order and the reading order still agree — a
   screen reader gets eyebrow, count, contents, headline, button either way.
   ========================================================================== */
/* align-content: center, not start. The band has a minimum height so the
   photograph has something to be seen in, and whenever the copy comes out
   shorter than that the difference has to go somewhere — parked at start it
   all piles up under the last row and reads as a section that forgot to end.
   Centred, the slack is split above and below, which is what the padding was
   already doing on the axis that had no minimum. */
.bw-act.is-poster .bw-act__inner {
  display: grid;
  grid-template-columns: minmax(0, var(--bwact-poster-col, 52%)) minmax(0, 1fr);
  align-content: center;
  min-height: var(--bwact-poster-h, clamp(520px, 46vw, 860px));
}

/* Placed on explicit rows rather than reordered, because two of them now
   have to share one: the capsules and the button sit on the same line, at
   opposite ends of it, and `order` cannot express that — it can only say
   what comes next, not what comes alongside.

   Row 1  eyebrow
   Row 2  headline, spanning both columns so it can hold one line
   Row 3  the count
   Row 4  capsules ......................... button
   Row 5  badges
   Row 6  footnote */
.bw-act.is-poster .bw-act__top    { grid-column: 1;      grid-row: 1; }
.bw-act.is-poster .bw-act__head   { grid-column: 1 / -1; grid-row: 2; }
.bw-act.is-poster .bw-act__count  { grid-column: 1;      grid-row: 3; }
.bw-act.is-poster .bw-act__pills  { grid-column: 1;      grid-row: 4; }
.bw-act.is-poster .bw-act__badges { grid-column: 1;      grid-row: 5; }
.bw-act.is-poster .bw-act__note   { grid-column: 1;      grid-row: 6; }

/* The lede belongs to the flowing layout, where it introduces the list. Here
   the count line does that job in three words and the headline closes, so a
   sentence between them is one voice too many. */
.bw-act.is-poster .bw-act__lede { display: none; }

/* Opposite corner, spanning every row so it can sit at the bottom of the
   column whatever height the copy comes out at. */
/* Right, on the capsules' own row, and centred against them — so the pair
   reads as one line across the band rather than as a button that has drifted
   to a corner. It is the taller of the two, so it sets the row's height and
   the capsules sit at the top of it. */
.bw-act.is-poster .bw-act__cta {
  grid-column: 2;
  grid-row: 4;
  align-self: center;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* The secondary sits under the capsule, tucked in to its right edge so the
   pair reads as one stack rather than two loose links. */
.bw-act__cta2 { padding-block: 4px; }

/* --- Capsules, left ------------------------------------------------------
   The poster's copy is a column down the left and the capsules belong to it,
   so they start where the eyebrow, the count and the headline start. Centring
   them only made sense while they sat inside a panel of their own. */
/* Hugging the heading above them, not the bottom of the row.

   The row is as tall as the button column beside it, which is taller than
   two lines of capsules — so pushing the capsules to the row's bottom edge
   opened a gap between them and the line that names them. They belong to
   that heading; the empty space belongs under the button. */
.bw-act.is-poster .bw-act__pills {
  justify-content: flex-start;
  align-self: start;
}

/* The count promoted to a heading. In the flowing layout it is a quiet
   footnote under the capsules; here it is the first thing said, and the
   figure carries it — so the number takes the display face at a size that
   can hold the top of a column, with the qualifier under it in the sans. */
.bw-act.is-poster .bw-act__count {
  margin: 0 0 var(--bwact-poster-gap, 20px);
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  opacity: 1;
}

.bw-act.is-poster .bw-act__countnum {
  display: block;
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bwact-count, clamp(30px, 3.4vw, 56px));
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.bw-act.is-poster .bw-act__countsub {
  display: block;
  margin-top: .35em;
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-bold);
  font-size: var(--bwact-countsub, 15px);
  letter-spacing: .12em;
  line-height: 1.3;
  text-transform: uppercase;
  opacity: .9;
}

/* The offset exists to sit the qualifier under the figure. With the figure
   cleared there is nothing above it to be offset from, and the margin reads
   as a misalignment against the capsules beside it. */
.bw-act.is-poster .bw-act__count.is-sub-only .bw-act__countsub { margin-top: 0; }

/* One line, across the whole measure. It spans both columns for that reason
   alone — held to the copy column it would break over two or three lines at
   this size, and a headline that wraps stops being the thing you read first
   and becomes a paragraph set in display type.

   No max-width, and the size is a vw clamp: what keeps it to one line is the
   cap being tuned to the copy rather than a nowrap that would let it run off
   the side of the page. Lengthen the headline and it wraps — which is the
   safe failure — so lower the cap if that happens. */
.bw-act.is-poster .bw-act__head {
  margin: 0 0 var(--bwact-poster-gap, 20px);
  max-width: none;
}

/* --- The panel behind the capsules ---------------------------------------
   A field of hairline capsules over a photograph is a hundred thin strokes
   competing with whatever is behind each one. The panel gives them a ground
   of their own, which is cheaper than darkening the entire picture to carry
   them: the scrim can then stay low and the photograph keeps its colour.

   fit-content so the box hugs the capsules instead of ruling a band across
   the column — it should read as a label on the picture, not a header. */
.bw-act.has-panel .bw-act__pills {
  width: fit-content;
  max-width: 100%;
  justify-content: center;
  padding: var(--bwact-panel-y, 16px) var(--bwact-panel-x, 18px);
  border-radius: var(--bwact-panel-r, 10px);
  background: var(--bwact-panel);
}

/* --- Sticks in the headline ----------------------------------------------
   A pair of packshots set into the line of type, standing in for the word
   they replace. Sized in em so they scale with the headline at every
   breakpoint — the headline is a clamp() and any px height here would drift
   away from it as the viewport moves.

   inline-flex with a negative overlap so the two read as one object rather
   than two images that happen to be adjacent, and each is tipped the
   opposite way so the pair has a bit of life in it. translateY drops them
   onto the visual baseline: an inline-flex box aligns on its bottom edge, and
   a tall sachet hung there floats well above the letters beside it. */
.bw-act__marks {
  display: inline-flex;
  align-items: flex-end;
  vertical-align: baseline;
  margin-inline: .12em;
  transform: translateY(var(--bwact-mark-drop, .16em));
}

.bw-act__mark {
  display: block;
  width: auto;
  height: var(--bwact-mark-h, 1.35em);
  object-fit: contain;
}

.bw-act__mark:first-child {
  transform: rotate(calc(var(--bwact-mark-tilt, 9deg) * -1));
  transform-origin: bottom right;
}

.bw-act__mark:last-child {
  margin-inline-start: calc(var(--bwact-mark-lap, 26%) * -1);
  transform: rotate(var(--bwact-mark-tilt, 9deg));
  transform-origin: bottom left;
}

/* One image on its own has nothing to overlap and nothing to lean against. */
.bw-act__mark:only-child {
  margin-inline-start: 0;
  transform: rotate(var(--bwact-mark-tilt, 9deg));
}

@media (prefers-reduced-motion: no-preference) {
  .bw-act__mark { transition: transform var(--bw-dur-hover) var(--bw-ease); }
  .bw-act__head:hover .bw-act__mark:first-child { transform: rotate(calc(var(--bwact-mark-tilt, 9deg) * -1.7)); }
  .bw-act__head:hover .bw-act__mark:last-child  { transform: rotate(calc(var(--bwact-mark-tilt, 9deg) * 1.7)); }
}

/* --- Centred -------------------------------------------------------------
   For the capsule field, where the copy is a title over a spread rather than
   a column of rows to read down. */
.bw-act.is-centred .bw-act__inner { text-align: center; }
.bw-act.is-centred .bw-act__top   { justify-content: center; }
.bw-act.is-centred .bw-act__lede  { margin-inline: auto; }

.bw-act__lede {
  max-width: 62ch;
  margin: calc(var(--bwact-head-mb) * -0.55) 0 var(--bwact-head-mb);
  font-family: var(--bw-font-sans);
  font-size: var(--bwact-lede);
  line-height: var(--bw-lh-body);
  opacity: .88;
}

.bw-act__lede p { margin: 0; }

/* --- Capsules ------------------------------------------------------------
   Everything in the box, at a glance. The reading unit is the field, not the
   capsule: what the visitor is meant to take from it is how much there is,
   and only then what any one of them says. So they are set tight, wrapped,
   and all the same weight — no card is allowed to become the hero. */
.bw-act__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bwact-pill-gap, 10px);
  margin: 0;
  padding: 0;
  list-style: none;
  /* Both of these are stopping a stretch, and without them the capsules are
     not sized by their own padding at all.

     A flex container defaults to align-items:stretch, and a wrapped one to
     align-content:stretch. Neither matters while the container is sized by
     its contents — but in the poster this list is a grid item sharing a row
     with the button column, so the row is as tall as the taller of the two
     and the list is stretched to fill it. That height then flows straight
     back down: the lines stretch to fill the container, the capsules stretch
     to fill the lines, and a 12px label ends up in a 60px capsule.

     It looked like the capsules had been enlarged. They had been inflated by
     something two elements away, which is why changing their padding did
     nothing. */
  align-items: flex-start;
  align-content: flex-start;
}

.bw-act.is-centred .bw-act__pills { justify-content: center; }

.bw-act__pill {
  display: inline-flex;
  /* Centred, not baseline. The tick is itself a flex box with an SVG in it
     and no text, so it has no real baseline to align on — the browser
     synthesises one from its bottom edge, which drops the mark below the
     label and adds its own few pixels to the capsule's height. */
  align-items: center;
  gap: .45em;
  padding: var(--bwact-pill-y, 11px) var(--bwact-pill-x, 18px);
  border: var(--bw-border-w) solid currentColor;
  border-radius: var(--bw-radius-pill);
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-bold);
  font-size: var(--bwact-pill, 13px);
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .22s var(--bw-ease), color .22s var(--bw-ease);
}

/* The dose is the part a shopper is actually shopping on, so it takes the
   display face and sits ahead of the name — "5G CREATINE", not "CREATINE 5G".
   Rows with no dose stated simply have no span, and the capsule closes up. */
.bw-act__pilldose {
  /* Sans, not the display face: Plakette at capsule size is not legible,
     so the dose steps up in weight rather than in face. */
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-eyebrow);
  font-size: 1.05em;
  letter-spacing: .02em;
}

/* Inverting on hover, rather than tinting, so a capsule under the pointer is
   unambiguous on a photograph as well as on a flat ground.

   Both colours are named from the band's own tokens, and deliberately NOT
   from currentColor: currentColor in `background` resolves against the colour
   this same rule is setting, so `background: currentColor` with a colour
   flip painted the capsule in the ground colour it was sitting on — a
   capsule that disappeared under the pointer.

   The border flips with them. Left on currentColor it became a ring of the
   ground colour around a filled capsule, which read as a gap rather than an
   edge. */
@media (hover: hover) {
  .bw-act__pill:hover {
    background: var(--bwact-fg, var(--bw-fg));
    border-color: var(--bwact-fg, var(--bw-fg));
    color: var(--bwact-bg, var(--bw-bg));
  }
}

/* The tick. Sized in em so it tracks the capsule's own type, and given the
   highlight colour rather than the capsule's — see the note in the snippet:
   in the same cream as the words it reads as punctuation. */
.bw-act__tick {
  display: inline-flex;
  flex: none;
  align-items: center;
  color: var(--bwact-pop, var(--bw-gold));
  margin-inline-end: -.1em;
}

.bw-act__tick .bw-icon {
  width: 1.05em;
  height: 1.05em;
}

/* Filled, so it cannot be inverted the way the capsule is — the tick follows
   the label into the dark instead. */
.bw-act__pill:hover .bw-act__tick { color: inherit; }

/* --- Badges --------------------------------------------------------------
   Solid where the capsules are hollow. That is the whole distinction: at a
   glance the field reads as a list of contents with a short row of
   guarantees under it, rather than as a longer list with some items shouting.

   No border, because a filled chip with an outline reads as a button, and
   nothing here is pressable. */
.bw-act__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: clamp(22px, 2.6vw, 38px) 0 0;
  padding: 0;
  list-style: none;
}

.bw-act.is-centred .bw-act__badges { justify-content: center; }

.bw-act__badge {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 9px 16px;
  border-radius: var(--bw-radius-pill);
  background: var(--bwact-pop, var(--bw-gold));
  /* Ink rather than the band's own ground: the highlight is chosen to be
     bright, and bright on bright is the one pairing this cannot survive. */
  color: var(--bw-ink);
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-bold);
  font-size: var(--bwact-badge, 12px);
  letter-spacing: .09em;
  line-height: 1;
  text-transform: uppercase;
  /* The type on a filled chip does not need the photograph shadow the rest of
     the section carries, and looks smudged with it. */
  text-shadow: none;
}

.bw-act__badge.is-gated { outline: 2px dashed var(--bwact-fg, var(--bw-fg)); outline-offset: 3px; }

@media screen and (max-width: 749px) {
  .bw-act__badges { gap: 8px; }
  .bw-act__badge { padding: 8px 13px; font-size: calc(var(--bwact-badge, 12px) - 1px); }
}

/* Stated from what is on screen, never typed in. */
.bw-act__count {
  margin: clamp(20px, 2.4vw, 34px) 0 0;
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-bold);
  font-size: 11px;
  letter-spacing: var(--bw-ls-micro);
  text-transform: uppercase;
  opacity: .75;
}

/* --- Poster on a phone ---------------------------------------------------
   One column, and the button stops being a corner ornament and becomes the
   full-width thing at the end — which is what it should be on a screen where
   it is the only action. The order is unchanged, so the argument still runs
   contents, count, headline, button.

   The minimum height goes: on a phone it would only add empty sky under the
   copy, and the photograph is already doing that work behind it. */
/* 1023, not 899. The two-column poster needs enough width for a copy column
   that can hold a run of capsules three across AND a photograph with room for
   its subject beside it. Between about 900 and 1100 it had neither: the
   capsules were squeezed into 480px and sprawled onto extra rows, which read
   as though they had been enlarged when what had actually happened is that
   the column around them shrank. Stacking earlier gives them the full width
   at exactly the point the split stops paying for itself. */
@media screen and (max-width: 1023px) {
  .bw-act.is-poster .bw-act__inner {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  /* The desktop rows are explicit, so they have to be given back before the
     single column can lay itself out — left alone, the button would still be
     pinned to row 4 and land on top of the capsules.

     Source order is not the order this reads in: the count is written after
     the capsules because that is where the flowing layout wants it. `order`
     puts it back in front for the stacked poster, which is the one thing
     order is genuinely for. */
  .bw-act.is-poster .bw-act__top,
  .bw-act.is-poster .bw-act__head,
  .bw-act.is-poster .bw-act__count,
  .bw-act.is-poster .bw-act__pills,
  .bw-act.is-poster .bw-act__badges,
  .bw-act.is-poster .bw-act__note,
  .bw-act.is-poster .bw-act__cta {
    grid-column: 1;
    grid-row: auto;
  }

  .bw-act.is-poster .bw-act__top    { order: 1; }
  .bw-act.is-poster .bw-act__head   { order: 2; }
  .bw-act.is-poster .bw-act__count  { order: 3; }
  .bw-act.is-poster .bw-act__pills  { order: 4; }
  .bw-act.is-poster .bw-act__badges { order: 5; }
  .bw-act.is-poster .bw-act__cta    { order: 6; }
  .bw-act.is-poster .bw-act__note   { order: 7; }
  /* Left, and only as wide as it needs to be. A button stretched across the
     screen is the convention for a form's submit — the last thing left to do
     on a page that exists to do it — and this is a section in the middle of a
     homepage with a text link under it. Sized to its label, it stays an
     invitation and lines up with the eyebrow, the count, the capsules and the
     headline above it. */
  .bw-act.is-poster .bw-act__cta {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    align-items: flex-start;
    margin-top: var(--bwact-poster-gap-m, 26px);
    gap: 14px;
  }
  .bw-act.is-poster .bw-act__cta .bw-btn { width: auto; }
  .bw-act.is-poster .bw-act__head { max-width: none; }

  /* The panel spans the column rather than hugging: hugged at this width it
     is a ragged box a few pixels narrower than everything around it. */
  .bw-act.has-panel .bw-act__pills {
    width: auto;
    justify-content: flex-start;
  }
}

@media screen and (max-width: 749px) {
  .bw-act__pills { gap: 8px; }
  .bw-act__pill {
    padding: 9px 14px;
    font-size: var(--bwact-pill-m, 11px);
    /* Long names get to wrap on a phone rather than pushing the field wider
       than the screen — "magnesium gluconate" is 19 characters and there is
       no width at which it and its neighbour both fit on one line. */
    white-space: normal;
  }
}

/* --- Combined: both blends, side by side ---------------------------------
   The Daily System is two sachets rather than a choice between them, so the
   two lists sit as a pair under one headline. Side by side they also halve
   the run of rows: eight actives down one column is a scroll, four and four
   is a spread you can take in at once. */
.bw-act__body.is-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 72px);
}

.bw-act__group[data-blend="move"]    { --bwact-mark: var(--bw-orange); }
.bw-act__group[data-blend="restore"] { --bwact-mark: var(--bw-cocoa); }

/* Column heading. Deliberately nowhere near the size of the section headline
   above it — these name a half, and type big enough to compete would make
   the section read as two sections that happen to be adjacent. */
.bw-act__grouphead {
  display: flex;
  align-items: baseline;
  gap: .5em;
  margin: 0 0 var(--bwact-group-mb, 18px);
  font-size: var(--bwact-group, clamp(17px, 1.7vw, 24px));
  line-height: 1;
  text-transform: uppercase;
}

.bw-act__grouphead > p { margin: 0; }

/* The blend's own colour, carried by the one mark on the column. It reads
   before the words do, which is what lets the two lists be told apart at a
   glance instead of by reading their headings. */
.bw-act__swatch {
  flex: none;
  width: .52em;
  height: .52em;
  border-radius: 50%;
  background: var(--bwact-mark, currentColor);
  transform: translateY(-.06em);
}

/* Rows fold to two lines in a column half the width: identity on the top
   line, the sentence under it. The four-across grid is right for a full-width
   list and wrong here — the description would get a third of a half. */
.bw-act__body.is-groups .bw-act__row {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "index id"
    "desc  desc";
  row-gap: 8px;
  column-gap: var(--bwact-gap);
}

.bw-act__body.is-groups .bw-act__index { grid-area: index; }
.bw-act__body.is-groups .bw-act__id    { grid-area: id; }
.bw-act__body.is-groups .bw-act__desc  { grid-area: desc; }

/* The closing rule under each column is drawn in that blend's colour, so the
   pair is bracketed as two halves of one thing rather than two loose lists. */
.bw-act__body.is-groups .bw-act__list { border-bottom-color: var(--bwact-mark, var(--bw-fg)); }
.bw-act__body.is-groups .bw-act__row:first-child { border-top-color: var(--bwact-mark, var(--bw-fg)); }

@media screen and (max-width: 899px) {
  /* One under the other on a phone, with the gap doing the separating that
     the columns did. */
  .bw-act__body.is-groups {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(30px, 7vw, 48px);
  }
}

/* --- Cards ----------------------------------------------------------------
   Same markup as the rows — index, name, dose, description — laid out as
   tiles instead of a table. The point is that nothing has to align with
   anything else: a name of any length wraps inside its own box rather than
   setting a column width for the other nine, which is what made the table
   fight its own content once the names grew to "Creatine Monohydrate".

   Everything below is undoing table: the row grid, the rules between rows,
   and the heavy top and bottom borders that made the list read as bounded. */
.bw-act__list.is-cards {
  display: grid;
  grid-template-columns: repeat(var(--bwact-card-cols, 3), minmax(0, 1fr));
  gap: var(--bwact-card-gap, 14px);
  border-bottom: 0;
}

.bw-act__list.is-cards .bw-act__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(18px, 2.2vw, 30px);
  border: var(--bw-border-w) solid var(--bw-hairline);
  border-radius: var(--bw-radius, 18px);
}

/* The table drew a heavier rule above the first row to cap the list. In a
   grid there is no first row, only a first tile. */
.bw-act__list.is-cards .bw-act__row:first-child {
  border-top: var(--bw-border-w) solid var(--bw-hairline);
}

/* Stacked inside the tile: the figure belongs under its name here, not beside
   it — a card is narrow enough that side by side puts them on two lines
   anyway, at which point the alignment is accidental. */
.bw-act__list.is-cards .bw-act__id {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* Pushed to the bottom edge, so tiles of uneven text still line their
   descriptions up against a common baseline at the foot of the row. */
.bw-act__list.is-cards .bw-act__desc { margin-top: auto; }

.bw-act__list {
  margin: 0;
  padding: 0;
  list-style: none;
  /* A closing rule under the last row, so the list reads as a bounded table
     rather than trailing off. */
  border-bottom: 2px solid var(--bw-fg);
}

.bw-act__row {
  display: grid;
  grid-template-columns: var(--bwact-cols);
  align-items: baseline;
  gap: var(--bwact-gap);
  padding-block: var(--bwact-row-y);
  padding-inline: var(--bwact-row-x);
  border-top: var(--bw-border-w) solid var(--bw-hairline);
  transition: background-color .25s var(--bw-ease), color .25s var(--bw-ease);
}

.bw-act__row:first-child { border-top: 2px solid var(--bw-fg); }

/* Hover lights the whole row in the accent. Scoped to a hover-capable
   pointer: on a touchscreen this would latch on after a tap and stay lit. */
@media (hover: hover) {
  .bw-act__list.has-hover .bw-act__row:hover {
    background: var(--bw-accent);
    color: var(--bw-on-accent);
  }
  .bw-act__list.has-hover .bw-act__row:hover .bw-act__dose { color: var(--bw-on-accent); }
}

.bw-act__index {
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bwact-index);
  letter-spacing: .18em;
  opacity: .6;
  font-variant-numeric: tabular-nums;
}

/* Name and dose on one baseline. Wraps rather than overflows if a name ever
   outgrows its column, and the gap goes with the dose when there is none. */
.bw-act__id {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .45em;
  min-width: 0;
}

.bw-act__name {
  font-size: var(--bwact-name);
  line-height: .9;
  text-transform: uppercase;
  /* If it must wrap, split it evenly instead of leaving one word stranded. */
  text-wrap: balance;
}

.bw-act__dose {
  font-size: var(--bwact-dose);
  line-height: .9;
  color: var(--bw-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color .25s var(--bw-ease);
}

.bw-act__desc {
  font-size: var(--bwact-desc);
  line-height: var(--bw-lh-body);
  opacity: .82;
}

.bw-act__row.is-gated { outline: 2px dashed var(--bw-accent); outline-offset: -2px; }

.bw-act__flag {
  display: block;
  margin-top: 6px;
  font-weight: var(--bw-fw-bold);
  font-size: 10px;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--bw-accent);
}

.bw-act__note {
  max-width: 70ch;
  margin: 16px 0 0;
  font-size: var(--bw-text-small);
  line-height: var(--bw-lh-body);
  /* Dimmed from the SECTION's foreground, not from the global --bw-muted.
     That token is rgba(25, 25, 25, .62) on every light palette — near-black,
     which is correct on the page ground and unreadable the moment this
     section pins its own band. On the Ink band it put dark grey on near-black
     and the footnote disappeared entirely. Deriving it from --bwact-fg means
     it follows whatever the band turns out to be. */
  color: color-mix(in srgb, var(--bwact-fg, var(--bw-fg)) 72%, transparent);
}

.bw-act__note.is-flag {
  font-weight: var(--bw-fw-bold);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bw-accent);
}

@media screen and (max-width: 899px) {
  /* Number and name on the first line, description across the full width
     beneath. A content-sized name column is wrong here — the longest name
     would set a width the phone does not have — so it goes back to a share. */
  .bw-act__row {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 10px;
  }

  .bw-act__list.is-cards {
    grid-template-columns: repeat(var(--bwact-card-cols-m, 1), minmax(0, 1fr));
  }
  .bw-act__desc { grid-column: 1 / -1; }
}


/* ==========================================================================
   CARDS THAT FIT WHATEVER IS IN THEM

   The card grid was a fixed column count — a merchant setting, three by
   default — which is fine across the full measure and wrong the moment the
   list is only half of it. In combined mode each group gets half the section,
   so three columns came out about 100px wide, and names like "Creatine
   Monohydrate", "Magnesium Glycinate" and "Electrolytes" ran straight out of
   their tiles and across the one beside them.

   Two separate faults, and both had to go: the track count did not respond to
   the space, and a single long word could not break even when it did.
   ========================================================================== */

/* --- the count follows the space, where the space is not the list's own --- */
/* auto-fit rather than a number, so the columns are decided by how much room
   the list actually has. This is the PAIRED case only: two columns side by
   side, each on half the section, neither of which chose its own width.

   min(100%, …) is the guard that keeps it from overflowing: without it a
   190px minimum inside a container narrower than 190px produces a track wider
   than its parent, which is the same class of bug this rule is fixing. */
.bw-act__body.is-groups .bw-act__list.is-cards {
  /* 240, not 190. The minimum has to clear the longest WORD plus the tile
     padding, not just look like a reasonable card: at 190 the content box came
     out about 140px and "Collagen", "Magnesium" and "Electrolytes" all had to
     break mid-word to fit. Two wide tiles read far better than three that
     hyphenate every name. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

/* --- a list on the full measure divides evenly instead -------------------
   Once a group has the whole section — one blend on its own, or the pair
   stacked below 1200px — auto-fit is answering the wrong question. It fits as
   many tracks as the width allows and lets the remainder fall where it may,
   which put Move's six actives into five tracks and left the sixth stranded
   on a row of its own.

   --bwact-solo-cols is that group's own card count divided into the fullest
   rows it will make. snippets/bw-act-cols.liquid works it out and says why
   that division and not another. The fallback is the merchant's setting, so
   a list that never got the property still lands somewhere sensible.

   Above the phone only. Below 900px a card takes the full width whatever the
   arithmetic says, and this rule outranks the mobile one on specificity, so
   it has to be kept out of that range rather than merely overridden in it. */
@media screen and (min-width: 900px) {
  .bw-act__body.is-groups .bw-act__list.is-cards {
    grid-template-columns: repeat(var(--bwact-solo-cols, var(--bwact-card-cols, 3)), minmax(0, 1fr));
  }
}

/* Except where the pair really is side by side. That is the one arrangement
   whose lists are half a section wide, and the only one auto-fit was written
   for — it comes back exactly where .bw-act__body.is-groups goes to two
   tracks, and nowhere else. */
@media screen and (min-width: 1200px) {
  .bw-act__body.is-groups:not(.is-follow) .bw-act__list.is-cards,
  :root[data-bw-blend="system"] .bw-act__body.is-groups.is-follow .bw-act__list.is-cards {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  }
}

/* The tile padding is set for a full-measure card. In a paired layout it is
   taking 60px of a 300px tile, so it comes down and the words get it. */
.bw-act__body.is-groups .bw-act__list.is-cards .bw-act__row {
  padding: clamp(16px, 1.4vw, 22px);
}

/* --- a word can always break --------------------------------------------- */
/* text-wrap: balance decides where to put a break; it cannot create one. With
   nothing else set, a word longer than its track simply overflowed — and
   because the tiles have no overflow of their own, it overflowed into the
   next tile rather than being clipped.

   break-word only breaks a word that cannot fit on a line of its own, so
   ordinary two-word names still wrap between the words. */
/* anywhere, not break-word. The two behave the same once a line is being laid
   out, but only anywhere also shrinks the element MIN-CONTENT width — and that
   is what was actually overflowing here. A card is a flex column with
   align-items: flex-start, so each child is sized to fit-content, and
   fit-content of an unbreakable word is the width of that word however narrow
   the card is. break-word let the word wrap but left the box it was in as wide
   as the word, so the box carried on into the tile beside it. */
.bw-act__name {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* --- and then it never has to ------------------------------------------- */
/* overflow-wrap: anywhere above is a guarantee against overflow, and the price
   it charges is a break with no regard for where: "MONOHYDRAT / E", one letter
   alone on the second line of a tile.

   The cause is a mismatch of units. --bwact-name is clamp(min, Nvw, max) —
   sized against the VIEWPORT — while the tile it has to fit inside is a
   fraction of the grid, so a three-column layout gives the word a third of the
   room the font size was chosen for. No viewport breakpoint can fix that,
   because the column count is a setting and moves independently.

   So the name is capped against the tile instead. cqw is a percent of the
   container's inline size, the tile spends about 85% of that on content after
   its padding, and the longest word here is eleven uppercase characters at
   roughly 0.74em each — call it 8.6em. 85 / 8.6 is a shade under 10, so 9.5cqw
   is the largest the name can be and still fit MONOHYDRATE on one line.

   min(), so this only ever takes size away. Above the crossover the merchant's
   setting is untouched; below it every name in the grid shrinks together,
   which is the right answer anyway — one tile quietly smaller than its
   neighbours would read as a mistake.

   The container goes on the tile and not on .bw-act__id: an inline-size
   container's width must not depend on its contents, and .bw-act__id is
   fit-content by way of align-items: flex-start. The tile takes its width from
   a minmax(0, 1fr) grid track, which is exactly the independence this needs.

   overflow-wrap: anywhere stays. This makes the break unnecessary; it does not
   make it impossible, and a name nobody has written yet still must not walk
   into the tile beside it. */
.bw-act__list.is-cards .bw-act__row {
  container-type: inline-size;
}

.bw-act__list.is-cards .bw-act__name {
  font-size: min(var(--bwact-name), 9.5cqw);
}

/* And a hard stop, so no child of a tile can be wider than the tile whatever
   is in it. */
.bw-act__list.is-cards .bw-act__row > * {
  max-inline-size: 100%;
  min-inline-size: 0;
}

/* The dose sits under the name and is short, but a tile is narrow enough that
   it deserves the same guarantee. */
.bw-act__dose,
.bw-act__desc {
  overflow-wrap: break-word;
}

/* --- the pair stacks sooner ---------------------------------------------- */
/* Two groups side by side stop being a spread and start being two cramped
   columns well before the phone breakpoint they were stacking at. Below a
   small laptop they go one under the other, which gives each list the whole
   measure and its full column count back. */
@media screen and (min-width: 900px) and (max-width: 1199px) {
  .bw-act__body.is-groups {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(30px, 5vw, 56px);
  }
}

/* --- the pair follows the switcher --------------------------------------- */
/* Set to follow, the two columns are only ever both on screen under the Daily
   System. The rest of the time one of them is display:none, and a two-track
   grid would hold its track open — the visible list squeezed into half the
   section with the other half blank, which is the layout this option exists
   to avoid. So one column is the DEFAULT here and the pair is the exception.

   Written that way round on purpose. The single-blend rule then sits at plain
   class specificity, under the two stacking rules above it at every width
   they cover, and the pair is restored only inside the range where a pair
   fits. Turned around — a high-specificity rule forcing one column — it would
   have beaten those media queries and pinned the phone to whatever it said.

   :root:not([data-bw-blend]) needs no rule of its own: before the header's
   script has written the attribute the default below is already one column,
   and the data-b rules in the section's own <style> show the fallback blend
   inside it. */
.bw-act__body.is-groups.is-follow {
  grid-template-columns: minmax(0, 1fr);
}

@media screen and (min-width: 1200px) {
  :root[data-bw-blend="system"] .bw-act__body.is-groups.is-follow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* END_SECTION:bw-actives-list */

/* START_SECTION:bw-blend-hero (INDEX:2) */
.bw-bh {
  position: relative;
  /* On the sachet scale so the packets, which bleed past this band by
     overflow-clip-margin, paint over the footer below rather than being cut
     off at the seam. Raising the section rather than the packets is the only
     option available: this element is a stacking context (it has to be — see
     the overflow note below), so nothing inside it can rise past this value.

     Raising a whole band is safe here in a way it would not be for an
     overlapping one. Bands do not overlap each other, so a higher layer
     changes nothing about where this background paints; it only decides what
     happens in the strip its packets bleed into. */
  z-index: var(--bw-z-sachet);
  /* background-COLOR: .bw-lit claims background-image for the time-of-day
     light, and the shorthand would wipe it. */
  background-color: var(--bwbh-bg, var(--bw-accent));
  color: var(--bw-cream);
  border-bottom: var(--bw-border-w) solid var(--bw-hairline);
  /* clip on BOTH axes, with a clip margin for the bleed.

     overflow-y: visible let the packets and floats extend the page. Combined
     with vw sizing that is a feedback loop: taller page -> scrollbar ->
     narrower viewport -> smaller vw -> shorter page -> no scrollbar. In the
     theme editor's iframe that oscillation is enough to lock the tab.

     overflow-clip-margin widens the paint region without creating any
     scrollable overflow, so the bleed survives and the loop cannot start. */
  overflow: clip;
  overflow-clip-margin: var(--bwbh-bleed);
  transition: background-color var(--bw-dur-theme) var(--bw-ease);
}

/* --- the photographic ground ---------------------------------------------
 *
 * Sits on the section's background-colour and under everything else. Nothing
 * in the band sets a negative z-index, and this is the first child, so 0 is
 * enough to put it beneath the float field (1), the copy (2) and the rail —
 * a negative value would drop it behind the section's own background and
 * disappear.
 */
.bw-bh__ground {
  /* THE TINT IS A SETTING, AND IT HAS TO BE.
     It was hardcoded warm, because the first photograph here was a pale sky
     and plain ink over one of those comes out a cold slate. Against the next
     picture — a deliberately blue sky — that same warmth turned it brown, so
     the constant had been right about one image and wrong about the next.
     The Liquid above resolves the choice; ink is the default. */
  --bwbh-scrim: var(--bw-ink);
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  /* The same curve and duration as the ground colour, so the picture and the
     colour it replaces cross over together rather than one chasing the other. */
  transition: opacity var(--bw-dur-theme) var(--bw-ease);
}

.bw-bh__ground img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The subject of this one is the two splashes meeting across the middle, and
     a hero this wide crops top and bottom before it crops the sides. */
  object-position: center;
}

/* TWO SCRIMS, NOT ONE.
 *
 * The picture is a bright sky. A single flat veil dark enough to carry cream
 * type over white cloud would be dark enough to throw the photograph away,
 * which is the opposite of the point of having one.
 *
 * So: an even veil, whose strength is the merchant's setting, plus a second
 * pass weighted to the side the copy is on. The headline gets what it needs
 * and the far side of the frame keeps its light. */
.bw-bh__ground::before,
.bw-bh__ground::after {
  content: '';
  position: absolute;
  inset: 0;
}

.bw-bh__ground::before {
  background: var(--bwbh-scrim);
  /* A plain number in the attribute and the division here, rather than a
     percentage inside color-mix: opacity on a solid layer is the one form of
     this that every engine gets right. */
  opacity: calc(var(--bwbh-ground-dim, 40) / 100);
}

.bw-bh__ground::after {
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--bwbh-scrim) 54%, transparent) 0%,
    color-mix(in srgb, var(--bwbh-scrim) 38%, transparent) 34%,
    color-mix(in srgb, var(--bwbh-scrim) 12%, transparent) 62%,
    color-mix(in srgb, var(--bwbh-scrim) 24%, transparent) 100%
  );
}

.bw-bh__inner {
  position: relative;
  /* Deliberately no z-index. A stacking context here would trap the ghost and
     the packet rail inside it, making it impossible to slot the float field
     between them — see .bw-bh__field. */
  display: grid;
  grid-template-columns: var(--bwbh-cols);
  gap: var(--bwbh-gap);
  align-items: center;
  max-width: var(--bwbh-measure);
  margin-inline: auto;
  padding-inline: var(--bwbh-rail);
  padding-block: var(--bwbh-pad-y);
}

/* Positioned so it outranks the float field, which sits between the ghost and
   everything else. Left static it would be a plain grid item and the floats
   would paint over the buttons. */
.bw-bh__copy {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
}

/* Both sets share one grid cell. The column sizes to the taller of the two,
   so switching blends never reflows the page. */
.bw-bh__set {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-self: center;
}

.bw-bh__eyebrow {
  margin: 0 0 var(--bwbh-eyebrow-mb);
  display: flex;
  align-items: baseline;
  gap: 10px;
  max-width: 34ch;
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bwbh-eyebrow);
  letter-spacing: var(--bw-ls-eyebrow);
  line-height: 1.5;
  text-transform: uppercase;
}

.bw-bh__name {
  margin: 0;
  font-size: var(--bwbh-name);
  line-height: var(--bwbh-name-lh);
  text-transform: uppercase;
}

.bw-bh__rating {
  margin: 16px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bwbh-rating);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.bw-bh__stars { display: inline-flex; gap: 2px; }

/* --- Price ---------------------------------------------------------------
   Sits between the name and the lede — the position a product page puts it in,
   which is the whole point of adding it here. Set in the display face at a
   size between the lede and the name, so it reads as a fact about the product
   rather than as another line of body copy. */
.bw-bh__price {
  margin: var(--bwbh-gap-copy) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5em;
  /* Montserrat: at 26-38px the condensed display face is hard to read. */
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bwbh-price, clamp(26px, 2.5vw, 38px));
  line-height: 1;
  letter-spacing: .01em;
}

.bw-bh__price-from {
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-eyebrow);
  font-size: .34em;
  letter-spacing: var(--bw-ls-eyebrow);
  text-transform: uppercase;
  opacity: .72;
}

.bw-bh__price-was {
  font-size: .56em;
  opacity: .6;
}

/* The three small labels share a size and weight so they read as one rank of
   information beneath the figure, not three competing badges. */
.bw-bh__price-save,
.bw-bh__price-out,
.bw-bh__price-note {
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-bold);
  font-size: .3em;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.bw-bh__price-save { color: var(--bw-warm); }
.bw-bh__price-out  { opacity: .72; }

.bw-bh__price-note {
  flex-basis: 100%;
  font-weight: var(--bw-fw-body);
  text-transform: none;
  letter-spacing: 0;
  font-size: .32em;
  opacity: .72;
}

.bw-bh__lede {
  margin-top: var(--bwbh-gap-copy);
  max-width: var(--bwbh-lede-w);
  font-size: var(--bwbh-lede);
  line-height: var(--bw-lh-lede);
  font-weight: var(--bw-fw-body);
}
.bw-bh__lede > :first-child { margin-top: 0; }
.bw-bh__lede > :last-child  { margin-bottom: 0; }

.bw-bh__pills,
.bw-bh__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--bwbh-gap-copy);
}

/* The specs lost their capsules, so the gap has to do the separating that the
   borders used to — and now the lead rules too, so it has to do more of it.
   Wider column gap, tighter row gap when the line wraps. */
.bw-bh__pills { gap: 12px 40px; }

/* NO LEAD RULE IN THIS BAND.
 *
 * .bw-pill leads each fact with a short horizontal stroke. Against a row of
 * capsules it read as the thing that replaced the capsule; against two facts
 * with nothing else around them it reads as a bullet, and a two-item list
 * does not want bullets. The gap above separates them.
 *
 * Scoped to the hero. The same rule leads the specs in bw-blend-spec,
 * bw-build-box and bw-hero-split, where the rows are longer and it is still
 * doing the job it was drawn for. */
.bw-bh .bw-pill::before { display: none; }

/* THE FLAVOUR LINE. Sized and tracked like the eyebrow that used to sit above
   the name — this is the same job at the other end of it. Its own colour is
   inherited, so it stays cream on every ground and never competes with the
   one accent the band is allowed. */
.bw-bh__flavor {
  display: flex;
  align-items: center;
  gap: .55em;
  margin: 14px 0 0;
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bwbh-eyebrow);
  letter-spacing: var(--bw-ls-eyebrow);
  line-height: 1.4;
  text-transform: uppercase;
}

.bw-bh__flag {
  margin: 14px 0 0;
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-bold);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .85;
}

/* Reproduces what the set itself was doing — a column with no gap, spacing
   carried by each child's own margin — so wrapping the copy in it changes
   nothing about how it stacks. It exists to be positioned as one thing. */
.bw-bh__words {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

/* --- stage --------------------------------------------------------------- */
.bw-bh__stage {
  position: relative;
  height: var(--bwbh-stage-h);
  min-width: 0;
}

.bw-bh__ghost {
  position: absolute;
  z-index: 0;
  right: var(--bwbh-ghost-x);
  bottom: var(--bwbh-ghost-y);
  font-size: calc(var(--bwbh-ghost) * var(--bwbh-ghost-scale, 1));
  line-height: var(--bwbh-ghost-lh);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform-origin: right bottom;
  transform: scale(1);
  transition: opacity var(--bwbh-hover-ms) var(--bw-ease),
              transform var(--bwbh-hover-ms) var(--bw-ease);
}

.bw-bh__packets {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* The parked packet is translated -105% and therefore sits directly over
     the copy column, where it would swallow clicks on the button and the
     switcher. The packets are decorative, so the whole rail opts out of hit
     testing; hover still resolves to .bw-bh__stage above it. */
  pointer-events: none;
  transform: translateY(var(--bwbh-packet-y)) rotate(0deg) scale(1);
  transform-origin: center 40%;
  transition: transform var(--bwbh-hover-ms) var(--bw-ease);
}

.bw-bh__packets.is-swapping { transition: none; }

.bw-packet {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  /* Hidden at rest. A parked packet sits 105vw away, and leaving it painted
     forces the compositor to hold a layer spanning both positions — roughly
     six megapixels at 2x, permanently. That is what locks the theme editor
     up on save, when the whole section is re-rasterised. */
  visibility: hidden;
}

.bw-bh__packets.is-swapping .bw-packet { visibility: visible; }

/* Shadow per packet, never on the container. On the container the filter
   region is the union of BOTH packets — including the one parked off-screen —
   so the browser rasterises a strip two viewports wide to draw one shadow.
   The parked packet is visibility:hidden, so it is never painted and its
   filter costs nothing. */
.bw-packet { filter: drop-shadow(30px 40px 34px rgba(12, 12, 12, .4)); }

/* And behind a modal, for the same reason a filtered layer is dropped during
   flight: this is the most expensive raster on the page, it is under 72% ink
   and a blur, and every repaint of it makes that blur run again. */
:root.bw-modal .bw-packet { filter: none; }

/* Dropped during flight: a filtered layer repaints every frame, which is what
   makes the slide choppy rather than the transform itself. */
.bw-bh__packets.is-swapping .bw-packet {
  filter: none;
  /* Promotion only while it is actually moving. A permanent will-change keeps
     the layer alive for the life of the page. */
  will-change: transform;
}

/* Absolutely positioned and centred with auto margins rather than centred as
   a grid item. A percentage height on a centred grid item does not reliably
   resolve against the grid area — it silently falls back to intrinsic width,
   and a 1:3 sachet then renders roughly three times the stage height. With
   inset:0 the containing block is definite, so height:100% is dependable. */
.bw-packet img {
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* The rail itself is emitted per blend in the inline style block above, so
   that it can key off the attribute on <html> without JavaScript. Parked in
   vw rather than %: a percentage resolves against the packet's own box, which
   is only as wide as the stage column, leaving the "off-stage" packet
   visibly over the copy. */

.bw-bh__packets.is-ready .bw-packet {
  transition: transform var(--bwbh-swap-ms) var(--bw-ease);
}

/* --- hover --------------------------------------------------------------- */
/* The enlarged pose is written once, in a custom property, so the pointer path
   and the touch path cannot drift apart. */
.bw-bh__stage {
  --bwbh-pose-packets: translateY(calc(var(--bwbh-packet-y) + (var(--bwbh-hover-s) - 1) * 40%))
                       rotate(var(--bwbh-tilt, 0deg))
                       scale(var(--bwbh-hover-s));
}

/* :hover is deliberately fenced off from coarse pointers. A tap on a
   touchscreen leaves :hover stuck on the element, so with an unscoped rule the
   second tap would strip .is-tapped and the stale :hover would hold the packet
   enlarged — the toggle would appear to work once and then jam. */
@media (hover: hover) and (pointer: fine) {
  .bw-bh__stage:hover .bw-bh__packets { transform: var(--bwbh-pose-packets); }
  .bw-bh__stage:hover .bw-bh__ghost   { transform: scale(var(--bwbh-hover-g)); }
}

/* Touch: the same pose, held by a class the tap toggles. */
.bw-bh__stage.is-tapped .bw-bh__packets { transform: var(--bwbh-pose-packets); }
.bw-bh__stage.is-tapped .bw-bh__ghost   { transform: scale(var(--bwbh-hover-g)); }

/* --- floating assets ----------------------------------------------------- */
/* The floats occupy exactly one gap: above the ghost lettering, below
   everything else. That is only expressible because .bw-bh__inner carries no
   z-index — were it a stacking context its children could not be interleaved
   with a sibling, and the field would have to clear the entire column,
   painting over the packet and the buttons.

   All four therefore compete in .bw-bh's context:
     ghost 0  <  field 1  <  packets 2 / copy 2

   pointer-events stays none; the floats are decorative throughout. */
.bw-bh__field {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.bw-bh :focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

@media screen and (max-width: 899px) {
  /* Only reorder when the columns actually stack. Side by side, the stage
     must stay in source order or it lands left of the copy. */
  .bw-bh.is-stacked .bw-bh__stage { order: -1; }
}

/* --- Phone: the actions row breaks out of the copy column -----------------
   Side by side on a phone the copy column is a little over half the screen,
   and a display-face label at the mobile button size needs most of the
   screen to hold one line — so "Preorder your box" was breaking across two
   lines inside the capsule. Only this row is let out of the column: it takes
   the width from the left rail to the right one, so the button lays out on
   one line over the packshot column while the eyebrow, name, lede and specs
   stay exactly where they were, still measured against the column.

   Stacked rather than wrapped, because the row is now wider than its own
   column and a wrapped switcher would sit out under the packshot with
   nothing above it. max-content keeps the capsule to its label — it reaches
   into the packshot column only as far as the words actually need — and the
   cap stops it running past the rail on the narrowest phones.

   The copy is raised over the packet rail for the same reason: the packets
   paint at the same level and later in source, so an extended button would
   otherwise slide underneath the sachet. */
@media screen and (max-width: 749px) {
  .bw-bh:not(.is-stacked) .bw-bh__copy { z-index: 3; }

  .bw-bh:not(.is-stacked) .bw-bh__actions {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    width: max-content;
    max-width: calc(100vw - var(--bwbh-rail) * 2);
  }

  /* Fills the row it was just given. At max-content that is the label on one
     line; where the cap binds, the label centres over two rather than
     stranding a word beside the arrow. */
  .bw-bh:not(.is-stacked) .bw-bh__actions > .bw-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bw-bh__packets,
  .bw-bh__packets.is-ready .bw-packet,
  .bw-bh__ghost { transition: none; animation: none; }
  .bw-bh__stage:hover .bw-bh__packets,
  .bw-bh__stage.is-tapped .bw-bh__packets { transform: translateY(var(--bwbh-packet-y)); }
  .bw-bh__stage:hover .bw-bh__ghost,
  .bw-bh__stage.is-tapped .bw-bh__ghost { transform: none; }
}


/* ==========================================================================
   THE DAILY SYSTEM

   A third option on a hero built for two. It needed three things the other
   blends did not: a pair of packshots instead of one, a rank above the
   eyebrow, and a third spec.
   ========================================================================== */

/* --- the badges ---------------------------------------------------------- */
.bw-bh__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--bw-space-3);
}

.bw-bh__badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px 4px;
  border-radius: var(--bw-radius-pill);
  background: var(--bw-cream);
  color: var(--bw-ink);
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bw-text-micro);
  letter-spacing: var(--bw-ls-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
}

/* The second one is the claim rather than the rank, and it is drawn rather
   than filled so the two read as different kinds of statement instead of as a
   pair of labels.

   OUTLINED, NOT ACCENTED. It used to be a solid orange pill, which was legible
   on the Daily System's dark ground and invisible on Move's — an orange badge
   on an orange band. Pinning a colour in a component that renders on three
   different grounds is the trap; taking the ground's own ink is the way out.
   currentColor here is --bw-fg, which the section sets per blend, so this is
   correct on orange, on blue and on the photograph without naming any of
   them. */
.bw-bh__badge.is-accent {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 var(--bw-border-w) currentColor;
}

/* --- the switcher holds three ------------------------------------------- */
/* .bw-blend__thumb was written for two tracks: half the width, and one rule
   translating it a full width for Restore. With a third option the maths has
   to come from the control rather than from the selector, so the section
   writes the count and the index and the thumb reads them.

   --bwbh-switch-n and --bwbh-switch-i are set per blend in the Liquid above.
   The two-track default is kept so any other switcher on the site — the
   header's — is untouched. */
/* SCOPED TO THE SET, NOT THE BAND.
   The lead dialog is rendered inside <section class="bw-bh">, so every rule
   written against .bw-bh reaches the blend choice inside that dialog — which
   borrows .bw-blend for its track but is a form field on a cream sheet, not
   the band's own control on the band's own ground. It was taking the hero's
   top margin, its shrink-to-fit width, and under the Daily System its cream
   label colour, which on that sheet is cream on cream.

   .bw-bh__set is the copy column, and the switcher the band owns is the only
   .bw-blend in it. */
.bw-bh__set .bw-blend {
  --bwbh-switch-n: 2;
}

.bw-bh__set .bw-blend__thumb {
  width: calc((100% - 6px) / var(--bwbh-switch-n, 2));
  transform: translateX(calc(var(--bwbh-switch-i, 0) * 100%));
}

/* The blanket Restore rule in bw-tokens.css would still fire on this switcher
   and translate it a full track on top of the index. Cancelled here, where the
   index is doing that job. */
:root[data-bw-blend="restore"] .bw-bh__set .bw-blend__thumb,
[data-bw-blend="restore"] .bw-bh__set .bw-blend__thumb {
  transform: translateX(calc(var(--bwbh-switch-i, 0) * 100%));
}

/* --- ink ground ---------------------------------------------------------- */
/* On ink the switcher's own fill is cream and its unselected labels sit at low
   contrast against it; both come from the shared component, so only the pieces
   that need to change do. */
:root[data-bw-blend="system"] .bw-bh__set .bw-blend__btn { color: var(--bw-cream); }

:root[data-bw-blend="system"] .bw-bh__set .bw-blend__btn[aria-pressed="true"] { color: var(--bw-ink); }

@media screen and (max-width: 899px) {
  .bw-bh__badges { gap: 6px; }
  .bw-bh__badge { font-size: 9px; padding: 4px 9px 3px; }
}

/* --- lifted off the sky --------------------------------------------------
 *
 * The overlay came down far enough for the picture to read as a picture, which
 * is the right trade and leaves the type with less to sit against than it had
 * on flat ink. A shadow is the cheaper half of that trade than more veil: it
 * separates the words from the sky without darkening the sky.
 *
 * Low, wide and cool — the ink the ground is tinted with rather than black, so
 * it reads as depth rather than as an outline. Two shapes, because they do
 * different jobs: type takes a tight shadow that follows the letterforms,
 * boxes take a wide soft one that lifts the whole shape.
 */
:root[data-bw-blend="system"] .bw-bh {
  --bwbh-lift-text: 0 1px 10px color-mix(in srgb, var(--bw-ink) 52%, transparent);
  --bwbh-lift-box:  0 8px 28px color-mix(in srgb, var(--bw-ink) 26%, transparent);
}

:root[data-bw-blend="system"] .bw-bh__name,
:root[data-bw-blend="system"] .bw-bh__flavor,
:root[data-bw-blend="system"] .bw-bh__lede,
:root[data-bw-blend="system"] .bw-bh__pills,
:root[data-bw-blend="system"] .bw-bh__set .bw-blend__btn {
  text-shadow: var(--bwbh-lift-text);
}

/* The badges and the two controls are solid shapes on the sky, so they take
   the box form. The button already carries --bw-shadow; this replaces it
   rather than stacking, because two shadows on one capsule reads as a halo. */
:root[data-bw-blend="system"] .bw-bh__badge,
:root[data-bw-blend="system"] .bw-bh__set .bw-blend,
:root[data-bw-blend="system"] .bw-bh__actions .bw-btn--primary {
  box-shadow: var(--bwbh-lift-box);
}

/* --- colour on the black ------------------------------------------------
 *
 * Move is orange and Restore is cyan because they are a time of day; their
 * grounds carry that and their copy sits on it in one ink. The Daily System
 * has no ground to speak with — it is flat black — so every word in it came
 * out the same cream and the band read as a monochrome.
 *
 * The colour it is missing is the two blends' own. Nothing here is invented:
 * orange is Move, cyan is Restore, gold is what the marquee and the discount
 * badge already use for money. They land in the three places where the band
 * is actually saying one of those three things.
 *
 * All of it is keyed to the system, so Move and Restore are untouched — on
 * their grounds these colours would be the ground itself.
 */

/* THE NAME is one colour. It carried a coloured second word through two
   attempts — cyan, then gold — and both of them made the headline the loudest
   colour in a band that now has two badges and a gold pour arguing under it.
   The name is the anchor; it holds still while those speak. */

/* THE BADGES ARE THE TWO BLENDS.

   Solid, because the outline treatment that saves them on Move's orange has
   nothing to do here. Blue for the rank and orange for the saving: the pair
   is the product — Restore and Move, the two packs standing on the right of
   this band — rather than two decorative accents that happen to be near each
   other. That is also what lets them be this loud without fighting, and it
   is why the name above them stopped being coloured at all.

   Ink on both. --bw-on-orange is a cream that comes out at 2.8:1 on the
   accent; ink is 5.4:1, and it is the pairing the liquid buttons and the lead
   form's choice already use for these two colours. */
:root[data-bw-blend="system"] .bw-bh__badge {
  background: var(--bw-blue);
  color: var(--bw-ink);
}

:root[data-bw-blend="system"] .bw-bh__badge.is-accent {
  background: var(--bw-orange);
  color: var(--bw-ink);
  box-shadow: none;
}

/* THE BUTTON IS INK, WITH CREAM ON IT.

   Move and Restore each put a cream capsule on their own colour, which is the
   inverse of their ground and reads as the one solid thing in the band. The
   Daily System's ground is a photograph, so a cream capsule had nothing to be
   the inverse OF — it was the lightest thing on a light sky, and the gold pool
   inside it was doing the work of separating it from the picture on its own.

   Ink is that inverse here, and it is the only shape in the band dark enough
   to stop the sky. The gold pour reads better on it than it did on cream, and
   the label under the waterline still flips to gold's own ink.

   Written as the component's own two custom properties rather than as
   background and color, so the pour, the shadow, the press and the arrow all
   keep reading the same pair the button already reads.

   The cream border goes with it. That existed to draw the capsule's edge when
   an ink pool met an ink ground; the pool is gold and the capsule is the ink
   now, so there is nothing left for it to separate. */
:root[data-bw-blend="system"] .bw-bh__actions .bw-btn--primary {
  --bw-btn-fill: var(--bw-ink);
  --bw-btn-ink: var(--bw-cream);
}

/* THE SWITCHER IS ALL ONE COLOUR ON THIS GROUND.

   AM and PM were in Move's orange and Restore's cyan, with the marks beside
   them dragged back to cream to stop it being too much. That was two rules
   arguing: the blends' colours were already on the badges and on the packs,
   and a third statement of them inside the control left nothing neutral for
   the eye to rest on.

   Cream throughout — the base rule above already says so — and the fade in
   bw-tokens.css does the work the colour was doing, which is showing you which
   one you are on. */


/* ==========================================================================
   THE PHONE LAYOUT

   Two columns at 390px gave the copy a 176px track and the stage 154, and
   then let the copy break out of its track to 350 and paint over the rail —
   .bw-bh__copy is raised to z-index 3 further up for exactly that reason. It
   worked while the copy was "Move", two lines of lede and one button.

   The Daily System is a 12-character name, a four-line lede, three specs and a
   three-segment switcher. All of it broke out, all of it landed on the
   packshots, and the sachets had 154px to stand in.

   THE ANSWER IS NOT ONE COLUMN, IT IS ONE COLUMN FOR THE WORDS.

   Stacking everything was the fix for that, and it cost the thing a hero is
   for: the product went below the fold and the top of the screen became a
   page of text. What broke was never the split — it was that ALL of the copy
   was in the narrow track, including a button that needs the whole screen.

   So the split is back, and only the words sit in it. The copy spans the
   whole row; the words carry an inset the width of the packet column, which
   is what keeps them out of it; and the switcher and the button carry no
   inset at all, so they run edge to edge underneath both.

   One number decides it — --bwbh-split-m, written above from the same mobile
   ratio setting the grid used to read — so the track and the inset cannot
   drift apart.
   ========================================================================== */

@media screen and (max-width: 749px) {
  .bw-bh:not(.is-stacked) .bw-bh__inner {
    grid-template-columns: minmax(0, 1fr) var(--bwbh-split-m, 44%);
    column-gap: var(--bwbh-gap);
    row-gap: 0;
  }

  /* Both in the one row: the copy across all of it, the packets in the second
     track on top. They do not collide because the words are inset out of that
     track and the controls below it start under the stage. */
  .bw-bh:not(.is-stacked) .bw-bh__copy {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .bw-bh:not(.is-stacked) .bw-bh__stage {
    grid-column: 2 / -1;
    grid-row: 1;
    /* Top-aligned with the words rather than centred in a row whose height
       includes the switcher and the button. */
    align-self: start;
  }

  .bw-bh:not(.is-stacked) .bw-bh__words {
    padding-inline-end: calc(var(--bwbh-split-m, 44%) + var(--bwbh-gap));
    /* The floor that guarantees the switcher starts below the packets. Quoted
       from the stage's own height so a taller stage moves the controls down
       rather than landing on them. */
    min-block-size: var(--bwbh-stage-h);
  }

  /* Stacked mode is the other arrangement entirely and keeps what it had. */
  .bw-bh.is-stacked .bw-bh__inner { grid-template-columns: minmax(0, 1fr); gap: var(--bw-space-6); }
  .bw-bh.is-stacked .bw-bh__stage { order: 2; }

  /* The breakout goes. It exists to give a button more width than the copy
     column has; the copy column is the screen now. */
  .bw-bh:not(.is-stacked) .bw-bh__copy { z-index: auto; }

  .bw-bh:not(.is-stacked) .bw-bh__actions {
    width: auto;
    max-width: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .bw-bh:not(.is-stacked) .bw-bh__actions > .bw-btn {
    width: 100%;
    justify-content: center;
  }

  /* Everything in the copy column is left-aligned against the rail and stops
     at it. Stated rather than inherited, because several of these carried
     their own widths to survive the two-column squeeze. */
  .bw-bh__set,
  .bw-bh__badges,
  .bw-bh__eyebrow,
  .bw-bh__name,
  .bw-bh__lede,
  .bw-bh__pills,
  .bw-bh__price {
    max-inline-size: 100%;
    inline-size: auto;
    text-align: start;
  }

  .bw-bh__lede { max-inline-size: 36ch; }

  /* Its own height, not a full-width minimum: the stage is a column beside
     the words now, not a band under them. */
  .bw-bh:not(.is-stacked) .bw-bh__stage {
    height: var(--bwbh-stage-h);
    min-height: 0;
  }

}

/* --- the switcher holds three on a phone --------------------------------- */
/* grid-auto-columns: 1fr is minmax(auto, 1fr), so a track whose label will not
   fit its share takes more than its share: "Daily System" made a 138px track
   beside two 102s. The thumb is a plain equal division, so it sat 24px short
   of the segment it was marking.

   minmax(0, 1fr) lets a track shrink to its share, which is what makes the
   thumb's arithmetic true. Scoped to this hero — the header's switcher has two
   segments and short labels and is not party to any of it. */
.bw-bh__set .bw-blend {
  grid-auto-columns: minmax(0, 1fr);
}

.bw-bh__set .bw-blend__btn {
  min-width: 0;
  white-space: nowrap;
}

@media screen and (max-width: 749px) {
  .bw-bh__set .bw-blend { inline-size: 100%; }
  .bw-bh__set .bw-blend__btn { padding-inline: var(--bw-space-2); }
}

/* --- the copy sits over the decorative layer ----------------------------- */
/* The breakout rule was raising .bw-bh__copy to z-index 3 and I took that off
   with the breakout. It was doing two jobs: clearing the packet rail, which
   is no longer beside the copy, and clearing the floats, which still are.
   The second one it keeps.

   The eyebrow lost its measure at the same time — max-inline-size: 100% let a
   38-character positioning line run the full 350 and disappear under a
   blood orange. It wraps to two lines instead. */
@media screen and (max-width: 749px) {
  .bw-bh:not(.is-stacked) .bw-bh__copy { position: relative; z-index: 2; }

  .bw-bh__eyebrow {
    flex-wrap: wrap;
    max-inline-size: 30ch;
  }

  /* The floats belong to the product, so on a phone they go with it rather
     than staying up among the words. */
  .bw-bh__stage { position: relative; z-index: 1; }
}


/* --- the switcher is its own row, above the button ----------------------- */
/* It used to be the second item in .bw-bh__actions, which gave it the copy
   gap by inheritance. On its own it has to claim that spacing, and the button
   below it now sits at the tighter distance — the two belong together, and the
   gap that separates copy from actions should be above the pair rather than
   inside it. */
.bw-bh__set .bw-blend {
  margin-top: var(--bwbh-gap-copy);
  /* Its natural width. Stretched it would read as a segmented control the
     width of the column rather than as a three-way choice. */
  width: max-content;
  max-width: 100%;
}

.bw-bh__actions {
  margin-top: 14px;
}

@media screen and (max-width: 749px) {
  /* Full width on a phone, where the button below it is full width too and a
     narrower control above a wide one reads as unfinished. */
  .bw-bh__set .bw-blend { width: 100%; }

  /* The column becomes one and the copy moves to the top of the frame, so the
     weighted scrim turns with it. Heavier overall, too: there is no empty
     half of the picture left to protect at this width.

     And it does not thin out towards the bottom the way the desktop one does.
     On a desktop the lower part of the frame is the packet rail, which needs
     no help; on a phone the copy runs the whole height, so the specs — the
     smallest type in the band — end up over whatever is down there. It stays
     above 40% the whole way rather than dropping to a quarter two thirds
     down. */
  .bw-bh__ground::after {
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--bwbh-scrim) 60%, transparent) 0%,
      color-mix(in srgb, var(--bwbh-scrim) 50%, transparent) 46%,
      color-mix(in srgb, var(--bwbh-scrim) 36%, transparent) 78%,
      color-mix(in srgb, var(--bwbh-scrim) 44%, transparent) 100%
    );
  }
}
/* END_SECTION:bw-blend-hero */

/* START_SECTION:bw-blend-spec (INDEX:3) */
.bw-bs {
  background: var(--bw-bg);
  color: var(--bw-fg);
  transition: background-color var(--bw-dur-theme) var(--bw-ease),
              color var(--bw-dur-theme) var(--bw-ease);
}

.bw-bs.has-rule-top    { border-top: var(--bw-border-w) solid var(--bw-hairline); }
.bw-bs.has-rule-bottom { border-bottom: var(--bw-border-w) solid var(--bw-hairline); }

.bw-bs__inner {
  max-width: var(--bwbs-measure);
  margin-inline: auto;
  padding-inline: var(--bwbs-rail);
  padding-block: var(--bwbs-pad-y);
}

.bw-bs__grid {
  display: grid;
  grid-template-columns: var(--bwbs-cols);
  gap: var(--bwbs-gap);
  align-items: start;
}

/* Without the card there is no second column to hold. Left on the two-column
   track the copy would keep half the width and the headline — the whole point
   of this section — would wrap in a narrow gutter beside nothing. */
.bw-bs__grid.is-cardless { grid-template-columns: minmax(0, 1fr); }

/* --- Paired -------------------------------------------------------------
   Both blends at once, as two columns of one table rather than two sections
   that happen to be adjacent.

   Each set is itself a two-column grid (copy beside card), so pairing them
   unchanged would put four columns across the page and nothing would be
   readable. The inner grid is collapsed to a single track first — copy above
   its own card — and the pairing happens one level up. That is the whole
   trick: the outer axis becomes "which blend", the inner axis becomes "what
   about it", and the two stop competing for the same direction.
   ------------------------------------------------------------------------ */
.bw-bs.is-paired .bw-bs__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bwbs-pair-gap);
  align-items: start;
}

.bw-bs.is-paired .bw-bs__grid {
  grid-template-columns: minmax(0, 1fr);
}

/* A rule between the two, so they read as compared rather than merely placed
   side by side. On the second column only, so it lands between them and not
   down the outside edge. */
.bw-bs.is-paired .bw-bs__set + .bw-bs__set {
  padding-inline-start: var(--bwbs-pair-gap);
  border-inline-start: var(--bw-border-w) solid var(--bw-hairline);
}

@media screen and (max-width: 899px) {
  /* One column. Two spec cards side by side on a phone is two unreadable
     cards — the comparison is worth nothing if neither half can be read. */
  .bw-bs.is-paired .bw-bs__inner { grid-template-columns: minmax(0, 1fr); }

  .bw-bs.is-paired .bw-bs__set + .bw-bs__set {
    padding-inline-start: 0;
    border-inline-start: 0;
    padding-block-start: var(--bwbs-pair-gap);
    border-block-start: var(--bw-border-w) solid var(--bw-hairline);
  }
}

.bw-bs__head {
  margin: 0;
  font-size: var(--bwbs-head);
  line-height: var(--bwbs-head-lh);
  text-transform: uppercase;
}

.bw-bs__head p { margin: 0; }

.bw-bs__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

/* Rounded rectangle, not a pill — this is the packaging's spec box, and it
   is deliberately a different shape from the .bw-pill used elsewhere. */
.bw-bs__chip {
  display: inline-block;
  padding: 11px 14px;
  border: 2px solid currentColor;
  border-radius: var(--bwbs-radius-i);
  font-weight: var(--bw-fw-eyebrow);
  font-style: italic;
  font-size: var(--bwbs-chip);
}

.bw-bs__note {
  margin: 18px 0 0;
  font-size: var(--bwbs-note);
  line-height: var(--bw-lh-body);
  color: var(--bw-muted);
}

/* --- sachet card --------------------------------------------------------- */
.bw-card {
  display: flex;
  flex-direction: column;
  gap: var(--bwbs-card-gap);
  min-height: var(--bwbs-card-min);
  padding: var(--bwbs-card-pad);
  border: var(--bwbs-border) solid var(--bw-ink);
  border-radius: var(--bwbs-radius);
  background: var(--bwbs-card-bg);
  color: var(--bw-on-orange);
  overflow: hidden;
  transition: background-color var(--bw-dur-theme) var(--bw-ease);
}

.bw-card__mark {
  font-size: var(--bwbs-mark);
  line-height: .78;
  text-transform: uppercase;
}

.bw-card__mark span { display: block; }

/* margin-top:auto pushes the name to the optical centre, so the blocks below
   stay bottom-anchored however much copy each blend carries. */
.bw-card__name {
  margin-top: auto;
  font-size: var(--bwbs-name);
  line-height: var(--bwbs-name-lh);
  text-transform: uppercase;
}

.bw-card__tags {
  margin: 0;
  font-style: italic;
  font-size: var(--bwbs-copy);
  line-height: 1.45;
  opacity: .95;
}

.bw-card__band {
  padding: 14px 16px;
  border-radius: var(--bwbs-radius-i);
  background: var(--bwbs-band-bg);
  color: var(--bwbs-band-fg);
  font-size: var(--bwbs-copy);
  line-height: 1.45;
  transition: background-color var(--bw-dur-theme) var(--bw-ease);
}

.bw-card__band b {
  display: block;
  font-weight: var(--bw-fw-eyebrow);
  font-size: 1.06em;
}

.bw-card__band span { font-style: italic; }

.bw-card__band.is-gated { outline: 2px dashed currentColor; outline-offset: 3px; }

.bw-card__flag {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-weight: var(--bw-fw-bold);
  font-size: 10px;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.bw-card__spec {
  padding: 11px 14px;
  border: 2px solid currentColor;
  border-radius: var(--bwbs-radius-i);
  font-weight: var(--bw-fw-eyebrow);
  font-style: italic;
  font-size: var(--bwbs-copy);
}

.bw-card__body {
  margin: 0;
  font-size: var(--bwbs-copy);
  line-height: 1.5;
}

.bw-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.bw-card__flavour {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-style: italic;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .92;
}

.bw-card__net {
  margin: 0;
  font-size: 10px;
  letter-spacing: .1em;
  opacity: .8;
}

@media screen and (max-width: 899px) {
  .bw-bs__chips { margin-top: 20px; }
}
/* END_SECTION:bw-blend-spec */

/* START_SECTION:bw-blend-split (INDEX:4) */
/* --- Masthead ------------------------------------------------------------
   Deliberately NOT a stacking context and not overflow-clipped. The panels
   below rely on both: they sit on --bw-z-sachet so their packshots cross the
   section edge, and either property here would trap them back inside. This
   wrapper exists only to stack the copy above the grid. */
.bw-splithero {
  background-color: var(--bw-bg);
  color: var(--bw-fg);
  transition: background-color var(--bw-dur-theme) var(--bw-ease),
              color var(--bw-dur-theme) var(--bw-ease);
}

.bw-splithero__masthead {
  max-width: var(--bwp-masthead-measure, 900px);
  padding-block: var(--bwp-masthead-pad-y, clamp(48px, 7vw, 104px)) var(--bwp-masthead-gap, clamp(28px, 4vw, 56px));
  padding-inline: var(--bw-rail);
  display: flex;
  flex-direction: column;
  gap: var(--bw-space-5);
  align-items: flex-start;
  text-align: start;
}

.bw-splithero__masthead.is-center {
  margin-inline: auto;
  align-items: center;
  text-align: center;
}

.bw-splithero__eyebrow {
  margin: 0;
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bwp-masthead-eyebrow, var(--bw-text-eyebrow));
  letter-spacing: var(--bw-ls-eyebrow);
  text-transform: uppercase;
  color: var(--bw-muted);
}

/* The display face, at hero scale. This is the one piece of type on the page
   that has to hold the whole proposition, so it is sized off the viewport
   rather than a fixed step. */
.bw-splithero__h {
  margin: 0;
  font-family: var(--bw-font-display);
  font-weight: 400;
  font-size: var(--bwp-masthead-h, clamp(44px, 7.4vw, 122px));
  line-height: var(--bw-lh-display);
  letter-spacing: var(--bw-ls-display);
  text-transform: uppercase;
  text-wrap: balance;
}

.bw-splithero__lede {
  max-width: 54ch;
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-body);
  font-size: var(--bwp-masthead-lede, var(--bw-text-lede));
  line-height: var(--bw-lh-lede);
  color: var(--bw-muted);
}
.bw-splithero__lede > :first-child { margin-block-start: 0; }
.bw-splithero__lede > :last-child  { margin-block-end: 0; }

.bw-splithero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bw-space-4);
}

@media screen and (max-width: 749px) {
  .bw-splithero__masthead {
    padding-block: var(--bwp-masthead-pad-y-m, 40px) var(--bwp-masthead-gap-m, 26px);
  }
}

.bw-split {
  display: grid;
  grid-template-columns: repeat(var(--bwp-cols), minmax(0, 1fr));
  position: relative;
  /* clip on one axis only: vertical bleed is the whole point, horizontal
     bleed would just add a scrollbar. */
  overflow-x: clip;
  overflow-y: visible;
}

.bw-split.has-rule-top    { border-top: var(--bw-border-w) solid var(--bw-hairline); }
.bw-split.has-rule-bottom { border-bottom: var(--bw-border-w) solid var(--bw-hairline); }

.bw-panel {
  position: relative;
  /* Resting lift, not just a hover one. The packshot bleeds past the panel by
     design (Packshot bleed), and the bands on either side claim layers of
     their own — the marquee above is 3, the proof bar below is positioned —
     so at the default layer the bleed was cut off at the section edge whenever
     the pointer was elsewhere. The whole panel is raised rather than the image
     because `perspective` on this element opens a stacking context the image
     cannot escape; see the hover rule below. */
  z-index: var(--bw-z-sachet);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
  min-height: var(--bwp-min-h);
  padding: var(--bwp-pad);
  /* Colour and image set separately: the shorthand would reset the other, and
     the sky is what carries the time of day. See p_sky in the Liquid above. */
  background-color: var(--bwp-bg);
  background-image: var(--bwp-sky);
  color: var(--bwp-fg);
  /* Set per-section. "Bleed" lets the packshot break the panel edge, which is
     what sells the depth — a sachet cropped flush to a rectangle reads flat.
     Horizontal escape is caught by .bw-split so it can never produce a
     sideways scrollbar. */
  overflow: var(--bwp-overflow);
  perspective: var(--bwp-perspective);
  text-decoration: none;
  /* z-index is in the list for the hover lift below, at 0s but with a delay.
     See there for why the delay has to live on this rule rather than on the
     hover one. */
  transition: background-color var(--bw-dur-theme) var(--bw-ease),
              z-index 0s linear var(--bwp-dur);
}

/* The lift goes on the PANEL, not on the packshot. .bw-panel sets `perspective`
   for the pointer lean, and a perspective other than none opens a stacking
   context — so any z-index on .bw-panel__img is resolved inside the panel and
   can only reorder it against the panel's own name and flavour line. The
   packshot could never rise past the panel however high it was set. Raising
   the panel lifts the whole stacking context, packshot included, into the
   page.

   .bw-split is deliberately left alone: it is position:relative with no
   z-index, so it is not a stacking context and the raised panel resolves
   against the sections themselves.

   Both the hover and the focus-visible state, matching the scale rules below —
   a keyboard user gets the same lift. */
.bw-panel:hover,
.bw-panel:focus-visible {
  z-index: var(--bw-z-hover);
  /* Instant on the way up. The base rule delays the drop by the full hover
     duration instead, because z-index cannot be interpolated: without the
     delay the panel would fall back to its resting layer on the first frame
     of the shrink, and the packshot would spend the rest of that animation
     sliced by whichever band it had grown over. */
  transition: background-color var(--bw-dur-theme) var(--bw-ease),
              z-index 0s;
}

.bw-panel.has-divider + .bw-panel.has-divider { border-inline-start: var(--bw-border-w) solid rgba(255, 255, 255, .22); }

a.bw-panel { cursor: pointer; }

/* Pinned to the corner rather than dropped into the flow. .bw-panel is a grid
   whose rows the packshot depends on (auto 1fr), so an extra in-flow child
   would push the image row and change the crop on both panels. Out of flow it
   costs the layout nothing, and a time in the top corner reads as a clock on
   the wall of each panel — which is the idea. */
.bw-panel__time {
  position: absolute;
  z-index: 4;
  top: var(--bwp-pad);
  inset-inline-end: var(--bwp-pad);
  --bw-timestamp-size: var(--bwp-time-size, 26px);
  opacity: .82;
}

.bw-panel__eyebrow {
  position: relative;
  z-index: 4;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  max-width: 34ch;
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bwp-eyebrow);
  letter-spacing: var(--bw-ls-eyebrow);
  line-height: 1.5;
  text-transform: uppercase;
}

/* Bigger than the eyebrow above it, not smaller. An eyebrow is a label,
   glanced at once; this is a list, and it has to survive being read at arm's
   length over a photograph. Full opacity and some weight for the same reason.
   Not uppercased — small caps at this length turns into a wall.

   Measure is the guard against the packshot. The list is capped narrow and
   each item sits on its own line, so the block is a column down the start
   edge rather than a paragraph reaching across the panel. --bwp-actives-mea
   is a setting because the right cap depends on the longest ingredient name,
   which changes with the formulation. */
.bw-panel__actives {
  position: relative;
  z-index: 4;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  max-width: var(--bwp-actives-mea);
  font-weight: 500;
  font-size: var(--bwp-actives);
  letter-spacing: .01em;
  line-height: 1.45;
}

.bw-panel__actives li {
  position: relative;
  padding-inline-start: 15px;
}

/* Drawn rather than a list-marker: ::marker takes almost no styling in
   Safari, and the dot has to sit on the first line's optical centre at any
   font size, which .62em tracks and a marker does not. */
.bw-panel__actives li + li { margin-top: 3px; }

.bw-panel__actives li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: .62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .8;
}

.bw-panel__name {
  position: absolute;
  z-index: 1;
  left: var(--bwp-inset);
  right: var(--bwp-inset);
  bottom: var(--bwp-name-bot);
  font-size: calc(var(--bwp-name) * var(--bwp-name-scale, 1));
  line-height: var(--bwp-name-lh);
  text-transform: uppercase;
  transform-origin: left bottom;
  transform: scale(1);
  transition: transform var(--bwp-dur) var(--bw-ease);
}

.bw-panel__img {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 50%;
  margin-inline: auto;
  width: auto;
  height: var(--bwp-img-h);
  max-width: 96%;
  object-fit: contain;
  pointer-events: none;
  transform: translateY(var(--bwp-img-y))
             rotateX(var(--bwp-rx, 0deg))
             rotateY(var(--bwp-ry, 0deg))
             rotate(0deg)
             scale(1);
  transform-style: preserve-3d;
  transition: transform var(--bwp-dur) var(--bw-ease);
}

.bw-panel.has-shadow .bw-panel__img { filter: drop-shadow(30px 40px 34px rgba(12, 12, 12, .42)); }

.bw-panel__flavour {
  position: absolute;
  z-index: 3;
  right: var(--bwp-inset);
  bottom: calc(var(--bwp-inset) * .8);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-style: italic;
  font-size: var(--bwp-flavour);
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
  text-align: end;
}

/* Visually hidden but announced. The giant name is aria-hidden, so without
   this an anchor wrapping only decorative content would have no accessible
   name at all. */
.bw-panel__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Hover and keyboard focus behave identically — a keyboard user should get
   the same affordance a mouse user does.

   Matched on .bw-panel, NOT on a.bw-panel. A panel only renders as an anchor
   when its Link setting is filled in; with the field empty it is a plain div,
   and an a-qualified selector silently never matches. The packshot is
   decorative either way, so the lift should not depend on whether the merchant
   happened to add a link. */
.bw-panel:hover .bw-panel__name,
.bw-panel:focus-visible .bw-panel__name {
  transform: scale(var(--bwp-hover-name));
}

/* Matched to the blend hero's packet, term for term: the same scale, the same
   randomised rotate, and a lift derived from the scale rather than set on its
   own dial — (scale - 1) * 40%. Deriving it is what keeps the two in step; a
   standalone lift value silently stops matching the moment either section's
   scale is retuned.

   rotateX/rotateY stay in the list but resolve to 0deg unless "Packshot leans
   toward the cursor" is on. The hero has no such lean, so it ships off. */
.bw-panel:hover .bw-panel__img,
.bw-panel:focus-visible .bw-panel__img {
  transform: translateY(calc(var(--bwp-img-y) + (var(--bwp-hover-img) - 1) * 40%))
             rotateX(var(--bwp-rx, 0deg))
             rotateY(var(--bwp-ry, 0deg))
             rotate(var(--bwp-tilt))
             scale(var(--bwp-hover-img));
}

/* While the pointer is being tracked the transition is dropped, or every
   frame would chase a 0.55s ease and the packshot would lag the cursor. */
.bw-panel.is-tracking .bw-panel__img { transition: transform .08s linear; }

a.bw-panel:focus-visible { outline: 3px solid var(--bwp-fg); outline-offset: -6px; }

@media screen and (max-width: 749px) {
  .bw-panel.has-divider + .bw-panel.has-divider {
    border-inline-start: 0;
    border-block-start: var(--bw-border-w) solid rgba(255, 255, 255, .22);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bw-panel__name,
  .bw-panel__img { transition: none; }
  .bw-panel:hover .bw-panel__name,
  .bw-panel:focus-visible .bw-panel__name { transform: none; }
  .bw-panel:hover .bw-panel__img,
  .bw-panel:focus-visible .bw-panel__img { transform: translateY(var(--bwp-img-y)); }
  .bw-panel.is-tracking .bw-panel__img { transition: none; }
}
/* END_SECTION:bw-blend-split */

/* START_SECTION:bw-capture (INDEX:6) */
.bw-cap {
  /* Base is the opaque ground; the veil layers over it as a one-stop gradient
     so a single element carries both without needing a wrapper. The veil is
     transparent for every background option except Panel. */
  position: relative;
  background-color: var(--bwcap-base);
  /* The veil is the default: a one-stop gradient standing in for a flat
     overlay, so a single element carries base and veil without a wrapper.
     The Split background replaces it wholesale with a two-colour stop. */
  background-image: var(--bwcap-bgimg, linear-gradient(var(--bwcap-veil), var(--bwcap-veil)));
  color: var(--bwcap-fg);
  padding-block: var(--bwcap-pad-y);
  padding-inline: var(--bwcap-rail);
  /* Clip on both axes. overflow-y: visible would let the cut-outs extend the
     page, which with vw sizing can oscillate the scrollbar. The bleed slider
     widens the paint region instead. */
  overflow: clip;
  overflow-clip-margin: var(--bwcap-bleed, 0px);
}

/* Both layers sit under .bw-cap__inner, which is position:relative z-index:1,
   so no z-index is needed here — source order and the inner's stacking
   context are enough, and adding one would only invite it to fight the
   floats layer. */
.bw-cap__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--bwcap-bg-pos, 50% 50%);
}

.bw-cap__scrim {
  position: absolute;
  inset: 0;
  background: var(--bw-ink);
  opacity: var(--bwcap-overlay);
}

/* Decorative, and never in the way of a click. */
/* z-index: 0 is doing one specific job: opening a stacking context.

   bw-tokens.css lifts the float under the pointer to --bw-z-hover (42) so the
   piece being pointed at is above every other float. With this wrapper at
   z-index auto, that 42 competed directly with .bw-cap__inner below — so
   hovering a cut-out threw it in front of the headline, the email field and
   the button. On a decorative layer over a form, that is the one thing it
   must never do.

   A positioned element with any z-index, 0 included, contains its descendants'
   layers. The floats still lift above EACH OTHER on hover, inside here, and
   the whole layer stays behind the copy whatever number one of them takes.
   Nothing moves at rest: auto and 0 both lost to .bw-cap__inner's 1 already.

   The heroes deliberately do the opposite — .bw-hero__field states no z-index
   so its floats can cross into neighbouring bands — which is right for a
   photograph and wrong for the box someone is typing an address into. */
.bw-cap__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bw-cap__inner {
  position: relative;
  z-index: 1;
  max-width: var(--bwcap-measure);
  margin-inline: auto;
}

/* THE BLEND PILL GETS A SCRIM, AND IT IS NOT DECORATION.

   The form column is wide enough to reach under the floating cut-outs, and
   .bw-cap__field is behind it — so the pill is above the packshots and
   clickable, but its track is transparent. In the header that is right, since
   the header sits on a flat ground. Here it meant reading a 12px label
   through a photograph of a sachet carrying its own type.

   The email capsule beside it never had the problem because it is opaque, and
   four fifths of the band's own base gets the pill close enough: enough to
   settle a photograph, close to invisible where the ground is already flat.

   Derived from --bwcap-base, the band's real ground, and not from a brand
   token — for the same reason the labels take their colour from currentColor
   rather than --bw-fg. See the note on .bw-choice in assets/bw-lead.css. */
.bw-cap .bw-choice__track {
  background: color-mix(in srgb, var(--bwcap-base) 80%, transparent);
}

/* Split puts the copy and the form on one row; centred stacks them and
   narrows the measure so a long headline does not run to a line length that
   stops being readable. */
.bw-cap--split .bw-cap__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.bw-cap--centered .bw-cap__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(20px, 3vw, 34px);
}

.bw-cap--centered .bw-cap__copy,
.bw-cap--centered .bw-cap__formwrap { max-width: 62ch; width: 100%; }

.bw-cap__eyebrow {
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-eyebrow);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 .9em;
  opacity: .85;
}

.bw-cap__h p,
.bw-cap__h {
  font-family: var(--bw-font-display);
  font-size: var(--bwcap-h);
  line-height: var(--bw-lh-display);
  letter-spacing: var(--bw-ls-display);
  text-transform: uppercase;
  margin: 0;
}

.bw-cap__body {
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-body);
  font-size: var(--bwcap-body);
  line-height: 1.55;
  margin-top: 1em;
  max-width: 46ch;
}

.bw-cap--centered .bw-cap__body { margin-inline: auto; }

.bw-cap__incentive {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  margin: 1.25em 0 0;
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-bold);
  font-size: 15px;
  letter-spacing: .04em;
}

.bw-cap__incentive-icon { flex: none; }

/* --- Badges ---------------------------------------------------------------
   Mixed from the band's own ink rather than given colours, so one rule is
   right on all four grounds — a fill picked to sit on the cream panel is a
   smudge on the accent band and invisible on a custom dark one. */
.bw-cap__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 1.5em 0 0;
  padding: 0;
  list-style: none;
}

.bw-cap__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  background: var(--bwcap-badge-fill);
  border: var(--bw-border-w) solid var(--bwcap-badge-line);
  border-radius: var(--bw-radius-pill);
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-bold);
  font-size: 12px;
  letter-spacing: var(--bw-ls-micro);
  line-height: 1.3;
  text-transform: uppercase;
}

.bw-cap__badge-icon { flex: none; opacity: .8; }

/* --- form ---------------------------------------------------------------- */

.bw-cap__form { margin: 0; }

/* ONE CAPSULE, NOT TWO CONTROLS SIDE BY SIDE

   The field and the button are a single object with the button inset into it.
   Two separate pills with a gap between them read as two choices; one capsule
   reads as one action with its own handle, which is what this is — and on a
   page whose only conversion event is this form, that difference is the whole
   design. It also gives the fill and the stroke one owner, so the field can
   stop carrying a border of its own that has to be kept in step. */
.bw-cap__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 4px;
  background: var(--bwcap-field-bg);
  border: var(--bw-border-w) solid var(--bwcap-field-line);
  border-radius: var(--bwcap-radius);
  transition: border-color var(--bw-dur-hover) var(--bw-ease),
              box-shadow var(--bw-dur-hover) var(--bw-ease);
}

/* The whole capsule takes the focus ring, because the whole capsule is what
   reads as the control. The input's own ring is unset below — two rings on
   one object, one of them inside the other, looks like a rendering fault. */
.bw-cap__row:focus-within {
  border-color: var(--bwcap-fg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bwcap-fg) 22%, transparent);
}

.bw-cap__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Two class names, not one, and that is load-bearing. base.css carries

     textarea, input:not([type='checkbox'], [type='radio']) {
       background-color: var(--color-input-background);
       border-color: var(--color-input-border);
     }

   and :not() takes the specificity of its heaviest argument, so that selector
   scores (0,1,1) — heavier than a lone .bw-cap__input at (0,1,0). It was
   therefore winning both the fill and the border colour here. On the outline
   style that was invisible-but-fatal: the field kept the theme's near-white
   input fill while its ink stayed --bwcap-fg, i.e. near-white text on a
   near-white field. Scoping to .bw-cap .bw-cap__input gets to (0,2,0) and
   takes the fill back. Anything else this rule sets that base.css also sets
   belongs in here for the same reason. */
.bw-cap .bw-cap__input {
  flex: 1 1 auto;
  min-width: 0;
  /* Stated rather than inherited from base.css. Below 600px this field takes
     width:100% alongside its own padding and border, so a content-box would
     push it past the card — and this section is not in a position to assume
     which stylesheets reached the page before it. */
  box-sizing: border-box;
  padding: 1.05em 1.2em;
  /* The capsule owns the fill and the stroke now. Both are still declared —
     and at this selector's weight — because base.css sets them on every input
     and would otherwise put the theme's own field colours back. */
  background: transparent;
  border: 0;
  color: var(--bwcap-field-fg);
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-body);
  font-size: 16px; /* 16px minimum: iOS zooms the page on focus below this. */
  line-height: 1.2;
}

.bw-cap .bw-cap__input::placeholder {
  color: var(--bwcap-field-hint);
  /* Firefox dims placeholders to .54 of its own accord; the colour above is
     already the contrast decision, so opacity is pinned out of the way. */
  opacity: 1;
}

/* The capsule above carries the focus ring for both children. */
.bw-cap .bw-cap__input:focus,
.bw-cap .bw-cap__input:focus-visible { outline: none; }

.bw-cap__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  flex: none;
  padding: .95em 1.6em;
  border: 0;
  /* Inset into the capsule: its radius is the capsule's less the padding, so
     the two curves are concentric instead of one sitting proud of the other. */
  border-radius: calc(var(--bwcap-radius) - 6px);
  background: var(--bwcap-btn-bg);
  color: var(--bwcap-btn-fg);
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-bold);
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity var(--bw-dur-hover) var(--bw-ease);
}

/* No lift. It is inset in a capsule now, and a button that rises out of the
   box it is sunk into looks detached rather than pressable — the arrow is
   already carrying the hover. */
.bw-cap__btn:hover { opacity: .88; }

/* --- Liquid fill ----------------------------------------------------------
   bw-tokens.css scopes these two structural rules to .bw-btn[data-bw-liquid],
   and this button is not a .bw-btn — it is a submit control with its own
   sizing, and giving it that class to borrow two rules would import the whole
   button system on top of it. So the structure is restated here for this one
   element. Everything else the effect needs — the pool, the drop, the ghost
   label — is already unscoped in that file and applies as-is.

   The pool is inserted as the FIRST child, so the label has to be lifted
   above it or the liquid paints straight over the words. */
.bw-cap__btn[data-bw-liquid] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.bw-cap__btn[data-bw-liquid] > :not(.bw-liquid):not(.bw-liquid__ghost) {
  position: relative;
  z-index: 1;
}
.bw-cap__btn-arrow { transition: transform var(--bw-dur-hover) var(--bw-ease); }
.bw-cap__btn:hover .bw-cap__btn-arrow { transform: translateX(3px); }

/* The busy state is set by assets/bw-signup.js on the Klaviyo path only —
   the native post navigates, so it never needs one. */
.bw-signup.is-busy .bw-cap__btn { opacity: .6; pointer-events: none; }

.bw-cap__msg {
  margin: .9em 0 0;
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-bold);
  font-size: 14px;
  line-height: 1.4;
}

.bw-cap__msg.is-err { color: var(--bw-error); }

.bw-cap__consent,
.bw-cap__proof {
  margin: .9em 0 0;
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-body);
  font-size: 13px;
  line-height: 1.5;
  opacity: .75;
}

.bw-cap__consent a { color: inherit; }

@media screen and (max-width: 899px) {
  /* One column before the field gets too narrow to read a typed address in. */
  .bw-cap--split .bw-cap__inner { grid-template-columns: minmax(0, 1fr); }
}

/* The capsule cannot survive a phone: a field and a button side by side in
   360px leaves neither usable. It unpacks into a field and a full-width
   button, and gives up the shared fill to do it — so the field takes its own
   stroke and radius back at exactly the width where it stops being inset. */
@media screen and (max-width: 599px) {
  .bw-cap__row {
    display: block;
    padding: 0;
    background: transparent;
    border: 0;
  }
  .bw-cap__row:focus-within { box-shadow: none; }

  .bw-cap .bw-cap__input {
    width: 100%;
    padding: 1.05em 1.4em;
    background: var(--bwcap-field-bg);
    border: var(--bw-border-w) solid var(--bwcap-field-line);
    border-radius: var(--bwcap-radius);
  }

  .bw-cap .bw-cap__input:focus-visible {
    outline: 2px solid var(--bwcap-fg);
    outline-offset: 2px;
  }

  .bw-cap__btn {
    width: 100%;
    margin-top: 10px;
    padding: 1.05em 1.6em;
    border-radius: var(--bwcap-radius);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bw-cap__row,
  .bw-cap__btn,
  .bw-cap__btn-arrow { transition: none; }
  .bw-cap__btn:hover .bw-cap__btn-arrow { transform: none; }
}
/* END_SECTION:bw-capture */

/* START_SECTION:bw-compare-table (INDEX:7) */
.bw-compare {
  background: var(--bw-bg);
  color: var(--bw-fg);
  transition: background-color var(--bw-dur-theme) var(--bw-ease),
              color var(--bw-dur-theme) var(--bw-ease);
}

.bw-compare.has-rule-top    { border-top: var(--bw-border-w) solid var(--bw-hairline); }
.bw-compare.has-rule-bottom { border-bottom: var(--bw-border-w) solid var(--bw-hairline); }

.bw-compare__inner {
  max-width: var(--bwc-measure);
  margin-inline: auto;
  padding-inline: var(--bwc-rail);
  padding-block: var(--bwc-pad-y);
}

.bw-compare__eyebrow {
  margin: 0 0 var(--bwc-eyebrow-mb);
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bwc-eyebrow);
  letter-spacing: var(--bw-ls-eyebrow);
  line-height: 1.5;
  text-transform: uppercase;
}

.bw-compare__head {
  margin: 0 0 var(--bwc-head-mb);
  font-size: var(--bwc-head);
  line-height: var(--bwc-head-lh);
  text-transform: uppercase;
}

.bw-compare__head p { margin: 0; }

.bw-compare__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: var(--bw-border-w) solid var(--bw-hairline);
  border-radius: var(--bwc-radius);
  background: var(--bwc-card);
  transition: background-color var(--bw-dur-theme) var(--bw-ease);
}

.bw-compare__table {
  width: 100%;
  min-width: var(--bwc-min-w, 0);
  border-collapse: collapse;
  table-layout: fixed;
}

.bw-compare__caption {
  padding: var(--bwc-cell-y) var(--bwc-cell-x) 0;
  text-align: start;
  font-family: var(--bw-font-sans);
  font-size: var(--bw-text-small);
  color: var(--bw-muted);
}

.bw-compare__table th,
.bw-compare__table td {
  padding: var(--bwc-cell-y) var(--bwc-cell-x);
  text-align: var(--bwc-align);
  vertical-align: middle;
}

/* Label column: fixed share of the table, sticky while the rest scrolls. */
.bw-compare__table th:first-child {
  width: var(--bwc-label-w);
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  text-align: start;
}

.bw-compare__table thead th {
  background: var(--bw-accent);
  color: var(--bw-on-accent);
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bwc-micro);
  letter-spacing: var(--bwc-micro-ls);
  text-transform: uppercase;
  transition: background-color var(--bw-dur-theme) var(--bw-ease);
}

.bw-compare__table tbody tr { border-top: var(--bw-border-w) solid var(--bw-hairline); }

.bw-compare__table tbody th {
  background: var(--bwc-card);
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bwc-micro);
  letter-spacing: var(--bwc-micro-ls);
  text-transform: uppercase;
  opacity: .7;
}

.bw-compare__table td {
  font-size: var(--bwc-value);
  line-height: 1;
  color: var(--bw-muted);
  font-variant-numeric: tabular-nums;
}

.bw-compare__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.bw-compare__table tbody tr.is-gated { outline: 2px dashed var(--bw-accent); outline-offset: -3px; }

/* --- Phone ---------------------------------------------------------------
   The label column stops being a percentage and becomes a fixed width: at
   this size a share of the table is a share of something wider than the
   screen, which put the sticky column at 90px while the figures it labels
   had 150 each. */
@media screen and (max-width: 749px) {
  .bw-compare__table th:first-child { width: var(--bwc-label-m, 118px); }

  /* Says there is more to the right, without a script.
     Two layers on one edge: a cover painted in the card colour that scrolls
     WITH the content, and a shade that stays put. At the start the cover
     sits off to the right and the shade shows; scrolled to the end the cover
     has travelled under the shade and hidden it. So the hint appears exactly
     when there is something to scroll to, and the browser does the bookkeeping.

     The cells scrolling past have their own backgrounds, so the shade reads
     as an edge on the container rather than a smudge over the figures. */
  .bw-compare__scroll {
    background-image:
      linear-gradient(to left, var(--bwc-card, var(--bw-panel)), transparent),
      linear-gradient(to left, rgba(25, 25, 25, .16), transparent);
    background-repeat: no-repeat;
    background-position: right center, right center;
    background-size: 30px 100%, 16px 100%;
    background-attachment: local, scroll;
  }
}

.bw-compare__note,
.bw-compare__flag {
  max-width: 70ch;
  margin: 14px 0 0;
  font-size: var(--bw-text-small);
  line-height: var(--bw-lh-body);
  color: var(--bw-muted);
}

.bw-compare__flag {
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-bold);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bw-accent);
}
/* END_SECTION:bw-compare-table */

/* START_SECTION:bw-contact (INDEX:8) */
/* ==========================================================================
   BW · CONTACT
   ========================================================================== */

.bw-ct {
  padding: var(--bwct-pad-y) var(--bwct-rail);
  background: var(--bwct-bg);
  color: var(--bwct-fg);
  transition: background-color var(--bw-dur-theme) var(--bw-ease),
              color var(--bw-dur-theme) var(--bw-ease);
}

.bw-ct__inner {
  display: grid;
  grid-template-columns: var(--bwct-cols);
  gap: var(--bwct-gap);
  align-items: start;
  max-width: var(--bwct-measure);
  margin-inline: auto;
}

/* --- copy ---------------------------------------------------------------- */
.bw-ct__eyebrow {
  margin: 0 0 var(--bw-space-4);
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bw-text-eyebrow);
  letter-spacing: var(--bw-ls-eyebrow);
  text-transform: uppercase;
}

.bw-ct__h1 {
  font-family: var(--bw-font-display);
  font-size: var(--bwct-h1);
  line-height: var(--bw-lh-display);
  letter-spacing: var(--bw-ls-display);
  text-transform: uppercase;
}

.bw-ct__h1 p { margin: 0; }

.bw-ct__lede {
  margin-top: var(--bw-space-5);
  max-width: 42ch;
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-body);
  font-size: var(--bw-text-lede);
  line-height: var(--bw-lh-lede);
}

.bw-ct__lede > :first-child { margin-top: 0; }
.bw-ct__lede > :last-child  { margin-bottom: 0; }

/* --- channels ------------------------------------------------------------ */
.bw-ct__channels {
  margin: var(--bw-space-7) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--bw-space-5);
}

.bw-ct__channel {
  display: flex;
  align-items: flex-start;
  gap: var(--bw-space-4);
}

/* Fixed box so labels line up down the column whatever each icon's width. */
.bw-ct__channel-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: var(--bw-border-w) solid var(--bwct-line);
  border-radius: 50%;
}

.bw-ct__channel-text { display: flex; flex-direction: column; gap: 2px; }

.bw-ct__channel-label {
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bw-text-micro);
  letter-spacing: var(--bw-ls-micro);
  text-transform: uppercase;
  opacity: .7;
}

.bw-ct__channel-value {
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-bold);
  font-size: var(--bw-text-body);
  line-height: var(--bw-lh-body);
  color: inherit;
}

a.bw-ct__channel-value {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--bw-dur-hover) var(--bw-ease);
}

a.bw-ct__channel-value:hover { opacity: .7; }

/* --- panel + form -------------------------------------------------------- */
.bw-ct__panel {
  padding: clamp(20px, 3vw, 38px);
  border: var(--bw-border-w) solid var(--bwct-line);
  border-radius: var(--bwct-radius);
  background: var(--bwct-form);
}

.bw-ct__form { display: grid; gap: var(--bw-space-5); }

.bw-ct__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bw-space-4);
}

.bw-ct__field { display: grid; gap: var(--bw-space-2); }

.bw-ct__label {
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bw-text-micro);
  letter-spacing: var(--bw-ls-micro);
  text-transform: uppercase;
}

.bw-ct__req { margin-inline-start: 2px; }

/* font-size is 16px and not smaller on purpose: iOS Safari zooms the page
   when a focused input's text is under 16px, which throws the layout and is
   read as the form misbehaving. */
.bw-ct__input {
  width: 100%;
  padding: 14px 16px;
  border: var(--bw-border-w) solid var(--bwct-line);
  border-radius: var(--bwct-radius-i);
  /* Same surface as the panel it sits in — see the note in the style block. */
  background: var(--bwct-form);
  color: inherit;
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-body);
  font-size: 16px;
  line-height: var(--bw-lh-body);
  transition: border-color var(--bw-dur-hover) var(--bw-ease);
}

.bw-ct__input::placeholder { color: currentColor; opacity: .45; }

/* Chrome and Safari repaint a remembered field in their own pale blue, which
   is the one thing that can put a second colour inside a form that is meant
   to be a single surface. An inset shadow the height of the field is the only
   way to overrule it — background-color is ignored on an autofilled input. */
.bw-ct__input:-webkit-autofill,
.bw-ct__input:-webkit-autofill:hover,
.bw-ct__input:-webkit-autofill:focus {
  -webkit-text-fill-color: currentColor;
  box-shadow: 0 0 0 100px var(--bwct-form) inset;
  caret-color: currentColor;
}

.bw-ct__input:hover { border-color: currentColor; }

.bw-ct__input:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-color: currentColor;
}

.bw-ct__input[aria-invalid="true"] { border-color: currentColor; border-width: 2px; }

.bw-ct__textarea {
  min-height: 140px;
  resize: vertical;
}

.bw-ct__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bw-space-4);
}

.bw-ct__fineprint {
  margin: 0;
  font-family: var(--bw-font-sans);
  font-size: var(--bw-text-small);
  line-height: var(--bw-lh-body);
  opacity: .7;
}

/* --- response ------------------------------------------------------------ */
.bw-ct__note {
  display: flex;
  align-items: flex-start;
  gap: var(--bw-space-3);
  padding: var(--bw-space-4) var(--bw-space-5);
  border: var(--bw-border-w) solid currentColor;
  border-radius: var(--bwct-radius-i);
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-bold);
  font-size: var(--bw-text-small);
  line-height: var(--bw-lh-body);
}

.bw-ct__note p { margin: 0; }

/* Both states are drawn in the section's own ink rather than in red and
   green. The palette flips between a cream and a navy ground, and a fixed
   red fails contrast on one of them — the icon and the wording carry the
   meaning, which does not depend on colour either way. */
.bw-ct__note--error { border-width: 2px; }
.bw-ct__note--ok    { border-width: 2px; }

.bw-ct__note--error:focus-visible,
.bw-ct__note--ok:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* --- responsive ---------------------------------------------------------- */
@media screen and (max-width: 899px) {
  .bw-ct__channels { margin-top: var(--bw-space-6); }
  .bw-ct__lede     { max-width: none; }
}

@media screen and (max-width: 599px) {
  .bw-ct__row { grid-template-columns: minmax(0, 1fr); }
  .bw-ct__panel { padding: var(--bw-space-5) var(--bw-space-4); }
  .bw-ct__actions { flex-direction: column; align-items: stretch; }
  .bw-ct__submit { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .bw-ct,
  .bw-ct__input,
  a.bw-ct__channel-value { transition: none; }
}
/* END_SECTION:bw-contact */

/* START_SECTION:bw-faq (INDEX:9) */
.bw-faq {
  background: var(--bw-bg);
  color: var(--bw-fg);
  transition: background-color var(--bw-dur-theme) var(--bw-ease),
              color var(--bw-dur-theme) var(--bw-ease);
}

.bw-faq.has-rule-top    { border-top: var(--bw-border-w) solid var(--bw-hairline); }
.bw-faq.has-rule-bottom { border-bottom: var(--bw-border-w) solid var(--bw-hairline); }

.bw-faq__inner {
  max-width: var(--bwfaq-measure);
  margin-inline: auto;
  padding-inline: var(--bwfaq-rail);
  padding-block: var(--bwfaq-pad-y);
}

.bw-faq__eyebrow {
  margin: 0 0 var(--bwfaq-eyebrow-mb);
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bwfaq-eyebrow);
  letter-spacing: var(--bw-ls-eyebrow);
  line-height: 1.5;
  text-transform: uppercase;
}

.bw-faq__head {
  margin: 0 0 var(--bwfaq-head-mb);
  font-size: var(--bwfaq-head);
  line-height: var(--bwfaq-head-lh);
  text-transform: uppercase;
}

.bw-faq__head p { margin: 0; }

.bw-faq__list { border-top: 2px solid var(--bw-fg); }

.bw-faq__item { border-bottom: var(--bw-border-w) solid var(--bw-hairline); }

.bw-faq__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--bwfaq-gap);
  padding-block: var(--bwfaq-row-y);
  cursor: pointer;
  list-style: none;
}

/* Remove the UA disclosure triangle in both engines; the + is the marker. */
.bw-faq__row::-webkit-details-marker { display: none; }
.bw-faq__row::marker { content: ''; }

/* Horizon's base.css sets `summary:hover` to its own --color-foreground, a
   scheme token no bw-* section defines. It resolves to the theme's dark ink
   whatever the blend is, so on the Restore navy the question turned near-black
   and stopped being readable.

   Inheritance alone cannot win that back — any directly applied colour beats an
   inherited one — so the row has to restate the brand foreground. .bw-faq__row
   is (0,2,0) against summary:hover's (0,1,1), which is what carries it.

   The hover still reads: the + marker takes it over, moving from the accent to
   the foreground. Colour only, deliberately no transform, because the marker
   already owns one for the open state. */
.bw-faq__row:hover { color: var(--bw-fg); }
.bw-faq__row:hover .bw-faq__mark { color: var(--bw-fg); }

.bw-faq__q {
  font-size: var(--bwfaq-q);
  line-height: 1.05;
}

.bw-faq__mark {
  flex: none;
  font-size: var(--bwfaq-mark);
  line-height: 1;
  color: var(--bw-accent);
  transition: transform .3s var(--bw-ease), color var(--bw-dur-theme) var(--bw-ease);
}

.bw-faq__item[open] .bw-faq__mark { transform: rotate(45deg); }

.bw-faq__a {
  margin: 0;
  max-width: var(--bwfaq-a-w);
  padding-bottom: var(--bwfaq-a-pb);
  font-size: var(--bwfaq-a);
  line-height: var(--bw-lh-lede);
  color: var(--bw-muted);
}

.bw-faq__flag {
  margin: 0;
  padding-bottom: var(--bwfaq-a-pb);
  font-weight: var(--bw-fw-bold);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bw-accent);
}

.bw-faq__item.is-gated { outline: 2px dashed var(--bw-accent); outline-offset: -2px; }

.bw-faq :focus-visible { outline: 3px solid var(--bw-accent); outline-offset: 2px; }

/* Progressive enhancement. Where the browser can animate to an intrinsic
   height, the panel slides open; everywhere else it opens instantly and
   nothing else changes. Height cannot be animated to `auto` without this. */
@supports (interpolate-size: allow-keywords) {
  .bw-faq__body { interpolate-size: allow-keywords; }

  .bw-faq__item::details-content {
    height: 0;
    overflow: hidden;
    transition: height var(--bwfaq-dur) var(--bw-ease),
                content-visibility var(--bwfaq-dur) allow-discrete;
  }

  .bw-faq__item[open]::details-content { height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .bw-faq__mark { transition: none; }
  .bw-faq__item::details-content { transition: none; }
}
/* END_SECTION:bw-faq */

/* START_SECTION:bw-flavor (INDEX:10) */
.bw-fp.has-rule-top    { border-top: var(--bw-border-w) solid var(--bw-hairline); }
.bw-fp.has-rule-bottom { border-bottom: var(--bw-border-w) solid var(--bw-hairline); }

.bw-fp__panel {
  position: relative;
  height: var(--bwfp-h);
  border-radius: var(--bwfp-radius);
  overflow: hidden;
  /* A new stacking context, so the overlays cannot escape the panel and the
     z-order inside is independent of whatever surrounds it. */
  isolation: isolate;
}

/* overflow:hidden so the scroll-reveal zoom (the image settles in from
   slightly large) is clipped to the media box instead of spilling. */
.bw-fp__media { display: block; overflow: hidden; }

.bw-fp__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--bwfp-focus, 50% 50%);
}

/* Tint: multiplies the blend colour into the photograph so it reads as part
   of the palette rather than a picture dropped on top of it. */
.bw-fp__tint {
  position: absolute;
  inset: 0;
  background: var(--bwfp-tint);
  mix-blend-mode: multiply;
  opacity: var(--bwfp-strength);
  transition: background-color var(--bw-dur-theme) var(--bw-ease);
}

/* Scrim: flat ink, no blending. This is what actually guarantees the type is
   legible — a multiply tint's darkness depends on the photograph beneath it,
   so it cannot be relied on for contrast. */
.bw-fp__scrim {
  position: absolute;
  inset: 0;
  background: var(--bw-ink);
  opacity: var(--bwfp-scrim);
}

.bw-fp__grid {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: var(--bwfp-gap);
  padding: var(--bwfp-pad);
  color: var(--bwfp-ink);
}

.bw-fp__slot { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bw-fp__slot--tl { grid-area: 1 / 1; }
.bw-fp__slot--tr { grid-area: 1 / 2; align-items: flex-end; text-align: end; }
.bw-fp__slot--bl { grid-area: 3 / 1; justify-content: flex-end; }
.bw-fp__slot--br { grid-area: 3 / 2; align-items: flex-end; justify-content: flex-end; text-align: end; }

.bw-fp__eyebrow {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bwfp-eyebrow);
  letter-spacing: var(--bw-ls-eyebrow);
  line-height: 1.5;
  text-transform: uppercase;
}

.bw-fp__title {
  font-size: var(--bwfp-title);
  line-height: var(--bwfp-title-lh);
  letter-spacing: var(--bwfp-title-ls);
  text-transform: uppercase;
}

.bw-fp__title p { margin: 0; }

.bw-fp__note {
  margin: 0;
  max-width: var(--bwfp-note-w);
  font-size: var(--bwfp-note);
  line-height: 1.55;
  font-weight: var(--bw-fw-body);
}

@media screen and (max-width: 749px) {
  /* One column on a phone: two corner slots side by side leaves neither
     enough measure to read. */
  .bw-fp__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto auto;
  }
  .bw-fp__slot--tl { grid-area: 1 / 1; }
  .bw-fp__slot--tr { grid-area: 2 / 1; align-items: flex-start; text-align: start; }
  .bw-fp__slot--bl { grid-area: 3 / 1; }
  .bw-fp__slot--br { grid-area: 4 / 1; align-items: flex-start; text-align: start; }
  .bw-fp__note { max-width: none; }
  .bw-fp__img { object-position: var(--bwfp-focus-m, 50% 50%); }
}

@media (prefers-reduced-motion: reduce) {
  .bw-fp__tint { transition: none; }
}
/* END_SECTION:bw-flavor */

/* START_SECTION:bw-footer (INDEX:11) */
.bw-footer {
  position: relative;
  background: var(--bwf-bg);
  color: var(--bwf-fg);
  /* The wordmark is sized in vw and runs wider than the rail on purpose.
     Clipping here rather than on the mark itself keeps that overflow from ever
     becoming scrollable — a horizontal scrollbar on the footer would narrow
     the viewport and re-trigger every vw calculation on the page above it. */
  overflow: clip;
  transition: background-color var(--bw-dur-theme) var(--bw-ease);
}

.bw-footer.has-rule-top { border-block-start: var(--bw-border-w) solid var(--bwf-hairline); }

.bw-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--bwf-band-gap);
  max-width: var(--bwf-measure);
  margin-inline: auto;
  padding-inline: var(--bwf-rail);
  padding-block: var(--bwf-pad-y);
}

.bw-footer__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Signup -------------------------------------------------------------- */
.bw-footer__signup {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}

.bw-footer__eyebrow {
  margin: 0 0 var(--bw-space-4);
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bwf-eyebrow);
  letter-spacing: var(--bw-ls-eyebrow);
  line-height: 1.5;
  text-transform: uppercase;
}

.bw-footer__head {
  margin: 0;
  font-size: var(--bwf-head);
  line-height: var(--bwf-head-lh);
  letter-spacing: var(--bw-ls-display);
  text-transform: uppercase;
}

.bw-footer__lede {
  margin-block-start: var(--bw-space-4);
  max-width: 46ch;
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-body);
  font-size: var(--bwf-lede);
  line-height: var(--bw-lh-lede);
  color: var(--bwf-muted);
}
.bw-footer__lede > :first-child { margin-block-start: 0; }
.bw-footer__lede > :last-child  { margin-block-end: 0; }

.bw-signup { margin: 0; }

/* The field and the button are two peer pills, NOT a bordered box inside a
   bordered box. Nesting them read wrong for two compounding reasons: the theme
   applies --style-border-radius-inputs to every input (base.css), so the field
   kept a squarer radius than the pill wrapping it, and once the button had
   taken its share of the row the remaining field was barely wider than it was
   tall. Two peers at one radius removes both problems. */
.bw-signup__row {
  display: flex;
  /* wrap pairs with the field's min-width: when the row can no longer give the
     field a readable width, the button drops to its own line instead of the
     two of them overflowing. */
  flex-wrap: wrap;
  /* stretch, so the field and the button resolve to a single shared height
     whichever of the two is intrinsically taller. */
  align-items: stretch;
  gap: var(--bw-space-3);
}

/* .bw-footer is here to win a specificity fight, not to scope anything.

   base.css styles the field with

     textarea, input:not([type='checkbox'], [type='radio'])

   and :not() takes the specificity of its most specific argument, so that
   selector is (0,1,1) — an attribute plus an element. A lone .bw-signup__input
   is (0,1,0) and loses to it no matter where it appears in the cascade, which
   is why this rule's `background` was being ignored and the field was painting
   in the merchant palette's input colour. The descendant class makes it
   (0,2,0), and every property base.css sets on the field is now restated here
   so the field's appearance has one owner. */
.bw-footer .bw-signup__input {
  flex: 1 1 auto;
  /* Below roughly this the control stops reading as a text field at all. It is
     also what stops the field going square when the row gets tight — it wraps
     the button onto its own line instead. */
  min-width: 14ch;
  min-height: var(--bwf-field-h);
  padding-inline: var(--bw-space-5);
  border: var(--bw-border-w) solid var(--bwf-field-line);
  /* Explicit: overrides the theme-wide input radius from base.css. */
  border-radius: var(--bw-radius-pill);
  background-color: var(--bwf-field-bg);
  color: var(--bwf-field-fg);
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-body);
  font-size: var(--bwf-field-size);
  line-height: 1;
  transition: border-color var(--bw-dur-hover) var(--bw-ease);
}

/* The placeholder is read on the field, not on the ground, so it is mixed
   toward the field's own surface — --bwf-muted fades toward the band instead
   and went invisible the moment the field stopped being transparent.
   Specificity again: base.css sets `input::placeholder` at (0,1,1). */
.bw-footer .bw-signup__input::placeholder { color: var(--bwf-field-hint); }

/* Chrome and Safari repaint a remembered field in their own colours, and
   `background` is ignored on an autofilled input — an inset shadow the height
   of the field is the only way to overrule it. Without this the one field the
   browser is most likely to fill is the one field this rule cannot reach. */
.bw-footer .bw-signup__input:-webkit-autofill,
.bw-footer .bw-signup__input:-webkit-autofill:hover,
.bw-footer .bw-signup__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--bwf-field-fg);
  box-shadow: 0 0 0 100px var(--bwf-field-bg) inset;
  caret-color: var(--bwf-field-fg);
}

/* No outline reset here. An earlier version set outline:none, which never
   applied — .bw-footer :focus-visible below carries the same specificity and
   comes later, so it won either way. That is what put a hard-edged ring inside
   the row: the outline traced the input's radius, and base.css gives every
   input --style-border-radius-inputs, which is far squarer than the pill it sat
   in. With the field pill-shaped the shared outline now follows the same curve,
   so the focus state is both visible and on-shape. The border shift is a second,
   quieter cue on top of it. */
/* The border is on the field, so it darkens toward the field's ink. Shifting
   it to --bwf-fg put the footer's near-white ink around a white box. */
.bw-footer .bw-signup__input:focus { border-color: var(--bwf-field-fg); }

.bw-signup__btn {
  flex: none;
  min-height: var(--bwf-field-h);
}

.bw-signup__msg {
  margin: var(--bw-space-3) 0 0;
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-bold);
  font-size: var(--bw-text-small);
  line-height: 1.45;
}

.bw-signup__msg.is-ok  { color: var(--bwf-fg); }
.bw-signup__msg.is-err { color: var(--bw-gold); }

.bw-signup__consent {
  margin-block-start: var(--bw-space-3);
  max-width: 52ch;
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-body);
  font-size: var(--bw-text-micro);
  letter-spacing: .04em;
  line-height: 1.6;
  color: var(--bwf-muted);
}
.bw-signup__consent > :first-child { margin-block-start: 0; }
.bw-signup__consent > :last-child  { margin-block-end: 0; }
.bw-signup__consent a { color: inherit; }

.bw-signup.is-busy { opacity: .6; pointer-events: none; }

/* --- Columns ------------------------------------------------------------- */
.bw-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(24px, 3vw, 48px);
  padding-block-start: var(--bwf-band-gap);
  border-block-start: var(--bw-border-w) solid var(--bwf-hairline);
}

.bw-footer__col-head {
  margin: 0 0 var(--bw-space-4);
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bwf-col-head);
  letter-spacing: var(--bw-ls-eyebrow);
  text-transform: uppercase;
}

.bw-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--bw-space-3);
}

.bw-footer__link {
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-body);
  font-size: var(--bwf-link);
  line-height: 1.3;
  color: var(--bwf-muted);
  text-decoration: none;
  transition: color var(--bw-dur-hover) var(--bw-ease);
}

.bw-footer__link:hover,
.bw-footer__link[aria-current="page"] { color: var(--bwf-fg); }

.bw-footer__social {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bw-space-3);
}

.bw-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6em;
  height: 2.6em;
  border: var(--bw-border-w) solid var(--bwf-hairline);
  border-radius: 50%;
  color: var(--bwf-fg);
  transition: transform var(--bw-dur-press) var(--bw-ease),
              border-color var(--bw-dur-hover) var(--bw-ease);
}

.bw-footer__social-link:hover {
  transform: translateY(-2px);
  border-color: var(--bwf-fg);
}

/* --- Wordmark ------------------------------------------------------------ */
/* Pulled flush past the rail with a negative inline margin so the letterforms
   run the full width of the viewport rather than sitting inside the measure.
   The section clips, so anything past the edge is simply trimmed. */
.bw-footer__mark {
  margin-inline: calc(var(--bwf-rail) * -1);
  line-height: 0;
  text-align: center;
}

/* The negative margin exists so LETTERFORMS can run off the edge of the
   screen — the wordmark was always meant to be trimmed by the viewport. A logo
   is not type: it has edges that mean something, and hanging them past the
   rail reads as a mistake rather than a crop. So the mark sits back inside the
   measure whenever it is carrying artwork, and lines up with the columns and
   the sign-up above it. */
.bw-footer__mark:has(.bw-footer__mark-img) {
  margin-inline: 0;
}

/* Sized off the same custom property the wordmark's type uses, so the Strength
   slider still governs how far it sinks into the ground and the band keeps its
   scale. contain rather than cover: a logo cropped to fill is a logo nobody
   recognises.

   The multiplier is the part worth explaining. --bwf-mark is a FONT size, and
   a font size is cap height — the letterforms it draws are a fraction of it
   and they run the full width of the band. This logo is a stacked lockup:
   square-ish, and bounded by the smaller of the two dimensions once contained.
   Handed the raw value it came out barely wider than it was tall and read as
   an afterthought in a band built around a full-bleed wordmark. Multiplied, it
   holds the same ground the type did. */
/* THE WIDTH IS THE MEASURE, AND THE HEIGHT FOLLOWS THE ARTWORK.

   Inside the rail, so it starts and ends where the columns and the sign-up
   above it do. On a phone that is the whole thing: the lockup is square, so it
   fills the measure and stands about as tall as it is wide.

   A desktop measure is 1280px and this logo is square, which would ask for
   1280px of height — more than fits on the screen. The cap holds it, and once
   capped the box is wider than the artwork, so the artwork is aligned to the
   left edge rather than left floating in the centre of a band whose every
   other element starts at the rail.

   A wide lockup needs none of this. Its own proportions keep it short enough
   that the cap never applies and it fills the measure edge to edge — put one
   in the section's Logo setting and this all resolves itself. */
.bw-footer__mark-img {
  display: block;
  inline-size: 100%;
  aspect-ratio: var(--bwf-mark-ar, 1);
  max-block-size: calc(var(--bwf-mark) * 1.7);
  background-color: var(--bwf-fg);
  opacity: var(--bwf-mark-op);
  -webkit-mask-image: var(--bwf-mark-src);
  mask-image: var(--bwf-mark-src);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-size: contain;
  mask-size: contain;
  user-select: none;
}

.bw-footer__mark-text {
  display: block;
  font-size: var(--bwf-mark);
  line-height: var(--bwf-mark-lh);
  letter-spacing: var(--bw-ls-display);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bwf-fg);
  opacity: var(--bwf-mark-op);
  user-select: none;
}

/* --- Legal --------------------------------------------------------------- */
.bw-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bw-space-4) var(--bw-space-6);
  padding-block-start: var(--bwf-band-gap);
  border-block-start: var(--bw-border-w) solid var(--bwf-hairline);
  font-family: var(--bw-font-sans);
  font-size: var(--bwf-legal);
  color: var(--bwf-muted);
}

.bw-footer__copy { margin: 0; }

.bw-footer__legal-links,
.bw-footer__pay {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bw-space-2) var(--bw-space-5);
}

.bw-footer__legal-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--bw-dur-hover) var(--bw-ease);
}

.bw-footer__legal-link:hover { color: var(--bwf-fg); }

.bw-footer__pay { gap: var(--bw-space-2); }
.bw-footer__pay-icon { display: block; width: 38px; height: auto; }

.bw-footer :focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

@media screen and (max-width: 899px) {
  .bw-footer__signup {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

@media screen and (max-width: 749px) {
  /* The two pills stack: at phone widths a button beside the field leaves the
     field too narrow to read a typed address in. Both stay pill-shaped — the
     stack changes the arrangement, not the shape. */
  .bw-signup__row { flex-direction: column; }

  .bw-signup__input { text-align: center; }

  .bw-signup__btn { justify-content: center; }

  .bw-footer__legal { justify-content: flex-start; }

  /* No cap on a phone. The viewport is narrow enough that the artwork's own
     proportions leave it a sensible height, and running edge to edge is the
     whole effect. */
  .bw-footer__mark-img { max-block-size: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bw-footer,
  .bw-footer__social-link,
  .bw-footer__link,
  .bw-signup__row { transition: none; }
  .bw-footer__social-link:hover { transform: none; }
}
/* END_SECTION:bw-footer */

/* START_SECTION:bw-header (INDEX:12) */
.bw-header {
  position: relative;
  z-index: 50;
  background: var(--bw-bg);
  color: var(--bw-fg);
  transition: background-color var(--bw-dur-theme) var(--bw-ease),
              color var(--bw-dur-theme) var(--bw-ease);
}

/* Pinned to the document's top edge and out of flow, so it adds no height and
   moves with the page rather than with the sticky header watching it. */
.bw-header__sentinel {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.bw-header.is-sticky { position: sticky; top: 0; }
.bw-header.has-rule  { border-bottom: var(--bw-border-w) solid var(--bw-hairline); }

.bw-header__inner {
  display: flex;
  align-items: center;
  gap: var(--bwh-action-gap);
  min-height: var(--bwh-h);
  padding-inline: var(--bwh-pad-x);
}

/* --- logo ---------------------------------------------------------------- */
.bw-header__logo {
  display: flex;
  align-items: center;
  flex: none;
  text-decoration: none;
  color: inherit;
}

.bw-header__logo-img { display: block; width: var(--bwh-logo-w); height: auto; }

/* Two logo files so a raster mark can invert with the blend. If only the
   Move logo is uploaded it shows for both. */
.bw-header__logo-img--restore { display: none; }
:root[data-bw-blend="restore"] .bw-header__logo-img--move    { display: none; }
:root[data-bw-blend="restore"] .bw-header__logo-img--restore { display: block; }
.bw-header[data-bw-blend="restore"] .bw-header__logo-img--move    { display: none; }
.bw-header[data-bw-blend="restore"] .bw-header__logo-img--restore { display: block; }

.bw-header__logo-text {
  font-size: calc(var(--bwh-nav-size) * 1.5);
  line-height: .85;
  letter-spacing: .01em;
  text-transform: uppercase;
}

/* --- nav ----------------------------------------------------------------- */
.bw-header__nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: var(--bwh-nav-just);
  min-width: 0;
}

.bw-nav {
  display: flex;
  align-items: center;
  gap: var(--bwh-nav-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Dot separators. The dot is a pseudo-element on every <li> but the first, so
   it is decoration the accessibility tree never sees and no extra markup has
   to be threaded through the menu loop. (Written out in words on purpose:
   theme-check tokenises Liquid tags even inside a comment, so an unpaired
   one here is a parse error in the file, not a note about one.)

   The gap is halved in both places because the dot sits between two of them —
   one from .bw-nav before the dot, one from the <li> after it. That keeps
   "Space between items" meaning the full link-to-link distance whether the
   separator is on or off, so toggling it doesn't silently double the spacing.

   No breakpoint guard needed: .bw-header__nav is display:none below 990px and
   the drawer uses .bw-drawer__link, a separate stack. */
.bw-nav--dotted { gap: calc(var(--bwh-nav-gap) / 2); }

.bw-nav--dotted > li {
  display: flex;
  align-items: center;
  gap: calc(var(--bwh-nav-gap) / 2);
}

.bw-nav--dotted > li + li::before {
  content: '';
  flex: none;
  width: var(--bwh-nav-dot);
  height: var(--bwh-nav-dot);
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
  /* The link carries 6px block padding for the hover underline, so centring on
     the flex line lands the dot slightly under the cap-height midpoint of the
     uppercase text. Nudge it back up to optical centre. */
  transform: translateY(-1px);
}

.bw-nav__link {
  position: relative;
  display: block;
  padding: 6px 0;
  font-size: var(--bwh-nav-size);
  letter-spacing: var(--bwh-nav-ls);
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  transition: color var(--bw-dur-hover) var(--bw-ease);
}

/* Underline drawn as a pseudo-element so it can animate from the centre
   without shifting the text baseline the way border-bottom would. */
.bw-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--bw-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--bw-dur-hover) var(--bw-ease);
}

.bw-nav__link:hover::after,
.bw-nav__link.is-active::after { transform: scaleX(1); }
.bw-nav__link.is-active        { color: var(--bw-fg); }

/* --- dropdown ------------------------------------------------------------ */
/* Hover plus :focus-within, and no JavaScript. A menu of two links does not
   need a state machine, and the keyboard path falls out of the same two
   rules: tabbing onto the parent link opens the panel, tabbing past the last
   child closes it, and the parent link stays a real link to the page it
   always pointed at.

   The desktop nav is display:none below the collapse width, so a tap on a
   touch device reaches the drawer's nested list instead and never has to
   fight the hover-then-click problem. */
.bw-nav__item--sub { position: relative; }

.bw-nav__item--sub > .bw-nav__link {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Caret drawn from two borders rather than added to bw-icon: the icon set is
   for artwork the brand chose, and this is a 5px piece of UI furniture that
   has to take its colour from the text it sits beside. */
.bw-nav__caret {
  flex: none;
  width: 5px;
  height: 5px;
  margin-block-start: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
  transition: transform var(--bw-dur-hover) var(--bw-ease),
              opacity var(--bw-dur-hover) var(--bw-ease);
}

.bw-nav__item--sub:hover .bw-nav__caret,
.bw-nav__item--sub:focus-within .bw-nav__caret {
  margin-block-start: 1px;
  transform: rotate(225deg);
  opacity: 1;
}

.bw-subnav {
  position: absolute;
  top: calc(100% + 11px);
  left: 50%;
  z-index: 2;
  margin: 0;
  padding: 7px 0;
  min-inline-size: max-content;
  list-style: none;
  background: var(--bw-bg);
  border: var(--bw-border-w) solid var(--bw-hairline);
  box-shadow: 0 18px 40px -22px rgb(0 0 0 / .45);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -7px);
  transition: opacity var(--bw-dur-hover) var(--bw-ease),
              transform var(--bw-dur-hover) var(--bw-ease),
              background-color var(--bw-dur-theme) var(--bw-ease),
              visibility 0s linear var(--bw-dur-hover);
}

/* Bridges the gap between the link and the panel. Without it the pointer
   crosses 11px of nothing on the way down, :hover drops, and the panel
   closes under the cursor that was reaching for it. */
.bw-subnav::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 13px;
}

/* The dot separator is a pseudo-element on the <li>, so with separators on
   the <li> is wider than its link by the dot plus half the nav gap — all of
   it on the left. Centring on the <li> therefore hangs the panel left of the
   words it belongs to. Push it back by half of what the dot added. Scoped to
   li + li because the first item never draws a dot, which is exactly the
   case where this correction would be the error. */
.bw-nav--dotted > li + .bw-nav__item--sub > .bw-subnav {
  margin-inline-start: calc((var(--bwh-nav-dot) + var(--bwh-nav-gap) / 2) / 2);
}

.bw-nav__item--sub:hover > .bw-subnav,
.bw-nav__item--sub:focus-within > .bw-subnav {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.bw-subnav__link {
  position: relative;
  display: block;
  padding: 9px 20px;
  font-size: var(--bwh-nav-size);
  letter-spacing: var(--bwh-nav-ls);
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
  transition: color var(--bw-dur-hover) var(--bw-ease);
}

/* The inline links underline from the centre; these grow an accent rule from
   the middle of their left edge. Same gesture, turned ninety degrees, which
   is what keeps a panel that only exists on hover feeling like part of the
   nav rather than a component borrowed from somewhere else. */
.bw-subnav__link::before {
  content: '';
  position: absolute;
  inset-block: 7px;
  left: 0;
  width: 2px;
  background: var(--bw-accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--bw-dur-hover) var(--bw-ease);
}

.bw-subnav__link:hover::before,
.bw-subnav__link.is-active::before { transform: scaleY(1); }

.bw-subnav__link:hover,
.bw-subnav__link.is-active { color: var(--bw-fg); }

/* --- actions ------------------------------------------------------------- */
.bw-header__actions {
  display: flex;
  align-items: center;
  gap: var(--bwh-action-gap);
  flex: none;
  margin-inline-start: auto;
}

/* --- checkout ------------------------------------------------------------ */
.bw-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--bwh-cta-pad-y) var(--bwh-cta-pad-x);
  border-radius: var(--bw-radius-pill);
  background: var(--bw-accent);
  color: var(--bw-on-accent);
  font-size: var(--bwh-cta-size);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--bw-shadow);
  transition: transform var(--bw-dur-press) var(--bw-ease),
              box-shadow var(--bw-dur-hover) var(--bw-ease),
              background-color var(--bw-dur-theme) var(--bw-ease);
}

/* WHAT EACH BLEND POURS INTO AN INK CAPSULE.
 *
 * Keyed off <html>, so it is the switcher's answer rather than the header's
 * pinned palette — that is the whole point of the button doing this.
 *
 * Move and Restore pour their own signature, which is bright against the ink
 * either way. The Daily System has no signature of its own, so it pours the
 * gold the band uses for money — the same pour its own call to action has, so
 * pressing either one is visibly the same offer.
 *
 * The label flips under the waterline in all three cases, because all three
 * pours are lighter than the capsule: ink on orange and on cyan, and gold's
 * own ink on gold, which is the pairing --bw-on-gold exists for.
 */
.bw-header__cta {
  --bw-liquid: var(--bw-orange);
  --bw-liquid-ink: var(--bw-ink);
}
:root[data-bw-blend="restore"] .bw-header__cta { --bw-liquid: var(--bw-cyan); }
:root[data-bw-blend="system"]  .bw-header__cta { --bw-liquid: var(--bw-gold); --bw-liquid-ink: var(--bw-on-gold); }

/* THREE TRACKS.
 *
 * bw-tokens.css writes the thumb for two — half the width, and one rule
 * translating it a full width for Restore. With a third segment both of those
 * are wrong, and the :has() guard in that file that hides the thumb when the
 * site is in a blend the switcher cannot show no longer fires here, because
 * now it can show it. Specificity has to clear the blanket Restore rule, so
 * these are written from :root the same way it is. */
:root .bw-header .bw-blend__thumb,
:root .bw-float-switch .bw-blend__thumb {
  width: calc((100% - 6px) / 3);
}
:root[data-bw-blend="move"] .bw-header .bw-blend__thumb,
:root[data-bw-blend="move"] .bw-float-switch .bw-blend__thumb {
  transform: translateX(0);
}
:root[data-bw-blend="restore"] .bw-header .bw-blend__thumb,
:root[data-bw-blend="restore"] .bw-float-switch .bw-blend__thumb {
  transform: translateX(100%);
}
:root[data-bw-blend="system"] .bw-header .bw-blend__thumb,
:root[data-bw-blend="system"] .bw-float-switch .bw-blend__thumb {
  transform: translateX(200%);
}

.bw-header__cta:hover  { transform: translateY(-2px); box-shadow: var(--bw-shadow-hover); }
.bw-header__cta:active { transform: translateY(1px);  box-shadow: var(--bw-shadow-press); }
/* White explicitly, not inherited. The button's own colour is
   --bw-on-accent, a cream that goes muddy against the accent fill at this
   size — the mark is solid, so it has none of the fine detail that carries
   a tinted colour. */
.bw-header__cta-icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  color: var(--bw-white, #fff);
}

/* Only hidden when the mark is carrying the button instead. Kept in the DOM
   either way so the link always has an accessible name. */
.bw-header__cta-label--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.bw-header__cta-arrow {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  transition: transform var(--bw-dur-hover) var(--bw-ease);
}
.bw-header__cta:hover .bw-header__cta-arrow { transform: translateX(3px); }

.bw-header__cta-count {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding-inline: 5px;
  border-radius: var(--bw-radius-pill);
  background: var(--bw-on-accent);
  color: var(--bw-accent);

  /* Montserrat, not the Plakette the button sets. Declared on the badge
     itself, which beats the face it was inheriting from the section-ID rule
     above — inheritance always loses to a declaration targeting the element. */
  font-family: var(--bw-font-sans);

  /* The button pins Plakette to 400 because that face has no bold. Montserrat
     does have one, and at 11px an inherited 400 reads spindly beside the
     icon, so the weight is set back up rather than carried over. */
  font-weight: var(--bw-fw-bold);
  font-size: 11px;
  line-height: 1;

  /* place-items centres the box, but the button's .04em tracking is inherited
     and puts a gap after the final digit that nothing balances on the left.
     Inside a 19px circle that reads as visibly off-centre. */
  letter-spacing: normal;

  /* Keeps the glyphs the same width so the pill does not shift as the count
     crosses 9 to 10. */
  font-variant-numeric: tabular-nums;
}

/* --- burger -------------------------------------------------------------- */
.bw-header__burger {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-inline-start: -10px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.bw-burger { display: block; width: 20px; }
.bw-burger i {
  display: block;
  height: 2px;
  margin: 4px 0;
  background: currentColor;
  transition: transform .3s var(--bw-ease), opacity .2s var(--bw-ease);
}

[aria-expanded="true"] .bw-burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .bw-burger i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .bw-burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- drawer -------------------------------------------------------------- */
.bw-drawer { position: fixed; inset: 0; z-index: 60; }
.bw-drawer[hidden] { display: none; }

.bw-drawer__scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .3s var(--bw-ease);
  cursor: default;
}

.bw-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 1;
  width: min(86vw, 380px);
  display: flex;
  flex-direction: column;
  gap: var(--bw-space-6);
  padding: var(--bw-space-6) var(--bw-space-5) calc(var(--bw-space-6) + env(safe-area-inset-bottom));
  background: var(--bw-bg);
  color: var(--bw-fg);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-100%);
  transition: transform .34s var(--bw-ease);
}

.bw-drawer.is-open .bw-drawer__scrim { opacity: 1; }
.bw-drawer.is-open .bw-drawer__panel { transform: translateX(0); }

.bw-drawer__close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.bw-drawer__nav { margin: 0; padding: 0; list-style: none; }

/* Face and weight come from the section-ID rule in the style block, alongside
   the inline nav — the two are the same menu at different widths. Sized down from
   the old Plakette 26px because Montserrat is far wider per character and long
   link titles were wrapping to two lines in a 380px drawer. */
.bw-drawer__link {
  display: block;
  padding: 14px 0;
  border-bottom: var(--bw-border-w) solid var(--bw-hairline);
  font-size: 20px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
}

.bw-drawer__link.is-active { color: var(--bw-accent); }

/* Nested links sit under their parent as one block, so the parent gives up
   its hairline and the last child carries it instead. Indent plus a smaller
   size does the rest — at drawer scale that reads as a sublist without any
   disclosure arrow to explain. */
.bw-drawer__nav > li:has(.bw-drawer__sub) > .bw-drawer__link { border-bottom: 0; }

.bw-drawer__sub {
  margin: 0;
  padding: 0 0 0 20px;
  list-style: none;
}

.bw-drawer__sublink {
  display: block;
  padding: 11px 0;
  border-bottom: var(--bw-border-w) solid var(--bw-hairline);
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  opacity: .7;
}

.bw-drawer__sublink.is-active { color: var(--bw-accent); opacity: 1; }

.bw-drawer__meta {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: var(--bw-fw-eyebrow);
  letter-spacing: var(--bw-ls-micro);
  text-transform: uppercase;
  color: var(--bw-muted);
}
.bw-header__cta--wide { justify-content: center; padding-block: calc(var(--bwh-cta-pad-y) * 1.25); }

/* --- floating switcher --------------------------------------------------- */
/* Sits below the header (50) and the drawer (60) so neither is ever occluded,
   and above Horizon's own layers, which top out at --layer-temporary: 20. */
.bw-float-switch {
  position: fixed;
  z-index: 45;
  bottom: calc(var(--bwf-offset) + env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s var(--bw-ease), visibility .28s var(--bw-ease);
  /* Centring stretches this wrapper across the viewport, so it must never take
     the pointer itself or it would swallow clicks along the bottom of every
     page. Only the pill inside it is clickable. */
  pointer-events: none;
}

.bw-float-switch.is-visible { opacity: 1; visibility: visible; }
.bw-float-switch.is-visible .bw-float-switch__inner { pointer-events: auto; }

/* OUT OF THE WAY WHILE THE PAGE IS MOVING.

   The pill is pinned over whatever you are reading, and the moment you scroll
   past it the thing it covers is the thing you were going to read next. So it
   drops off the bottom edge while the page moves and comes back a second and
   a half after it stops — see bindScrollIdle in this section script for where
   the flag comes from.

   The transform is on __inner and not on the wrapper: the wrapper carries the
   fixed positioning and, under bottom-centre, a flex box that stretches the
   full width of the viewport. Moving that would move the positioning it is
   there to provide.

   Far enough to clear its own offset and the label sitting above it, so what
   leaves the screen leaves completely rather than parking a sliver of pill on
   the bottom edge. */
.bw-float-switch__inner {
  transition: transform .34s var(--bw-ease), opacity .24s var(--bw-ease);
}

:root.bw-scrolling .bw-float-switch.is-visible .bw-float-switch__inner {
  transform: translateY(calc(100% + var(--bwf-offset) + 28px));
  opacity: 0;
  pointer-events: none;
}

/* Nothing moves for anyone who has asked for that. The whole behaviour IS the
   movement, so it is dropped rather than made instant — a control that
   teleports away mid-scroll is worse than one that stays. */
@media (prefers-reduced-motion: reduce) {
  .bw-float-switch__inner { transition: none; }
  :root.bw-scrolling .bw-float-switch.is-visible .bw-float-switch__inner {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
}

/* Sits above the pill rather than inside it, so the capsule keeps its shape.
   Carries the pill's own ground and hairline because it floats over whatever
   section happens to be under it — bare type there is legible on a bone
   background and invisible on a photograph. */
.bw-float-switch__label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%);
  padding: 3px 9px;
  border-radius: var(--bw-radius-pill);
  border: var(--bw-border-w) solid var(--bw-hairline);
  background: var(--bw-bg);
  color: var(--bw-fg);
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bwf-label-size, 10px);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

/* Feeds the shared .bw-blend component its own scale so the floating pill can
   read smaller than the one in the header bar without forking the component. */
.bw-float-switch__inner {
  /* Offset parent for the label above. */
  position: relative;
  --bw-switch-size:  var(--bwf-size);
  --bw-switch-pad-y: var(--bwf-pad-y);
  --bw-switch-pad-x: var(--bwf-pad-x);
  padding: 5px;
  border-radius: var(--bw-radius-pill);
  border: var(--bw-border-w) solid var(--bw-hairline);
  background: var(--bw-bg);
  color: var(--bw-fg);
  box-shadow: var(--bw-shadow);
  transform: translateY(14px);
  transition: transform .28s var(--bw-ease),
              background-color var(--bw-dur-theme) var(--bw-ease),
              color var(--bw-dur-theme) var(--bw-ease);
}

.bw-float-switch.is-visible .bw-float-switch__inner { transform: translateY(0); }

/* The card already draws the boundary; the component's own hairline inside it
   reads as a double ring at this size. */
.bw-blend--float { border-color: transparent; }

/* Position is split desktop/mobile, so each breakpoint sets all three edges to
   avoid a stale `inset-inline` sticking around from the other one. */
@media screen and (min-width: 990px) {
  .bw-float-switch[data-pos-d="bottom-right"]  { inset-inline: auto var(--bwf-offset); }
  .bw-float-switch[data-pos-d="bottom-left"]   { inset-inline: var(--bwf-offset) auto; }
  .bw-float-switch[data-pos-d="bottom-centre"] { inset-inline: 0; display: flex; justify-content: center; }
}

@media screen and (max-width: 989px) {
  .bw-float-switch[data-pos-m="bottom-right"]  { inset-inline: auto var(--bwf-offset); }
  .bw-float-switch[data-pos-m="bottom-left"]   { inset-inline: var(--bwf-offset) auto; }
  .bw-float-switch[data-pos-m="bottom-centre"] { inset-inline: 0; display: flex; justify-content: center; }
}

/* Anything that takes over the screen hides it: the menu drawer would show it
   greyed under the scrim, and Horizon sets [scroll-lock] for cart and modals. */
.bw-header:has(.bw-drawer.is-open) + .bw-float-switch,
:root[scroll-lock] .bw-float-switch { opacity: 0; visibility: hidden; }

.bw-header:has(.bw-drawer.is-open) + .bw-float-switch .bw-float-switch__inner,
:root[scroll-lock] .bw-float-switch .bw-float-switch__inner { pointer-events: none; }

/* --- responsive ----------------------------------------------------------
   The menu-collapse rules that used to live here are now generated in the
   section's inline style block above, keyed to the "Collapse menu below"
   setting. They cannot be written here: this stylesheet is static and shared,
   and a media query cannot read a CSS custom property.

   (Written out in words rather than as tag syntax on purpose — this block has
   to be static CSS, and theme-check rejects a Liquid tag inside it even when
   the tag is only being named in a comment.) */

/* The squeeze that used to live here is gone.

   It tightened the horizontal padding to 62% below 430px, on the premise that
   the button was icon-only at every width and the room for a word was wasted.
   It is not icon-only — cta_show_label is on — so the rule was taking a third
   off the tap target of the only call to action in the header, on the width
   where it is the ONLY call to action visible at all. The phone sizes are
   settings; if the pill ever needs to be smaller there, that is where to say
   so. */

/* The drawer's desktop hide is generated alongside the collapse query above,
   so the two can never disagree about where the burger takes over. */

/* --- a11y ---------------------------------------------------------------- */
.bw-header :focus-visible,
.bw-drawer :focus-visible {
  outline: 3px solid var(--bw-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .bw-drawer__panel,
  .bw-drawer__scrim,
  .bw-blend__thumb,
  .bw-nav__link::after,
  .bw-nav__caret,
  .bw-subnav,
  .bw-subnav__link,
  .bw-subnav__link::before,
  .bw-header__cta { transition: none; }

  /* Appears and disappears rather than sliding, but still fades — an element
     popping into a fixed corner with no transition at all is the jarrier of
     the two. */
  .bw-float-switch__inner { transform: none; transition: none; }
}
/* END_SECTION:bw-header */

/* START_SECTION:bw-hero-split (INDEX:13) */
/* BREAKPOINT: 990px, matching the rest of the theme.

   This section used to split at 750px, which put it out of step with
   everything around it: base.css hands scrolling to .page-wrapper at 990px
   and bw-header switches its own sizing at 989px. Between 750 and 989 the
   hero was laying out for desktop — two columns and artwork taking 46% —
   inside a header that had already collapsed to a hamburger, so the copy
   column was half of a narrow window and the artwork was a sliver beside it.

   One number for the whole theme. If it ever moves, it moves everywhere.

/* Static structure only. Anything a merchant can change is emitted as a custom
   property by the inline style block above; this file is served once and
   cached, so it must never contain a merchant-configurable value. */

.bw-hero {
  position: relative;
  /* Deliberately no z-index. A stacking context here would trap every
     floating asset below the section's own level, so a cut-out could never
     paint over the marquee that follows. The hero's background still sits at
     the bottom of the local paint order because the children below carry
     explicit z-index values. */
  /* background-COLOR, not the shorthand. The shorthand resets background-image
     to none, and this section's stylesheet loads after bw-tokens.css at equal
     specificity — so the shorthand here silently erased the .bw-world sky. Any
     root that can carry .bw-world has to leave background-image alone. */
  background-color: var(--bw-bg);
  color: var(--bw-fg);
  border-bottom: var(--bw-border-w) solid var(--bw-hairline);
  overflow-x: clip;
  overflow-y: visible;
  transition: background-color var(--bw-dur-theme) var(--bw-ease),
              color var(--bw-dur-theme) var(--bw-ease);
}

.bw-hero__grid {
  display: grid;
  grid-template-columns: var(--bwh-cols);
  align-items: stretch;
  min-height: var(--bwh-min-h);
  /* Capped and centred, the same way the bands further down the page are. The
     GROUND still runs full width — only the content is measured — which is
     what keeps the hero reading as a full-bleed section rather than a card. */
  max-width: var(--bwh-measure-max);
  margin-inline: auto;
}

.bw-hero__copy {
  position: relative;
  /* 31, one above --bw-z-sachet and one below the "Front" float layer. Moves
     in lockstep with the float scale above: the copy has to clear the bands
     for the same reason the cut-outs do, or a float raised over the marquee
     would drag the headline underneath it. */
  z-index: 31;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: var(--bwh-pad-x);
  padding-block: var(--bwh-pad-y);
  gap: var(--bwh-gap);
}

/* Sits above the eyebrow and is deliberately the largest non-heading thing in
   the copy column. At eyebrow size it read as a caption — a detail about the
   product — when the job is to state the time of day loudly enough to be the
   reason the page looks the way it does. */
.bw-hero__time {
  --bw-timestamp-size: clamp(30px, 3.4vw, 46px);
  margin-block-end: var(--bw-space-3);
}

.bw-hero__eyebrow {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  max-width: 34ch;
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bwh-eyebrow);
  letter-spacing: var(--bw-ls-eyebrow);
  line-height: 1.5;
  text-transform: uppercase;
}

.bw-hero__h1 {
  margin: 0;
  font-weight: 400;
  font-size: var(--bwh-h1);
  line-height: var(--bwh-h1-lh);
  letter-spacing: var(--bwh-h1-ls);
  text-transform: uppercase;
}

.bw-hero__line { display: block; }
.bw-hero__line.is-accent { color: var(--bw-accent); transition: color var(--bw-dur-theme) var(--bw-ease); }

.bw-hero__lede {
  max-width: var(--bwh-measure);
  font-weight: var(--bw-fw-body);
  font-size: var(--bwh-lede);
  line-height: var(--bw-lh-lede);
  color: var(--bw-muted);
}
.bw-hero__lede > :first-child { margin-top: 0; }
.bw-hero__lede > :last-child  { margin-bottom: 0; }

.bw-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.bw-hero__rating {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--bw-fw-eyebrow);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.bw-hero__stars { display: inline-flex; gap: 2px; color: var(--bw-accent); }

/* Wide column gap: the specs are borderless spec lines now, so spacing is what
   separates one fact from the next. */
.bw-hero__pills { display: flex; flex-wrap: wrap; gap: 12px 32px; }

.bw-hero__media { position: relative; z-index: 0; min-width: 0; }

/* --- Sachet pair --------------------------------------------------------- */
/* Overlaid on the photograph rather than given a column of its own: the grid
   is two tracks wide and a third would have to come out of the copy's width,
   which is the one thing in this hero that cannot afford to be narrower. */
.bw-hero__pair {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  bottom: clamp(14px, 3vw, 42px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* The overlap, which is what makes the two read as a pair rather than as two
   unrelated products standing side by side. A negative `gap` would say this
   more directly but is invalid — gap is clamped to zero — so the pull comes
   from a margin on the second shot instead. */
.bw-hero__shot + .bw-hero__shot { margin-inline-start: var(--bwh-shot-lap, -7%); }

.bw-hero__shot {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: var(--bwh-shot-w, 22%);
  transform-origin: bottom center;
  transition: transform var(--bw-dur-theme) var(--bw-ease),
              opacity   var(--bw-dur-theme) var(--bw-ease),
              filter    var(--bw-dur-theme) var(--bw-ease);
}

.bw-hero__shot img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 26px rgba(12, 12, 12, .34));
}

.bw-hero__shot-label {
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bw-text-micro);
  letter-spacing: var(--bw-ls-micro);
  text-transform: uppercase;
  color: var(--bw-fg);
  transition: opacity var(--bw-dur-theme) var(--bw-ease);
}

/* Resting state is the QUIET one, so the pair is correct before the blend
   attribute is read. Neither sachet is hidden at any point — the active rules
   below only promote one of them. */
.bw-hero__shot {
  transform: scale(.74) translateY(6%);
  opacity: .48;
}
.bw-hero__shot .bw-hero__shot-label { opacity: .7; }

/* Active. Two selector groups for the same reason the dual-content rules above
   need two: the first covers a hero following the site switcher, the second a
   hero with a blend pinned to it. */
:root[data-bw-blend="move"]    .bw-hero:not([data-bw-blend]) [data-b-shot="move"],
:root[data-bw-blend="restore"] .bw-hero:not([data-bw-blend]) [data-b-shot="restore"],
.bw-hero[data-bw-blend="move"]    [data-b-shot="move"],
.bw-hero[data-bw-blend="restore"] [data-b-shot="restore"] {
  transform: scale(1) translateY(0);
  opacity: 1;
  /* Forward of its partner, so the overlap reads as depth. */
  z-index: 1;
}

:root[data-bw-blend="move"]    .bw-hero:not([data-bw-blend]) [data-b-shot="move"] .bw-hero__shot-label,
:root[data-bw-blend="restore"] .bw-hero:not([data-bw-blend]) [data-b-shot="restore"] .bw-hero__shot-label,
.bw-hero[data-bw-blend="move"]    [data-b-shot="move"] .bw-hero__shot-label,
.bw-hero[data-bw-blend="restore"] [data-b-shot="restore"] .bw-hero__shot-label {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  /* Only the quiet one responds — hovering the sachet that is already forward
     has nothing to offer, and a lift there would suggest clicking it does
     something. */
  .bw-hero__shot[aria-pressed="false"]:hover {
    opacity: .78;
    transform: scale(.79) translateY(3%);
  }
}

.bw-hero__shot:focus-visible {
  outline: 3px solid var(--bw-accent);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .bw-hero__shot { transition: none; }
}
.bw-hero__media.has-rule { border-inline-start: var(--bw-border-w) solid var(--bw-hairline); }
.bw-hero__media picture { display: block; height: 100%; }

.bw-hero__img {
  display: block;
  width: 100%;
  height: var(--bwh-media-h);
  object-fit: cover;
  object-position: var(--bwh-focal);
}

.bw-hero__img--restore { object-position: var(--bwh-focal-r); }

/* --- Full-bleed layout ---------------------------------------------------
   The photograph stops being a column and becomes the section. The copy
   column keeps its place in the grid; the media is lifted out of flow and
   pinned behind everything, so nothing about the copy's layout has to change
   between the two modes.
   ------------------------------------------------------------------------ */
.bw-hero--full .bw-hero__grid {
  /* One track. The media no longer occupies one, so a two-column template
     would leave an empty half the copy could not use. */
  grid-template-columns: minmax(0, 1fr);
  min-height: var(--bwh-full-h);
}

.bw-hero--full .bw-hero__media {
  position: absolute;
  inset: 0;
  /* Behind the copy but still inside the hero. .bw-hero opens no stacking
     context, so this resolves against the page — which is why it is 0 and not
     negative: a negative layer here would slide under the section's own
     background and disappear. */
  z-index: 0;
  min-width: 0;
}

.bw-hero--full .bw-hero__media picture,
.bw-hero--full .bw-hero__img {
  height: 100%;
  width: 100%;
}

/* The scrim. Ink type on a photograph is unreadable at any size, so full-bleed
   mode does not merely move the image — it changes what the copy is sitting
   on, and the copy has to be relit for it. Weighted to the side the text is
   on rather than laid flat across the whole frame: an even wash greys out the
   photograph everywhere, including the half doing the work. */
.bw-hero--full .bw-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(12, 10, 9, var(--bwh-scrim)) 0%,
      rgba(12, 10, 9, calc(var(--bwh-scrim) * .72)) 42%,
      rgba(12, 10, 9, 0) 78%),
    linear-gradient(to top,
      rgba(12, 10, 9, calc(var(--bwh-scrim) * .55)) 0%,
      rgba(12, 10, 9, 0) 46%);
}

/* Relit, not re-themed. These are fixed light values rather than blend tokens
   because what the copy sits on is now a photograph, not the section ground —
   --bw-fg is near-black under the neutral scheme and would vanish. */
.bw-hero--full .bw-hero__copy {
  max-width: var(--bwh-full-measure);
  min-height: var(--bwh-full-h);
  color: var(--bw-white);
}

.bw-hero--full .bw-hero__eyebrow,
.bw-hero--full .bw-hero__lede,
.bw-hero--full .bw-hero__lede * { color: rgba(255, 255, 255, .82); }

.bw-hero--full .bw-hero__h1 { color: var(--bw-white); }

/* The section's own border would draw a line across the bottom of a
   photograph that is meant to run to the edge of the frame. */
.bw-hero--full { border-bottom: 0; }

@media screen and (max-width: 989px) {
  .bw-hero--full .bw-hero__grid,
  .bw-hero--full .bw-hero__copy { min-height: var(--bwh-full-h-m); }

  /* Bottom-weighted on a phone: the frame is portrait, so a side-weighted
     scrim has no side to favour and the copy sits over the lower third. */
  .bw-hero--full .bw-hero__media::after {
    background: linear-gradient(to top,
      rgba(12, 10, 9, var(--bwh-scrim)) 0%,
      rgba(12, 10, 9, calc(var(--bwh-scrim) * .72)) 46%,
      rgba(12, 10, 9, .12) 100%);
  }
}

/* --- Type-mask layout -----------------------------------------------------
   The photograph stops being something the copy sits on and becomes something
   the copy is cut out of. One flat ground, no scrim, and the headline is the
   only picture on the page.

   Everything here is structure. The paint — the image, the ground colour, the
   fitted size — is emitted per section in the inline style block above,
   because it is all merchant-configurable and this file is served once and
   cached for every hero on the site.
   ------------------------------------------------------------------------ */
.bw-hero--mask .bw-hero__grid {
  /* One track. Same reason as full-bleed: with no photo column, a second
     track would leave an empty half the copy cannot use. */
  grid-template-columns: minmax(0, 1fr);
  min-height: var(--bwh-mask-h);
}

/* Hidden rather than dropped in Liquid. The merchant can switch layouts back
   without re-picking the image, and the mask falls back to this same image. */
.bw-hero--mask .bw-hero__media { display: none; }

.bw-hero--mask .bw-hero__copy {
  min-height: var(--bwh-mask-h);
  /* Not centred as a group. The headline is what gets centred, and it is
     centred inside the space left over rather than by pushing the eyebrow and
     the buttons away from the edges they belong to. */
  justify-content: flex-start;
}

/* --- The measuring box ----------------------------------------------------
   "Nearly fills the viewport" is a statement about height, and no amount of
   vw clamping expresses it: a clamp tuned to fill a 16:10 laptop overflows a
   4:3 tablet and strands the headline on an ultrawide. So the headline is not
   sized against the viewport at all. It is sized against this box, which is
   whatever the flex line has left once the eyebrow, lede, buttons and specs
   have taken theirs — the actual quantity the brief describes.

   container-type: size is what lets the h1 read that height back as cqh. It
   requires a size that does not depend on contents, which flex-basis 0 plus
   min-height 0 provides: the height comes from the flex line above, never
   from the type inside, so there is no loop between the two.

   It also means an over-long headline overflows this box visibly instead of
   silently shoving the buttons off the bottom of the screen — the failure is
   made obvious in the editor rather than shipped.
   ------------------------------------------------------------------------ */
.bw-hero__h1-fit { display: contents; }

.bw-hero--mask .bw-hero__h1-fit {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-height: 0;
  container-type: size;
}

.bw-hero--mask .bw-hero__h1 {
  width: 100%;
  /* The floor. Without container query support the headline keeps the ordinary
     clamp — large, but not fitted. Nothing breaks; it simply stops filling. */
  font-size: var(--bwh-h1);
}

@supports (container-type: size) {
  .bw-hero--mask .bw-hero__h1 { font-size: var(--bwh-h1-mask); }
}

.bw-hero__field {
  position: absolute;
  inset: 0;
  /* No z-index for the same reason: each .bw-float sets its own, so they
     compete in the page's stacking order rather than inside this wrapper. */
  pointer-events: none;
  overflow: visible;
}

@media screen and (max-width: 989px) {
  .bw-hero__media.has-rule {
    border-inline-start: 0;
    border-block-start: var(--bw-border-w) solid var(--bw-hairline);
  }
  .bw-hero__actions { gap: 10px; }
  .bw-hero__pills { gap: 10px 22px; }
  .bw-hero__eyebrow { max-width: none; }

  {%- if s.stack_mobile -%}
  {%- comment -%}
    STACKED, THE COPY SITS STRAIGHT ONTO THE ARTWORK.

    Side by side, the copy's bottom padding separates it from the foot of the
    section and is doing real work. Stacked, there is nothing below it but the
    packshot, and the ground behind both is the same colour — so the padding
    reads as nothing at all except height, pushing the artwork down the screen
    until only the very top of it clears the fold on a phone.

    Only the block-end goes. The top padding is what holds the headline clear
    of the header, and the inline padding is the section's measure.
  {%- endcomment -%}
  .bw-hero__copy { padding-block-end: 0; }
  {%- endif -%}
}

/* --- Reaching up behind the header ----------------------------------------
   The section is pulled up by exactly the header's height and given the same
   amount back as padding. The ground and anything absolutely positioned to
   the section's edges now start at the top of the screen, while the grid —
   and so the copy — still begins below the header.

   Paired with the header's transparent state, this is the only arrangement
   that puts artwork behind the nav and the cart button while still showing it
   in the header band. The header is sticky with a z-index, so it and
   everything in it is one sealed layer; the choice is above all of it or
   below all of it, and below is the one that leaves the controls usable.

   Desktop only. The stacked mobile layout puts its artwork at the foot of the
   section, nowhere near the header.
   ------------------------------------------------------------------------ */
@media screen and (min-width: 990px) {
  .bw-hero--under-header {
    margin-block-start: calc(var(--bw-header-h, 0px) * -1);
    padding-block-start: var(--bw-header-h, 0px);
  }
}

/* Sized to the screen instead of to a pixel height — minus the header when the
   section is reaching up behind it, so the two together come to one viewport
   rather than one viewport plus a header.

   Desktop only, and that is not an oversight. Stacked, the section is copy
   THEN artwork, so a screen-height floor is height the two have to be spread
   across: the copy drifts into the middle of an empty ground and the artwork
   is pushed away from the foot. On a phone the content is the right height
   already — mobile keeps its own min-height setting, which is a floor rather
   than a target. */
@media screen and (min-width: 990px) {
  .bw-hero--full-vh .bw-hero__grid { min-height: 100svh; }

  .bw-hero--full-vh.bw-hero--under-header .bw-hero__grid {
    min-height: calc(100svh - var(--bw-header-h, 0px));
  }
}

/* --- Desktop, artwork on the right ----------------------------------------
   Sized by HEIGHT, with the width following the aspect ratio — pinned to the
   top and bottom edges and given no width of its own, so it takes whatever
   height the section turns out to be. min-height is a floor, not a height:
   the section grows whenever the copy is taller than it, and anything sized
   off the viewport width has no idea that happened. This does.

   aspect-ratio is what turns the definite height into a width. The box could
   shrink-to-fit around the image instead, but then a max-width on the box
   would not constrain the image inside it — the image would simply overflow —
   and a limit is exactly what is wanted here.

   That limit is the max-width: half the section plus a reach past the middle.
   Left to itself the artwork grows leftward as the section gets taller, and
   on a narrow window that means across the headline. The cap says how far
   past the centre line it may come, and object-fit takes the difference off
   the artwork's left edge — the swish, not the packs, which is the right end
   to lose. It only binds when the two genuinely conflict; short of that
   nothing is cropped at all.
   ------------------------------------------------------------------------ */
@media screen and (min-width: 990px) {
  .bw-hero--desktop-right .bw-hero__media {
    position: absolute;
    inset-block: 0;
    /* The right edge follows the measure, not the window. Pinned to the
       window it would drift away from the copy on a wide screen — the copy
       stops at the measure while the artwork keeps going — and the two would
       stop reading as one composition. The gutter is 0 below the measure, so
       on ordinary screens this is still the section's own right edge. */
    inset-inline: auto var(--bwh-gutter);
    width: auto;
    /* The height has to be DEFINITE, not left to the inset-block pins.

       With height:auto the pins do size the box — until max-width below
       clamps the width. CSS then re-runs the sizing with that clamped width
       as a definite value, and with height still auto the aspect-ratio
       derives the height from it instead. The box is now over-constrained,
       the bottom offset is dropped, and the artwork ends short of the
       section: the gap under the photograph on a narrowed desktop, and the
       hard vertical cut down its left edge on a tablet, are both this.

       Stating the height makes the ratio one-directional — it may compute
       the width from the height, never the reverse — so max-width can clamp
       the width without the box ever leaving the bottom edge. */
    height: 100%;
    aspect-ratio: var(--bwh-art-ratio);
    /* 50% of the section, which is full-bleed, so half the screen. */
    /* Still measured from the middle of the SCREEN. The measure is centred,
       so its middle and the window's are the same line — the cap means the
       same thing either way, which is why it needs no adjustment here. */
    max-width: calc(50% + var(--bwh-reach) - var(--bwh-gutter));
    z-index: 0;
    pointer-events: none;
  }

  .bw-hero--desktop-right .bw-hero__media picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .bw-hero--desktop-right .bw-hero__img {
    width: 100%;
    height: 100%;
    /* .bw-hero__img sets max-width for the column layouts; undone here or the
       image cannot fill a box that is wider than its own natural size. */
    max-width: none;
    /* cover, not contain: below the cap the box already matches the artwork's
       ratio exactly and cover crops nothing, so this only takes effect once
       the cap bites — and then cropping is the intended behaviour rather than
       the artwork lifting off an edge. */
    object-fit: cover;
    object-position: 100% 50%;
  }
}

/* --- Desktop full-bleed ---------------------------------------------------
   The photo leaves its column and goes behind the whole section, but only at
   desktop widths — the stacked mobile layout is untouched, which is the whole
   reason this is not just the full-bleed LAYOUT.

   It stays a real <img> in the media column rather than becoming a CSS
   background. A background-image is discovered only after the stylesheet
   parses, has no srcset, and cannot be given fetchpriority — three things a
   hero photograph can least afford. Absolutely positioning the element the
   theme already renders keeps the responsive set and the eager load intact.

   The grid keeps both tracks. The media no longer occupies its own, but the
   empty track is doing real work: it holds the copy in the left half, which
   is where photography chosen for this treatment keeps its clear space.

   And no scrim, deliberately. The full-bleed layout relights its copy to
   white over a wash because it assumes an arbitrary photograph. This assumes
   the opposite — an image with a quiet side — so the section's own ink type
   stays, and the contrast is the photograph's job.
   ------------------------------------------------------------------------ */
@media screen and (min-width: 990px) {
  .bw-hero--desktop-full .bw-hero__media {
    position: absolute;
    inset: 0;
    /* Behind the copy but inside the hero. .bw-hero opens no stacking context,
       so this resolves against the page — which is why it is 0 and not
       negative: a negative layer slides under the section's own background. */
    z-index: 0;
  }

  .bw-hero--desktop-full .bw-hero__media picture,
  .bw-hero--desktop-full .bw-hero__img { width: 100%; height: 100%; }

  /* The section's own rule would draw a line across the bottom of a
     photograph that is meant to run to the edge of the frame. */
  .bw-hero--desktop-full { border-bottom: 0; }
}

/* --- Desktop panel --------------------------------------------------------
   The desktop counterpart of the mobile band, and the same idea: with the
   photo dropped, the column stays a column and becomes the box the cut-outs
   are arranged in.

   The clip is what makes it safe. A float's x is a percentage of the field,
   so against the whole section "60%" is a guess that depends on how wide the
   copy happens to run at this viewport. Against the photo column it is a
   position inside the panel, and no value of it can put a packshot over the
   headline — the copy column is not in the box being measured.

   --bwh-media-frac comes from the same ratio that builds the grid, so the
   panel tracks the column even when the split is dragged away from 50/50.
   ------------------------------------------------------------------------ */
@media screen and (min-width: 990px) {
  .bw-hero--desktop-panel .bw-hero__field {
    left: auto;
    right: 0;
    width: var(--bwh-media-frac);
  }
}

/* --- Mobile, artwork at the foot -------------------------------------------
   The stacked layout already puts the photo column last, so the foot of the
   section is where it lands. What this changes is the sizing: the band height
   goes away and the artwork keeps its own proportions across the full width.

   That is the difference between a photograph and a cut-out. A photograph is
   given a band and cropped to fill it, because its edges are arbitrary. A
   cut-out's edges are the artwork — crop them and you have cut through the
   packs — so here the artwork sets the height and the section's ground shows
   through everywhere it is transparent.
   ------------------------------------------------------------------------ */
@media screen and (max-width: 989px) {
  /* The row can be taller than the artwork — a min-height on the grid, or a
     long copy column beside it — and a stretched cell would leave the artwork
     floating with a gap beneath it. end pins it to the foot of the section
     instead, which is where a cut-out on a flat ground belongs. */
  .bw-hero--mobile-art .bw-hero__media { align-self: end; }

  .bw-hero--mobile-art .bw-hero__media picture { height: auto; }

  .bw-hero--mobile-art .bw-hero__img {
    width: 100%;
    /* auto, not the band height: the intrinsic ratio decides, so the artwork
       is never squashed and never cropped. */
    height: auto;
    object-fit: contain;
  }
}

/* --- Mobile band ----------------------------------------------------------
   With "Drop the photo on mobile" on, the photo column is emptied but keeps
   its height, so it becomes a reserved strip under the copy rather than
   disappearing. Two things follow, and both are the point:

   The float field is clipped to that strip. A float's y is a percentage of
   the field, so against the whole section it means "somewhere down the page"
   — and the moment the headline wraps to another line on a narrower phone,
   every cut-out slides up onto the copy. Against the band it means "somewhere
   in the strip", which is stable no matter how tall the copy runs. Cut-outs
   cannot end up behind the headline because there is no headline in the box
   they are positioned against.

   And the cut-outs are free to overflow the strip downwards. That is the crop
   in the reference — the packs run off the bottom edge — and it only reads
   correctly because they are set to the layer that passes under the next
   section instead of over it.
   ------------------------------------------------------------------------ */
@media screen and (max-width: 989px) {
  .bw-hero--mobile-band .bw-hero__field {
    top: auto;
    bottom: 0;
    height: var(--bwh-media-h);
  }
}

.bw-hero :focus-visible { outline: 3px solid var(--bw-accent); outline-offset: 3px; }

/* Reduced-motion handling for shared components lives in bw-tokens.css so it
   is declared once for every section that uses them. */
/* END_SECTION:bw-hero-split */

/* START_SECTION:bw-how-to-use (INDEX:14) */
/* Behind the floats and the copy, inside the band's own clip. */
.bw-htu__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.bw-htu__bgimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--bwhtu-bg-pos, 50% 50%);
  transition: opacity var(--bw-dur-theme) var(--bw-ease);
}

/* Flat ink, not a tint: a tint's darkness depends on the photograph under it,
   so it cannot be relied on to keep three steps of copy legible. */
.bw-htu__bgscrim {
  position: absolute;
  inset: 0;
  background: var(--bw-ink);
  opacity: var(--bwhtu-scrim, .5);
}

.bw-htu {
  position: relative;
  background: var(--bwhtu-bg);
  color: var(--bwhtu-fg);
  /* clip on both axes. overflow-y: visible would let the cut-outs extend the
     page, which with vw sizing can oscillate the scrollbar. The bleed slider
     widens the paint region instead. */
  overflow: clip;
  overflow-clip-margin: var(--bwhtu-bleed);
  transition: background-color var(--bw-dur-theme) var(--bw-ease),
              color var(--bw-dur-theme) var(--bw-ease);
}

.bw-htu.has-rule-top    { border-top: var(--bw-border-w) solid var(--bw-hairline); }
.bw-htu.has-rule-bottom { border-bottom: var(--bw-border-w) solid var(--bw-hairline); }

/* Decorative, and never in the way of a click. */
.bw-htu__field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bw-htu__inner {
  position: relative;
  z-index: 1;
  max-width: var(--bwhtu-measure);
  margin-inline: auto;
  padding-inline: var(--bwhtu-rail);
  padding-block: var(--bwhtu-pad-y);
}

.bw-htu__eyebrow {
  margin: 0 0 var(--bwhtu-eyebrow-mb);
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bwhtu-eyebrow);
  letter-spacing: var(--bw-ls-eyebrow);
  line-height: 1.5;
  text-transform: uppercase;
}

.bw-htu__head {
  margin: 0 0 var(--bwhtu-head-mb);
  font-size: var(--bwhtu-head);
  line-height: var(--bwhtu-head-lh);
  text-transform: uppercase;
}

.bw-htu__head p { margin: 0; }

/* --- Photograph beside the steps -----------------------------------------
   Without an image this is a plain block and the steps grid behaves exactly
   as it did — the band has no idea anything was added. With one, it becomes
   the two-column split: picture on one side, the run of steps on the other.

   min-width: 0 on the steps track because a grid item's automatic minimum is
   its content, and the numerals here are enormous — without it the steps
   column refuses to go below the width of "01" at 190px and squeezes the
   picture out rather than wrapping. */
.bw-htu__layout.has-media {
  display: grid;
  grid-template-columns: var(--bwhtu-media-w, 46%) minmax(0, 1fr);
  gap: var(--bwhtu-media-gap, clamp(28px, 4vw, 72px));
  align-items: var(--bwhtu-media-align, start);
}

/* Which side the picture takes. Ordered rather than re-templated so the
   markup order — picture first — stays the reading order a screen reader
   gets, and only the painting swaps. */
.bw-htu__layout.has-media.is-media-right {
  grid-template-columns: minmax(0, 1fr) var(--bwhtu-media-w, 46%);
}
.bw-htu__layout.has-media.is-media-right .bw-htu__media { order: 2; }

.bw-htu__media {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  border-radius: var(--bwhtu-media-radius, 0);
}

.bw-htu__media picture { display: block; }

.bw-htu__img {
  display: block;
  width: 100%;
  height: auto;
}

/* "Match the steps' height" only means anything if the picture is allowed to
   crop. A fixed-ratio image in a stretched box would sit at its natural
   height and leave the gap the setting was chosen to close. */
.bw-htu__layout.is-media-fill .bw-htu__media picture,
.bw-htu__layout.is-media-fill .bw-htu__img { height: 100%; }
.bw-htu__layout.is-media-fill .bw-htu__img { object-fit: cover; }

.bw-htu__grid {
  display: grid;
  grid-template-columns: repeat(var(--bwhtu-cols), minmax(0, 1fr));
  row-gap: var(--bwhtu-row-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media screen and (max-width: 899px) {
  /* Stacked, picture first — it is the demonstration and the steps are its
     caption, which is the order they should arrive in. */
  .bw-htu__layout.has-media,
  .bw-htu__layout.has-media.is-media-right {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--bwhtu-media-gap-m, 28px);
  }
  .bw-htu__layout.has-media.is-media-right .bw-htu__media { order: 0; }
}

.bw-htu__step {
  position: relative;
  min-width: 0;
  padding-inline: var(--bwhtu-cell);
}

/* Divider as a pseudo-element at a fraction of the current text colour, so it
   stays legible on any ground rather than assuming a cream band. */
.bw-htu__step::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 1px;
  background: currentColor;
  opacity: var(--bwhtu-divider);
}

.bw-htu__num {
  font-size: var(--bwhtu-num);
  line-height: var(--bwhtu-num-lh);
  opacity: var(--bwhtu-num-op);
  font-variant-numeric: tabular-nums;
}

.bw-htu__title {
  margin-top: var(--bwhtu-title-mt);
  font-size: var(--bwhtu-title);
  line-height: 1;
  text-transform: uppercase;
}

.bw-htu__body {
  margin: var(--bwhtu-body-mt) 0 0;
  max-width: var(--bwhtu-body-w);
  font-size: var(--bwhtu-body);
  line-height: var(--bw-lh-body);
  opacity: .88;
}
/* END_SECTION:bw-how-to-use */

/* START_SECTION:bw-marquee (INDEX:15) */
.bw-marquee {
  position: relative;
  /* 35, above --bw-z-sachet (30).

     3 was enough to sit over the plain grounds either side, and it is not
     enough now. .bw-panel in bw-blend-split claims the sachet layer so its
     packshots can bleed past the panel edge, and it paints an opaque
     background — so at 3 this band's downward shadow was landing underneath
     the very section it was meant to fall on. The shadow has been symmetrical
     the whole time; only the half over the hero was ever visible.

     35 clears the panels while staying under the hero's topmost float layer
     at 40, so a cut-out set to spill over this band still does. Worth knowing
     if the band is ever given a negative top overlap: it would then also
     cover the hero copy, which sits at 31. */
  z-index: 35;
  padding-block: var(--bwm-pad-y);
  background: var(--bwm-bg);
  color: var(--bwm-fg);
  overflow: hidden;
  transition: background-color var(--bw-dur-theme) var(--bw-ease),
              color var(--bw-dur-theme) var(--bw-ease);
}

.bw-marquee__wrap {
  position: relative;
  /* No z-index, deliberately: with one this becomes a stacking context and
     both children are sealed inside it, which is exactly what has to be
     avoided — they need to resolve against the page separately. */
  margin-top: var(--bwm-overlap);
}

/* The shadow, as its own layer.

   Sits over the band it belongs to and over both neighbours, including a
   blend panel lifted to --bw-z-hover (42) — which is the one thing the band
   itself must NOT do, since that hover exists to let the packshot rise over
   this band without being sliced. Splitting the two lets the packshot pass in
   front of the band and still take the shadow, which is also how it would
   actually look.

   Transparent, and box-shadow only paints outside the border box, so nothing
   here covers the band underneath it. Symmetrical by default — offset 0 —
   because the band sits above both neighbours rather than between them, so
   there is no near side and far side to tell apart. Spread on the Y axis
   only: the band runs the full width of the page, so a shadow off its left
   and right edges falls outside the viewport and buys nothing but paint. */
.bw-marquee__shade {
  position: absolute;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  box-shadow: var(--bwm-shadow);
}

.bw-marquee.has-rule-top    { border-top: 2px solid var(--bw-fg); }
.bw-marquee.has-rule-bottom { border-bottom: 2px solid var(--bw-fg); }

.bw-marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  /* --bwm-shift defaults to 50%: with exactly two identical groups that is
     precisely one group, so the loop is seamless before JS measures. Once JS
     runs it becomes a pixel value, which stays correct for any clone count. */
  animation: bw-marquee-run var(--bwm-dur) linear infinite;
  will-change: transform;
}

.bw-marquee[data-direction="right"] .bw-marquee__track { animation-direction: reverse; }
.bw-marquee[data-pause-hover="true"]:hover .bw-marquee__track { animation-play-state: paused; }

@keyframes bw-marquee-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--bwm-shift, 50%) * -1), 0, 0); }
}

.bw-marquee__group {
  display: flex;
  align-items: center;
  flex: none;
}

.bw-marquee__item,
.bw-marquee__sep {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding-inline: var(--bwm-gap);
  font-size: var(--bwm-size);
  line-height: 1;
  letter-spacing: var(--bwm-ls);
  text-transform: uppercase;
  white-space: nowrap;
}

.bw-marquee__icon {
  display: inline-flex;
  width: .78em;
  height: .78em;
}

.bw-marquee__icon svg { width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
  /* Static rather than hidden: the words carry the proof points, so the band
     still reads — it simply stops moving. */
  .bw-marquee__track { animation: none; }
}
/* END_SECTION:bw-marquee */

/* START_SECTION:bw-numbers-band (INDEX:16) */
.bw-numbers {
  position: relative;
  z-index: 2;
  background: var(--bwn-bg);
  color: var(--bwn-fg);
  transition: background-color var(--bw-dur-theme) var(--bw-ease),
              color var(--bw-dur-theme) var(--bw-ease);
}

.bw-numbers.has-rule-top    { border-top: var(--bw-border-w) solid var(--bw-hairline); }
.bw-numbers.has-rule-bottom { border-bottom: var(--bw-border-w) solid var(--bw-hairline); }

/* --- Background photograph -----------------------------------------------
   Behind everything, clipped to the band. The band's colour stays underneath
   as the underlay, so a slow image reveals rather than flashes. */
.bw-numbers__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.bw-numbers__bg picture { display: block; height: 100%; }

.bw-numbers__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--bwn-bg-pos, center);
  display: block;
}

/* The scrim, and the reason a photograph can go here at all. These numerals
   are the largest type in the section and they are set in a single weight —
   over a photograph, the light parts of the image eat the strokes, and a
   figure that cannot be read is worse than no photograph.

   Weighted from the bottom as well as flat, because the numerals and their
   supporting copy sit lower in the band than the eyebrow does, and an even
   wash strong enough for them would grey out the whole picture. Painted in
   the band's OWN ink colour rather than a fixed black: on the accent ground
   the copy is cream and the darkener should carry that warmth, and if the
   band is ever set to a light ground the scrim follows it instead of
   fighting it. */
.bw-numbers__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(12, 10, 9, var(--bwn-scrim)) 0%,
      rgba(12, 10, 9, calc(var(--bwn-scrim) * .78)) 55%,
      rgba(12, 10, 9, calc(var(--bwn-scrim) * .62)) 100%);
}

.bw-numbers__inner {
  position: relative;
  z-index: 1;
  max-width: var(--bwn-measure);
  margin-inline: auto;
  padding-inline: var(--bwn-rail);
  padding-block: var(--bwn-pad-y);
}

.bw-numbers__eyebrow {
  margin: 0 0 var(--bwn-eyebrow-mb);
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bwn-eyebrow);
  letter-spacing: var(--bw-ls-eyebrow);
  line-height: 1.5;
  text-transform: uppercase;
}

.bw-numbers__head {
  margin: 0 0 var(--bwn-head-mb);
  font-size: var(--bwn-head);
  line-height: var(--bwn-head-lh);
  letter-spacing: var(--bwn-head-ls);
  text-transform: uppercase;
}

/* richtext wraps content in <p>; the spacing belongs to the container. */
.bw-numbers__head p { margin: 0; }

.bw-numbers__grid {
  display: grid;
  grid-template-columns: repeat(var(--bwn-cols), minmax(0, 1fr));
  row-gap: var(--bwn-row-gap);
}

.bw-num {
  position: relative;
  min-width: 0;
  padding-inline: var(--bwn-cell-pad);
}

/* Divider as a pseudo-element rather than a border: it inherits the band's
   text colour at a fixed alpha, so it stays legible whether the ground is
   orange, cyan, cream or navy without hardcoding a colour per case. */
.bw-num::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 1px;
  background: currentColor;
  opacity: var(--bwn-divider);
}

.bw-num__value {
  font-size: var(--bwn-num);
  line-height: var(--bwn-num-lh);
  opacity: var(--bwn-num-op);
  font-variant-numeric: tabular-nums;
}

.bw-num__title {
  margin-top: var(--bwn-title-mt);
  font-size: var(--bwn-title);
  line-height: 1;
  text-transform: uppercase;
}

.bw-num__body {
  margin: var(--bwn-body-mt) 0 0;
  max-width: var(--bwn-body-w);
  font-size: var(--bwn-body);
  line-height: var(--bw-lh-body);
  opacity: .88;
}

.bw-num.is-gated { outline: 2px dashed currentColor; outline-offset: 6px; }

.bw-num__flag {
  margin: 12px 0 0;
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-bold);
  font-size: 10px;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
}
/* END_SECTION:bw-numbers-band */

/* START_SECTION:bw-offer (INDEX:17) */
/* ==========================================================================
   BW · OFFER

   Shares build-my-box's vocabulary on purpose — see the note at the top of
   the section. Where a rule here looks like one in bw-build-box, that is the
   intent, not a duplicate waiting to be factored out: the two sections are
   edited independently, and a shared class would couple the shop page's
   configurator to the homepage's price list.
   ========================================================================== */

.bw-offer {
  padding: var(--bwo-pad-y) var(--bwo-rail);
  background: var(--bwo-bg);
  color: var(--bwo-fg);
  transition: background-color var(--bw-dur-theme) var(--bw-ease),
              color var(--bw-dur-theme) var(--bw-ease);
}

.bw-offer__inner {
  max-width: var(--bwo-measure);
  margin-inline: auto;
}

/* --- Head ---------------------------------------------------------------- */

.bw-offer__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--bw-space-5);
  margin-bottom: var(--bw-space-7);
}

.bw-offer__titles { min-width: 0; max-width: 46ch; }

.bw-offer__eyebrow {
  margin: 0 0 var(--bw-space-3);
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bwo-eyebrow);
  letter-spacing: var(--bw-ls-eyebrow);
  text-transform: uppercase;
}

.bw-offer__h2 {
  font-size: var(--bwo-head);
  line-height: var(--bwo-head-lh);
  letter-spacing: var(--bw-ls-display);
  text-transform: uppercase;
}
.bw-offer__h2 p { margin: 0; }
.bw-offer__h2 > :first-child { margin-top: 0; }
.bw-offer__h2 > :last-child  { margin-bottom: 0; }

.bw-offer__lede {
  margin-top: var(--bw-space-3);
  font-size: var(--bw-text-body);
  line-height: var(--bw-lh-body);
  opacity: .85;
}
.bw-offer__lede > :first-child { margin-top: 0; }
.bw-offer__lede > :last-child  { margin-bottom: 0; }

.bw-offer__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--bw-space-2);
  max-width: 34ch;
}

.bw-offer__rating {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--bw-space-2);
  font-weight: var(--bw-fw-bold);
  font-size: var(--bw-text-micro);
  letter-spacing: var(--bw-ls-micro);
  text-transform: uppercase;
}

.bw-offer__stars { display: inline-flex; gap: 1px; }

/* The promise that the next page does more. Set as small print rather than a
   second heading: it has to be readable without competing with the prices,
   which are what the visitor came to this section for. */
.bw-offer__next {
  margin: 0;
  font-size: var(--bw-text-small);
  line-height: var(--bw-lh-body);
  text-align: end;
  opacity: .8;
}

/* --- Tier row ------------------------------------------------------------
   Primaries take a column each; a secondary spans them all. The badge on a
   card overhangs its top edge, so the row carries 13px of padding to give it
   somewhere to go. */
.bw-offer__tiers {
  display: grid;
  grid-template-columns: repeat(var(--bwo-cols), minmax(0, 1fr));
  align-items: stretch;
  gap: var(--bwo-gap);
  margin: 0;
  padding: 13px 0 0;
  list-style: none;
}

.bw-offer__slot { position: relative; display: flex; }
.bw-offer__slot.is-minor { grid-column: 1 / -1; }

/* --- Primary card --------------------------------------------------------
   The card lies down. Packshot in its own column spanning both rows, copy
   and deal stacked beside it, so the tier is about as tall as its image
   rather than as tall as six stacked rows. Named areas rather than explicit
   line numbers, because the phone layout below rearranges the same three
   children and areas make that one legible line instead of six. */
.bw-offer__card {
  position: relative;
  display: grid;
  flex: 1;
  grid-template-columns: var(--bwo-shot) minmax(0, 1fr);
  grid-template-areas:
    "shot intro"
    "shot deal";
  align-content: start;
  gap: var(--bw-space-3) var(--bwo-pad);
  padding: var(--bwo-pad);
  border: var(--bw-border-w) solid var(--bwo-card-line);
  border-radius: var(--bwo-radius);
  background: var(--bwo-card-fill);
  transition: transform var(--bw-dur-hover) var(--bw-ease),
              box-shadow var(--bw-dur-hover) var(--bw-ease);
}

/* The whole card lifts even though only the button is clickable. That is
   deliberate: it says the card is one object and the button is its handle,
   which is what build-my-box's cards say when they are selectable. */
.bw-offer__card:hover,
.bw-offer__card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--bw-shadow-hover);
}

/* The featured card. Fill and ink do the work; the ring is an inset shadow
   rather than a thicker border so nothing reflows against its neighbour —
   a card a pixel wider than the other makes the row look crooked. Its CTA
   inverts to the accent, because a cream button on a cream card disappears
   the same way a cream button would on the accent ground. */
.bw-offer__slot.is-featured .bw-offer__card {
  border-color: transparent;
  background: var(--bwo-feat-fill);
  color: var(--bwo-feat-ink);
  box-shadow: inset 0 0 0 2px var(--bwo-feat-ink), var(--bw-shadow);
  --bw-btn-fill: var(--bw-accent);
  --bw-btn-ink:  var(--bw-on-accent);
}

.bw-offer__slot.is-featured .bw-offer__card:hover,
.bw-offer__slot.is-featured .bw-offer__card:focus-within {
  box-shadow: inset 0 0 0 2px var(--bwo-feat-ink), var(--bw-shadow-hover);
}

/* Overhangs the top edge, the way build-my-box's does. It is the only thing
   on the card allowed outside the border, which is what makes it read as a
   label attached to the card rather than another line of copy inside it. */
.bw-offer__badge {
  position: absolute;
  z-index: 2;
  top: -13px;
  left: var(--bwo-pad);
  margin: 0;
  padding: 5px 12px;
  border-radius: var(--bw-radius-pill);
  background: var(--bw-ink);
  color: var(--bw-cream);
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bw-text-micro);
  letter-spacing: var(--bw-ls-micro);
  text-transform: uppercase;
  white-space: nowrap;
}

.bw-offer__shot {
  grid-area: shot;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.bw-offer__shot img {
  max-width: 100%;
  max-height: calc(var(--bwo-shot) * 1.35);
  height: auto;
  object-fit: contain;
  transition: transform var(--bw-dur-hover) var(--bw-ease);
}

.bw-offer__card:hover .bw-offer__shot img { transform: scale(1.04); }

.bw-offer__shot-ph { opacity: .3; }

.bw-offer__intro {
  grid-area: intro;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--bw-space-3);
  align-content: start;
}

.bw-offer__name {
  margin: 0;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1;
  letter-spacing: var(--bw-ls-display);
  text-transform: uppercase;
}

.bw-offer__servings {
  margin: 0;
  font-weight: var(--bw-fw-bold);
  font-size: var(--bw-text-micro);
  letter-spacing: var(--bw-ls-micro);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .8;
}

/* Takes the whole line under the name, so a longer supporting line pushes
   nothing sideways. */
.bw-offer__blurb {
  flex-basis: 100%;
  margin: 0;
  font-weight: var(--bw-fw-body);
  font-size: var(--bw-text-small);
  line-height: var(--bw-lh-body);
  opacity: .8;
}

.bw-offer__deal {
  grid-area: deal;
  display: flex;
  flex-direction: column;
  gap: var(--bw-space-3);
  justify-content: flex-end;
}

.bw-offer__rule {
  display: block;
  height: var(--bw-border-w);
  background: currentColor;
  opacity: .35;
}

/* --- Money --------------------------------------------------------------- */

.bw-offer__money { display: grid; gap: 4px; }

/* Says which price this is. One line of micro type is the whole cost of not
   making somebody guess whether the big number is the member rate. */
.bw-offer__pricelabel {
  margin: 0;
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bw-text-micro);
  letter-spacing: var(--bw-ls-micro);
  text-transform: uppercase;
  opacity: .7;
}

/* Price and rate share a baseline instead of stacking. Two lines saved on
   every card, and the rate reads as a qualifier on the price rather than as
   a second fact. */
.bw-offer__pricerow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--bw-space-2) var(--bw-space-3);
}

.bw-offer__price {
  margin: 0;
  font-size: var(--bwo-price);
  line-height: .9;
  letter-spacing: var(--bw-ls-display);
}

.bw-offer__per {
  margin: 0;
  font-weight: var(--bw-fw-bold);
  font-size: var(--bw-text-micro);
  letter-spacing: var(--bw-ls-micro);
  text-transform: uppercase;
  opacity: .75;
}

.bw-offer__save {
  margin: 0;
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bw-text-micro);
  letter-spacing: var(--bw-ls-micro);
  text-transform: uppercase;
}

.bw-offer__cta { justify-content: center; }

/* --- Secondary strip -----------------------------------------------------
   Priced, findable, and clearly not in the running: no packshot, no fill, no
   button. A dashed hairline rather than a solid one so it does not read as a
   third card that lost its contents. */
.bw-offer__minor {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bw-space-3) var(--bw-space-5);
  padding: var(--bw-space-3) var(--bwo-pad);
  border: var(--bw-border-w) dashed var(--bwo-card-line);
  border-radius: var(--bw-radius-pill);
}

.bw-offer__minorlead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--bw-space-3);
  min-width: 0;
}

.bw-offer__minorname {
  margin: 0;
  font-weight: 400;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1;
  letter-spacing: var(--bw-ls-display);
  text-transform: uppercase;
}

.bw-offer__minormeta {
  margin: 0;
  font-size: var(--bw-text-small);
  line-height: var(--bw-lh-body);
  opacity: .8;
}

.bw-offer__minorprice {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--bw-space-2);
  margin-inline-start: auto;
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1;
  letter-spacing: var(--bw-ls-display);
}

.bw-offer__minorper {
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-bold);
  font-size: var(--bw-text-micro);
  letter-spacing: var(--bw-ls-micro);
  text-transform: uppercase;
  opacity: .75;
}

/* .bw-btn--link carries the type and the arrow; only the padding needs
   trimming, because the strip is already a tight row. */
.bw-offer__minorcta { padding-block: 0; flex: none; }

/* --- Foot ---------------------------------------------------------------- */

.bw-offer__foot {
  margin: var(--bw-space-5) 0 0;
  text-align: center;
  font-weight: var(--bw-fw-bold);
  font-size: var(--bw-text-micro);
  letter-spacing: var(--bw-ls-micro);
  text-transform: uppercase;
  opacity: .8;
}

/* --- Responsive ---------------------------------------------------------- */

@media screen and (max-width: 989px) {
  .bw-offer__head  { align-items: flex-start; }
  .bw-offer__aside { align-items: flex-start; width: 100%; max-width: none; }
  .bw-offer__next  { text-align: start; }
}

@media screen and (max-width: 749px) {
  .bw-offer__tiers { grid-template-columns: minmax(0, 1fr); }

  /* Same three children, rearranged: the packshot keeps the copy company on
     the top row, and the price and button take the full width underneath
     where the button has room to be pressed. */
  .bw-offer__card {
    grid-template-areas:
      "shot intro"
      "deal deal";
    gap: var(--bw-space-3);
  }

  .bw-offer__shot { align-items: flex-start; }

  /* The badge comes inside the card: overhanging a full-width card puts it
     under the previous card's shadow. It needs a row of its own — parked in
     the intro area it shared one cell with the tier name, and two grid items
     in the same cell stack, which is what printed the badge across
     "Essential". Only a badged card takes the extra row, so an unbadged one
     keeps its two-row grid instead of opening a gap for a badge that is
     never coming. */
  .bw-offer__card.has-badge {
    grid-template-areas:
      "badge badge"
      "shot  intro"
      "deal  deal";
  }

  .bw-offer__badge {
    position: static;
    grid-area: badge;
    justify-self: start;
    align-self: start;
    max-width: 100%;
    white-space: normal;
  }

  .bw-offer__minor {
    border-radius: var(--bw-radius-md);
    padding: var(--bw-space-4) var(--bw-space-4);
  }
  .bw-offer__minorprice { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bw-offer__card,
  .bw-offer__shot img { transition: none; }
  .bw-offer__card:hover,
  .bw-offer__card:focus-within { transform: none; }
  .bw-offer__card:hover .bw-offer__shot img { transform: none; }
}
/* END_SECTION:bw-offer */

/* START_SECTION:bw-origin (INDEX:18) */
/* A HAIRLINE, BECAUSE THIS SHARES THE HERO'S GROUND.

   Sharing the ground is what stops a seam, and it is also what made this read
   as the bottom of the hero rather than as a band of its own — a paragraph
   that had drifted below the buttons. One rule across the top is the whole
   difference between spillover and a place. */
.bw-origin {
  position: relative;
  /* background-COLOR, never the shorthand: the shorthand resets
     background-image, and that is the layer .bw-world and any gradient use. */
  background-color: var(--bw-bg);
  color: var(--bw-fg);
  border-top: var(--bw-border-w) solid color-mix(in srgb, currentColor 16%, transparent);
  border-bottom: var(--bw-border-w) solid color-mix(in srgb, currentColor 16%, transparent);
  /* Clipped on both axes. A cut-out that bled out of this band would land on
     the hero above or the marquee below, which are not its business — and
     overflow on the y axis would extend the page, which with vw-sized floats
     is the scrollbar feedback loop the hero documents at length. */
  overflow: clip;
  transition: background-color var(--bw-dur-theme) var(--bw-ease),
              color var(--bw-dur-theme) var(--bw-ease);
}

.bw-origin__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* CUT-OUTS ANYWHERE, AND A DIFFERENT KIND OF GUARANTEE.

   They were confined to the band's padding, which is empty at every width and
   so could not be reached into. Scattering them across the whole ground gives
   that up: at most widths the copy fills the middle of the band, and a float
   free to go anywhere will sometimes be behind a word. There is no coordinate
   that avoids that, because the band's height changes as the copy reflows.

   So the guarantee moves from geometry to tone. These sit at around 45% over
   the ground rather than at full strength, which is the difference between an
   object in front of the reader and a texture behind them. Cream on cocoa is
   about 9:1; the lightest of these cut-outs at this opacity lifts the local
   ground far enough to cost perhaps a third of that, which still clears AA for
   body text by a wide margin.

   The copy keeps its own layer above them regardless — see the z-index on
   .bw-origin__inner — so this is about legibility, not order.

   If they ever need to be full strength again, the honest way back is the
   padding strips this replaced, not a brighter float behind a sentence. */

.bw-origin__inner {
  position: relative;
  /* Above the field, so a cut-out passes behind the words rather than over
     them. */
  z-index: 1;
  max-width: var(--bw-measure, 1360px);
  margin-inline: auto;
  padding-block: var(--bwor-pad-y);
  padding-inline: var(--bwor-rail);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--bwor-split, 44%));
  column-gap: clamp(32px, 5vw, 96px);
  /* Tops, not bottoms. Baselining the two worked while the right column was a
     single note; with the whole story in it the body is the taller of the two
     and bottom alignment pushed the headline down the band. */
  align-items: start;
}

/* THE LEAD PINS WHILE THE STORY RUNS PAST IT.

   align-self: start is not a preference here, it is the mechanism: a grid item
   defaults to stretching to its track, and an item as tall as its own
   containing block has nowhere to stick to.

   The offset clears the sticky header, which publishes its own height to the
   document — so this stays correct when that height is changed in the editor
   rather than being guessed at here. */
.bw-origin__lead {
  align-self: start;
  position: sticky;
  top: calc(var(--bw-header-h, 0px) + var(--bw-space-5));
}

.bw-origin__eyebrow {
  margin: 0 0 var(--bw-space-3);
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bwor-eyebrow);
  letter-spacing: var(--bw-ls-eyebrow);
  line-height: 1.4;
  text-transform: uppercase;
}

.bw-origin__head {
  margin: 0;
  font-size: var(--bwor-head);
  line-height: var(--bwor-head-lh);
  letter-spacing: var(--bw-ls-display);
  text-transform: uppercase;
  /* Wide enough that the written breaks are the only ones, with balance left
     as the fallback for a line long enough to wrap anyway. */
  max-inline-size: 20ch;
  text-wrap: balance;
}

.bw-origin__body {
  margin: 0;
  max-inline-size: var(--bwor-measure);
  font-weight: var(--bw-fw-body);
  font-size: var(--bwor-body);
  line-height: var(--bw-lh-lede);
}

.bw-origin__body > :first-child { margin-top: 0; }
.bw-origin__body > :last-child  { margin-bottom: 0; }

/* Paragraphs, now that there are paragraphs. p + p so nothing is added above
   the first or below the last. */
.bw-origin__body p + p { margin-top: 1em; }

/* THE PIVOT GETS TO BE A LINE, NOT A STEP.

   One paragraph in this story turns it — "We looked everywhere. It didn't
   exist." — and it is written as a paragraph whose entire contents are bold.
   That shape is the signal, and it has to be, because richtext hands the
   merchant bold and italic and nothing else: a whole-paragraph bold is the
   only mark they can make from the editor that can mean "this one stops."
   Underline was the other candidate and is not available — Shopify strips <u>
   out of a richtext field, so a rule written for it would silently never fire.

   Air above and below plus a size the rest of the body does not have. Bold
   INSIDE a sentence is left alone and stays ordinary bold, which is what the
   last paragraph's opening clause wants.

   Both margins are declared rather than one, even though adjacent margins
   collapse: the following paragraph's own p + p is 1em, and without the second
   rule the air below this line would be the smaller of the two. */
.bw-origin__body p > strong:only-child {
  display: block;
  font-size: 1.24em;
  line-height: 1.24;
  text-wrap: balance;
}

.bw-origin__body p:has(> strong:only-child),
.bw-origin__body p:has(> strong:only-child) + p {
  margin-top: 1.6em;
}

/* No last-paragraph emphasis any more. The line that needed it moved out to
   the kicker, and leaving the rule would have bolded whatever paragraph
   happened to end up last for no reason at all. */

/* THE VERDICT STRIP.

   Full bleed on purpose: it is the one thing in the section that is not being
   explained to you, and running it to both edges is what stops it reading as
   another paragraph that happens to be bigger.

   The section's own vertical padding above it, so the editorial block has
   finished before this starts. */
/* THE STRIP WEARS THE BLEND.

   The band's own ground is pinned, and that was the right answer for a wall of
   copy — it does not flicker under a visitor trying the switcher. The strip is
   the opposite kind of thing: it is the moment the section asks for something,
   so it should be wearing whatever the visitor has chosen to be asked about.

   These read the palette on <html>, which the section's pinned --bw-bg/--bw-fg
   never touch, so they keep changing underneath a fixed band.

   NEUTRAL IS THE DEFAULT HERE, NOT MOVE. --bw-accent under the neutral and
   Daily System grounds is INK, and a black strip with a black button on it is
   nothing at all. Gold is the site's third colour, it is already what the
   Daily System wears everywhere else — the badge, the pour on the blends page
   — and ink on it is 9:1. So the fallback is written out rather than derived,
   and Move and Restore override it below.

   Ink type in all three. Move's own --bw-on-accent is a near-white against
   orange at 2.8:1, under the 3:1 large text needs; ink is 5.4:1 there, 5.6:1
   on cyan and 9:1 on gold. One rule, legible on every ground.

   The button is ink-dark on all three so it never dissolves into the strip,
   and the pour is the blend's OWN colour — orange, cyan, gold — not a warm
   constant. Written as --bwv-bg so it can only ever be the thing the strip is
   currently painted, which is what makes the pour read as the blend rising in
   the button rather than as a second decision about yellow. The dark pill is
   what keeps the two apart: the pour is orange inside black standing on
   orange, and the black is the whole reason that is legible.

   Ink stays the label colour under the pour: 4.6:1 on the orange, 5.6:1 on
   the cyan, 9:1 on the gold. */
.bw-origin__verdict {
  --bwv-bg:         var(--bw-gold);
  --bwv-fg:         var(--bw-ink);
  --bwv-btn:        var(--bw-ink);
  --bwv-btn-ink:    var(--bw-cream);
  --bwv-liquid:     var(--bwv-bg);
  --bwv-liquid-ink: var(--bw-ink);

  /* Positioned, or the cut-outs paint over it: the field is a positioned box at
     z-index 0, and a static element's background goes down before any of those. */
  position: relative;
  z-index: 1;
  background: var(--bwv-bg);
  color: var(--bwv-fg);
  padding-block: clamp(28px, 3.4vw, 52px);
  /* Repaints on the same clock as every other ground on the page, so a switch
     is one movement rather than the strip snapping ahead of the band. */
  transition: background-color var(--bw-dur-theme) var(--bw-ease),
              color var(--bw-dur-theme) var(--bw-ease);
}

/* THE PHOTOGRAPH, WHEN ONE BLEND HAS EARNED ONE.

   Opacity rather than display, and on the same clock as the colour: the flat
   ground stays painted underneath, so switching into and out of this blend is
   one cross-fade instead of a picture appearing on a blank strip.

   z-index 0 and not a negative one. This is the first child of a positioned
   element whose own background is the layer below; a negative value would put
   it behind that background and take it off the page entirely. */
.bw-origin__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--bw-dur-theme) var(--bw-ease);
}

.bw-origin__sky img {
  display: block;
  width: 100%;
  height: 100%;
  /* A wide photograph into a band a hundred and thirty pixels tall is a slice,
     not a crop, which is exactly what a blurred sky survives and a photograph
     with a subject in it would not. */
  object-fit: cover;
  object-position: center;
}

/* One even veil, strength set by the merchant. The hero needs a second
   directional pass because its copy sits on one side of a wide frame; this is
   a strip with a line across it, and a flat veil is the whole job. */
.bw-origin__sky::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bw-ink);
  opacity: var(--bwv-dim, .4);
}

/* Above the picture. Without this the strip's contents are static children
   painting under a positioned sibling. */
.bw-origin__verdict-in {
  position: relative;
  z-index: 1;
}

/* No :root prefix on purpose. The attribute is on <html> when the visitor
   switches, and on the section itself when the band is pinned to a blend in
   the editor — a plain descendant selector is true in both cases. */
[data-bw-blend="move"] .bw-origin__verdict {
  --bwv-bg: var(--bw-orange);
}

[data-bw-blend="restore"] .bw-origin__verdict {
  --bwv-bg:      var(--bw-cyan);
  /* The night, not flat ink: a navy button on a cyan strip is the same pairing
     the rest of Restore uses, and flat black beside cyan reads as a hole. */
  --bwv-btn:     var(--bw-night);
  --bwv-btn-ink: var(--bw-bone);
}

/* The fill runs to both edges; the words still line up with the copy above
   them, which is what keeps this reading as part of the band rather than as
   something that landed on top of it.

   The claim and the control on one line, pushed apart. The line is short
   enough on a wide screen to leave half the strip empty, and a button in that
   space is the difference between a statement and a statement you can act on.
   They wrap to two rows when there is no longer room for both. */
.bw-origin__verdict-in {
  max-width: var(--bw-measure, 1360px);
  margin-inline: auto;
  padding-inline: var(--bwor-rail);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 56px);
}

.bw-origin__kicker {
  margin: 0;
  /* Grows into the space the button does not want, and is allowed to wrap
     rather than to shove the button off the row. */
  flex: 1 1 16ch;
  font-size: var(--bwor-kicker);
  line-height: 1.02;
  letter-spacing: var(--bw-ls-display);
  text-transform: uppercase;
  text-wrap: balance;
}

/* Never squeezed: the label is the one thing in the strip that has to stay on
   one line, and a flex item's default min-width is its content anyway — this
   only stops it being chosen as the thing that gives.

   Its four colours come off the strip, so the button follows the blend without
   knowing which blend it is. bw-tokens.css only ever READS these four, so
   declaring them here conflicts with nothing. */
.bw-origin__cta {
  flex: 0 0 auto;
  --bw-btn-fill:   var(--bwv-btn);
  --bw-btn-ink:    var(--bwv-btn-ink);
  --bw-liquid:     var(--bwv-liquid);
  --bw-liquid-ink: var(--bwv-liquid-ink);
}

/* One column below the split, where there is no room for two and the headline
   would be shrunk to fit beside something. Nothing pins: with one column there
   is no taller neighbour to pin against, and a heading that detached from its
   own paragraph would be following nothing. */
@media screen and (max-width: 899px) {
  .bw-origin__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .bw-origin__lead {
    position: static;
    margin-bottom: var(--bw-space-5);
  }

  .bw-origin__head { max-inline-size: 18ch; }
}

/* On a phone the strip is one column, and a pill floating at the end of it
   reads as an afterthought. Full width is what the hero and the reserve sheet
   already do at this size, and it is the only target worth tapping. */
@media screen and (max-width: 749px) {
  .bw-origin__verdict-in {
    flex-direction: column;
    align-items: stretch;
    gap: var(--bw-space-4);
  }

  /* flex-basis is the MAIN axis, and the main axis is now vertical: the row
     rule's "flex: 1 1 16ch" was read as a 16ch-TALL line that then grew to
     fill, which put a hundred and fifty pixels of orange between the verdict
     and its button. In a column the line is exactly as tall as it is. */
  .bw-origin__kicker { flex: 0 0 auto; }

  .bw-origin__cta {
    justify-content: center;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bw-origin { transition: none; }
  .bw-origin__lead { position: static; }
}
/* END_SECTION:bw-origin */

/* START_SECTION:bw-press (INDEX:19) */
.bw-press {
  background: var(--bwl-bg);
  color: var(--bwl-fg);
  transition: background-color var(--bw-dur-theme) var(--bw-ease),
              color var(--bw-dur-theme) var(--bw-ease);
}

.bw-press.has-rule-top    { border-top: var(--bw-border-w) solid var(--bw-hairline); }
.bw-press.has-rule-bottom { border-bottom: var(--bw-border-w) solid var(--bw-hairline); }

.bw-press__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bwl-label-gap);
  max-width: var(--bwl-measure);
  margin-inline: auto;
  padding-inline: var(--bwl-rail);
  padding-top: var(--bwl-pad-top);
  padding-bottom: var(--bwl-pad-bottom);
}

/* Stacked puts the label on its own line above the marks. */
.bw-press.is-stacked .bw-press__inner { flex-direction: column; align-items: stretch; }

.bw-press__label {
  flex: none;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bwl-eyebrow);
  letter-spacing: var(--bw-ls-eyebrow);
  line-height: 1.5;
  text-transform: uppercase;
}

.bw-press__list {
  display: flex;
  align-items: center;
  justify-content: var(--bwl-justify);
  flex-wrap: wrap;
  column-gap: var(--bwl-gap);
  row-gap: var(--bwl-row-gap);
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: var(--bwl-opacity);
}

.bw-press__item { display: flex; }

.bw-press__mark {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  transition: opacity var(--bw-dur-hover) var(--bw-ease),
              filter var(--bw-dur-hover) var(--bw-ease);
}

a.bw-press__mark:hover { opacity: .6; }

.bw-press__word {
  font-size: calc(var(--bwl-size) * var(--bwl-word-scale, 1));
  line-height: 1;
  white-space: nowrap;
}

.bw-press__logo {
  display: block;
  width: auto;
  height: calc(var(--bwl-logo-h) * var(--bwl-logo-scale, 1));
  object-fit: contain;
}

/* Desaturating keeps a row of mismatched brand colours from fighting the
   palette. Colour returns on hover for a linked mark. */
.bw-press__list.is-desaturated .bw-press__logo { filter: grayscale(1); }
.bw-press__list.is-desaturated a.bw-press__mark:hover .bw-press__logo { filter: grayscale(0); }

/* Editor-only. A gated strip is not rendered at all on the live storefront. */
.bw-press.is-gated .bw-press__inner { outline: 2px dashed var(--bw-accent); outline-offset: -10px; }

.bw-press__flag {
  flex: 1 0 100%;
  margin: 4px 0 0;
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-bold);
  font-size: 10px;
  letter-spacing: .1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--bw-accent);
}

@media (prefers-reduced-motion: reduce) {
  .bw-press__mark { transition: none; }
}
/* END_SECTION:bw-press */

/* START_SECTION:bw-proof-bar (INDEX:20) */
.bw-proof {
  position: relative;
  background: var(--bws-bg);
  color: var(--bws-fg);
  transition: background-color var(--bw-dur-theme) var(--bw-ease),
              color var(--bw-dur-theme) var(--bw-ease);
}

.bw-proof.has-rule-top    { border-top: var(--bw-border-w) solid var(--bw-hairline); }
.bw-proof.has-rule-bottom { border-bottom: var(--bw-border-w) solid var(--bw-hairline); }

.bw-proof__inner {
  display: grid;
  grid-template-columns: repeat(var(--bws-cols), minmax(0, 1fr));
  column-gap: var(--bws-gap);
  row-gap: var(--bws-row-gap);
  max-width: var(--bws-measure);
  margin-inline: auto;
  padding-inline: var(--bws-rail);
  padding-block: var(--bws-pad-y);
}

.bw-stat {
  min-width: 0;
  text-align: var(--bws-align);
  padding-inline: var(--bws-cell-pad);
  border-inline-start: var(--bw-border-w) solid var(--bw-hairline);
}

.bw-stat__value {
  font-size: var(--bws-value);
  line-height: var(--bws-value-lh);
  color: var(--bws-value-color);
  transition: color var(--bw-dur-theme) var(--bw-ease);
  /* Tabular figures keep the numerals optically aligned across cells even
     when one reads "4.85" and its neighbour reads "580". */
  font-variant-numeric: tabular-nums;
}

.bw-stat__stars {
  display: flex;
  gap: 2px;
  margin-top: 6px;
  color: var(--bws-value-color);
  justify-content: var(--bws-align);
  transition: color var(--bw-dur-theme) var(--bw-ease);
}

.bw-stat__stars svg { width: var(--bws-star); height: var(--bws-star); }

.bw-stat__label {
  margin-top: 8px;
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bws-label);
  letter-spacing: var(--bws-label-ls);
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--bws-muted);
}

/* Editor-only affordance. Never reaches the live storefront, because a gated
   block is not rendered there at all. */
.bw-stat.is-gated { outline: 2px dashed var(--bw-accent); outline-offset: 6px; }

/* Theme editor only — an empty stat never reaches the storefront. Dotted
   rather than dashed so it is not mistaken for the claims gate, which is a
   different problem with a different fix. */
.bw-stat.is-empty { outline: 2px dotted var(--bw-muted); outline-offset: 6px; opacity: .6; }

.bw-stat__flag {
  margin: 10px 0 0;
  font-family: var(--bw-font-sans);
  font-weight: var(--bw-fw-bold);
  font-size: 10px;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--bw-accent);
}

@media screen and (max-width: 749px) {
  .bw-stat__label { line-height: 1.3; }
}
/* END_SECTION:bw-proof-bar */

/* START_SECTION:bw-reserve (INDEX:21) */
/* ==========================================================================
   BW · RESERVE

   A signpost at the foot of the page: one photograph, one line, one button.
   Deliberately the plainest band on the page — everything it could say about
   packs and prices is said on the shop page, by the section that can take
   the order.
   ========================================================================== */
.bw-res.has-rule-top    { border-top: var(--bw-border-w) solid var(--bw-hairline); }
.bw-res.has-rule-bottom { border-bottom: var(--bw-border-w) solid var(--bw-hairline); }

.bw-res__panel {
  position: relative;
  min-height: var(--bwr-h);
  border-radius: var(--bwr-radius);
  overflow: hidden;
  /* A new stacking context, so the overlays cannot escape the panel and the
     z-order inside is independent of whatever surrounds it. */
  isolation: isolate;
}

.bw-res__media { display: block; }

.bw-res__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--bwr-focus, 50% 50%);
}

/* Tint: multiplies the blend colour into the photograph so it reads as part
   of the palette rather than a picture dropped on top of it. */
.bw-res__tint {
  position: absolute;
  inset: 0;
  background: var(--bwr-tint);
  mix-blend-mode: multiply;
  opacity: var(--bwr-strength);
  transition: background-color var(--bw-dur-theme) var(--bw-ease);
}

/* Scrim: flat ink, no blending. This is what actually guarantees the type is
   legible — a multiply tint's darkness depends on the photograph beneath it,
   so it cannot be relied on for contrast. */
.bw-res__scrim {
  position: absolute;
  inset: 0;
  background: var(--bw-ink);
  opacity: var(--bwr-scrim);
}

.bw-res__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: var(--bwr-align, flex-start);
  justify-content: center;
  text-align: var(--bwr-align-text, start);
  gap: clamp(14px, 1.6vw, 22px);
  min-height: var(--bwr-h);
  max-width: var(--bwr-measure);
  margin-inline: auto;
  padding: clamp(40px, 5vw, 80px) var(--bwr-rail);
  color: var(--bwr-ink);
}

.bw-res__eyebrow {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: var(--bw-fw-eyebrow);
  font-size: var(--bwr-eyebrow);
  letter-spacing: var(--bw-ls-eyebrow);
  line-height: 1.5;
  text-transform: uppercase;
}

.bw-res__head {
  margin: 0;
  font-size: var(--bwr-head);
  line-height: var(--bwr-head-lh);
  text-transform: uppercase;
}

.bw-res__head p { margin: 0; }

/* Measured, because this is the one thing on the band read as a sentence
   rather than scanned — and because a line of body copy running the full
   width of a photograph is the fastest way to make a band look unset. */
.bw-res__lede {
  margin: 0;
  max-width: 46ch;
  font-size: var(--bwr-lede);
  line-height: var(--bw-lh-body);
  opacity: .9;
}

.bw-res__lede p { margin: 0; }

.bw-res__cta { margin-top: clamp(4px, 1vw, 12px); }

@media screen and (max-width: 749px) {
  .bw-res__lede { max-width: none; }
}
/* END_SECTION:bw-reserve */

/* START_SECTION:header-announcements (INDEX:33) */
.announcement-bar {
    border-block-end: var(--border-bottom-width) solid var(--color-border);
  }

  .announcement-bar__slider {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;

    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .announcement-bar__slides {
    display: grid;
    grid: [stack] auto / [stack] auto;
    width: calc(100% - var(--button-size) * 2);
    max-width: 680px;
    margin-inline: auto;
  }

  .announcement-bar__slides > * {
    grid-area: stack;
  }

  .announcement-bar__slide {
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    content-visibility: visible;

    &[aria-hidden='true'] {
      opacity: 0;
      visibility: hidden;
    }
  }

  .announcement-bar__slider slideshow-arrows {
    padding: 0;
    mix-blend-mode: normal;
  }

  .announcement-bar__slider slideshow-arrows .slideshow-control {
    color: var(--color-foreground);
  }

  .announcement-bar__slider .slideshow-control {
    display: flex;
    padding: 0;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
    opacity: 1;
    animation: none;

    @media screen and (min-width: 750px) {
      --slideshow-control-offset: calc((var(--button-size) - var(--icon-size-xs)) / 2);

      .section--page-width &.slideshow-control--previous {
        transform: translateX(var(--slideshow-control-offset));
      }
    }
  }

  .announcement-bar__slider .slideshow-control .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .announcement-bar__slide {
    place-content: center;
  }

  .announcement-bar__text:first-child {
    margin: 0;
  }

  .announcement-bar__link {
    position: absolute;
    inset: 0;
  }
/* END_SECTION:header-announcements */

/* START_SECTION:header (INDEX:34) */
body {
    --header-height: 60px;
    --header-group-height: var(--header-height);
    --transparent-header-offset-boolean: 0; /* stylelint-disable-line declaration-property-value-disallowed-list */
  }

  .header {
    /* Set header paddings based on height setting */
    --header-padding: var(--padding-sm);
    --font-paragraph--line-height: 1;
    --header-content-transition-timing: 0s;

    display: block;
    contain: layout style;
    background: transparent;

    a,
    .button,
    .button-secondary,
    .header-actions__action {
      /* reset style from base.css */
      transition: color var(--header-content-transition-timing), border-color var(--header-content-transition-timing);
    }
  }

  #header-component :is(.header-menu, .dropdown-localization) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] :is(.header-menu, .dropdown-localization) {
      display: flex;
    }
  }

  #header-component[data-menu-style='drawer'] .header__column {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] .header__navigation-bar-row {
      display: none;
    }
  }

  .header[transparent] {
    --language-button-background-color: transparent;
    --language-button-border-color: transparent;
    --header-content-transition-timing: calc(var(--submenu-animation-speed) - var(--animation-speed-fast))
      var(--animation-speed-fast) var(--ease-out-cubic);

    --closed-underlay-height: 0px;

    /* used to display the appropriate logo based on transparency state */
    --header-logo-display: none;
    --header-logo-inverse-display: block;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    z-index: var(--layer-overlay);

    &[transparent='not-sticky'][data-sticky-state='active'],
    &:has(.menu-list__list-item > .menu-list__link:not([aria-haspopup]):hover) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --closed-underlay-height: 100%;
    }

    /** For transparent header, apply transparent text color to rows when menu is not hovered */
    &:not([data-sticky-state='active']):not(:has(.menu-list__link:hover)):not(:has(header-menu[aria-expanded='true']))
      .header__row {
      --color-foreground: var(--color-transparent-text);
      --color-foreground-rgb: var(--color-transparent-text-rgb);
      --color-border: var(--color-transparent-text);
      --color-border-rgb: var(--color-transparent-text-rgb);
      --color-primary-button-background: var(--color-transparent-text);
      --color-primary-button-text: var(--color-transparent-text-contrast);
    }

    /* Swap the cart bubble in transparent state only when using the default
       style. Custom bubble colors apply unchanged across header states. */
    &[data-bubble-style='default']:not([data-sticky-state='active']):not(:has(.menu-list__link:hover)):not(
        :has(header-menu[aria-expanded='true'])
      )
      .header__row {
      --cart-bubble-background: var(--color-transparent-text, var(--cart-bubble-background-fallback));
      --cart-bubble-text: var(--color-transparent-text-contrast, var(--cart-bubble-text-fallback));
    }

    /* Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link:hover),
    &:has(header-menu[aria-expanded='true']) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --header-content-transition-timing: var(--submenu-animation-speed) var(--ease-out-cubic);
    }
  }

  /* When top row has transparent background, make it inherit colors from header component */
  [data-transparent-background='top']:hover .header__row--top,
  [data-transparent-background='top']:focus-within .header__row--top,
  [data-transparent-background='both']:hover .header__row--top,
  [data-transparent-background='both']:focus-within .header__row--top {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  /* When bottom row has transparent background, make it inherit colors from header component */
  [data-transparent-background='bottom']:hover .header__row--bottom,
  [data-transparent-background='bottom']:focus-within .header__row--bottom,
  [data-transparent-background='both']:hover .header__row--bottom,
  [data-transparent-background='both']:focus-within .header__row--bottom {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  .header-section {
    position: relative;
    z-index: var(--layer-menu-drawer);
  }

  /* need default values for non-flash transitions on first overflow menu open */
  #header-component {
    --submenu-height: 0px;
    --full-open-header-height: 0px;
  }

  #header-group:has(#header-component[sticky]) {
    display: contents;
  }

  .header-section:has(> #header-component[sticky='always']),
  .header-section:has(> #header-component[sticky='scroll-up'][data-sticky-state='active']) {
    position: sticky;

    /* Use -1 instead of 0 so intersection observer can track sticky state */
    top: -1px;
    z-index: var(--layer-menu-drawer);
  }

  .header[data-sticky-state] {
    transition: opacity var(--animation-speed) var(--animation-easing);
    opacity: 1;
  }

  .header[data-sticky-state='active'] {
    view-transition-name: sticky-header;
  }

  :active-view-transition-type(empty-cart-drawer) {
    .header[data-sticky-state='active'] {
      view-transition-name: none;
    }
  }

  .header[data-sticky-state='idle'] {
    opacity: 0;
  }

  /* ================================
     * Underlays
     * ================================ */
  .header__underlay {
    position: absolute;
    inset: 0;
  }

  .header__underlay-closed {
    height: var(--closed-underlay-height, 100%);
    z-index: var(--layer-lowest);
    background: linear-gradient(
      var(--color-background-top-row) 0 var(--top-row-height),
      var(--color-background-bottom-row) var(--top-row-height) var(--header-height)
    );
    transition: height var(--animation-speed-slow) var(--ease-out-cubic);
  }

  .header__underlay-open {
    height: var(--full-open-header-height);
    background: linear-gradient(
      var(--color-background-top-row) 0 var(--top-row-height),
      var(--color-background-bottom-row) var(--top-row-height) var(--header-height),
      var(--color-submenu) var(--header-height) 100%
    );
    /* header-height is updated via js, the transition works automagically */
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  .header__underlay-open::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--shadow-popover);
    clip-path: inset(var(--header-height) 0 -100px 0); /* stylelint-disable-line */
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  /* When top row has transparent background, swap underlay to merchant's chosen color at full opacity */
  [data-transparent-background='top']:hover,
  [data-transparent-background='top']:focus-within,
  [data-transparent-background='both']:hover,
  [data-transparent-background='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-background-top-row: var(--color-background);
    }
  }

  /* When bottom row has transparent background, swap underlay to merchant's chosen color at full opacity */
  [data-transparent-background='bottom']:hover,
  [data-transparent-background='bottom']:focus-within,
  [data-transparent-background='both']:hover,
  [data-transparent-background='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-background-bottom-row: var(--color-background);
    }
  }

  [data-submenu-overlap-bottom-row] {
    .header__underlay-open {
      background: linear-gradient(
        var(--color-background-top-row) 0 var(--top-row-height),
        var(--color-submenu) var(--top-row-height) 100%
      );
    }

    .header__row--bottom {
      z-index: var(--layer-lowest);
    }
  }

  /* End Underlays ================ */

  .header__row {
    /* The account component uses a different background color, but we need to override it to inherit the color of the header row */
    --color-account-icon: var(--color-foreground);

    position: relative;

    /* Overwrite color from section settings, background is controlled by the underlays */
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;

    &:has(.mega-menu__list:hover),
    &:has(.menu-list__submenu:not([inert])) {
      /* Only elevate the row when the submenu is open to avoid overlapping other elevated content */
      z-index: var(--layer-heightened);
    }
  }

  .header__row--top:not(.divider--page-width),
  .header__row--top.divider--page-width .header__columns,
  .header__row--bottom {
    border-bottom: var(--border-bottom-width) solid var(--border-bottom-color, var(--color-border));
  }

  @media screen and (max-width: 749px) {
    .header__row--top:not(.divider--page-width),
    .header__row--top.divider--page-width .header__columns {
      border-bottom-width: var(--border-bottom-width-mobile);
      border-bottom-color: var(--border-bottom-color-mobile);
    }
  }

  #header-component[data-menu-style='drawer'] .header__row--top:not(.divider--page-width),
  #header-component[data-menu-style='drawer'] .header__row--top.divider--page-width .header__columns {
    border-bottom-width: var(--border-bottom-width-mobile);
    border-bottom-color: var(--border-bottom-color-mobile);
  }

  .header__row.divider--page-width:not(.section--page-width) .header__columns {
    @media screen and (min-width: 750px) {
      padding-inline-start: 0;
      padding-inline-end: 0;
      margin-inline-start: var(--page-margin);
      margin-inline-end: var(--page-margin);
    }
  }

  .header__column {
    display: flex;
    align-items: center;

    /* on mobile, header__column nodes are ignored to create a new grid-template-area based on all visible content */
    @media screen and (max-width: 749px) {
      display: contents;
    }
  }

  .header__column--left,
  .header__column--center {
    gap: var(--gap-xl);
    grid-area: left;
  }

  .header__column--center {
    justify-content: center;
    grid-area: center;

    header-menu:only-child .overflow-menu::part(list) {
      justify-content: center;
    }
  }

  .header__column--right {
    gap: var(--gap-xl);
    justify-content: flex-end;
    grid-area: right;

    .overflow-menu::part(list) {
      justify-content: flex-end;
    }
  }

  .header__columns {
    /* Three column layout */
    --header-left: 1fr;
    --header-center: auto;
    --header-right: 1fr;
    --header-template-columns: var(--header-left) var(--header-center) var(--header-right);

    /* Mobile layout */
    --header-mobile-bookend: 44px;

    display: grid;
    grid-template-areas: 'left center right';
    grid-gap: var(--gap-xl);
    grid-template-columns: var(--header-template-columns);

    /* If menu is in center column */
    &:has(.header__column--center header-menu) {
      --header-center: auto;
      --header-left: minmax(max-content, 1fr);
      --header-right: minmax(max-content, 1fr);
    }

    /* If there is no center column, make the column the menu is in grow eagerly */
    &:where(:not(:has(.header__column--center))) {
      @media screen and (min-width: 750px) {
        --header-template-columns: var(--header-left) var(--header-right);

        grid-template-areas: 'left right';
      }

      /* If the header-menu is in the right column */
      &:has(.header__column--right header-menu) {
        --header-right: auto;
        --header-left: minmax(max-content, 1fr);
      }

      /* If the header-menu is in the left column */
      &:has(.header__column--left header-menu) {
        --header-left: auto;
        --header-right: minmax(max-content, 1fr);
      }
    }

    @media screen and (max-width: 749px) {
      --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
        var(--header-mobile-bookend) var(--header-mobile-bookend);

      grid-template-areas: 'leftA leftB center rightA rightB';
      grid-column: span 3;
      column-gap: 0;
      align-items: center;
      padding-block: 0;
      padding-inline: 0 var(--padding-3xs);

      .header-logo {
        grid-area: center;
      }

      &:not(:has(header-actions)) .search-action {
        grid-area: leftB;
      }

      &:not(:has(shopify-account)) .search-action {
        grid-area: rightA;
      }

      .search-action {
        grid-area: leftB;
      }

      header-actions {
        grid-area: rightB;
      }
    }
  }

  /* not ideal but we need to duplicate these styles for when touch comes into play
    We could avoid the duplication using js to set the data-menu-style attribute on small screens instead of using @media queries */
  #header-component[data-menu-style='drawer'] .header__columns {
    --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
      var(--header-mobile-bookend) var(--header-mobile-bookend);

    grid-template-areas: 'leftA leftB center rightA rightB';
    grid-column: span 3;
    column-gap: 0;
    align-items: center;
    padding-block: 0;
    padding-inline: 0 var(--padding-3xs);

    .header-logo {
      grid-area: center;
    }

    &:not(:has(header-actions)) .search-action {
      grid-area: leftB;
    }

    &:not(:has(shopify-account)) .search-action {
      grid-area: rightA;
    }

    .search-action {
      grid-area: leftB;
    }

    header-actions {
      grid-area: rightB;
    }
  }

  /* Single column layout if there are no columns within */
  .header__columns:not(:has(.header__column)) {
    grid-template-columns: 1fr;
  }

  /* Check for hover support to avoid unnecessary expensive recalculations when tapping on mobile */
  @media (hover: hover) {
    /* Column-specific dimming effect when any interactive element is hovered
        Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    .header__column:has(header-menu:hover),
    .header__column:has(.header-actions__action:hover),
    .header__column:has(.header__icon--menu:hover) {
      header-menu:not(:hover),
      .header-actions__action:not(:hover),
      .header__icon--menu:not(:hover) {
        opacity: var(--opacity-subdued-text);
        transition: opacity var(--animation-speed) var(--animation-easing);
      }
    }
  }

  /* Ensure smooth transitions for all interactive elements */
  header-menu,
  .header-actions__action,
  .header__icon--menu {
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  /* Header action button styles */
  .header-actions__action {
    --button-color: var(--color-foreground);
    color: var(--button-color);
    cursor: pointer;
    display: flex;
    justify-content: center;

    &:hover {
      --button-color: var(--color-foreground);
    }
  }

  .header-actions__action:not(.account-button) .svg-wrapper {
    height: var(--button-size);
    width: var(--button-size);
  }

  .header-actions__action:not(.account-button) svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .header:has(#Details-menu-drawer-container[open]) {
    contain: style;
  }

  .header.header--compact {
    --header-padding: var(--padding-2xs);
  }

  .header__columns {
    --padding-block-start: var(--header-padding);
    --padding-block-end: var(--header-padding);
  }

  .header:not(.header--compact) .header__row--bottom {
    --header-padding: var(--padding-xs);
  }

  .header--collapse-row-paddings {
    .header__row--top .header__columns {
      --padding-block-end: 0px;
    }

    .header__row--bottom .header__columns {
      --padding-block-start: 0px;
    }
  }

  /* Transparent header layout. Keep this in sync with snippets/section.liquid's first-section height compensation. */
  body:has(#header-component[transparent]) .content-for-layout > .shopify-section:first-child {
    margin-top: calc(var(--header-group-height) * -1);
  }

  body:has(#header-component[transparent]) #header-group > .header-section {
    z-index: var(--layer-menu-drawer);
  }

  /* All other header group content should be beneath the floating header,
  but above the rest of the page content */
  body:has(#header-component[transparent]) #header-group > *:not(.header-section) {
    z-index: calc(var(--layer-menu-drawer) - 1);
  }

  /* When the header is transparent, add a margin to a potential header-section below it */
  .header-section:has(.header[transparent]) + .shopify-section {
    margin-top: var(--header-height);
  }

  /* Optimize layout performance for hidden menus */
  .header-menu .menu-list__submenu {
    content-visibility: auto;
    contain-intrinsic-size: 0px 500px;
  }

  /* Force visibility when open/animating and in overflow submenu to prevent layout issues */
  .header-menu details[open] .menu-list__submenu,
  .header-menu .menu-list__submenu[data-active],
  .header-menu .menu-list__list-item[slot='overflow'] .menu-list__submenu {
    content-visibility: visible;
  }

  /* Dropdown Localization Styles */
  .dropdown-localization__button {
    display: flex;
    position: relative;
    align-items: center;
    gap: 4px;
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
    font-weight: var(--menu-top-level-font-weight);
    padding-inline: var(--padding-2xs);
    margin-inline: calc(-1 * var(--padding-2xs));
  }

  .dropdown-localization__button .svg-wrapper.icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    right: var(--margin-xs);
    top: calc(50% - var(--padding-2xs));
    flex-shrink: 0;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .dropdown-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .dropdown-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .dropdown-localization__button[aria-expanded='true'] .icon-caret svg {
    transform: rotate(180deg);
  }

  .dropdown-localization__button,
  .dropdown-localization__button:hover {
    box-shadow: none;
    background-color: transparent;
    border-color: transparent;
    border-radius: 0;
  }

  dropdown-localization-component .localization-form__list {
    max-height: 20.5rem;
  }

  .localization-wrapper {
    position: fixed;
    z-index: var(--layer-raised);
    border-radius: var(--style-border-radius-popover);
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  .localization-wrapper:not([hidden]) {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .localization-wrapper:not([hidden]) {
      translate: 0 20px;
      opacity: 0;
    }
  }

  dropdown-localization-component {
    position: relative;
    background-color: transparent;
  }

  dropdown-localization-component .country-filter {
    position: relative;
    padding: 8px;
  }

  dropdown-localization-component .country-filter__input {
    border: none;
  }

  dropdown-localization-component .localization-form__list-item {
    margin-inline: 8px;
  }

  dropdown-localization-component .localization-wrapper {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    max-height: 27.5rem;
    position: absolute;
    top: calc(100% + 10px);
    z-index: calc(var(--layer-header-menu) + 1);
  }

  dropdown-localization-component .localization-wrapper.right-bound {
    right: 0;
    left: unset;
  }

  dropdown-localization-component .localization-wrapper.left-bound {
    left: -8px;
    right: unset;
  }

  /* Additional specificity due to dropdown-localization-component getting a low score */
  dropdown-localization-component .language-selector.language-selector {
    padding: 10px 8px 10px 16px;
  }

  dropdown-localization-component .localization-form__currency {
    width: max-content;
    opacity: 0;
    visibility: hidden;
    transition: none;
  }

  dropdown-localization-component .localization-form__select:hover {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
  }

  dropdown-localization-component
    :is(
      .localization-form__list-item:hover,
      .localization-form__list-item[aria-selected='true'],
      .localization-form__list-item[aria-current='true']
    )
    .localization-form__currency {
    opacity: 1;
    color: var(--color-foreground-muted);
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
    visibility: visible;
  }

  .dropdown-localization .language-selector:where(:not(.language-selector--top-shadow)) {
    font-weight: var(--menu-top-level-font-weight);
  }

  .dropdown-localization:not(dropdown-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:35) */
.hero-wrapper {
    --hero-height-offset: 0px;
  }

  /* Being extra specific in the selector for performance reasons */
  body:has(#header-group > .header-section > #header-component) .hero-wrapper:first-child {
    --hero-height-offset: var(--header-group-height, 0);
  }

  .hero {
    position: relative;
    min-height: calc(var(--hero-min-height) - var(--hero-height-offset));
  }

  .hero[data-shopify-visual-preview] {
    --hero-min-height: 600px;

    min-height: 600px;
  }

  .hero__container {
    position: relative;
    overflow: hidden;
    border: var(--hero-border-width) var(--hero-border-style) rgb(var(--color-border-rgb) / var(--hero-border-opacity));
    min-height: inherit;
    align-items: var(--vertical-alignment-mobile);
    justify-content: var(--horizontal-alignment);
    z-index: var(--layer-base);

    @media screen and (min-width: 750px) {
      align-items: var(--vertical-alignment);
    }
  }

  .hero__content-wrapper.page-width {
    grid-column: 2 / 3;
  }

  .hero__content-wrapper {
    position: relative;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hero__content-wrapper .group-block-content {
    position: relative;
  }

  .hero__media-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(var(--hero-media-count, 1), 1fr);
  }

  .hero--auto .hero__media {
    aspect-ratio: var(--hero-media-aspect-ratio);
  }

  .hero--no-blocks-auto-height {
    .hero__media {
      width: 100%;
      aspect-ratio: auto;
    }

    .hero__media-grid {
      /* When there are no blocks and the height is auto, allow the image to appear. */
      position: relative;
    }
  }

  .hero__media-wrapper {
    overflow: hidden;
    position: relative;
  }

  .hero__media {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
    z-index: var(--layer-base);
  }

  /* Mobile/Desktop media visibility */

  .hero__media-wrapper--mobile {
    display: none;
  }

  .hero__media-wrapper--desktop {
    display: block;
  }

  @media screen and (max-width: 749px) {
    .hero__media-wrapper--desktop {
      display: none;
    }

    .hero__media-wrapper--mobile {
      display: block;
    }

    .hero__media-grid {
      grid-template-columns: repeat(var(--hero-media-count-mobile, 1), 1fr);
    }

    /* Mobile stacking */
    .hero--stack-mobile .hero__media-grid {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(var(--hero-media-count-mobile, 1), calc(100% / var(--hero-media-count-mobile, 1)));
    }
  }

  .hero__link {
    position: absolute;
    inset: 0;
    grid-column: 1 / -1;
  }

  .hero__media-grid,
  .hero__content-wrapper {
    pointer-events: none;

    :is(a, button, input, textarea, select, details, summary) {
      pointer-events: auto;
    }
  }

  .hero__content-wrapper--design-mode * {
    pointer-events: auto;
  }

  .hero[data-blur-shadow='true'] {
    --blurred-reflection-filter-saturate: saturate(1.5);
    --blurred-reflection-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
    --blurred-reflection-box-shadow: rgb(0 0 0 / 5%) 0 0 1rem;
    --blurred-reflection-filter-blur: blur(20px);
    --blurred-reflection-scale: scale(2, 1.25);
    --blurred-reflection-padding-block-end: 60px;
  }

  .hero[data-blur-shadow='true'] .hero__container::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--blurred-reflection-box-shadow);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
  }

  .hero__blurred-image {
    position: absolute;
    inset: 0;
    z-index: -1;
    mask-image: var(--blurred-reflection-mask-image);
    filter: var(--blurred-reflection-filter-saturate);
    pointer-events: none;
    transform: translateY(50%);
    overflow: hidden;
  }

  .hero__blurred-image--desktop {
    display: none;

    @media screen and (min-width: 750px) {
      display: block;
    }
  }

  .hero__blurred-image--mobile {
    display: block;

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .hero__blurred-image img,
  .hero__blurred-image svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: var(--blurred-reflection-filter-blur);
    opacity: var(--blur-opacity);
    transform: var(--blurred-reflection-scale);
    padding-block-end: var(--blurred-reflection-padding-block-end);

    &:not(:only-child) {
      width: 50%;

      &:last-child {
        right: 0;
        left: auto;
      }
    }
  }
/* END_SECTION:hero */

/* START_SECTION:main-blog-post (INDEX:39) */
.blog-post-comments-container {
    width: 100%;
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }

  .blog-post-comments {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xl);
  }

  .blog-post-comment__author {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    margin-top: var(--margin-md);
    font-size: var(--font-size--body-sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-comments-pagination {
    display: flex;
    justify-content: center;
    gap: var(--gap-2xs);
  }

  .blog-post-comments-pagination,
  .blog-post-comments-pagination a {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a {
    display: block;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a:hover {
    border-bottom: 1px solid var(--color-foreground);
  }
/* END_SECTION:main-blog-post */

/* START_SECTION:main-blog (INDEX:40) */
/**
   * Blog posts page layout
   */
  .blog-posts {
    --page-content-width: var(--narrow-page-width);
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    --columns-gap: 36px;
    --rows-gap: 36px;
  }

  .blog-posts-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    width: 100%;
    column-gap: var(--columns-gap);
    row-gap: var(--rows-gap);
  }

  /**
   * Blog post item grid positioning and scaling.
   * Layout is calculated in Liquid based on total article count.
   * Mobile overrides are applied per-item in inline styles for proper specificity.
   */
  .blog-post-item {
    grid-column: span var(--col-span);
    background-color: var(--color-background);
  }

  /**
   * When there's no image, the blog post item has a border.
   */
  .blog-post-item {
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-20));
    padding: 0 1rem 1rem;
  }

  .blog-post-item:has(.blog-post-card__image-container) {
    border: none;
    padding: 0;
  }
/* END_SECTION:main-blog */

/* START_SECTION:main-cart (INDEX:41) */
.cart-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--padding-5xl);
  }

  .cart-page--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .cart-page--empty .cart-page__title,
  .cart-page--empty .cart-page__more-blocks {
    margin-top: var(--margin-6xl);
  }

  .cart-page__more-blocks {
    width: 100%;
  }

  .cart-page--empty .cart-title {
    text-align: center;
  }

  .cart-page__main {
    grid-column: 1;
  }

  .cart-page__summary {
    padding-top: var(--padding-xl);
  }

  .cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }

  @media screen and (min-width: 750px) {
    .cart-page {
      grid-template-columns: 1fr min(50vw, var(--sidebar-width));
      grid-template-rows: min-content min-content 1fr;
    }

    .cart-page__summary {
      display: grid;
      height: 100%;
      grid-column: 2;
      grid-row: 1 / -1;
      align-self: stretch;
      grid-template-rows: subgrid;
      padding-top: 0;

      /* needed to support blurred effect from hero section */
      position: relative;
    }

    .section--page-width .cart-page:has(.cart-summary--extend) {
      grid-column: 2 / 4;
      grid-template-columns: 1fr minmax(
          var(--sidebar-width),
          calc((100vw - var(--page-width)) / 2 + var(--sidebar-width))
        );
    }
  }

  @media screen and (min-width: 1400px) {
    .cart-page {
      grid-template-columns: 1fr var(--sidebar-width);
    }
  }
/* END_SECTION:main-cart */

/* START_SECTION:password (INDEX:48) */
.section-password {
    flex-grow: 1;
    display: flex;
  }

  .password-content {
    text-align: center;
  }
/* END_SECTION:password */

/* START_SECTION:product-information (INDEX:52) */
.sticky-add-to-cart__bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    z-index: calc(var(--layer-sticky) - 1); /* Below sticky header */
    display: block;
    width: 600px;
    border-radius: calc(
      var(--style-border-radius-buttons-primary) + min(var(--padding-sm), var(--style-border-radius-buttons-primary))
    );
    box-shadow: var(--shadow-popover);
    padding: var(--padding-sm);
    /* Layout styling */
    display: flex;
    align-items: center;
    gap: var(--gap-md);

    @starting-style {
      opacity: 0;
      transform: translateX(-50%) translateY(calc(100% + 40px));
    }

    &::before {
      --border: 2px;
      content: '';
      position: absolute;
      inset: calc(var(--border) * -1);
      background: linear-gradient(var(--color-background) 0 100%), linear-gradient(hsl(0 0% 0% / 0.15) 0 100%);
      background-clip: content-box, border-box;
      border: var(--border) solid #0000;
      border-radius: inherit;
      z-index: -1;
      backdrop-filter: blur(20px) saturate(180%) brightness(1.5);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .sticky-add-to-cart__bar {
      transition-property: transform, opacity, display;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
      transition-behavior: allow-discrete;
    }
  }

  .sticky-add-to-cart__bar[data-stuck='true'] {
    transform: translateX(-50%) translateY(0%);
    opacity: 1;
  }

  sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__bar {
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    display: none;
  }

  .sticky-add-to-cart__info[data-has-image='false'] {
    padding-left: var(--padding-lg);
  }

  .sticky-add-to-cart__image {
    flex-shrink: 0;
    aspect-ratio: 1;
    height: var(--height-buy-buttons);
    overflow: hidden;
    border-radius: var(--style-border-radius-buttons-primary);
    background: var(--color-background-secondary);
  }

  .sticky-add-to-cart__image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sticky-add-to-cart__info {
    flex: 1;
    min-width: 0; /* Allow text truncation */
  }

  .sticky-add-to-cart__title {
    font-size: var(--font-paragraph-medium--size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-paragraph--line-height);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sticky-add-to-cart__variant {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    font-size: var(--font-paragraph-small--size);
    margin-top: var(--margin-3xs);
  }

  .sticky-add-to-cart__price {
    font-weight: var(--font-weight-semibold);
  }

  .sticky-add-to-cart__button {
    height: var(--height-buy-buttons);
    position: relative;
  }

  /* Mobile adjustments */
  @media screen and (max-width: 749px) {
    .sticky-add-to-cart__bar {
      bottom: 0;
      width: 100%;
      max-width: none;
      border-radius: 0;

      &::before {
        --border: 1px;
      }
    }

    .sticky-add-to-cart__bar .add-to-cart-text__content {
      display: none;
    }

    .sticky-add-to-cart__info[data-has-image='false'] {
      padding-left: 0;
    }

    .sticky-add-to-cart__title {
      font-size: var(--font-paragraph--size);
    }

    .sticky-add-to-cart__button {
      padding: var(--padding-lg);
    }

    .sticky-add-to-cart__price {
      font-size: var(--font-paragraph-small--size);
    }

    .sticky-add-to-cart__button {
      width: var(--height-buy-buttons);
    }

    sticky-add-to-cart:not([data-variant-available='true']) .add-to-cart-text__content {
      display: initial;
    }

    sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__button {
      width: auto;
    }
  }

  /* Small mobile - hide text content and compare price */
  @media screen and (max-width: 389px) {
    .sticky-add-to-cart__bar {
      .compare-at-price {
        display: none;
      }
    }

    .sticky-add-to-cart__title {
      display: none;
    }

    /* For product with only default variant show title */
    .sticky-add-to-cart__info[data-singleton='true'] .sticky-add-to-cart__title {
      display: block;
    }

    /* For single variant show title and variant, truncate both. variant should be identifiable with truncation */
    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__title {
      display: block;
    }

    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__variant {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
/* END_SECTION:product-information */

/* CSS from block stylesheet tags */
/* START_BLOCK:_blog-post-card (INDEX:63) */
.blog-post-card {
    display: flex;
    flex-direction: column;
    text-align: var(--text-align);
    column-gap: var(--columns-gap);
  }

  .blog-post-item--horizontal:has(.blog-post-card__image-container) .blog-post-card {
    & > *:first-child {
      flex-basis: 70%;
    }

    & > *:last-child {
      flex-basis: 30%;
    }
  }

  .blog-post-card__content {
    padding-block-start: 0.4rem;
    display: flex;
    flex-direction: column;
  }

  .blog-post-item--horizontal .blog-post-card__title-link .spacing-style,
  .blog-post-item--horizontal .blog-post-details,
  .blog-post-item--horizontal .blog-post-card__content-text {
    padding-inline-start: 0;
  }

  .blog-post-item .blog-post-card__image-container,
  .blog-post-item .blog-post-card__content {
    width: 100%;
  }

  /**
   * Horizontal layout (image left, content right)
   * Applied to hero posts based on total article count
   * Only applies the split layout when an image is actually present
   */
  .blog-post-item--horizontal .blog-post-card {
    flex-direction: row;

    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .blog-post-card__content a {
    display: block;
    text-wrap: pretty;
    text-decoration: none;
    padding-block-start: 0.75rem;
    color: var(--color-foreground);
  }

  .blog-post-card__content a:hover {
    color: var(--color-foreground-subdued);
  }

  a.blog-post-card__title-link {
    color: var(--color-foreground);

    &:hover {
      color: var(--color-foreground-subdued);
    }
  }
/* END_BLOCK:_blog-post-card */

/* START_BLOCK:_blog-post-content (INDEX:64) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
    color: var(--color, inherit);
  }

  .blog-post-content a {
    color: currentcolor;
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:65) */
.blog-post-card__content-text a {
    color: currentcolor;
  }

  .blog-post-card__content-text a:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }
/* END_BLOCK:_blog-post-description */

/* START_BLOCK:_blog-post-featured-image (INDEX:66) */
.blog-post-featured-image {
    --width: 100%;
    --custom-width: 100%;

    position: relative;
    display: block;
    width: var(--width);
    margin-inline: auto;
  }

  .blog-post-featured-image.size-style {
    --width: var(--size-style-width, 100%);
  }

  .blog-post-featured-image--height-fit {
    height: fit-content;
  }

  .blog-post-featured-image--height-fill {
    height: 100%;
  }

  .blog-post-featured-image__image {
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  @media screen and (max-width: 749px) {
    .blog-post-featured-image {
      --width: var(--width-mobile, var(--width));
      --custom-width: var(--custom-width-mobile, var(--custom-width));
    }

    .blog-post-featured-image.size-style {
      --width: var(--size-style-width-mobile, var(--size-style-width, 100%));
    }
  }
/* END_BLOCK:_blog-post-featured-image */

/* START_BLOCK:_blog-post-image (INDEX:67) */
.blog-post-card__image {
    width: 100%;
    object-fit: cover;
    object-position: center center;
    height: calc(var(--blog-post-card-img-height) * var(--blog-post-card-scale));
  }

  .blog-post-card__image--small {
    --blog-post-card-img-height: 280px;
  }

  .blog-post-card__image--medium {
    --blog-post-card-img-height: 340px;
  }

  .blog-post-card__image--large {
    --blog-post-card-img-height: 400px;
  }
/* END_BLOCK:_blog-post-image */

/* START_BLOCK:_blog-post-info-text (INDEX:68) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: var(--color-details, var(--color-foreground-muted));
    white-space: nowrap;
    flex-wrap: wrap;
  }

  .blog-post-details > span {
    text-overflow: clip;
    overflow: hidden;
  }
/* END_BLOCK:_blog-post-info-text */

/* START_BLOCK:_card (INDEX:70) */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius, 0);
    border-width: var(--border-width, 0);
    border-style: var(--border-style, none);
    border-color: var(--border-color);
    container-type: inline-size;
  }

  .card__content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
    display: flex;
    flex-direction: column;
    aspect-ratio: var(--card-ratio, 1);
  }

  .card__content.background-transparent {
    background-color: transparent;
  }

  /* When card has both image and content, use min-height from container query */
  .card__content--has-min-height {
    min-height: calc(100cqw / var(--card-ratio-numeric));
  }

  .card__inner {
    flex: 1;
  }

  .card__media-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }

  .card__media-wrapper video {
    z-index: var(--layer-raised);
  }

  .card__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
  }

  .card__link ~ :is(.card__content, .card__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  /* Needs the .card__link ~ to be specific enough to take effect. */
  .card__link ~ .card__content--design-mode {
    pointer-events: auto;
  }
/* END_BLOCK:_card */

/* START_BLOCK:_carousel-content (INDEX:71) */
.carousel-content slideshow-slides {
    --slideshow-gap: var(--carousel-gap);
  }

  .carousel-content slideshow-slides > .card {
    flex: 0 0 auto;
    width: calc(
      (100% - (var(--carousel-gap, 8px) * (var(--carousel-mobile-columns, 2) - 1)) - var(--peek-next-slide-size, 0px)) /
        var(--carousel-mobile-columns, 2)
    );
  }

  @media screen and (min-width: 750px) {
    .carousel-content slideshow-slides > .card {
      width: calc(
        (100% - (var(--carousel-gap, 8px) * (var(--carousel-columns, 4) - 1)) - var(--peek-next-slide-size, 0px)) /
          var(--carousel-columns, 4)
      );
    }
  }

  .carousel-content .slideshow-control[disabled] {
    display: none;
  }

  .carousel-content slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .carousel-content .slideshow-control--next {
    margin-inline-start: auto;
  }
/* END_BLOCK:_carousel-content */

/* START_BLOCK:_cart-products (INDEX:72) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:73) */
.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) {
      padding: var(--padding-5xl);
      grid-row: 1 / -1;
    }
  }

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

  .cart-summary {
    @media screen and (max-width: 749px) {
      border: none;
    }

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
    }
  }

  .cart-summary--extend {
    height: 100%;

    @media screen and (min-width: 750px) {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

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

  .cart-summary--extend .cart-summary__inner {
    @media screen and (min-width: 750px) {
      grid-row: 2 / -1;
      padding: var(--padding-md) var(--page-margin) var(--padding-4xl);
      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);
  }

  /* On mobile, drop the summary's custom palette and inherit from the cart
     section so the summary visually merges with the rest of the cart page. */
  @media screen and (max-width: 749px) {
    :is(.section-background, .cart-summary, .cart-summary__inner).inherit-parent-scheme--mobile {
      --color: inherit;
      --color-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-foreground-subdued: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: 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;
      --opacity-10-25: inherit;
    }
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:74) */
.cart-title h1 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .cart-title .cart-bubble {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-title .cart-bubble[data-maintain-ratio] {
    width: min(1lh, 26px);
    height: min(1lh, 26px);
  }

  .cart-title .cart-bubble .cart-bubble__background {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-title .cart-bubble__text {
    color: var(--color-foreground);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }
/* END_BLOCK:_cart-title */

/* START_BLOCK:_collection-image (INDEX:77) */
.collection-image {
    width: var(--image-width);
  }

  .collection-image .collection-image__featured-image {
    aspect-ratio: var(--ratio);
    object-fit: cover;
  }
/* END_BLOCK:_collection-image */

/* START_BLOCK:_collection-link (INDEX:79) */
.collection-links__link {
    --min-font-size: var(--font-size--4xl);
    --max-font-size: var(--font-size--6xl);

    display: flex;
    color: inherit;
    text-decoration: none;
    text-wrap: pretty;
    font-size: clamp(var(--min-font-size), 4.5vw, var(--max-font-size));

    /* When hovering over container, dim non-current links (text layout only) */
    @media (hover: hover) {
      collection-links-component:not([layout='spotlight']) .collection-links__container:hover & {
        opacity: var(--opacity-subdued-text);
      }

      collection-links-component:not([layout='spotlight']) .collection-links__container:hover &[aria-current='true'] {
        opacity: 1;
      }
    }

    [layout='spotlight'] & {
      /* Spotlight layout: dimmed by default */
      opacity: var(--disabled-opacity);

      &[aria-current='true'] {
        opacity: 1;
      }
    }

    .text-block {
      display: inline-block;
    }

    @media screen and (max-width: 749px) {
      --min-font-size: var(--font-size--3xl);
      --max-font-size: var(--font-size--5xl);

      [layout='spotlight'] & {
        white-space: normal;
        scroll-snap-align: start;
        text-wrap: pretty;

        span {
          text-wrap: pretty;
        }
      }
    }
  }

  .collection-links__count {
    font-size: 0.5em;
    opacity: var(--disabled-opacity);
    font-weight: var(--font-paragraph--weight);
  }

  .collection-links__image {
    align-items: center;
    justify-content: center;

    &:not([hidden]) {
      display: flex;
    }

    &[reveal] {
      --offset: 15px;

      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--layer-temporary);
      display: block;
      translate: calc(var(--x) + var(--offset)) calc(var(--y) + var(--offset));
      pointer-events: none;
      width: auto;

      image-block {
        --image-height-basis: 5rem;

        height: var(--image-height);
      }
    }
  }
/* END_BLOCK:_collection-link */

/* START_BLOCK:_featured-blog-posts-card (INDEX:83) */
.featured-blog-posts-card {
    width: 100%;
    position: relative;
    height: 100%;
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: var(--layer-flat);
    pointer-events: none;
    gap: var(--gap);
  }

  .featured-blog-posts-card__link {
    position: absolute;
    inset: 0;

    /* allows focus outline to have radius in supported browsers */
    border-radius: var(--border-radius);
  }

  .resource-list--grid .resource-list__item {
    min-width: 0;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
    .featured-blog-posts-card__image,
    .blog-placeholder-svg {
      aspect-ratio: 99;
      height: 100%;
    }

    .featured-blog-posts-card__inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .featured-blog-posts-card__content {
      --flex-wrap: nowrap;

      flex-shrink: 0;
      height: auto;
    }
  }

  @media screen and (max-width: 749px) {
    .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
      .featured-blog-posts-card__image,
      .blog-placeholder-svg {
        aspect-ratio: unset;
      }
    }
  }

  .featured-blog-posts-card__inner a,
  .featured-blog-posts-card__inner button {
    pointer-events: auto;
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .featured-blog-posts-card__content * {
    pointer-events: auto;
  }

  .featured-blog-posts-card__content {
    --flex-wrap: wrap;

    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    gap: var(--gap);
  }

  .featured-blog-posts-card__content h4 {
    margin: 0;
  }
/* END_BLOCK:_featured-blog-posts-card */

/* START_BLOCK:_featured-blog-posts-image (INDEX:84) */
.featured-blog-posts-card__image {
    width: 100%;
  }

  .featured-blog-posts-card__image .blog-placeholder-svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:_featured-blog-posts-image */

/* START_BLOCK:_featured-product-gallery (INDEX:86) */
.featured-product-section .card-gallery .quick-add__button {
    position: absolute;
    right: var(--quick-add-offset, var(--padding-sm));
    bottom: var(--quick-add-offset, var(--padding-sm));
  }
/* END_BLOCK:_featured-product-gallery */

/* START_BLOCK:_featured-product (INDEX:89) */
.featured-product-content-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-sm);
  }
/* END_BLOCK:_featured-product */

/* START_BLOCK:_footer-social-icons (INDEX:90) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }
/* END_BLOCK:_footer-social-icons */

/* START_BLOCK:_header-logo (INDEX:91) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

    &[data-hidden-on-home-page] {
      display: none;

      #header-component:is(
          [sticky='always']:not([data-scroll-direction='none']),
          [sticky='scroll-up'][data-scroll-direction='up']
        )
        & {
        display: flex;
      }
    }

    @media screen and (max-width: 749px) {
      padding: 0;
    }

    @media screen and (min-width: 750px) {
      flex-shrink: 0;
    }

    &:hover {
      text-decoration: none;
    }
  }

  .header-logo__image {
    object-fit: contain;
    height: var(--header-logo-image-height-mobile);
    width: var(--header-logo-image-width-mobile);

    @media screen and (min-width: 750px) {
      height: var(--header-logo-image-height);
      width: var(--header-logo-image-width);
    }
  }

  .header-logo:has(.header-logo__image-container--inverse) .header-logo__image-container--original {
    display: var(--header-logo-display, block);
  }

  .header-logo__image-container--inverse {
    display: var(--header-logo-inverse-display, none);
  }
/* END_BLOCK:_header-logo */

/* START_BLOCK:_header-menu (INDEX:92) */
.header__drawer {
    --header-drawer-min-height: 60px;
    display: flex;
    min-height: var(--header-drawer-min-height);
    align-items: center;
  }

  #header-component[data-menu-style='drawer'] .header__drawer {
    display: flex;
    min-height: var(--header-drawer-min-height);
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] .header__drawer {
      display: none;
      min-height: 0;
    }
  }

  .header--compact .header__drawer {
    min-height: var(--minimum-touch-target);
  }

  .menu-list--mobile {
    &.menu-list {
      display: grid;
    }

    & .menu-list__list {
      width: max-content;
      margin-inline: auto;
      gap: var(--menu-horizontal-gap);
    }

    & li {
      width: max-content;
      padding-block: var(--padding-sm);
    }

    & li:first-of-type {
      padding-inline-start: var(--menu-horizontal-gap);
    }

    & li:last-of-type {
      padding-inline-end: var(--menu-horizontal-gap);
    }

    & a {
      color: var(--color-foreground);
    }
  }

  .menu-list__scroll-container {
    position: relative;
    overflow-x: auto;
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    padding-block: var(--padding-2xs);
  }

  .menu-list {
    --menu-horizontal-gap: var(--gap-xl);
    --menu-vertical-gap: var(--gap-xl);

    display: flex;
    height: 100%;
  }

  .menu-list__list {
    display: flex;
    justify-content: var(--grid-area-alignment);
  }

  .menu-list__list-item {
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .menu-list__list-item[aria-hidden='true'] {
    visibility: hidden;
  }

  .menu-list__link {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    margin-block: 0;

    &::after {
      content: '';
      position: absolute;
      display: none;
      top: var(--header-padding);
      height: var(--box-height);
      left: 0;
      right: 0;
    }

    &[data-safety-box='true']::after {
      display: block;
    }

    &:hover,
    &:focus {
      color: var(--menu-top-level-font-color);
    }

    @media screen and (min-width: 750px) {
      font-size: var(--menu-top-level-font-size-desktop);
    }
  }

  /* Wraps a top-level link and its disclosure button. Positioned so the
     absolutely-positioned button can sit in the gap after the link without
     affecting the top-bar layout. */
  .menu-list__trigger {
    position: relative;
    display: flex;
    height: 100%;
  }

  .menu-list__disclosure {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: calc(100% - var(--gap-xs));
    width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--padding-3xs);
    padding-block: var(--padding-sm);
    color: var(--menu-top-level-font-color);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    outline-offset: 0.1em;

    /* Hidden control must not intercept pointer events; hover-open is driven by
       the list item itself. */
    pointer-events: none;

    &:focus-visible {
      opacity: 1;
      pointer-events: auto;
    }
  }

  .menu-list__disclosure-icon {
    display: block;
    width: var(--font-size--3xs);
    aspect-ratio: 10 / 6;
    fill: currentColor;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .menu-list__disclosure[aria-expanded='true'] .menu-list__disclosure-icon {
    transform: rotate(180deg);
  }

  .menu-list__link-title {
    padding-inline: var(--gap-sm);
  }
  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

  .menu-list__list-item:not([slot='overflow']) {
    flex-direction: column;
  }
  .menu-list__list-item[slot='more']:has(.menu-list__link[aria-expanded='true'])::after {
    content: '';
    width: 100%;
    height: var(--header-padding);
    margin-bottom: calc(-1 * var(--header-padding));
  }

  [slot='overflow'] > .menu-list__link::after {
    content: none;
  }

  /*
    High specificity selectors to subdue non-hovered links without javascript.
    If the need for js-generated `hovered` and `focused` classes arises for another reason we can simplify these.
  */
  .menu-list:where(:has(.menu-list__list-item:hover)),
  .menu-list:where(:has(.menu-list__list-item:focus-within)),
  .menu-list:where(:has(.menu-list__list-item:not([aria-hidden='true']) .menu-list__link--active)) {
    .menu-list__link {
      color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));
    }
  }

  /* stylelint-disable-next-line selector-max-specificity */
  .menu-list:not(:has(.menu-list__list-item:hover)) .menu-list__link--active,
  .menu-list .menu-list__list-item:where(:hover, :focus-within) .menu-list__link,
  .menu-list .menu-list__list-item:is([slot='more'], [slot='overflow']):has([aria-expanded='true']) .menu-list__link {
    color: var(--menu-top-level-font-color);
  }

  .overflow-menu::part(list) {
    /* Make sure focus outline is not cut off by overflow hidden */
    --focus-outline-size: calc(var(--focus-outline-offset) + var(--focus-outline-width));

    gap: 0;
    margin-inline: calc(-1 * var(--menu-horizontal-gap) / 2);
  }

  .overflow-menu {
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;
    padding: var(--focus-outline-size);
    margin: calc(-1 * var(--focus-outline-size));
  }

  /** mega menu **/
  .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-padding-block-start: var(--padding-3xl);
    --submenu-padding-block-end: var(--padding-3xl);

    background-color: transparent;
  }

  .header__row[style*='--border-bottom-width: 0px'] {
    .menu-list__submenu.background-matches-parent,
    .overflow-menu.background-matches-parent::part(overflow) {
      --submenu-padding-block-start: 0px;
    }
  }

  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-content-opacity: 0;
    --submenu-content-animation: opacity calc(var(--submenu-animation-speed) * 0.75) var(--animation-easing);

    /* Bridge the gap (row bottom padding + border) so the pointer reaches the
       submenu; collapses to 0 when the padding does. */
    --submenu-gap: calc(var(--padding-block-end, var(--header-padding)) + var(--border-bottom-width, 0px));
    --submenu-clip-top: calc(var(--header-height) - var(--submenu-gap));

    visibility: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width) - (var(--full-open-header-height) - var(--submenu-height)));
    z-index: var(--layer-header-menu);
    padding-inline: var(--padding-inline);
    clip-path: rect(var(--submenu-clip-top) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic); /* stylelint-disable-line */
  }

  /* Keep the submenu transparent (color-custom paints an opaque bg) so the
     bridged band shows the header row; the underlay paints the dropdown. */
  .menu-list__list-item > .menu-list__submenu {
    background-color: transparent;
  }

  [data-submenu-overlap-bottom-row] {
    .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
    .overflow-menu::part(overflow) {
      --submenu-clip-top: calc(var(--top-row-height) - var(--submenu-gap));
    }
  }

  /* Show the submenus on hover */
  .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu,
  /* Show the overflow menu when a menu item is hovered */
  .overflow-menu:has([slot="overflow"] [aria-expanded='true'])::part(overflow-list),
  /* Keep the submenus open when they are hovered */
  .menu-list__submenu:is(:hover),
  .overflow-menu::part(overflow):hover {
    --submenu-content-opacity: 1;

    visibility: visible;
  }

  .overflow-menu::part(overflow) {
    --menu-top-level-font-size: var(--font-size--xlarge);

    display: grid;
    grid-template-columns: var(--full-page-grid-with-margins);
  }

  .overflow-menu::part(overflow-list) {
    position: relative;
    display: grid;
    grid-template-columns: minmax(auto, 200px) 1fr;
    grid-template-areas: 'left right';
    grid-template-rows: max-content;
    grid-gap: 0;
    grid-column: 2;
  }

  .menu-list__list-item:is([slot='overflow']) {
    --menu-top-level-font-color: var(--color-foreground);
    --menu-top-level-font-color-rgb: var(--color-foreground-rgb);

    display: contents;
    white-space: normal;

    /* The trigger becomes the left-column grid item, laying the link and its
       disclosure button out inline */

    .menu-list__trigger {
      grid-area: left;
      grid-row: auto;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: var(--gap-2xs);
    }

    .menu-list__disclosure {
      position: static;
      flex-shrink: 0;
      transform: none;
    }

    /* Point the chevron toward the content that opens to the right. */
    .menu-list__disclosure-icon,
    .menu-list__disclosure[aria-expanded='true'] .menu-list__disclosure-icon {
      transform: rotate(-90deg);
    }

    .menu-list__link {
      /* Bare leaf links (no children) have no `.menu-list__trigger` wrapper, so
         they need explicit left-column placement themselves. On parent items the
         link is inside the trigger and this is simply ignored. */
      grid-area: left;
      grid-row: auto;
      height: min-content;
      font-size: var(--font-size--xl);
      transition: var(--submenu-content-animation);
    }

    .menu-list__submenu {
      visibility: hidden;
      grid-row: 1;
      grid-area: right;
      grid-row-end: span calc(var(--overflow-count) + 1);
      padding-inline-start: var(--menu-horizontal-gap);
    }

    .menu-list__submenu-inner {
      transform: none;
      grid-column: unset;
      padding-block: 0;
    }

    /* The disclosure button owns the expanded state; reveal the submenu when it
       is expanded (via the inline chevron, hover, or the More trigger). */
    &:has(.menu-list__disclosure[aria-expanded='true']) .menu-list__submenu {
      visibility: visible;
    }
  }

  .header-menu {
    height: 100%;
  }

  .menu-list__submenu-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    padding-block-start: var(--submenu-padding-block-start);
    padding-block-end: var(--submenu-padding-block-end);
    padding-inline: var(--section-padding-inline);
    opacity: var(--submenu-content-opacity);
    transition: var(--submenu-content-animation);
    transform: translateY(calc(var(--full-open-header-height) - var(--submenu-height)));

    /* Make overflow menu scrollable when content exceeds viewport */
    max-height: calc(80vh - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent;
  }

  .mega-menu__link {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);
    white-space: normal;
    text-decoration: none;
    display: inline-flex;
    padding: var(--padding-2xs) 0;

    &:hover {
      color: var(--menu-child-active-font-color);
    }
  }

  .mega-menu__link--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-active-font-color);
    }
  }

  @media screen and (max-width: 989px) {
    .mega-menu__content-list-item--hidden-tablet {
      display: none;
    }
  }

  .mega-menu__link:has(.mega-menu__link-image) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    object-fit: cover;
    border-radius: var(--menu-image-border-radius);
  }

  /* Fix alignment for collection image mode links without images */

  /* Target only top-level links (direct children of column > div) in collection image mode */
  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image)) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--menu-columns-tablet), minmax(0, 1fr));
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: 100%;

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__column {
    grid-column: span 1;
  }

  .mega-menu__column--span-2 {
    grid-column: span 2;
  }

  .mega-menu__column--span-3 {
    grid-column: span 3;
  }

  .mega-menu__column--span-4 {
    grid-column: span 4;
  }

  .mega-menu__column--wide-collection-image {
    grid-column: span 1;

    @media screen and (min-width: 990px) {
      grid-column: span 2;
    }
  }

  .mega-menu__submenu .mega-menu__column--wide-collection-image {
    grid-column: span 1;
  }

  .mega-menu__content-list {
    display: grid;
    justify-content: end;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
  }

  .mega-menu__content-list--products {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 1fr));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__content-list--collections {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 300px));
    }
  }

  .mega-menu__list {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span var(--menu-columns-tablet);
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-columns-desktop);
    }
  }

  .mega-menu__content {
    grid-column: span var(--menu-content-columns-tablet) / -1;

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-content-columns-desktop) / -1;
    }
  }

  .menu-list__list-item[slot='overflow'] .section {
    grid-template-columns: 1fr;
  }

  .menu-list__list-item[slot='overflow'] .section .mega-menu__grid {
    grid-column: 1;
  }

  .mega-menu__content-list li {
    white-space: normal;
  }

  /* mega more menu */
  .mega-menu__more-list {
    --menu-child-font-size: var(--font-size--xl);

    width: 200px;
  }

  .mega-menu__submenu {
    /* preserves the inherited grid layout when this submenu wrapper is used */
    display: contents;
  }

  /* Hide product cards in collapsed submenus from the IntersectionObserver that fires product view events */
  .menu-list__list-item:not(:has([aria-expanded='true'])) > .menu-list__submenu product-component {
    display: none;
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_image (INDEX:95) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  image-block {
    --image-height-basis: 10rem;
    --image-height-small: calc(var(--image-height-basis) * 2);
    --image-height-medium: calc(var(--image-height-basis) * 3);
    --image-height-large: calc(var(--image-height-basis) * 4);

    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--ratio);
    width: 100%;
    max-width: calc(var(--image-height) * var(--ratio));
    height: var(--image-height);
    overflow: hidden;

    @media screen and (min-width: 750px) {
      --image-height-small: calc(var(--image-height-basis) * 2.5);
      --image-height-medium: calc(var(--image-height-basis) * 3.5);
      --image-height-large: calc(var(--image-height-basis) * 4.5);
    }

    @media screen and (max-width: 749px) {
      height: auto;
    }

    &[height='small'] {
      --image-height: var(--image-height-small);
    }

    &[height='medium'] {
      --image-height: var(--image-height-medium);
    }

    &[height='large'] {
      --image-height: var(--image-height-large);
    }

    &[ratio='portrait'] {
      --ratio: 4 / 5;
    }

    &[ratio='square'] {
      --ratio: 1 / 1;

      @media screen and (min-width: 750px) {
        max-width: var(--image-height);
      }
    }

    &[ratio='landscape'] {
      --ratio: 16 / 9;
    }

    img {
      object-fit: cover;
      width: 100%;
      height: auto;
      aspect-ratio: var(--ratio);
      border-radius: var(--border-radius);
    }
  }
/* END_BLOCK:_image */

/* START_BLOCK:_marquee (INDEX:99) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-background);
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
  }

  .hero__content-wrapper.layout-panel-flex--column marquee-component {
    --margin-inline: var(--full-page-margin-inline-offset);

    width: -webkit-fill-available;
    min-height: max-content;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
/* END_BLOCK:_marquee */

/* START_BLOCK:_product-details (INDEX:104) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

  .view-product-title {
    display: none;
  }

  /* Container styles */
  .product-details {
    display: flex;
    align-self: start;
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .product-details > .group-block {
      height: min-content;
    }

    .full-height--desktop {
      height: 100%;
      max-height: calc(100vh - var(--header-group-height, 0));
      min-height: fit-content;
    }

    .full-height--desktop .group-block {
      align-self: var(--details-position, 'flex-start');
    }
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_search-input (INDEX:109) */
.search-page-input {
    width: 100%;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding-block: var(--padding-lg);
    padding-inline: calc(var(--icon-size-lg) + var(--margin-xl) * 1.5);
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);

    @media screen and (max-width: 749px) {
      padding-inline: calc(var(--margin-xs) + var(--icon-size-lg) + var(--padding-md));
    }
  }

  .search-page-input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .search-page-input__parent {
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .search-results__no-results {
    opacity: var(--opacity-subdued-text);
  }

  search-page-input-component {
    position: relative;
    width: 100%;
    display: flex;
    top: 0;
    max-width: var(--size-style-width);
    align-items: center;
    background-color: var(--color-background);
    margin: var(--margin-2xl) 0 var(--margin-md);

    @media screen and (max-width: 749px) {
      max-width: 100%;
    }
  }

  search-page-input-component .search__icon,
  search-page-input-component .search__icon:hover,
  search-page-input-component .search__reset-button,
  search-page-input-component .search__reset-button:hover {
    background: transparent;
    position: absolute;
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  search-page-input-component .search__icon svg,
  search-page-input-component .search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__icon svg {
    color: var(--color-input-text);
  }

  search-page-input-component .search__icon {
    left: var(--margin-lg);

    @media screen and (max-width: 749px) {
      left: var(--margin-md);
    }
  }

  search-page-input-component .search__reset-button {
    border-radius: 100%;
    color: var(--color-input-text);
    right: var(--margin-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      right: var(--margin-md);
    }
  }

  search-page-input-component:has(.search-page-input:not(:placeholder-shown)) .search__reset-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  search-page-input-component .search__reset-button-icon {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  search-page-input-component .search__reset-button:active .search__reset-button-icon {
    transform: scale(0.9);
  }

  search-page-input-component .search__reset-button-icon svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__reset-button--hidden {
    cursor: default;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    pointer-events: none;
    visibility: hidden;
  }

  search-page-input-component .search__reset-button-text {
    display: none;
  }
/* END_BLOCK:_search-input */

/* START_BLOCK:_slide (INDEX:110) */
.slide__content {
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);

    @supports (animation-timeline: auto) {
      opacity: 0;
      animation: slide-reveal both linear;
      animation-timeline: var(--slideshow-timeline);
    }

    @media (prefers-reduced-motion) {
      opacity: 1;
      animation: none;
    }
  }

  .slide__content > * {
    margin: auto;
  }

  .slide__content.background-transparent {
    background-color: transparent;
  }

  slideshow-slide > .slide__image-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }

  .slide__image-container > .slide__image,
  .slide__image-container > .slide__video,
  .slide__image-container > .slide__video-poster {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .slide__image-container > .slide__video-poster {
    position: absolute;
  }

  /*
   * Force Safari to recalculate the timeline state on timeline refresh (after loop)
   */
  slideshow-component[refreshing-timeline] .slide__content {
    animation: none;
  }

  slideshow-slide .slide__image-container--rounded {
    border-radius: var(--corner-radius, 0);
  }
/* END_BLOCK:_slide */

/* START_BLOCK:_social-link (INDEX:111) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:_social-link */

/* START_BLOCK:comparison-slider (INDEX:119) */
comparison-slider-component {
    display: block;
  }

  .comparison-slider {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider:not(:has(img)) {
    min-width: 25dvh;
  }

  .comparison-slider__container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Container and Layout */
  .comparison-slider__media-wrapper {
    --compare: 50;

    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: 1fr / 1fr;
    overflow: hidden;
  }

  /* Layer Containers */
  .comparison-slider__layer {
    grid-area: 1 / 1;
    position: relative;
    width: 100%;
    height: 100%;
    transition: clip-path var(--transition-duration, 0s) ease-in-out;
  }

  .comparison-slider__layer--after {
    z-index: var(--layer-base);
  }

  /* Before Layer Clipping (inverse of after layer) */
  [data-orientation='horizontal'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 calc((100 - var(--compare)) * 1%) 0 0);
  }

  [data-orientation='vertical'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 calc(var(--compare) * 1%) 0);
  }

  /* After Layer Clipping */
  [data-orientation='horizontal'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 0 calc(var(--compare) * 1%));
  }

  [data-orientation='vertical'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(calc((100 - var(--compare)) * 1%) 0 0 0);
  }

  /* Images and Placeholders */
  .before-image,
  .after-image,
  .comparison-slider__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider__placeholder {
    position: absolute;
    inset: 0;
  }

  .comparison-slider__placeholder svg {
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    fill: var(--color-foreground);
  }

  /* Range Input (Hidden but Functional) */
  .cs-slider {
    position: absolute;
    inset: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: inherit;
    appearance: none;
  }

  [data-orientation='horizontal'] .cs-slider {
    cursor: ew-resize;
  }

  [data-orientation='vertical'] .cs-slider {
    cursor: ns-resize;
    writing-mode: vertical-lr;
    direction: rtl;
  }

  /* Range Input Thumb */
  .cs-slider::-webkit-slider-thumb,
  .cs-slider::-moz-range-thumb {
    width: var(--button-size);
    height: var(--button-size);
    border: 0;
    background: transparent;
    cursor: inherit;
    appearance: none;
  }

  /* Range Input Track */
  .cs-slider::-webkit-slider-track,
  .cs-slider::-moz-range-track {
    background: transparent;
    border: 0;
    appearance: none;
  }

  /* Visual Slider Elements */
  .comparison-slider__media-wrapper::before,
  .comparison-slider__media-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out;
    z-index: var(--layer-raised);
  }

  /* Slider Track Line */
  .comparison-slider__media-wrapper::after {
    background: var(--color-background);
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
  }

  .comparison-slider__media-wrapper::before {
    background: var(--color-background);
  }

  .comparison-slider__media-wrapper[data-orientation='horizontal']::after {
    inset: 0 auto;
    left: calc(var(--compare) * 1%);
    width: 4px;
    transform: translateX(-50%);
  }

  .comparison-slider__media-wrapper[data-orientation='vertical']::after {
    inset: auto 0;
    top: calc((100 - var(--compare)) * 1%);
    height: 4px;
    transform: translateY(-50%);
  }

  /* Slider Handle */
  .cs-slider__handle {
    position: absolute;
    z-index: var(--layer-heightened);
    pointer-events: none;
    width: var(--button-size);
    height: var(--button-size);
    color: var(--handle-color, var(--color-foreground));
    background: var(--color-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out,
      gap 0.2s ease-in-out;
    gap: var(--gap-sm);
    padding: var(--padding-xs);
  }

  .comparison-slider__media-wrapper:hover .cs-slider__handle {
    gap: var(--gap-2xs);
  }

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

  [data-orientation='horizontal'] .cs-slider__handle {
    top: 50%;
    left: calc(var(--compare) * 1%);
    transform: translate(-50%, -50%);
    flex-direction: row;
  }

  [data-orientation='vertical'] .cs-slider__handle {
    left: 50%;
    top: calc((100 - var(--compare)) * 1%);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Text Labels */
  .comparison-slider__text {
    position: absolute;
    padding: var(--padding-xs);
    pointer-events: none;
  }

  .comparison-slider__text--with-bg {
    background: var(--text-background-color);
    border-radius: var(--text-corner-radius);
  }

  /* Horizontal: before/after control inline (left/right), position controls block (top/bottom) */
  [data-orientation='horizontal'] .comparison-slider__text--before {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='horizontal'] .comparison-slider__text--after {
    inset-inline-end: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='start'] .comparison-slider__text {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='end'] .comparison-slider__text {
    inset-block-end: var(--padding-sm);
  }

  /* Vertical: before/after control block (top/bottom), position controls inline (left/right) */
  [data-orientation='vertical'] .comparison-slider__text--before {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='vertical'] .comparison-slider__text--after {
    inset-block-end: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='start'] .comparison-slider__text {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='end'] .comparison-slider__text {
    inset-inline-end: var(--padding-sm);
  }
/* END_BLOCK:comparison-slider */

/* START_BLOCK:contact-form-submit-button (INDEX:120) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:121) */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .contact-form__form-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);

    @media screen and (min-width: 750px) {
      flex-direction: row;
      align-items: center;
    }
  }

  .contact-form__input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding: var(--padding-lg) var(--padding-xl);
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .contact-form__error,
  .contact-form__success {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }
/* END_BLOCK:contact-form */

/* START_BLOCK:disclosures (INDEX:123) */
.disclosures__container {
      width: 100%;
    }

    .disclosures__container:has(> [shopify-block-empty]) {
      display: none;
    }

    .disclosures {
      --disclosures-symbol-width: calc(var(--disclosures-icon-size) * var(--disclosures-symbol-aspect-ratio, 1));

      display: block;
      color: var(--color, inherit);
      width: 100%;
      container-type: inline-size;
    }

    .disclosures.accordion--dividers accordion-custom:first-child .details {
      border-block-start: var(--style-border-width) solid var(--color-border);
    }

    .disclosures.accordion--dividers accordion-custom:last-child .details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .disclosures__heading {
      margin-block-end: var(--margin-lg);
    }

    .disclosures .details__header {
      padding-block: var(--padding-xl);
      display: flex;
      align-items: flex-start;
      gap: var(--gap-xs);
    }

    .disclosures .details__header > .svg-wrapper {
      margin-block-start: calc((var(--disclosures-icon-size) - var(--icon-size-xs)) / 2);
    }

    .disclosures details[open] .details__header {
      padding-block-end: var(--padding-xs);
    }

    .disclosures__summary-content {
      flex: 1 1 0%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      row-gap: var(--gap-xs);
      min-width: 0;
    }

    .disclosures__summary-item {
      display: flex;
      flex-direction: column;
      row-gap: var(--gap-xs);
      min-width: 0;
      overflow-wrap: break-word;
    }

    .disclosures__summary-item--measure {
      position: fixed;
      inset-block-start: 0;
      inset-inline-start: 0;
      display: block;
      width: max-content;
      max-width: none;
      visibility: hidden;
      white-space: nowrap;
      pointer-events: none;
      contain: layout style;
    }

    .disclosures__summary-item-row {
      display: flex;
      align-items: center;
      gap: var(--padding-2xs);
      min-width: 0;
      vertical-align: middle;
    }

    .disclosures__summary-item-title {
      font-weight: var(--font-weight-normal, normal);
      overflow-wrap: break-word;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-title {
      white-space: nowrap;
      overflow-wrap: normal;
    }

    .disclosures .details__icon {
      display: inline-block;
      flex-shrink: 0;
      width: auto;
      max-inline-size: 100%;
      height: var(--disclosures-icon-size);
      margin: 0;
      object-fit: contain;
      vertical-align: middle;
    }

    .disclosures__summary-item-row:has(> .details__icon) {
      display: grid;
      grid-template-columns: var(--disclosures-symbol-width) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--padding-2xs);
      min-inline-size: 0;
    }

    .disclosures__summary-item-row:has(> .details__icon) > .details__icon {
      grid-column: 1;
      justify-self: center;
    }

    .disclosures__summary-item-row:has(> .details__icon) > .disclosures__summary-item-title {
      grid-column: 2;
    }

    .disclosures details[open] > summary .disclosures__summary-item-title {
      font-weight: var(--font-weight-bold, bold);
    }

    .disclosures__summary-item-extra {
      display: block;
    }

    .disclosures__separator {
      display: none;
      flex-shrink: 0;
      padding-inline: var(--padding-xs);
      line-height: 1;
    }

    @container (min-width: 701px) {
      .disclosures:where([data-summary-layout='inline']) .details__header {
        align-items: center;
      }

      .disclosures:where([data-summary-layout='inline']) .details__header > .svg-wrapper {
        margin-block-start: 0;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item {
        display: block;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-row {
        display: inline-flex;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-row:has(> .details__icon) {
        display: inline-grid;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-extra {
        display: inline-flex;
        align-items: center;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__separator {
        display: inline-block;
      }
    }

    .disclosures__summary-item--measure .disclosures__summary-item-row {
      display: inline-flex;
      white-space: nowrap;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-row:has(> .details__icon) {
      display: inline-grid;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-extra {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
    }

    .disclosures__summary-item--measure .disclosures__separator {
      display: inline-block;
    }

    .disclosures details[open] .disclosures__summary-item-extra {
      display: none;
    }

    .disclosures__item {
      display: flex;
    }

    .disclosures__item + .disclosures__item {
      margin-block-start: var(--spacing-lg);
    }

    .disclosures__item-left {
      flex: 0 1 auto;
      min-width: 0;
      cursor: default;
    }

    .disclosures__item-right {
      flex: 1;
      cursor: pointer;
    }

    .disclosures__item-header {
      display: flex;
      align-items: center;
      gap: var(--padding-2xs);
      margin-block-end: var(--spacing-xs);
      padding-block-end: var(--padding-xs);
    }

    .disclosures__item-title {
      margin: 0;
    }

    .disclosures__item-header:has(> .details__icon) {
      display: grid;
      grid-template-columns: var(--disclosures-symbol-width) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--padding-2xs);
      min-inline-size: 0;
    }

    .disclosures__item-header:has(> .details__icon) > .details__icon {
      grid-column: 1;
      justify-self: center;
    }

    .disclosures__item-header:has(> .details__icon) > .disclosures__item-title {
      grid-column: 2;
    }

    .disclosures details[open] .disclosures__item-title {
      font-weight: var(--font-weight-bold, bold);
    }

    .disclosures__item-content {
      max-width: var(--normal-content-width);
      padding-block-end: var(--padding-2xl);
    }

    .disclosures details[open] .details-content {
      padding-block-end: 0;
    }
/* END_BLOCK:disclosures */

/* START_BLOCK:email-signup (INDEX:124) */
.email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 42px;
    --arrow-button-size-small: 20px;
    --arrow-icon-size: 32px;
    --arrow-icon-size-small: 24px;

    min-width: fit-content;

    @media screen and (max-width: 749px) {
      width: 100%;
      min-width: unset;
    }
  }

  .email-signup__heading {
    color: var(--color, inherit);
    padding-block: var(--padding-sm);
  }

  .email-signup__form {
    display: flex;
    flex-direction: column;
  }

  .email-signup__input-group {
    display: flex;
    align-items: stretch;
    background-color: transparent;
  }

  .email-signup__input-group:not(.email-signup__input-group--integrated):not(.email-signup__input-group--underline) {
    gap: var(--gap-xs);
    align-items: center;
  }

  .email-signup__input-group:not(.email-signup__input-group--arrow):not(.email-signup__input-group--underline):not(
      .email-signup__input-group--integrated
    ) {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .email-signup__input-group--integrated {
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
  }

  .email-signup__input-group--integrated.email-signup__input-group--no-border {
    border: none;
  }

  .email-signup__input {
    flex: 1;
    min-width: 0;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
    transition: background-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .email-signup__input.paragraph {
    color: var(--color-input-text);
    outline-color: var(--color-input-background);
  }

  .email-signup__button {
    white-space: nowrap;
    padding: 0;

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .email-signup__input,
  .email-signup__button--text {
    padding: var(--padding-lg) var(--padding-3xl);
  }

  .email-signup__input-group--underline {
    --box-shadow-color: var(--color-input-border);
    --box-shadow-multiplier: 1;
    --box-shadow-focused-multiplier: 1.75;

    box-shadow: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color);
    transition: box-shadow var(--animation-values);
    margin-block-end: calc(var(--border-width) * var(--box-shadow-focused-multiplier));

    &:focus-within {
      --box-shadow-multiplier: var(--box-shadow-focused-multiplier);
      --box-shadow-color: var(--color-input-text);
    }
  }

  .email-signup__input-group .email-signup__input--underline {
    color: var(--color-input-text);
    background-color: transparent;
    padding: 12px 0;
    border: none;
    border-radius: 0;

    &:focus-visible {
      outline: none;
    }
  }

  .email-signup__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
  }

  .email-signup__input-group .email-signup__input--none {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: none;
  }

  .email-signup__input-group--integrated .email-signup__input {
    background-color: transparent;
    border: none;
    border-radius: 0;
  }

  .email-signup__button-icon {
    color: currentcolor;
    padding: 5px;

    @media screen and (max-width: 749px) {
      padding: 0;
      align-self: center;
      justify-self: center;
      width: var(--icon-size-lg);
      height: var(--icon-size-lg);
    }
  }

  .email-signup__button--arrow {
    width: var(--arrow-button-size-small);
    height: var(--arrow-button-size-small);
    padding: 0;

    &:not(.email-signup__button--integrated) {
      width: var(--arrow-button-size);
      height: var(--arrow-button-size);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size);
        height: var(--arrow-icon-size);
        padding: 0;
      }
    }
  }

  .email-signup__button--integrated {
    --button-offset: var(--margin-xs);
    align-self: stretch;
    margin: var(--button-offset);
    flex-shrink: 0;

    @media screen and (max-width: 749px) {
      width: fit-content;
    }

    &.email-signup__button--text {
      padding: 0 var(--padding-3xl);
    }

    &.email-signup__button--text.button-unstyled {
      padding: 0 var(--padding-xl);
    }

    &.button-unstyled {
      border-radius: var(--border-radius);
    }

    > .email-signup__button-icon {
      padding: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      align-self: center;
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__input--underline + .email-signup__button--integrated {
    margin: 0;
    align-self: center;

    &.email-signup__button--text {
      padding-block: 9px;
    }

    &.email-signup__button--text.button-unstyled {
      padding-inline: 0;
      min-width: 44px;
      min-height: 44px;
    }

    &.button-unstyled {
      border-radius: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__button:not(.button-unstyled) {
    background-color: var(--button-background-color);
    color: var(--button-color);
    text-transform: var(--button-text-case-primary);
  }

  .email-signup__button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .email-signup__button.button-unstyled {
    background-color: transparent;
    color: var(--color-input-text);
  }

  .email-signup__button.button-unstyled:hover {
    --hover-color-rgb: var(--color-input-text-rgb);

    color: rgb(var(--hover-color-rgb) / var(--opacity-70));
    cursor: pointer;
  }

  .email-signup__message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .email-signup__message-text {
    margin: 0;
  }
/* END_BLOCK:email-signup */

/* START_BLOCK:featured-collection (INDEX:125) */
.featured-collection-block {
    width: 100%;
  }
/* END_BLOCK:featured-collection */

/* START_BLOCK:filters (INDEX:126) */
.facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: var(--facets-margin);
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-toggle {
    --icon-offset: -3px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    margin: var(--facets-margin);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-toggle__wrapper {
    margin-left: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      /* stylelint-disable-next-line declaration-no-important */
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

  .facets {
    --facets-form-horizontal-gap: 20px;
    --facets-horizontal-max-input-wrapper-height: 230px;
    --facets-upper-z-index: var(--layer-raised);
    --facets-open-z-index: var(--layer-heightened);
    --facets-sticky-z-index: var(--layer-sticky);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
    --facets-grid-panel-width: 300px;
    --facets-clear-padding: var(--padding-md);
    --facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
    --facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60));
    --facets-clear-all-min-width: 120px;
    --facets-see-results-min-width: 55%;
    --facets-mobile-gap: 22px;
    --facets-low-opacity: 10%;
    --facets-hover-opacity: 75%;

    @media screen and (min-width: 750px) {
      padding-inline: var(--padding-inline-start) var(--padding-inline-end);
    }
  }

  .facets--horizontal {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: var(--padding-block-start) var(--padding-block-end);
      display: flex;
      align-items: center;
      position: relative;
      z-index: var(--facets-upper-z-index);
      border: none;
      height: auto;
      top: initial;
      bottom: initial;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--vertical {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: 0 var(--padding-block-end);
      display: block;
      position: static;
      top: auto;
      bottom: auto;
      height: auto;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets-drawer__form-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper .facets__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__filters {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .facets-drawer__filters .facets__filters-wrapper,
  .facets-drawer__filters .filter-remove-buttons,
  .facets-drawer__filters .sorting-filter-component {
    overflow: visible;
  }

  .facets.facets-controls-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: column-1 / column-12;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
      gap: 0 var(--facets-form-horizontal-gap);
      padding-bottom: var(--padding-xs);
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-subdued);
    width: 100%;
  }

  .facets--horizontal .facets__form-wrapper {
    @media screen and (min-width: 750px) {
      flex-direction: row;
      height: auto;
    }
  }

  .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      flex-flow: row nowrap;
      height: auto;
    }
  }

  .facets:not(.facets--drawer) .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-md);
    }
  }

  .facets--horizontal .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      max-width: 60%;
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--gap-xl);
      margin-inline-end: 0;
    }
  }

  /* Facets - Summary */
  .facets__summary {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;
    --icon-opacity: 0.5;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }

    font-size: var(--font-h5--size);
    display: flex;
    justify-content: space-between;

    &:hover {
      --icon-opacity: 1;
    }
  }

  .facets__filters-wrapper:hover .facets__summary,
  .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
    opacity: var(--facets-hover-opacity);
  }

  .facets__filters-wrapper .facets__summary:hover,
  .facets__filters-wrapper .facets__panel[open] .facets__summary {
    opacity: 1;
  }

  .facets--horizontal .facets__summary {
    @media screen and (min-width: 750px) {
      font-size: var(--font-paragraph--size);
      justify-content: flex-start;
      height: var(--minimum-touch-target);
    }
  }

  .facets__summary .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
    margin-block: var(--margin-2xs);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  /* Facets - Inputs */
  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) var(--padding-xs);
  }

  .facets__inputs .show-more {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    margin-block-end: var(--padding-xl);
  }

  .facets:not(.facets--drawer) .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .facets--horizontal .facets__inputs .show-more {
    @media screen and (min-width: 750px) {
      display: contents;
    }
  }

  .facets--horizontal .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      max-height: var(--facets-horizontal-max-input-wrapper-height);
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: auto;
      padding: var(--padding-md);
      margin-block: 0;
    }
  }

  .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-sm);
    margin-block: calc(var(--padding-sm) * -1);
    margin-inline: calc(var(--padding-sm) * -1);
  }

  @media screen and (max-width: 749px) {
    .facets__inputs:has(.show-more) .facets__inputs-wrapper {
      padding-block: var(--padding-sm);
      padding-inline: var(--padding-sm);
      margin-block: calc(var(--padding-sm) * -1);
      margin-inline: calc(var(--padding-sm) * -1);
    }
  }

  .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper .facets__inputs-list {
    display: flex;
    gap: var(--facets-mobile-gap);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {
      gap: var(--gap-sm);
    }

    .facets--horizontal
      .facets__inputs-wrapper
      .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {
      display: grid;
      grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches {
    --facets-mobile-gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--grid {
    --min-column-width: 20%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
    gap: var(--gap-sm);

    @media screen and (min-width: 750px) {
      --min-column-width: 50px;
    }
  }

  .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {
    @media screen and (min-width: 750px) {
      width: var(--facets-grid-panel-width);
    }
  }

  .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper--row .facets__inputs-list {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .facets__inputs .show-more__button {
    --show-more-icon-size: 22px;
    --show-more-gap: 8px;

    gap: var(--show-more-gap);

    @media screen and (min-width: 750px) {
      --show-more-icon-size: 16px;
      --show-more-gap: 6px;
    }
  }

  .facets__inputs .show-more__button .icon-plus {
    width: var(--show-more-icon-size);
    height: var(--show-more-icon-size);

    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  /* Facets - Panel */
  .facets__panel {
    padding: 0 var(--theme-drawer-padding);
  }

  .facets:not(.facets--drawer) .facets__panel,
  .facets-controls-wrapper .facets__panel {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets__panel {
    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  .facets-mobile-wrapper .facets__panel-content {
    border-radius: var(--style-border-radius-popover);
  }

  .facets-mobile-wrapper {
    --facets-upper-z-index: var(--layer-raised);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
  }

  .facets--horizontal .facets__panel-content {
    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      position: absolute;
      top: 100%;
      width: max-content;
      min-width: var(--facets-panel-min-width);
      max-width: var(--facets-panel-width);
      max-height: var(--facets-panel-height);
      z-index: var(--facets-upper-z-index);
      box-shadow: var(--shadow-popover);
      border: var(--style-border-popover);
      background-color: var(--color-background);
      overflow-y: hidden;
      gap: 0;
    }
  }

  :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - var(--theme-drawer-padding) * 2);
    border-top: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }

    .facets--horizontal .facets__item:not(:first-of-type)::before,
    .facets--horizontal .sorting-filter::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__item:not(:first-of-type)::before,
    .facets--vertical .sorting-filter::before {
      content: '';
    }
  }

  /* Facets - Text */
  .facets__label,
  .facets__clear-all-link,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link {
    display: none;
    cursor: pointer;
    padding: var(--padding-xs);
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: rgb(var(--color-foreground-rgb) / var(--opacity-80));

    text-decoration: underline;
    text-decoration-color: var(--button-color);
  }

  .facets__clear-all-link--horizontal {
    height: var(--minimum-touch-target);
    padding-inline: var(--facets-form-horizontal-gap);
    min-width: var(--facets-clear-all-min-width);
  }

  .facets__clear-all-link--active {
    display: block;
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  .clear-filter:hover {
    text-decoration: underline;
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 750px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

  .facets__clear--active {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;
    white-space: nowrap;

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  .facets--horizontal .products-count-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: var(--color-foreground);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-xs);
    padding-inline-start: var(--theme-drawer-padding);
    padding-inline-end: var(--padding-2xs);
    z-index: var(--facets-sticky-z-index);
  }

  :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets--drawer .theme-drawer__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  /* Status */
  .facets__status:not(:empty) {
    width: max-content;
    display: flex;
    margin-inline-start: auto;
    font-weight: 500;
    color: var(--color-foreground);
  }

  .facets__panel[open] .facets__status {
    display: none;
  }

  .facets--filters-title {
    margin-block-end: 0;
    color: var(--color-foreground);
    height: fit-content;

    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-inline-start: var(--margin-xs);
      margin-inline-end: var(--margin-xs);
    }
  }

  /* Horizontal filter style */
  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      gap: 0 var(--facets-form-horizontal-gap);
    }
  }

  /* Facets - Actions */
  .facets__drawer-actions {
    --to-top-gradient-background: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / var(--opacity-90)),
      rgb(var(--color-background-rgb) / var(--opacity-80)),
      rgb(var(--color-background-rgb) / var(--opacity-40)),
      transparent
    );

    position: sticky;
    bottom: 0;
    z-index: var(--facets-sticky-z-index);
    order: 1;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
    background-image: var(--to-top-gradient-background);
    background-color: var(--color-background);
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
    color: var(--button-color, inherit);
  }

  .facets__clear-all--active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: transform var(--animation-values), opacity var(--animation-values);
  }

  @starting-style {
    .facets__clear-all--active {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);

    @media screen and (min-width: 990px) {
      display: none;
    }
  }

  .facets-horizontal-remove {
    display: flex;
    align-items: center;
  }

  .facets-horizontal-remove--active::before {
    content: '';
    border-inline-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    height: var(--font-paragraph--size);
    position: absolute;
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-copyright (INDEX:128) */
.footer-utilities__group-copyright {
    color: var(--color-utilities, var(--color-foreground-muted));
  }
/* END_BLOCK:footer-copyright */

/* START_BLOCK:footer-policy-list (INDEX:129) */
.policy-list-trigger {
    anchor-name: --terms-policies-trigger;
    cursor: pointer;
    font-size: var(--font-size, 0.75rem);
    text-transform: var(--text-transform, none);
  }

  .policy_list {
    li {
      border-radius: calc(var(--style-border-radius-popover) - 8px);

      a {
        color: var(--color-foreground);
        display: inline-block;
        padding: 8px;
        text-align: start;
        width: 100%;
        outline-color: #0000;
        font-size: var(--font-size, 0.75rem);
        text-transform: var(--text-transform, none);
      }

      &:is(:hover, :focus-within) {
        background: rgb(var(--color-foreground-rgb) / 0.15);
      }
    }
  }

  .terms-policies-popover {
    position-anchor: --terms-policies-trigger;
    inset: unset;
    bottom: calc(anchor(top) + 1rem);
    left: anchor(left);
    border-radius: var(--style-border-radius-popover);
    background: linear-gradient(var(--color-background) 0 100%),
      linear-gradient(rgb(var(--color-background-rgb) / 0.15) 0 100%);
    background-clip: padding-box, border-box;
    border: 1px solid #0000;
    box-shadow: var(--shadow-popover);
    padding: 8px;
    margin: 0;
    opacity: 0;
    scale: 0.94;
    translate: 0 6px;
    transform-origin: 3.9em 100%;
  }

  .terms-policies-popover.\:popover-open,
  .terms-policies-popover:popover-open {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  @media screen and (max-width: 749px) {
    .terms-policies-popover {
      left: anchor(center);
      transform: translate(-50%, 0);
      transform-origin: 0% 100%;
    }
  }

  @supports not (position-anchor: --account-button-trigger) {
    .terms-policies-popover {
      bottom: unset;
      top: calc(var(--anchor-top) * 1px);
      left: calc(var(--anchor-left) * 1px);
      transform: translate(0, calc(-100% - 1.25rem));
    }

    @media screen and (max-width: 749px) {
      .terms-policies-popover {
        left: calc((var(--anchor-left) + (var(--anchor-width) / 2)) * 1px);
        transform: translate(-50%, calc(-100% - 1.25rem));
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .terms-policies-popover {
      transition-property: display, overlay, opacity, scale, translate;
      transition-behavior: allow-discrete;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
    }

    @starting-style {
      .terms-policies-popover.\:popover-open,
      .terms-policies-popover:popover-open {
        opacity: 0.7;
        translate: 0 6px;
        scale: 0.94;
      }
    }
  }
/* END_BLOCK:footer-policy-list */

/* START_BLOCK:icon (INDEX:131) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:132) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }

  .image-block--height-fill .image-block__image {
    height: 100%;
  }

  .image-block__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }
/* END_BLOCK:image */

/* START_BLOCK:logo (INDEX:134) */
.logo-block {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-block__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-block__image {
    object-fit: contain;
    width: 100%;
  }
/* END_BLOCK:logo */

/* START_BLOCK:menu (INDEX:135) */
.menu {
    width: 100%;
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: var(--spacing--size);
  }

  .menu__item + .menu__item {
    margin-block-start: var(--spacing--size);
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

    .menu--accordion .details-content {
      margin-block-start: var(--spacing--size);
    }

    .menu--accordion .menu__details {
      padding-inline: 0;
    }

    .menu--dividers .menu__details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .menu--dividers .details-content {
      padding-block-end: var(--padding-sm);
    }
  }
/* END_BLOCK:menu */

/* START_BLOCK:page-content (INDEX:136) */
.page-content {
    color: var(--color, inherit);
  }

  .page-content a {
    color: currentcolor;
  }
/* END_BLOCK:page-content */

/* START_BLOCK:page (INDEX:137) */
.page-block {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    align-items: flex-start;
  }

  .page-title {
    margin-bottom: var(--margin-xl);
  }
/* END_BLOCK:page */

/* START_BLOCK:payment-icons (INDEX:138) */
.payment-icons {
    width: 100%;
  }

  .payment-icons__list {
    display: flex;
    align-items: center;
    justify-content: var(--alignment);
    flex-wrap: wrap;
    gap: var(--icon-gap);
    margin: 0;
    padding: 0;
  }

  .payment-icons__item {
    display: flex;
    align-items: center;
  }
/* END_BLOCK:payment-icons */

/* START_BLOCK:popup-link (INDEX:139) */
.popup-link__button svg {
    display: inline-block;
    position: relative;
    top: var(--margin-2xs);
  }

  .popup-link__content {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover);
    background-color: var(--color-background);
    padding: var(--padding-4xl) var(--padding-xl) var(--padding-xl);
    max-width: var(--normal-content-width);
    max-height: var(--modal-max-height);

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
    }
  }

  .popup-link__content[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content--drawer {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
  }

  /* Needed to ensure the drawer is full height */
  .popup-link__content--drawer:modal {
    max-height: 100dvh;
  }

  .popup-link__close {
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    opacity: 0.8;
    animation: none;
  }
/* END_BLOCK:popup-link */

/* START_BLOCK:product-custom-property (INDEX:142) */
product-custom-property-component {
    display: block;
    width: 100%;
  }

  product-custom-property-component .__heading {
    margin-inline: 0;
    margin-block: 0 var(--padding-sm);
  }

  product-custom-property-component .__heading:has(+ .__description) {
    margin-block-end: var(--padding-2xs);
  }

  product-custom-property-component .__description {
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    margin-inline: 0;
    margin-block: 0 var(--padding-md);
  }

  product-custom-property-component .__field {
    position: relative;
  }

  product-custom-property-component .__input-wrapper {
    position: relative;
  }

  product-custom-property-component input,
  product-custom-property-component textarea {
    width: 100%;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* Add padding for inputs with counter inside */
  product-custom-property-component .__input-wrapper input {
    padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component .__input-wrapper textarea {
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component textarea {
    min-height: 80px;
  }

  @supports (resize: vertical) {
    @media (hover: hover) and (pointer: fine) {
      product-custom-property-component textarea {
        resize: vertical; /* stylelint-disable-line */
      }
    }
  }

  product-custom-property-component .__character-label {
    position: absolute;
    left: var(--input-padding-x);
    bottom: var(--padding-sm);
    pointer-events: none;
  }

  product-custom-property-component .__character-count {
    font-style: italic;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* We should consolidate input styles that share the same behavior */
  .custom-property__input {
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    /* this is needed to override the styles from field__input */
    box-shadow: none;

    &:is(:hover, :focus) {
      /* this is needed to override the styles from field__input */
      box-shadow: none;
    }

    &:focus {
      /* this is needed to override the styles from field__input */
      outline: var(--focus-outline-width) solid var(--color-input-background);
    }
  }
/* END_BLOCK:product-custom-property */

/* START_BLOCK:product-inventory (INDEX:144) */
.product-inventory__status {
    display: flex;
    align-items: center;
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    gap: var(--padding-xs);
  }

  .product-inventory__icon,
  .product-inventory__icon svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .product-inventory__icon-low {
    color: var(--color-lowstock);
  }

  .product-inventory__icon-in_stock {
    color: var(--color-instock);
  }

  .product-inventory__icon-out_of_stock {
    color: var(--color-outofstock);
  }

  .product-inventory__icon circle:first-of-type {
    opacity: 0.3;
  }
/* END_BLOCK:product-inventory */

/* START_BLOCK:product-recommendations (INDEX:145) */
.block-resource-list {
    display: flex;
    flex-direction: column;
    row-gap: var(--gap);
    min-width: 0;
    min-height: 0;
    container-type: inline-size;
    container-name: resource-list;
    border-radius: var(--border-radius, 0);
  }

  .product-recommendations-wrapper {
    width: 100%;
  }

  .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) {
    width: 100vw;
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:review (INDEX:148) */
.rating-wrapper {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
    --color: var(--color-foreground);
    --color-rgb: var(--color-foreground-rgb);
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:social-links (INDEX:150) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }

  .social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:social-links */

/* START_BLOCK:spacer (INDEX:151) */
/* Fill opposite direction */
  .layout-panel-flex--column > .spacer-block {
    width: 100%;
  }

  .layout-panel-flex--row > .spacer-block {
    height: 100%;
  }

  /* Flex - Percent */
  :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent {
    flex: var(--spacer-size);
  }

  /* Flex - Pixel */
  .layout-panel-flex--row > .spacer-block--size-pixel {
    width: var(--spacer-size);
  }

  .layout-panel-flex--column > .spacer-block--size-pixel {
    height: var(--spacer-size);
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    /* Percent */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent {
      flex: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-percent,
    .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) {
      width: 100%;
      flex: var(--spacer-size-mobile);
    }

    /* Pixel */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel {
      width: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-pixel,
    .mobile-column > .spacer-block--size-mobile-pixel {
      width: 100%;
      flex: 0 0 auto;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:152) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:video (INDEX:155) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:156) */
accordion-custom {
    details {
      &::details-content,
      .details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        interpolate-size: allow-keywords;
        transition: content-visibility var(--animation-speed-slow) allow-discrete,
          padding-block var(--animation-speed-slow) var(--animation-easing),
          opacity var(--animation-speed-slow) var(--animation-easing),
          block-size var(--animation-speed-slow) var(--animation-easing);
      }

      /* Disable transitions when the content toggle is not caused by the direct user interaction, e.g. opening the filters on mobile. */
      &:not(:focus-within)::details-content,
      &:not(:focus-within) .details-content {
        transition: none;
      }

      &:not([open]) {
        &::details-content,
        .details-content {
          padding-block: 0;
        }
      }

      &[open] {
        &::details-content,
        .details-content {
          opacity: 1;
          block-size: auto;

          @starting-style {
            block-size: 0;
            opacity: 0;
            overflow-y: clip;
          }

          &:focus-within {
            overflow-y: visible;
          }
        }
      }
    }
  }

  accordion-custom[data-disable-on-mobile='true'] summary {
    @media screen and (max-width: 749px) {
      cursor: auto;
    }
  }

  accordion-custom[data-disable-on-desktop='true'] summary {
    @media screen and (min-width: 750px) {
      cursor: auto;
    }
  }
/* END_SNIPPET:accordion-custom-component */

/* START_SNIPPET:accordion-styles (INDEX:157) */
.accordion {
    flex: 1;
    width: 100%;
  }

  .accordion--dividers accordion-custom:not(:first-child) .details {
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* When accordion borders are not set, show fallback borders */
  .accordion--dividers {
    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
    --show-fallback-borders: 0;
  }

  .accordion--dividers:not([class*='color-'])[style*='--border-width: 0'],
  .accordion--dividers:not([class*='color-'])[style*='--border-style: none'] {
    --show-fallback-borders: 1;
  }

  .accordion--dividers accordion-custom:first-child .details {
    border-block-start: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers accordion-custom:last-child .details {
    border-block-end: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers .details-content {
    padding-block-end: var(--padding-sm);
  }

  .accordion--caret .icon-plus,
  .accordion--plus .icon-caret {
    display: none;
  }

  /* because we can't pass apply a specific class on a block based on its parent block setting */
  .accordion .details__header {
    font-family: var(--summary-font-family);
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
  }

  .details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_SNIPPET:accordion-styles */

/* START_SNIPPET:add-to-cart-button-styles (INDEX:158) */
/* Add to cart button */
  .button[id^='BuyButtons-ProductSubmitButton-'] {
    position: relative;
    overflow: hidden;
  }

  .add-to-cart-button {
    --text-speed: 0.26;
    --base-delay: calc(var(--text-speed) * 0.25);
    --tick-speed: 0.1;
    --ring-speed: 0.2;
    --check-speed: 0.2;
    --burst-speed: 0.32;
    --step-delay: 3;
    --speed: 1;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-2xs);
    user-select: none;
    transition-property: color, box-shadow, background-color, scale, translate;
    transition-duration: var(--animation-speed);
    transition-timing-function: var(--ease-out-cubic);

    &:active {
      scale: 0.99;
      translate: 0 1px;
    }
  }

  .add-to-cart-button .svg-wrapper .checkmark-burst {
    width: 30px;
    height: 30px;
  }

  .add-to-cart-text {
    --atc-opacity: 0;
    --atc-destination: -1em;

    display: flex;
    gap: var(--gap-2xs);
    align-items: center;
    justify-content: center;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: forwards;
    transition: width var(--animation-speed) var(--animation-easing),
      opacity var(--animation-speed) var(--animation-easing);
  }

  .add-to-cart__added {
    --atc-opacity: 1;
    --atc-destination: 0px;

    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
  }

  .add-to-cart__added-icon {
    width: 32px;
    height: 32px;
  }

  [data-added='true'] .add-to-cart-text,
  [data-added='true'] .add-to-cart__added {
    animation-name: atc-slide;
  }

  .checkmark-burst {
    opacity: 0;
    overflow: visible;

    .burst {
      rotate: 20deg;
    }

    .check {
      opacity: 0.2;
      scale: 0.8;
      filter: blur(2px);
      transform: translateZ(0);
    }

    :is(.ring, .line, .check, .burst, .tick) {
      transform-box: fill-box;
      transform-origin: center;
    }

    :is(.line) {
      stroke-dasharray: 1.5 1.5;
      stroke-dashoffset: -1.5;
      translate: 0 -180%;
    }

    g {
      transform-origin: center;
      rotate: calc(var(--index) * (360 / 8) * 1deg);
    }
  }

  .add-to-cart-button[data-added='true'] .checkmark-burst {
    opacity: 1;
  }

  .add-to-cart-button[data-added='true'] {
    color: transparent;

    .check {
      opacity: 1;
      scale: 1;
      filter: blur(0);
    }

    .tick {
      scale: 1.75;
    }

    .ring {
      opacity: 0;
      scale: 1;
    }

    .line {
      stroke-dashoffset: 1.5;
    }

    .add-to-cart__added {
      color: var(--button-color);
    }

    .add-to-cart-text {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: circle(0% at 50% 50%);
      filter: blur(2px);
      opacity: 0;
      translate: 0 4px;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .add-to-cart-button[data-added='true'] {
      .check {
        transition-property: opacity, scale, filter;
        transition-duration: calc(calc(var(--check-speed) * 1s));
        transition-delay: calc((var(--base-delay) * 1s));
        transition-timing-function: var(--ease-out-quad);
      }

      .tick {
        transition-property: scale;
        transition-duration: calc((calc(var(--tick-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * (var(--step-delay) * 1.1))) * 1s));
        transition-timing-function: ease-out;
      }

      .ring {
        transition-property: opacity, scale;
        transition-duration: calc((calc(var(--ring-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
        transition-timing-function: var(--ease-out-quad);
      }

      .line {
        transition-property: stroke-dashoffset;
        transition-duration: calc((calc(var(--burst-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
        transition-timing-function: var(--ease-out-cubic);
      }
    }

    .add-to-cart-text {
      transition-property: clip-path, opacity, filter, translate;
      transition-duration: calc((var(--text-speed) * 0.6s)), calc((var(--text-speed) * 1s));
      transition-timing-function: ease-out;
    }
  }

  .add-to-cart-text {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: circle(100% at 50% 50%);
  }

  @keyframes atc-slide {
    to {
      opacity: var(--atc-opacity, 1);
      translate: 0px var(--atc-destination, 0px);
    }
  }
/* END_SNIPPET:add-to-cart-button-styles */

/* START_SNIPPET:background-media (INDEX:160) */
.background-image-container {
    overflow: hidden;
    position: absolute;
    inset: 0;
    opacity: var(--image-opacity);
  }

  .background-image-container img,
  .background-image-container svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .background-image-fit img,
  .background-image-fit svg {
    object-fit: contain;
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:161) */
.bento-box {
    display: grid;
    column-gap: var(--bento-gap);
    row-gap: calc(var(--bento-gap) * 1.5);
    width: 100%;
  }

  .bento-box:has(.collection-card--image-bg) {
    row-gap: var(--bento-gap);
  }

  .bento-box ~ .bento-box {
    padding-block-start: var(--bento-gap);
  }

  @media screen and (max-width: 900px) {
    .bento-box {
      grid-template-columns: repeat(2, 1fr);
    }

    .bento-box__item {
      /* Prevent grid items from overflowing their cells when children have aspect-ratio */
      min-width: 0;
      overflow: hidden;
    }

    .bento-box__item:nth-child(3n + 1) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 2) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 3) {
      grid-column: span 2;
    }

    /* Ensure last items create a full row */
    .bento-box__item:last-child:nth-child(3n + 5) {
      grid-column: span 1;
    }

    .bento-box__item:last-child:nth-child(3n + 4) {
      grid-column: span 2;
    }
  }

  @media screen and (min-width: 901px) {
    .bento-box {
      grid-template-columns: repeat(12, 1fr);
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K L L L L';
    }

    .bento-box__item:nth-child(1) {
      grid-area: A;
    }

    .bento-box__item:nth-child(2) {
      grid-area: B;
    }

    .bento-box__item:nth-child(3) {
      grid-area: C;
    }

    .bento-box__item:nth-child(4) {
      grid-area: D;
    }

    .bento-box__item:nth-child(5) {
      grid-area: E;
    }

    .bento-box__item:nth-child(6) {
      grid-area: F;
    }

    .bento-box__item:nth-child(7) {
      grid-area: G;
    }

    .bento-box__item:nth-child(8) {
      grid-area: H;
    }

    .bento-box__item:nth-child(9) {
      grid-area: I;
    }

    .bento-box__item:nth-child(10) {
      grid-area: J;
    }

    .bento-box__item:nth-child(11) {
      grid-area: K;
    }

    .bento-box__item:nth-child(12) {
      grid-area: L;
    }

    /* === Overrides for specific item counts === */

    /* Exactly 1 item */
    .bento-box--items-1 {
      grid-template-areas: 'A A A A A A A A A A A A';
    }

    /* Exactly 2 items */
    .bento-box--items-2 {
      grid-template-areas: 'A A A A A A B B B B B B';
    }

    /* Exactly 4 items */
    .bento-box--items-4 {
      grid-template-areas:
        'A A A A B B B B B B B B'
        'C C C C C C C C D D D D';
    }

    /* Exactly 5 items */
    .bento-box--items-5 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E E E E';
    }

    /* Exactly 7 items */
    .bento-box--items-7 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D D D D E E E'
        'F F F F F F G G G G G G';
    }

    /* Exactly 8 items */
    .bento-box--items-8 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H H H H H H H';
    }

    /* Exactly 10 items */
    .bento-box--items-10 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G G G G G G G H H H'
        'I I I J J J J J J J J J';
    }

    /* Exactly 11 items */
    .bento-box--items-11 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K K K K K';
    }
  }
/* END_SNIPPET:bento-grid */

/* START_SNIPPET:blog-comment-form (INDEX:162) */
.blog-post-comments__form-container {
    --comment-form-gap: var(--gap-md);

    width: 100%;
    max-width: var(--normal-content-width);
    margin: var(--margin-4xl) auto 0;
  }

  .blog-post-comments__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--comment-form-gap);

    @media screen and (min-width: 750px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .blog-post-comments__form-input {
    padding: var(--padding-lg) var(--padding-xl);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
  }

  .blog-post-comments__form-input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .blog-post-comments__form-message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .blog-post-comments__form-body {
    grid-column: 1 / -1;
  }

  .blog-post-comments__form-input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .blog-post-comments__form-moderated {
    font-size: var(--font-size--xs);
  }

  .blog-post-comments__form-submit {
    margin-block-start: var(--comment-form-gap);
  }
/* END_SNIPPET:blog-comment-form */

/* START_SNIPPET:buy-buttons-styles (INDEX:167) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;

    width: 100%;
  }

  .product-form-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  .product-form-buttons:not(:has(.quantity-rules)) {
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .product-form-buttons
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex: 1 1 var(--buy-button-preferred-width, 0);
    min-width: fit-content;
  }

  .product-form-buttons--stacked
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex-basis: 51%;
  }

  .product-form-buttons button {
    width: 100%;
    padding-block: var(--padding-lg);
  }

  .quantity-selector {
    flex-grow: 0;
    flex-shrink: 0;
    height: var(--height-buy-buttons);
  }

  .quantity-label {
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--sm);
    margin-block-end: var(--gap-xs);
  }

  .quantity-label__cart-count {
    color: var(--color-foreground-secondary);
  }

  .quantity-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    row-gap: calc(var(--gap-xs) / 2);
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--xs);
    color: var(--color-foreground-secondary);
    margin-block-start: var(--gap-xs);
    margin-block-end: var(--gap);
  }

  .product-form-buttons:has(~ .volume-pricing .volume-pricing__title) .quantity-rules {
    margin-block-end: var(--gap-md);
  }

  .quantity-rules__item {
    position: relative;
    display: inline-block;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .quantity-rules__item:not(:last-child) {
    padding-right: var(--padding-xl);
    margin-right: var(--margin-2xs);
  }

  .quantity-rules__item:not(:last-child)::after {
    content: '•';
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5em;
    line-height: 0;
  }

  .add-to-cart-button {
    height: var(--height-buy-buttons);
    text-transform: var(--button-text-case-primary);
  }

  .add-to-cart-button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  shopify-accelerated-checkout {
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
  }

  .product-form-buttons:has(.add-to-cart-button.button-secondary) shopify-accelerated-checkout {
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-secondary);
    --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
  }

  .product-form-text__error {
    display: flex;
    flex: 1 0 100%;
    align-items: flex-start;
    gap: var(--gap-xs);
    margin-block-end: var(--gap-xs);
  }

  .product__pickup-availabilities {
    width: 100%;
    color: var(--color, var(--color-foreground));
  }

  .pickup-availability__column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .pickup-availability__row {
    display: flex;
    gap: var(--padding-xs);
  }

  .pickup-availability__dialog-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .pickup-availability__header-container {
    padding-block-end: var(--padding-2xl);
  }

  .pickup-location__wrapper {
    display: flex;
    flex-direction: column;
    padding-block: var(--padding-2xl);
    padding-inline: var(--theme-drawer-padding);
    border-top: 1px solid var(--color-border);
    gap: var(--padding-xs);
  }

  .pickup-location__address-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
  }

  .pickup-location__text-sm {
    font-size: var(--font-size--sm);
    margin: 0;
  }

  .pickup-location__text-xs {
    font-size: var(--font-size--xs);
    margin: 0;
  }

  .pickup-location__button {
    width: fit-content;
    color: var(--color, var(--color-foreground));
    font-size: var(--font-size--xs);
    font-family: var(--font-body--family);
    padding: 0;
    cursor: pointer;
    margin-block: var(--margin-xs);
  }

  .pickup-location__button:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .pickup-location__h4 {
    margin: 0;
  }

  .pickup-location__text-bold {
    font-size: var(--font-size--md);
    font-weight: 600;
    margin: 0;
  }

  .pickup-location__availability-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-family: var(--font-paragraph--family);
  }

  .pickup-location__address {
    font-style: normal;
  }

  .volume-pricing {
    display: block;
    width: 100%;
    margin-bottom: var(--gap);
  }

  .volume-pricing:not(:has(.volume-pricing__title)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .volume-pricing__title {
    display: block;
    margin-block-end: var(--gap-sm);
    font-size: var(--font-size--sm);
    font-weight: var(--font-body--weight);
    color: var(--color-foreground);
  }

  .volume-pricing__table {
    width: 100%;
  }

  .volume-pricing__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-md);
    font-size: var(--font-size--sm);
  }

  .volume-pricing__row--even {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing__row--odd {
    background: var(--color-background);
  }

  .volume-pricing__collapsible-wrapper {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition: opacity var(--animation-speed-slow) var(--animation-easing),
      block-size var(--animation-speed-slow) var(--animation-easing);
  }

  .volume-pricing__toggle {
    width: 100%;
    padding-bottom: 0;
    padding-inline: 0;
    text-align: left;
    color: var(--color-foreground-secondary);
    font-size: var(--font-size--xs);
    cursor: default;
    margin-block-start: 0;
    pointer-events: none;
  }

  button.volume-pricing__toggle {
    /* Need the extra specificity to override .product-form-buttons button */
    padding-block: var(--padding-sm);
  }

  .volume-pricing__toggle-text {
    cursor: pointer;
    display: inline-block;
    pointer-events: auto;
  }

  .volume-pricing__show-less {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__collapsible-wrapper {
    opacity: 1;
    block-size: auto;

    @starting-style {
      block-size: 0;
      opacity: 0;
      overflow-y: clip;
    }
  }

  .volume-pricing--expanded .volume-pricing__show-more {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__show-less {
    display: inline;
  }

  /* Accelerated checkout styles — co-located here so they compile on pages
       where the quick-add modal can display buy buttons (e.g. collection pages). */
  .accelerated-checkout-block[data-shopify-visual-preview] {
    width: 300px;
  }

  more-payment-options-link {
    font-size: smaller;
  }

  more-payment-options-link a:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_SNIPPET:buy-buttons-styles */

/* START_SNIPPET:card-gallery (INDEX:177) */
.card-gallery {
    position: relative;
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  @container (max-width: 70px) {
    .card-gallery:hover .quick-add__button {
      display: none;
    }
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: block;
  }

  .product-card-gallery__title-placeholder .title-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
  }

  .card-gallery[data-image-ratio='landscape'] .product-card-gallery__title-placeholder .title-text {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }

  ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
    display: block;
  }

  [product-grid-view='zoom-out']
    .card-gallery
    > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
    display: none;
  }

  ul[product-grid-view='zoom-out'] .card-gallery > img {
    display: block;
  }

  .card-gallery slideshow-arrows .slideshow-control {
    /* Align icons with quick-add button */
    padding-inline: var(--padding-xl);

    @container (max-width: 249px) {
      padding-inline: 0 var(--padding-sm);
    }
  }

  /*
   * Card galleries preview the next or previous images on 'pointerenter', so we
   * try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .card-gallery
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:card-hover-effect-styles (INDEX:178) */
.product-card:hover,
  .collection-card:hover,
  .predictive-search-results__card:hover {
    z-index: var(--layer-raised);
  }
/* END_SNIPPET:card-hover-effect-styles */

/* START_SNIPPET:cart-bubble (INDEX:179) */
.cart-bubble {
    --cart-padding: 0.2em;

    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    border-width: 0;
    display: flex;
    line-height: normal;
    align-items: center;
    justify-content: center;
    color: var(--cart-bubble-text, var(--cart-bubble-text-fallback));
    padding-inline: var(--cart-padding);
  }

  .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
  }

  .cart-bubble[data-maintain-ratio] .cart-bubble__background {
    border-radius: var(--style-border-radius-50);
  }

  .cart-bubble__background {
    position: absolute;
    inset: 0;
    background-color: var(--cart-bubble-background, var(--cart-bubble-background-fallback));
    border-radius: var(--style-border-radius-lg);
  }

  .cart-bubble__text {
    font-size: var(--font-size--3xs);
    z-index: var(--layer-flat);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:cart-bubble */

/* START_SNIPPET:cart-disclosure-tooltip (INDEX:180) */
.cart-disclosure-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    flex-shrink: 0;
  }

  .cart-disclosure-tooltip__button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    color: var(--color-foreground-secondary);
    line-height: 1;
    transition: color var(--animation-speed) var(--animation-easing);
    cursor: pointer;
  }

  .cart-items__title-row .cart-disclosure-tooltip {
    position: static;
    align-self: flex-start;
    width: 1em;
    height: 1em;
    margin-block-start: calc((1lh - 1em) / 2 + 0.3rem);
    line-height: calc(var(--font-size--md) * var(--font-paragraph--line-height));
  }

  .cart-page .cart-items__title-row .cart-disclosure-tooltip {
    margin-block-start: calc((1lh - 1em) / 2);
  }

  .cart-items__title-row .cart-disclosure-tooltip__button {
    position: relative;
    justify-content: center;
    width: 1em;
    height: 1em;
  }

  .cart-items__title-row .cart-disclosure-tooltip__button::before {
    content: '';
    position: absolute;
    inset-block: calc((1em - var(--minimum-touch-target)) / 2);
    inset-inline-start: 0;
    inset-inline-end: calc(1em - var(--minimum-touch-target));
  }

  .cart-disclosure-tooltip__button:hover {
    color: var(--color-foreground);
  }

  .cart-disclosure-tooltip__button .svg-wrapper,
  .cart-disclosure-tooltip__button .svg-wrapper > svg {
    width: 1em;
    height: 1em;
  }

  .cart-disclosure-tooltip__popover {
    --cart-disclosure-tooltip-popover-max-width: 280px;
    --cart-disclosure-tooltip-popover-spacing: 8px;
    --cart-disclosure-tooltip-popover-offset-block: -4px;
    --cart-disclosure-tooltip-popover-viewport-margin: 16px;
    --cart-disclosure-tooltip-symbol-inset-inline: var(--padding-md);
    --cart-disclosure-tooltip-popover-native-fallback-top: calc(
      anchor(bottom) + var(--cart-disclosure-tooltip-popover-spacing) +
        var(--cart-disclosure-tooltip-popover-offset-block)
    );
    --cart-disclosure-tooltip-popover-fixed-fallback-top: calc(
      (var(--anchor-top) + var(--anchor-height)) * 1px + var(--cart-disclosure-tooltip-popover-spacing) +
        var(--cart-disclosure-tooltip-popover-offset-block)
    );

    inset: unset;
    top: var(--cart-disclosure-tooltip-popover-top, var(--cart-disclosure-tooltip-popover-native-fallback-top));
    left: max(
      var(--cart-disclosure-tooltip-popover-viewport-margin),
      min(
        calc(anchor(left) - var(--cart-disclosure-tooltip-symbol-inset-inline)),
        calc(
          100vw - var(--cart-disclosure-tooltip-popover-max-width) -
            var(--cart-disclosure-tooltip-popover-viewport-margin)
        )
      )
    );
    min-inline-size: 240px;
    max-inline-size: var(--cart-disclosure-tooltip-popover-max-width);
    padding: 0;
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    opacity: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    overflow: hidden;
  }

  @supports not (position-anchor: --cart-disclosure-trigger) {
    .cart-disclosure-tooltip__popover {
      position: fixed;
      top: var(--cart-disclosure-tooltip-popover-fixed-fallback-top);
      left: max(
        var(--cart-disclosure-tooltip-popover-viewport-margin),
        min(
          calc((var(--anchor-left) * 1px) - var(--cart-disclosure-tooltip-symbol-inset-inline)),
          calc(
            100vw - var(--cart-disclosure-tooltip-popover-max-width) -
              var(--cart-disclosure-tooltip-popover-viewport-margin)
          )
        )
      );
    }
  }

  .cart-disclosure-tooltip__popover:popover-open {
    opacity: 1;
    translate: 0 0;
  }

  .cart-disclosure-tooltip__list {
    display: flex;
    flex-direction: column;
  }

  .cart-disclosure-tooltip__row {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
    padding-block: var(--padding-xs);
    padding-inline: var(--cart-disclosure-tooltip-symbol-inset-inline, var(--padding-md)) var(--padding-md);
    font-size: var(--font-size--sm);
    color: var(--color-foreground);
    background: var(--color-background);
    overflow-wrap: break-word;
  }

  .cart-disclosure-tooltip__row:has(> .cart-disclosure-tooltip__symbol) {
    --cart-disclosure-tooltip-symbol-height: 1em;
    --cart-disclosure-tooltip-symbol-slot-width: calc(
      var(--cart-disclosure-tooltip-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1)
    );

    display: grid;
    grid-template-columns: var(--cart-disclosure-tooltip-symbol-slot-width) minmax(0, 1fr);
    min-inline-size: 0;
  }

  .cart-disclosure-tooltip__symbol {
    justify-self: center;
    width: auto;
    max-inline-size: 100%;
    height: var(--cart-disclosure-tooltip-symbol-height, 1em);
    margin: 0;
    object-fit: contain;
    translate: 0 1px;
  }

  .cart-disclosure-tooltip__title {
    min-width: 0;
    margin: 0;
    line-height: var(--line-height--body-tight);
  }

  .cart-disclosure-tooltip__dialog {
    display: contents;
  }

  .cart-disclosure-modal {
    --cart-disclosure-modal-width: 28rem;
    --cart-disclosure-modal-max-height: 72dvh;
    --cart-disclosure-modal-border-radius: min(var(--style-border-radius-popover), 8px);

    position: fixed;
    top: 50%;
    left: 50%;
    width: min(var(--cart-disclosure-modal-width), calc(100vw - (var(--padding-2xl) * 2)));
    max-height: min(var(--cart-disclosure-modal-max-height), calc(100dvh - (var(--padding-2xl) * 2)));
    padding: 0;
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--cart-disclosure-modal-border-radius);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    isolation: isolate;
    translate: -50% -50%;
  }

  .cart-disclosure-modal.dialog-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .cart-disclosure-modal.dialog-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing);
  }

  .cart-disclosure-modal::backdrop {
    backdrop-filter: brightness(0.65) blur(2px);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-60));
  }

  .cart-disclosure-modal__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    max-height: inherit;
    padding: var(--padding-2xl);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .cart-disclosure-modal .cart-disclosure-modal__heading {
    margin: 0;
    padding-inline-end: var(--minimum-touch-target);
    font-size: var(--font-size--2xl);
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
  }

  .cart-disclosure-modal__item {
    --cart-disclosure-modal-symbol-height: 1.5em;
    --cart-disclosure-modal-symbol-slot-width: calc(
      var(--cart-disclosure-modal-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1)
    );
    --cart-disclosure-modal-heading-offset: calc((var(--cart-disclosure-modal-symbol-height) - 1em) / 2);

    display: grid;
    grid-template-columns: var(--cart-disclosure-modal-symbol-slot-width) minmax(0, 1fr);
    align-items: flex-start;
    column-gap: var(--gap-xs);
    row-gap: var(--gap-xs);
    min-width: 0;
    font-size: var(--font-size--md);
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__item:not(:has(> .cart-disclosure-modal__symbol)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .cart-disclosure-modal__symbol {
    justify-self: center;
    width: auto;
    max-inline-size: 100%;
    height: var(--cart-disclosure-modal-symbol-height);
    margin: 0;
    object-fit: contain;
  }

  .cart-disclosure-modal__item-content {
    display: contents;
  }

  .cart-disclosure-modal__item-heading {
    margin: 0;
    font-size: inherit;
    font-weight: 700;
    line-height: 1;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__item:has(> .cart-disclosure-modal__symbol) .cart-disclosure-modal__item-heading {
    grid-column: 2;
    padding-block-start: var(--cart-disclosure-modal-heading-offset);
  }

  .cart-disclosure-modal__body {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--font-size--sm);
    line-height: 1.35;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__body > * {
    margin-block: 0;
  }

  .cart-disclosure-modal__close {
    position: absolute;
    inset-block-start: var(--padding-sm);
    inset-inline-end: var(--padding-sm);
    z-index: var(--layer-raised);
    overflow: visible;
  }

  @media screen and (min-width: 750px) {
    .cart-disclosure-modal__content {
      padding-block: var(--padding-2xl);
      padding-inline: var(--padding-2xl);
    }
  }

  @media screen and (max-width: 749px) {
    .cart-disclosure-modal {
      position: fixed;
      top: auto;
      left: 0;
      inset-block-start: auto;
      inset-block-end: 0;
      inset-inline: 0;
      width: 100%;
      height: fit-content;
      max-width: 100%;
      max-height: 100dvh;
      margin: auto 0 0;
      border-start-start-radius: var(--cart-disclosure-modal-border-radius);
      border-start-end-radius: var(--cart-disclosure-modal-border-radius);
      border-end-start-radius: 0;
      border-end-end-radius: 0;
      overflow: clip;
      translate: 0 0;
    }

    .cart-disclosure-modal__content {
      max-height: min(var(--modal-max-height), 100dvh);
    }
  }
/* END_SNIPPET:cart-disclosure-tooltip */

/* START_SNIPPET:cart-drawer (INDEX:181) */
cart-drawer-component {
    --cart-drawer-padding: var(--theme-drawer-padding);
    --font-paragraph--line-height: 1;
    display: contents;
  }

  .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .cart-drawer__inner > .cart-items-component {
    flex: 1;
    min-height: 0;
    height: auto;
  }

  .cart-drawer__content {
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    overflow-y: auto;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    overflow-y: auto;
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    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;
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer__close-button--empty {
    margin-inline-start: auto;
  }

  .cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-lg);

    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl);
    padding: var(--cart-drawer-summary-padding);
    margin-top: auto;
    background-color: var(--color-background);
    /* stylelint-disable-next-line color-named */
    mask-image: linear-gradient(to bottom, transparent, black var(--cart-drawer-summary-padding));

    @media screen and (min-width: 750px) {
      --cart-drawer-summary-padding: var(--padding-2xl);
    }
  }

  .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow: unset;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
    border-block-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__items {
    padding-inline: 0;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__items {
    padding-inline: 0;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .theme-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:cart-items-component (INDEX:182) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer),
    html:active-view-transition-type(fill-cart-drawer) {
      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }

    html:active-view-transition-type(empty-cart-page) {
      .cart-items-component {
        view-transition-name: cart-page-content;
      }
    }
  }

  ::view-transition-old(cart-page-content) {
    animation: cart-page-content-old var(--animation-speed-fast) var(--animation-easing) forwards;
  }

  @keyframes cart-page-content-old {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      filter: blur(4px);
    }
  }

  ::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;
    }
  }
/* END_SNIPPET:cart-items-component */

/* START_SNIPPET:cart-products (INDEX:183) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

    container-name: cart-items;
    container-type: inline-size;
    width: 100%;
  }

  .cart-items-disabled {
    pointer-events: none;
  }

  .cart-items__wrapper {
    display: flex;
    flex-direction: column;
  }

  .cart-page--empty .cart-items__wrapper {
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-items__wrapper--drawer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .cart-items__table {
    width: 100%;
    border-spacing: 0;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    --cart-item-price-width: 6rem;

    display: grid;
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
    grid-template-areas:
      'media details price'
      'media quantity price'
      'media error error';
    column-gap: var(--gap-md);
    align-items: start;
    padding-bottom: var(--cart-items-gap);
    margin-bottom: var(--margin-lg);
  }

  .cart-items__details {
    grid-area: details;
    min-width: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__product-info {
    min-width: 0;
  }

  /* Cart drawer: separate grid areas for variants and unit price */
  .cart-items__table-row--full-width-variants {
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) auto;
    grid-template-rows: repeat(4, min-content) 1fr;
    grid-template-areas:
      'media details price'
      'media variants variants'
      'media unit_price unit_price'
      'media quantity quantity'
      'media error error';

    .cart-items__details {
      display: contents;
    }

    .cart-items__product-info {
      grid-area: details;
    }

    .cart-items__variants-wrapper {
      grid-area: variants;

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

    .cart-items__unit-price-wrapper {
      grid-area: unit_price;
      font-size: var(--font-size--sm);
    }

    .cart-items__price {
      min-width: auto;
      width: max-content;
    }
  }

  .cart-items__table-row.cart-items__nested-line td:first-child {
    width: 60%;
    justify-self: right;
  }

  html:active-view-transition-type(page-navigation) .cart-items__table-row {
    /* stylelint-disable-next-line declaration-no-important */
    view-transition-name: none !important;
  }

  .cart-items__table-row.removing {
    overflow: hidden;
    animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
    animation-delay: var(--animation-speed);
  }

  @keyframes removeRow {
    0% {
      height: var(--row-height);
    }

    100% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }
  }

  .cart-items__table-row.adding {
    interpolate-size: allow-keywords;
    overflow: hidden;
    animation: addRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
  }

  @keyframes addRow {
    0% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }

    100% {
      opacity: 1;
      height: auto;
    }
  }

  .cart-items__table-row:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin-bottom: var(--cart-items-gap);
  }

  .cart-items--dividers .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row:last-of-type {
    border-block-end: none;
    padding-block-end: 0;
    margin-bottom: 0;
  }

  .cart-items__details > * + *,
  .cart-items__bundle li {
    margin-block-start: var(--margin-3xs);
  }

  .cart-items__details * {
    font-size: var(--font-size--sm);
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__title-row {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    max-width: 100%;
    min-width: 0;
  }

  .cart-items__title {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: 0;
    min-width: 0;
    overflow-wrap: break-word;
  }

  .cart-items__variants {
    display: block;
  }

  .cart-items__variant {
    display: inline;
  }

  .cart-items__variant dt,
  .cart-items__variant dd {
    display: inline;
    margin: 0;
  }

  .cart-items__quantity {
    grid-area: quantity;
    margin-block-start: var(--margin-xs);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls > .volume-pricing-info {
    margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs));
  }

  .cart-items__quantity .quantity-selector {
    display: inline-flex;
    font-size: var(--font-size--sm);
    height: auto;
  }

  .cart-items__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

  .cart-items__media {
    grid-area: media;
    padding: 0;
  }

  .cart-items__price {
    grid-area: price;
    min-height: unset;
    min-width: var(--cart-item-price-width);
    text-align: end;
    display: block;
    font-size: var(--font-size--sm);
    line-height: var(--line-height);
  }

  .cart-items__price-unit {
    font-size: var(--font-size--xs);
    padding-block-start: var(--padding-2xs);
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    margin-inline: auto;
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

  /* Error message */
  .cart-items__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    grid-area: error;
    margin-block-start: var(--margin-xs);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: opacity var(--drawer-animation-speed) var(--animation-easing),
      transform var(--drawer-animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .cart-item__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    font-size: var(--font-size--sm);
    padding-block: var(--padding-2xs);
  }

  .cart-item__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
    margin-block-start: var(--margin-3xs);
  }

  @container cart-items (min-width: 720px) {
    /* Cart page: original layout */
    .cart-items__table-row {
      --cart-item-price-width: 6rem;

      grid-template-columns: 7.5rem 1fr 1fr minmax(var(--cart-item-price-width), auto);
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media details error error';
    }

    .cart-items__quantity,
    .cart-items__price {
      grid-area: initial;
    }

    .cart-items__quantity {
      margin-top: 0;
    }

    .cart-items__price {
      min-height: var(--minimum-touch-target);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    /* Cart drawer: separate areas for variants and unit price */
    .cart-items__table-row--full-width-variants {
      grid-template-rows: min-content min-content min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media variants variants variants'
        'media unit_price unit_price unit_price'
        'media error error error';

      .cart-items__quantity,
      .cart-items__price {
        grid-area: initial;
      }
    }
  }

  .cart__subtotal-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &.cart__total-container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart__subtotal-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

    @media screen and (min-width: 750px) {
      padding-block-start: 0;
    }
  }

  .cart__subtotal-container,
  .cart__subtotal-container * {
    font-size: var(--font-size--sm);
  }

  .cart__total {
    font-weight: var(--font-weight-bold);
  }

  .cart__total-label {
    font-size: var(--font-size--sm);
  }

  .cart__total-value {
    font-size: var(--font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__additional-checkout-buttons {
    width: 100%;
  }

  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-inline-alignment: center;
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
    --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
  }

  /* Remove animation */
  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .cart-items__remove:hover .remove-icon-top {
    transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
  }

  .cart-items__remove:is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  .cart-items__table-row.removing .remove-icon-bottom {
    transform: translateY(0);
  }

  .cart-items__table-row.removing .remove-icon-top {
    animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes removeButtonClickedIconTop {
    50% {
      transform: translate(0, calc(-1 * var(--icon-stroke-width)));
    }

    100% {
      transform: translate(0, 0);
    }
  }

  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__property {
    display: block;
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
    margin: 0;
    overflow-wrap: break-word;
  }

  @media screen and (min-width: 750px) {
    .cart-items .quantity-selector {
      --quantity-selector-width: 105px;
      height: var(--button-size-md);
      width: var(--quantity-selector-width);
    }

    .cart-items .quantity-selector button {
      width: var(--button-size-md);
      height: var(--button-size-md);
    }

    .cart-items .quantity-selector input {
      max-width: calc(var(--quantity-selector-width) - var(--button-size-md) * 2);
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items__empty-button,
      .cart__checkout-button {
        view-transition-name: cart-drawer-primary-action;

        & > .button-text {
          view-transition-name: cart-drawer-primary-action-text;
        }
      }
    }
  }

  ::view-transition-old(cart-drawer-primary-action-text),
  ::view-transition-new(cart-drawer-primary-action-text) {
    height: 100%;
    object-fit: none;
    overflow: clip;
    overflow-clip-margin: 1em;
  }

  ::view-transition-old(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) reverse forwards;
  }
  ::view-transition-new(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) forwards;
  }

  ::view-transition-old(cart-drawer-primary-action),
  ::view-transition-new(cart-drawer-primary-action) {
    height: 100%;
  }

  ::view-transition-group(cart-drawer-primary-action-text),
  ::view-transition-group(cart-drawer-primary-action) {
    animation-duration: var(--spring-d300-b0-duration);
    animation-timing-function: var(--spring-d300-b0-easing);
  }

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:184) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--margin-xl);
  }

  .cart-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-totals__tax-note {
    color: var(--color-foreground-subdued);
  }

  .cart-totals__tax-note a {
    color: var(--color-foreground-subdued);
    text-decoration-line: underline;
    text-decoration-color: currentColor;

    &:hover {
      text-decoration-color: transparent;
    }
  }

  .cart-totals__tax-note small {
    font-size: var(--font-size--2xs);
  }

  .cart-discounts {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .cart-discounts__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discounts__label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart-discounts__label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
  }

  .cart-totals__original-container,
  .cart-totals__container {
    display: flex;
    flex-direction: column;
  }

  .cart-totals__container {
    row-gap: var(--gap-2xs);

    &.cart-totals__container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart-totals__original-container:empty {
    display: none;
  }

  .cart-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart-totals__original-container, .cart-totals__container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

    @media screen and (min-width: 750px) {
      padding-block-start: 0;
    }
  }

  .cart-totals__original-container,
  .cart-totals__original-container * {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total {
    align-items: baseline;
    font-weight: var(--font-weight-bold);
  }

  .cart-totals__total-label {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total-value {
    font-size: var(--cart-font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-totals__installments {
    color: var(--color-foreground);
    font-size: var(--font-size--2xs);
  }

  .cart-note {
    width: 100%;
  }

  @starting-style {
    .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content {
      block-size: auto;
      opacity: 1;
      overflow-y: visible;
    }
  }

  .cart-note__inner {
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-totals__icon {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    margin: 0;
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

  .cart-drawer__summary .cart-totals:not(:has(.cart-totals__original-container:empty)) {
    border-block-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-discount__input {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    border-style: solid;
    border-radius: var(--style-border-radius-inputs);
    padding: var(--padding-sm) var(--padding-md);
    height: 100%;
    flex-grow: 1;
    min-width: 0;
    font-size: var(--font-size--sm);
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--color-foreground);
    gap: var(--padding-xs);
    align-items: center;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    background-color: var(--color-input-background);
    text-transform: uppercase;
  }

  .cart-discount__form {
    display: flex;
    gap: var(--padding-md);
    align-items: center;
    height: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.4;

    color: var(--color-foreground);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-discount__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
  }

  .cart-discount__error-text {
    margin-block-start: var(--margin-3xs);
  }

  .cart-discount__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discount__summary:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .cart-discount__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  @media screen and (min-width: 750px) {
    .cart-summary--extend {
      height: 100%;
    }
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:cart-typography-styles (INDEX:185) */
.cart-primary-typography {
    font-family: var(--cart-primary-font-family);
    font-style: var(--cart-primary-font-style);
    font-weight: var(--cart-primary-font-weight);
  }

  .cart-secondary-typography {
    font-family: var(--cart-secondary-font-family);
    font-style: var(--cart-secondary-font-style);
    font-weight: var(--cart-secondary-font-weight);
  }
/* END_SNIPPET:cart-typography-styles */

/* START_SNIPPET:chat-drawer (INDEX:186) */
/* Pin the chat's mobile/desktop boundary so the theme and the chat agree
     on where standalone mode kicks in. Must stay in sync with the @media
     query below — @shopify/storefront-components reads this value once at
     init and uses it to decide when to force standalone mode. */
  shopify-chat {
    --shopify-chat-breakpoint: 768px;
  }

  shopify-chat[mode='managed'] {
    position: static;
    height: 100%;
  }

  .theme-drawer__dialog:has(shopify-chat[mode='standalone'][open]) {
    z-index: calc(var(--layer-menu-drawer) + 1);
  }

  /* Keep the panel rendered while closed so <shopify-chat>'s position-fixed
     "Ask anything" launcher stays visible. */
  .theme-drawer__dialog.chat-drawer:has(shopify-chat:defined) {
    display: flex;
  }
/* END_SNIPPET:chat-drawer */

/* START_SNIPPET:checkbox-styles (INDEX:187) */
.checkbox {
    --checkbox-path-opacity: 0;
    --checkbox-cursor: pointer;

    position: relative;
    display: flex;
    align-items: center;

    &.checkbox--disabled {
      --checkbox-cursor: not-allowed;
    }
  }

  .checkbox:has(.checkbox__input:checked) {
    --checkbox-path-opacity: 1;
  }

  .checkbox__input {
    position: absolute;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;

    /* Outline is on the SVG instead, to allow it to have border-radius */
    &:focus-visible {
      outline: none;
    }
  }

  .checkbox__label {
    position: relative;
    display: inline-flex;
    cursor: var(--checkbox-cursor);
    line-height: var(--checkbox-size);
    min-width: var(--minimum-touch-target);
  }

  .checkbox .icon-checkmark {
    height: var(--checkbox-size);
    width: var(--checkbox-size);
    flex-shrink: 0;
    border: var(--checkbox-border);
    border-radius: var(--checkbox-border-radius);
    background-color: var(--color-background);
  }

  .checkbox__input:focus-visible + .checkbox__label .icon-checkmark {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: var(--color-foreground);
    border-color: var(--color-foreground);
  }

  .checkbox__input:disabled + .checkbox__label .icon-checkmark {
    background-color: var(--input-disabled-background-color);
    border-color: var(--input-disabled-border-color);
  }

  .checkbox__label-text {
    padding-inline-start: var(--checkbox-label-padding);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .checkbox .icon-checkmark path {
    stroke: var(--color-background);
    opacity: var(--checkbox-path-opacity);
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  .checkbox__input:disabled + .checkbox__label {
    color: var(--input-disabled-text-color);
  }
/* END_SNIPPET:checkbox-styles */

/* START_SNIPPET:collection-card (INDEX:189) */
.collection-card {
    --fixed-card-height: var(--height-small);

    width: 100%;
    position: relative;
    height: 100%;
    flex: 1 1 var(--card-width-small);
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__link {
    position: absolute;
    inset: 0;

    /* allows focus outline to have radius in supported browsers */
    border-radius: var(--border-radius);
  }

  .collection-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: var(--layer-flat);
    pointer-events: none;
    gap: var(--gap);

    a,
    button {
      pointer-events: auto;
    }
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .collection-card__content * {
    pointer-events: auto;
  }

  .collection-card__content {
    --flex-wrap: wrap;

    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    max-width: 100%;
    gap: var(--gap);
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  .collection-card--image-height-fixed {
    height: 100%;
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .resource-image__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  .collection-card--image-bg .collection-card__image {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .collection-card__image svg {
    height: 100%;
    width: 100%;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    .collection-card__image {
      aspect-ratio: 99;
      height: 100%;
    }

    .collection-card__inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .collection-card__content {
      flex-shrink: 0;
    }

    &:not(.collection-card--image-bg) .collection-card__content {
      height: auto;
    }

    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:collection-wrapper-styles (INDEX:190) */
/* ------------------------------------------------------------------------------ */

  /* Collection Wrapper - Shared layout CSS for collection and search pages */

  /* ------------------------------------------------------------------------------ */

  .collection-wrapper {
    @media screen and (min-width: 750px) {
      --facets-vertical-col-width: 6;

      grid-template-columns:
        1fr repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        1fr;
    }

    @media screen and (min-width: 990px) {
      --facets-vertical-col-width: 5;
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--full-width),
  .collection-wrapper:has(.collection-wrapper--full-width) {
    @media screen and (min-width: 750px) {
      grid-column: 1 / -1;
      grid-template-columns:
        minmax(var(--page-margin), 1fr) repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        minmax(var(--page-margin), 1fr);
    }
  }

  .collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .main-collection-grid {
    @media screen and (min-width: 750px) {
      grid-column: var(--facets-vertical-col-width) / var(--full-width-column-number);
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--vertical:not(#filters-drawer)):has(.collection-wrapper--full-width) {
    @media screen and (min-width: 750px) {
      grid-column: 1 / -1;
      grid-template-columns: 0fr repeat(var(--centered-column-number), minmax(0, 1fr)) 0fr;
    }
  }

  :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
    [product-grid-view='default']
    .product-grid__card {
    @media screen and (max-width: 749px) {
      padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
      padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
    }
  }

  :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
    [product-grid-view='mobile-single']
    .product-grid__card {
    @media screen and (max-width: 749px) {
      padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
      padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
    }
  }

  /* Make product media go edge-to-edge by using negative margins */
  :is(.collection-wrapper--full-width) .card-gallery,
  :is(.collection-wrapper--full-width-on-mobile) .card-gallery {
    @media screen and (max-width: 749px) {
      margin-inline-start: calc(-1 * max(var(--padding-xs), var(--padding-inline-start)));
      margin-inline-end: calc(-1 * max(var(--padding-xs), var(--padding-inline-end)));
    }
  }

  .collection-wrapper--full-width .main-collection-grid__title {
    margin-left: var(--page-margin);
  }

  .collection-wrapper--full-width-on-mobile .main-collection-grid__title {
    @media screen and (max-width: 749px) {
      margin-left: var(--page-margin);
    }
  }

  .collection-wrapper--grid-full-width .facets--vertical:not(.facets--drawer) {
    @media screen and (min-width: 750px) {
      padding-inline-start: max(var(--padding-sm), var(--padding-inline-start));
    }
  }

  .collection-wrapper:has(.product-grid-mobile--large) .facets-mobile-wrapper.facets-controls-wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .collection-wrapper:has(> .facets--horizontal) .facets__panel[open] {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-open-z-index);
    }
  }
/* END_SNIPPET:collection-wrapper-styles */

/* START_SNIPPET:deferred-media-product-model-styles (INDEX:193) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

  .product-media__image {
    object-position: var(--focal-point, center center);
  }

  /*** Media border-radius feature ****/
  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-container,
    .media-gallery--grid .product-media > * {
      border-radius: var(--media-radius, 0);
      overflow: hidden;
    }

    /* When the CAROUSEL is on the LEFT side */
    .product-information:not(.product-information--media-right)
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    /* When the CAROUSEL is on the RIGHT side */
    .product-information.product-information--media-right
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* When the GRID is on the LEFT side */
    .product-information:not(.product-information--media-right) {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(odd)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media
        > * {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    /* When the GRID is on the RIGHT side */
    .product-information.product-information--media-right {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(even)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(odd))
        .product-media
        > * {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }

  .product-media product-model {
    position: absolute;
  }

  .product-media-container--model {
    /* Usefull when view in your space is shown */
    flex-direction: column;
  }

  .shopify-model-viewer-ui__controls-area {
    bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
  }

  /* If the product media is already providing an image cover, hide images provided by sibling product-model */
  .product-media__image ~ product-model .deferred-media__poster-image {
    display: none;
  }

  /* If the product model is playing, hide the preview image */
  .product-media-container:has(product-model .deferred-media__playing) .product-media__image {
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  product-model {
    /* Height needed to make sure when it's set to be stretched, it takes the full height */
    height: 100%;
    width: 100%;
    position: relative;
  }

  /* Media that have a poster button sibling providing the size should be absolute-positioned.
  Otherwise, it should be a block to rely on its own size */
  product-model model-viewer,
  product-model > .deferred-media__poster-button ~ *:not(template) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* Required to make sure the absolute position respects the padding of the wrapper: */
    padding: inherit;
  }

  product-model > .deferred-media__poster-button {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--video-aspect-ratio, auto);
  }

  product-model > .deferred-media__poster-button.deferred-media__playing {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .button-shopify-xr {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-md);
  }

  .button-shopify-xr > svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    margin-inline-end: var(--margin-md);
  }

  .button-shopify-xr[data-shopify-xr-hidden] {
    display: none;
  }

  product-model .deferred-media__poster-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  product-model .deferred-media__poster-icon svg {
    width: var(--button-size);
    height: var(--button-size);
    color: var(--color-white);
    filter: drop-shadow(var(--shadow-button));

    &:hover {
      color: rgb(var(--color-white-rgb) / var(--opacity-80));
    }

    @media screen and (min-width: 750px) {
      width: 4rem;
      height: 4rem;
    }
  }
/* END_SNIPPET:deferred-media-product-model-styles */

/* START_SNIPPET:deferred-media-video-styles (INDEX:194) */
.product-media deferred-media {
    position: absolute;
  }

  /* If the product media is already providing an image cover, hide images provided by sibling deferred-media */
  .product-media__image ~ deferred-media .deferred-media__poster-image {
    display: none;
  }

  /* If the product media video is playing, hide the preview image */
  .product-media-container:has(deferred-media .deferred-media__playing) .product-media__image {
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  deferred-media {
    /* Height needed to make sure when it's set to be stretched, it takes the full height */
    height: 100%;
    width: 100%;
    position: relative;

    /* The overflow hidden in the deferred-media won't let the button show the focus ring */
    &:has(:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }

    @supports not selector(:focus-visible) {
      &:has(:focus) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: var(--focus-outline-offset);
      }
    }
  }

  /* Media that have a poster button sibling providing the size should be absolute-positioned.
  Otherwise, it should be a block to rely on its own size */
  deferred-media > .deferred-media__poster-button ~ *:not(template) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* Required to make sure the absolute position respects the padding of the wrapper: */
    padding: inherit;
  }

  deferred-media.border-style {
    /* Apply the border radius to the video */
    overflow: hidden;
  }

  deferred-media > .deferred-media__poster-button {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--video-aspect-ratio, auto);
  }

  deferred-media > .deferred-media__poster-button.deferred-media__playing {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  deferred-media img {
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
  }

  deferred-media iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    aspect-ratio: var(--size-style-aspect-ratio, auto);
  }

  deferred-media[data-media-loaded] img {
    opacity: 0;
  }

  deferred-media .deferred-media__poster-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  deferred-media .deferred-media__poster-icon svg {
    width: var(--button-size);
    height: var(--button-size);
    color: var(--color-white);
    filter: drop-shadow(var(--shadow-button));

    &:hover {
      color: rgb(var(--color-white-rgb) / var(--opacity-80));
    }

    @media screen and (min-width: 750px) {
      width: 4rem;
      height: 4rem;
    }
  }

  deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    /* only apply this on the video block not product media */
    object-fit: cover;
    height: 100%;
    aspect-ratio: var(--size-style-aspect-ratio, auto);
  }

  .video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:deferred-media-video-styles */

/* START_SNIPPET:dialog-styles (INDEX:195) */
.dialog-modal {
    border: none;
    box-shadow: var(--shadow-popover);

    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      max-width: var(--normal-content-width);
    }

    @media screen and (max-width: 749px) {
      max-width: 100%;
      max-height: 100%;
      height: 100dvh;
      width: 100dvw;
      padding: var(--padding-md);
    }
  }

  .dialog-modal::backdrop {
    transition: backdrop-filter var(--animation-speed) var(--animation-easing);
    backdrop-filter: brightness(1);
    background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
  }

  :where(.dialog-modal)[open] {
    animation: elementSlideInTop var(--animation-speed) var(--animation-easing) forwards;

    &::backdrop {
      animation: backdropFilter var(--animation-speed) var(--animation-easing) forwards;
      transition: opacity var(--animation-speed) var(--animation-easing);
    }
  }

  :where(.dialog-modal).dialog-closing {
    animation: elementSlideOutTop var(--animation-speed) var(--animation-easing) forwards;

    &::backdrop {
      opacity: 0;
    }
  }

  /* stylelint-disable value-keyword-case */
  .dialog-drawer {
    --dialog-drawer-opening-animation: move-and-fade;
    --dialog-drawer-closing-animation: move-and-fade;
  }
  /* stylelint-enable value-keyword-case */

  .dialog-drawer[open] {
    --start-x: var(--custom-transform-from, 100%);
    --end-x: var(--custom-transform-to, 0px);
    --start-opacity: 1;

    animation: var(--dialog-drawer-opening-animation) var(--animation-speed) var(--animation-easing) forwards;
  }

  .dialog-drawer[open].dialog-closing {
    --start-x: 0px;
    --end-x: 100%;
    --start-opacity: 1;
    --end-opacity: 1;

    animation: var(--dialog-drawer-closing-animation) var(--animation-speed) var(--animation-easing);
  }
/* END_SNIPPET:dialog-styles */

/* START_SNIPPET:divider (INDEX:196) */
.divider {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: var(--divider-justify-content);
  }

  .divider__line {
    border-bottom: var(--divider-border-thickness) solid var(--color-border);
    border-right: var(--divider-border-thickness) solid var(--color-border);
    border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
    flex-basis: var(--divider-flex-basis);
    min-height: var(--divider-flex-basis);
  }
/* END_SNIPPET:divider */

/* START_SNIPPET:editorial-blog-grid (INDEX:197) */
.editorial-blog__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .shopify-block {
      height: 100%;
    }
  }

  .editorial-blog__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-blog__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-blog__spacer {
      display: none;
    }

    /* Mobile layout - also horizontally mirrored from collection grid */
    .editorial-blog__item-0 {
      width: 66%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-1 {
      width: 83%;
      align-self: flex-start; /* Originally flex-end, now flex-start */
    }

    .editorial-blog__item-2 {
      width: 83%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-3 {
      width: 100%;
      align-self: center; /* Stays centered */
    }
  }
/* END_SNIPPET:editorial-blog-grid */

/* START_SNIPPET:editorial-collection-grid (INDEX:198) */
.editorial-collection__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .resource-list__item,
    .collection-card {
      height: 100%;
    }
  }

  .editorial-collection__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-collection__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-collection__spacer {
      display: none;
    }

    .editorial-collection__item-0 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 4 / 5;
    }

    .editorial-collection__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 5 / 5;
    }

    .editorial-collection__item-2 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 8 / 6;
    }

    .editorial-collection__item-3 {
      width: 100%;
      align-self: center;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-collection-grid */

/* START_SNIPPET:editorial-product-grid (INDEX:199) */
.editorial-product__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    /* Make the aspect ratio super high on width, then increase the height of
     * slideshow containers until they fill all the available space */
    .card-gallery {
      /* stylelint-disable-next-line declaration-no-important */
      --gallery-aspect-ratio: 99 !important;
    }

    .card-gallery,
    slideshow-component,
    slideshow-container,
    slideshow-slides,
    .product-media__image {
      height: 100%;
    }

    /* Single-media cards skip the slideshow wrappers, so stretch the plain
     * media container directly to fill the editorial cell. The multi-media
     * container sits under slideshow-component and is unaffected. */
    .card-gallery > a > .product-media-container {
      height: 100%;
    }
  }

  .editorial-product__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-product__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-product__spacer {
      display: none;
    }

    .editorial-product__item-0 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 7 / 6;
    }

    .editorial-product__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 4 / 5;
    }

    .editorial-product__item-2 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 5 / 5;
    }

    .editorial-product__item-3 {
      width: 100%;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-product-grid */

/* START_SNIPPET:filter-remove-buttons (INDEX:200) */
/* Facets - Remove buttons */
  .facets-remove {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;

    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    padding: 0 var(--drawer-padding);
    margin: 0;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 16px;
      --variant-picker-swatch-height: 16px;

      gap: var(--gap-2xs);
    }
  }

  .facets-remove:has(facet-remove-component) {
    display: flex;
    margin-block-start: var(--margin-2xs);
    margin-block-end: var(--margin-md);
  }

  .facets:not(.facets--drawer) .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-remove__pill {
    .svg-wrapper,
    .swatch {
      flex-shrink: 0;
    }
  }

  .facets--horizontal .facets-remove {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:filter-remove-buttons */

/* START_SNIPPET:fly-to-cart-styles (INDEX:201) */
/* Fly to cart animation */
  fly-to-cart {
    --offset-y: 10px;

    position: fixed;
    width: var(--width, 40px);
    height: var(--height, 40px);
    left: 0;
    top: 0;
    z-index: calc(infinity);
    pointer-events: none;
    border-radius: var(--style-border-radius-buttons-primary);
    overflow: hidden;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    opacity: 0;
    background-color: var(--color-foreground);
    translate: var(--start-x, 0) var(--start-y, 0);
    transform: translate(-50%, -50%);
    animation-name: travel-x, travel-y, travel-scale;
    animation-timing-function: var(--x-timing), var(--y-timing), var(--scale-timing);
    animation-duration: 0.6s;
    animation-composition: accumulate;
    animation-fill-mode: both;
  }

  fly-to-cart.fly-to-cart--main {
    --x-timing: cubic-bezier(0.7, -5, 0.98, 0.5);
    --y-timing: cubic-bezier(0.15, 0.57, 0.9, 1.05);
    --scale-timing: cubic-bezier(0.85, 0.05, 0.96, 1);
  }

  fly-to-cart.fly-to-cart--quick {
    --x-timing: cubic-bezier(0, -0.1, 1, 0.32);
    --y-timing: cubic-bezier(0, 0.92, 0.92, 1.04);
    --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98);

    animation-duration: 0.6s;
  }

  fly-to-cart.fly-to-cart--sticky {
    --x-timing: cubic-bezier(0.98, -0.8, 0.92, 0.5);
    --y-timing: cubic-bezier(0.14, 0.56, 0.92, 1.04);
    --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98);
    --radius: var(--style-border-radius-buttons-primary);

    @media screen and (max-width: 749px) {
      --x-timing: cubic-bezier(0.98, -0.1, 0.92, 0.5);
    }

    animation-duration: 0.8s;
  }

  @keyframes travel-scale {
    0% {
      opacity: var(--start-opacity, 1);
    }

    5% {
      opacity: 1;
    }

    100% {
      border-radius: 50%;
      opacity: 1;
      transform: translate(-50%, calc(-50% + var(--offset-y))) scale(0.25);
    }
  }

  @keyframes travel-x {
    to {
      translate: var(--travel-x, 0) 0;
    }
  }

  @keyframes travel-y {
    to {
      translate: 0 var(--travel-y, 0);
    }
  }
/* END_SNIPPET:fly-to-cart-styles */

/* START_SNIPPET:gift-card-recipient-form-styles (INDEX:206) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    color: var(--color, var(--color-foreground));
    padding-bottom: var(--padding-2xl);
  }

  .recipient-form__send-to {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .gift-card-form-option {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    padding: 0;
    border: none;
  }

  .gift-card-form-option__button-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-width: auto;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .gift-card-form-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    background-color: var(--color-selected-variant-background);
    border-color: var(--color-selected-variant-border);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-selected-variant-hover-background);
      border-color: var(--color-selected-variant-hover-border);
      color: var(--color-selected-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .recipient-fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    transition: opacity 0.3s var(--animation-easing);
    padding-block-start: var(--padding-xl);
  }

  .recipient-fields[hidden] {
    display: none;
  }

  .field--send-on {
    display: flex;
    flex-direction: column;
  }

  .recipient-form__message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--margin-sm);
  }

  .recipient-form-field-label {
    position: absolute;
    left: var(--padding-sm);
    bottom: var(--padding-sm);
    font-style: italic;
    color: var(--color-input-text);
  }

  .recipient-fields__textarea {
    min-height: 5.5rem;
    overflow-y: auto;

    /* Space for the character count */
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  .recipient-fields__input {
    flex-grow: 1;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form-styles */

/* START_SNIPPET:grid-density-controls (INDEX:208) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

    @media screen and (min-width: 750px) {
      gap: var(--gap-2xs);
    }
  }

  .column-options__option {
    display: none;
    position: relative;
  }

  .column-options__option:has(.column-picker-mobile--single),
  .column-options__option:has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--default),
  .column-options__option:has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Override base rule for grid density controls - only when visible */
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker-mobile--single),
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker--default),
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .column-picker {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-50));
    padding: var(--padding-2xs);
    border-radius: var(--style-border-radius-xs);
    transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
  }

  .column-options__option:hover .column-picker {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .column-options__option-input:checked ~ .column-picker {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:209) */
.group-block__link {
    position: absolute;
    inset: 0;
  }

  .group-block__link ~ :is(.group-block-content, .group-block__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  /* Needs the .group-block__link ~ to be specific enough to take effect. */
  .group-block__link ~ .group-block-content--design-mode {
    pointer-events: auto;
  }
/* END_SNIPPET:group */

/* START_SNIPPET:header-actions (INDEX:210) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

    &[data-sticky-state='active'] {
      --account-offset-top: calc(var(--header-height) - 1px);
    }
  }

  .account-button {
    /* Remove the background color from the color scheme, we want to inherit the color of the header */
    background: transparent;
  }

  .account-button__icon,
  .account-button__text {
    color: var(--color-account-icon);
    transition: color var(--header-content-transition-timing);
    -webkit-font-smoothing: antialiased;
  }

  shopify-account {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-input: var(--style-border-radius-buttons-primary);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent: var(--color-primary-button-background);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

    &:not(:defined) {
      min-width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Match the line height of the other buttons */
      line-height: normal;
    }
  }

  .account-button__fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shopify-account-color-accent, #0a142f);
  }

  .account-button--text shopify-account {
    color: inherit;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  header-actions {
    display: flex;

    @media screen and (max-width: 749px) {
      justify-self: flex-end;
    }
  }

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }

    .header-actions__text-style {
      font-size: var(--header-actions-font-size);
      font-family: var(--header-actions-font-family);
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-actions__cart-icon {
    --cart-bubble-size: 20px;
    --cart-bubble-top: 4.5px;
    --cart-bubble-right: 2.5px;

    position: relative;
  }

  .header-actions__cart-icon .cart-bubble {
    position: absolute;
    width: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }
  }

  .header-actions__cart-icon .cart-bubble__text {
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
  }

  .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    /* Create donut mask where the cart bubble sits */
    mask: radial-gradient(
      calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
      transparent 45.45%,
      #fff 45.45%,
      #fff 100%
    );
  }

  .cart-bubble.cart-bubble--animating .cart-bubble__background {
    animation: grow var(--animation-speed) var(--animation-easing);
  }

  .cart-bubble--animating .cart-bubble__text {
    --start-y: -1em;
    --start-opacity: 1;
    /* Set initial transform state before animation starts */
    transform: translate(0, var(--start-y, -1em));
    opacity: var(--start-opacity, 1);
    animation: move-and-fade var(--animation-speed) var(--animation-easing);
  }

  cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
      --cart-bubble-top: 4px;
      --cart-bubble-right: 4px;
    }
  }

  @media screen and (min-width: 750px) {
    cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
      --cart-bubble-right: 2.5px;
    }
  }

  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:211) */
.icon-caret--forward svg {
    transform: rotate(-90deg);
  }

  .icon-caret--backward svg {
    transform: rotate(90deg);
  }

  .header__icon--menu {
    position: initial;
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details.menu-open .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }
  }

  /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow  */
  .menu-drawer.menu-drawer--has-submenu-opened {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-overlay);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Submenu header with a centered, clickable title flanked by the back and
     close controls. */
  .menu-drawer__nav-buttons--with-title {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .menu-drawer__title {
    justify-self: center;
    min-width: 0;
    padding: var(--padding-md) var(--padding-sm);
    color: var(--color-foreground);
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

    @media screen and (min-width: 750px) {
      margin-block-end: var(--margin-lg);
    }
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

    &:hover {
      color: var(--menu-top-level-font-color);
    }
  }

  .menu-drawer__menu-item--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-font-color);
    }
  }

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

    &:hover {
      color: var(--menu-child-font-color);
    }
  }

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  /* Match the menu links' focus style: a rectangular outline in the current color.
     These buttons sit flush against the drawer edges, so inset the outline to keep
     it from being clipped. */
  .menu-drawer__close-button.menu-drawer__close-button,
  .menu-drawer__back-button.menu-drawer__back-button {
    border-radius: 0;
    outline-offset: calc(var(--padding-2xs) * -1);
  }

  /* Safari < 16.4 draws the close focus ring via a pseudo-element; keep it
     rectangular there too. */
  .menu-drawer__close-button:focus-visible::after {
    border-radius: 0;
  }

  .menu-drawer__nav-buttons--with-title .menu-drawer__back-button {
    width: fit-content;
    padding: var(--padding-lg);
    justify-self: start;
  }

  .menu-drawer__nav-buttons--with-title .menu-drawer__close-button {
    justify-self: end;
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }

  /* Drawer Localization Styles */
  .drawer-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .drawer-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

    &:hover {
      color: var(--color-foreground);
    }
  }

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
    right: 20px;
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:217) */
.jumbo-text__container {
    width: 100%;
  }

  footer .jumbo-text__container {
    pointer-events: none;
  }

  jumbo-text {
    display: block;
    font-family: var(--font-family, inherit);
    font-style: var(--font-style, normal);
    color: var(--color, inherit);
    font-weight: var(--font-weight, inherit);
    letter-spacing: var(--letter-spacing, -0.02em);
    line-height: var(--line-height, 1);
    opacity: 0;
    visibility: hidden;
    text-align: var(--text-align);
    text-box: var(--text-trim, trim-end cap text);
    text-transform: var(--text-transform, none);
    transition: opacity 0.3s ease;
    width: 100%;
    margin-left: var(--margin-left-nudge, 0);
    margin-right: var(--margin-right-nudge, 0);
    overflow: visible;
  }

  jumbo-text.ready {
    opacity: 1;
    visibility: visible;
  }

  jumbo-text[data-cap-text='true'] {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    text-box-edge: cap text;
  }

  .jumbo-text-line {
    display: inline-flex;
    white-space: pre;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Blur effect */
    .ready[data-text-effect='blur'] {
      filter: blur(20px);
      opacity: 0.5;
      scale: 1.05;
      transition: filter 1.6s var(--animation-timing-fade-in), opacity 1.3s var(--animation-timing-fade-in),
        scale 1.6s var(--animation-timing-fade-in);
    }

    .jumbo-text-visible[data-text-effect='blur'] {
      filter: blur(0);
      opacity: 1;
      scale: 1;
    }

    /* Reveal effect */
    .ready[data-text-effect='reveal'] {
      overflow: hidden;
    }

    .ready[data-text-effect='reveal'] .jumbo-text-line {
      transform: translateY(100%);
    }

    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line {
      transition: transform 0.5s var(--animation-timing-fade-in) calc(var(--line-index) * 0.05s);
      transform: translateY(0);
    }

    .jumbo-text-visible[data-text-effect='reveal'] {
      overflow: visible;
      transition: overflow 0s linear 0.75s;
    }
  }
/* END_SNIPPET:jumbo-text */

/* START_SNIPPET:list-filter (INDEX:220) */
.facets__bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--variant-picker-swatch-height) / 1.5);
    min-width: 20px;
    padding: 0 6px;
    border-radius: 20px;
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--xs);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .facets__bubble svg {
    width: 12px;
    height: 12px;
  }

  .show-more__button {
    color: var(--color-foreground);
    cursor: pointer;
  }

  .show-more__button:hover {
    @media screen and (min-width: 750px) {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
    }
  }

  .show-more__label {
    text-align: start;
    font-size: var(--font-size--body-md);
    font-family: var(--font-paragraph--family);
  }

  .show-more__button .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .show-more[data-expanded='true'] .show-more__label--more,
  .show-more[data-expanded='false'] .show-more__label--less {
    display: none;
  }

  .show-more__button .icon-plus :is(.horizontal, .vertical) {
    transition: transform var(--animation-speed) var(--animation-easing);
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    opacity: 1;
  }

  .show-more:where([data-expanded='true']) .show-more__button .icon-plus .horizontal {
    transform: rotate(90deg);
  }

  .show-more:where([data-expanded='true']) .show-more__button .icon-plus .vertical {
    transform: rotate(90deg);
    opacity: 0;
  }

  .facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Hover state for checked checkboxes - targeting via adjacent sibling */
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: var(--color-foreground-subdued);
  }

  .facets .checkbox:not(.checkbox--disabled) .checkbox__label-text {
    color: var(--color-foreground-subdued);
  }
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: var(--color-foreground-rgb);
  }

  .facets .checkbox .checkbox__label-text {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-border-width: var(--variant-picker-button-border-width);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(--pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input:not(:checked) + .facets__pill-label:hover {
    --pill-label-color-rgb: var(--color-foreground-rgb);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color-rgb: var(--color-background-rgb);
      --pill-label-background-color-rgb: var(--color-foreground-rgb);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      &:hover {
        --pill-label-border-opacity: var(--facets-low-opacity);
      }
    }
  }

  .facets__status-wrapper {
    display: flex;
    align-items: center;
  }

  .facets--drawer .facets__status-wrapper {
    @media screen and (max-width: 749px) {
      gap: var(--gap-3xs);
    }
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  .facets__pill-input:disabled + .facets__pill-label svg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--style-border-radius-md);
  }

  .facets__pill-label svg line {
    stroke-width: 1.5px;
    stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
  }

  .facets__pill-wrapper {
    position: relative;
  }

  .facets__pill-input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .facets--horizontal .sorting-filter .facets__status {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

    @media screen and (min-width: 750px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .facets__image-label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .facets__image-label:hover {
    font-weight: 500;
  }

  /* Filter-specific variant-option styles */
  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
    --focus-outline: var(--focus-outline-width) solid currentcolor;

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;
  }

  .facets__inputs-list-item--disabled .variant-option--swatches {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
  }

  .facets__inputs-list--swatches-grid .facets__inputs-list-item--disabled label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item--disabled .variant-option__button-label {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper
    .facets__inputs-list--swatches-grid
    .variant-option__button-label--has-swatch:has(input[type='checkbox']) {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

  .facets .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: auto;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .variant-option__button-label:hover {
    font-weight: 500;
  }

  /* Variant option images (filters) */
  .variant-option--images {
    --image-facet-border-width: var(--variant-picker-button-border-width);
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    position: relative;
    border-radius: var(--image-facet-border-radius);
    box-shadow: inset 0 0 0 var(--image-facet-border-width)
      rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));

    &:hover {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:checked):hover {
      --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

  .variant-option--images input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .variant-option--images {
    --image-facet-border-opacity: 0;

    opacity: var(--disabled-opacity);
    cursor: not-allowed;

    &:hover {
      --image-facet-border-opacity: 0;
    }

    img {
      opacity: var(--disabled-opacity);
    }

    input,
    label,
    .facets__image-label {
      cursor: not-allowed;
    }

    .facets__image-wrapper {
      border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
      border-radius: var(--image-facet-border-radius);
    }
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
  }

  /* Safari < 16.4 outline border-radius workaround - filter-specific */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:221) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-foreground);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-foreground-subdued);

    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 8px;
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &[aria-current='true'] {
      .country {
        font-weight: 500;
      }
    }
  }

  .localization-form__list-item#no-results-message {
    grid-template-columns: 1fr;
    text-align: center;
    color: var(--color-foreground-subdued);
  }

  .is-searching .localization-form__list-item .country {
    color: var(--color-foreground-subdued);
  }

  .localization-form__list-item .country mark {
    font-weight: 500;
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: var(--style-border-width) solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--color-border);
  }

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector--top-shadow::before {
    content: '';
    box-shadow: 0 0 10px var(--color-shadow);
    position: absolute;
    z-index: var(--layer-lowest);
    inset: 0;
    clip-path: inset(-50px 0 0 0); /* stylelint-disable-line */
  }

  .language-selector__label {
    flex-shrink: 0;
    color: var(--color-foreground-subdued);
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;
    field-sizing: content;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

    @media screen and (min-width: 750px) {
      height: 36px;
    }
  }

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:223) */
.media-block {
    overflow: hidden;
    position: relative;

    @media screen and (min-width: 750px) {
      min-height: var(--media-height);
    }
  }

  .media-block__media {
    height: var(--media-height-mobile, auto);
    object-fit: var(--image-position, 'cover');
    object-position: center center;
    width: 100%;

    @media screen and (min-width: 750px) {
      height: 100%;
      position: absolute;
    }
  }

  deferred-media[class].media-block__media
    :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    object-fit: var(--video-position, 'cover');
  }

  /* This is to support corner radius on video and align the video to the center of the block */
  .media-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .media-block__media--video {
    display: flex;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 749px) {
      --media-height-mobile: auto;
    }
  }
/* END_SNIPPET:media */

/* START_SNIPPET:overlay (INDEX:228) */
.overlay {
    position: absolute;
    inset: 0;
    z-index: var(--overlay-layer);
    pointer-events: none;
    border-radius: var(--overlay-border-radius, 0);
  }

  .overlay--solid {
    background: var(--overlay-color);
  }

  .overlay--gradient {
    background: linear-gradient(var(--overlay-direction), var(--overlay-color), var(--overlay-color--end));
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:pagination-controls (INDEX:229) */
.pagination {
    --pagination-size: 36px;
    --pagination-inset: 2px;
    --pagination-radius: 6;

    display: flex;
    justify-content: center;
    padding: var(--padding-xl) var(--padding-sm);
    margin-top: var(--padding-xl);
    position: relative;
    isolation: isolate;
  }

  .pagination__list {
    display: flex;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .pagination__item {
    width: var(--pagination-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }

  .pagination__link {
    display: grid;
    place-items: center;
    color: var(--color-foreground);
    text-decoration: none;
    width: 100%;
    height: 100%;
    user-select: none;
    position: relative;
    outline-color: var(--color-foreground);
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-normal);
    border-radius: calc(var(--pagination-radius) * 1px);
    transition: color var(--hover-transition-duration) var(--hover-transition-timing),
      opacity var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .pagination__link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .pagination__link--current {
    color: var(--color-background);
    font-weight: var(--font-weight-medium);
    cursor: default;
  }

  .pagination__link--gap {
    cursor: default;
    pointer-events: none;
  }

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

  .pagination__link--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__link svg {
    width: 0.5rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  .pagination__item--mobile-only {
    display: none;
  }

  /* Fallback for browsers without anchor positioning support */
  @supports not (anchor-name: --pagination-active) {
    .pagination__link:not(.pagination__link--gap)::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      z-index: -1;
      opacity: 0;
      transition: background var(--hover-transition-duration) var(--hover-transition-timing),
        opacity var(--hover-transition-duration) var(--hover-transition-timing);
    }

    .pagination__link[aria-current='page']::before {
      background: var(--color-foreground);
      opacity: 1;
    }

    .pagination__link:hover:not([aria-current='page'], .pagination__link--gap, .pagination__link--disabled)::before {
      opacity: 1;
    }
  }

  /* Modern approach with anchor positioning */
  @supports (anchor-name: --pagination-active) {
    .pagination__list::before {
      content: '';
      z-index: -1;
      position: absolute;
      width: calc(var(--pagination-size) - (2 * var(--pagination-inset)));
      aspect-ratio: 1;
      pointer-events: none;
      opacity: 0;
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      transition: left var(--hover-transition-duration) var(--hover-transition-timing),
        top var(--hover-transition-duration) var(--hover-transition-timing);
    }

    /* Hide hover indicator on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .pagination__list::before {
        content: unset;
      }
    }

    .pagination__list:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)
      )::before {
      opacity: 1;
    }

    /* Style current page directly */
    .pagination__link[aria-current='page']::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: var(--color-foreground);
      z-index: -1;
    }

    .pagination__list
      .pagination__item:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)
      ) {
      anchor-name: --pagination-hover;
    }

    /* Position hover indicator using anchor */
    .pagination__list::before {
      position-anchor: --pagination-hover;
      left: calc(anchor(left) + var(--pagination-inset));
      top: calc(anchor(top) + var(--pagination-inset));
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after,
    .pagination__item--gap + .pagination__item .pagination__link::after {
      position: absolute;
      content: '';
      pointer-events: auto;
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after {
      inset: 0 -50% 0 100%;
    }

    .pagination__item--gap + .pagination__item .pagination__link::after {
      inset: 0 100% 0 -50%;
    }
  }

  @media screen and (max-width: 749px) {
    .pagination {
      --pagination-size: 44px;
      --pagination-inset: 5px;

      padding: var(--padding-lg) var(--padding-sm);
    }

    .pagination__link {
      font-size: var(--font-size--sm);
    }

    .pagination__item--mobile-hide {
      display: none;
    }

    .pagination__item--mobile-only {
      display: grid;
    }

    .pagination__item:has(.pagination__link--gap) {
      width: calc(var(--pagination-size) * 0.5);
    }
  }
/* END_SNIPPET:pagination-controls */

/* START_SNIPPET:password-layout-styles (INDEX:230) */
.password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .password-dialog {
    max-width: 100vw;
    max-height: 100svh;
    width: 100vw;
    height: 100svh;
    border: none;
    transition: opacity var(--animation-values), display var(--animation-speed) allow-discrete,
      overlay var(--animation-speed) allow-discrete;

    &::backdrop {
      display: none;
    }
  }

  .password-dialog[open] {
    opacity: 1;
    top: 0;
    left: 0;
  }

  @starting-style {
    .password-dialog[open] {
      opacity: 0;
    }
  }

  .password-dialog:not([open]) {
    opacity: 0;
  }

  @starting-style {
    .password-dialog:not([open]) {
      opacity: 1;
    }
  }

  .password-dialog__close-button {
    cursor: pointer;
  }

  .password-dialog__header {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--padding-lg);
    z-index: var(--layer-raised);
  }

  .password-dialog__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
    height: 100%;
    transition: transform var(--animation-values);
  }

  .password-dialog__content .email-signup__message {
    padding-block-start: var(--padding-xl);
  }

  .password-dialog[open] .password-dialog__content {
    transform: translateY(0);
  }

  @starting-style {
    .password-dialog[open] .password-dialog__content {
      transform: translateY(1em);
    }
  }

  .password-dialog:not([open]) .password-dialog__content {
    transform: translateY(1em);
  }

  @starting-style {
    .password-dialog:not([open]) .password-dialog__content {
      transform: translateY(0);
    }
  }

  .storefront-password-form {
    max-width: 400px;
    width: 100%;
  }

  .email-signup__input-group,
  .password-dialog__submit-button {
    width: 100%;

    @media screen and (min-width: 750px) {
      width: auto;
    }
  }
/* END_SNIPPET:password-layout-styles */

/* START_SNIPPET:payment-terms-styles (INDEX:231) */
form.payment-terms {
    padding-top: 0.5em;
    font-size: min(0.85em, var(--font-paragraph--size));
    font-weight: var(--font-paragraph--weight);
    color: var(--color, rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)));
  }

  .installments:not(:has(shopify-payment-terms)) {
    display: none;
  }
/* END_SNIPPET:payment-terms-styles */

/* START_SNIPPET:pills-styles (INDEX:232) */
/* Pills (used in facets and predictive search) */

  .pills__pill {
    --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));

    color: var(--color-foreground);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-sm);
    min-width: 48px;
    padding: 6px 12px;
    border-radius: var(--style-border-radius-pills);
    cursor: pointer;
    background-color: var(--pills-pill-background-color);
    transition: background-color var(--animation-speed) var(--animation-easing);

    &:hover {
      --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    }

    @media screen and (max-width: 749px) {
      padding: var(--padding-xs) var(--padding-md);
    }
  }

  .pills__pill > .svg-wrapper {
    --close-icon-opacity: 0.4;
    --icon-stroke-width: 1px;

    color: var(--color-foreground);
  }

  .pills__pill--swatch {
    @media screen and (max-width: 749px) {
      padding-inline-start: var(--padding-sm);
    }
  }

  .pills__pill--swatch .swatch {
    margin-right: -4px;
  }

  .pills__pill--desktop-small {
    @media screen and (min-width: 750px) {
      font-size: var(--font-size--xs);
    }
  }
/* END_SNIPPET:pills-styles */

/* START_SNIPPET:predictive-search-styles (INDEX:236) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .predictive-search-results__inner {
    flex-grow: 1;
    overflow-y: auto;
    padding-block: var(--padding-lg);
    container-type: inline-size;
    color: var(--color-foreground);
  }

  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;
    text-transform: var(--title-case);

    &:first-of-type {
      margin-block-start: 0;
    }

    @media screen and (max-width: 749px) {
      margin-block: var(--margin-lg) var(--margin-sm);
    }
  }

  .predictive-search-results__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  .predictive-search-results__no-results:last-child {
    margin-block: var(--margin-lg);
    text-align: center;
  }

  /* Predictive search section styles */
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .search-action .predictive-search {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  .search-action .search-modal .predictive-search {
    z-index: var(--layer-window-overlay);
  }

  .header__column--right .predictive-search-form__content-wrapper {
    right: 0;
    left: unset;
  }

  .search-modal .predictive-search-form__content-wrapper {
    width: 100%;

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }
  .dialog-modal .predictive-search-form__header-inner {
    @media screen and (min-width: 750px) {
      border: 0;
    }
  }

  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .predictive-search:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 749px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
    .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: var(--search-border-radius);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
    }
  }

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    border-bottom: var(--style-border-width) solid var(--color-border);

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xs) var(--padding-2xs) 0;
      border-bottom: var(--search-border-width) solid var(--color-border);
    }

    @media screen and (max-width: 749px) {
      transition: box-shadow 0.2s ease;
      box-shadow: none;
    }
  }

  .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    background-color: var(--color-background);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal .predictive-search__close-modal-button {
      padding-inline-start: var(--margin-xs);
      margin-inline-start: 0;
    }
  }

  .dialog-modal[open] {
    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 750px) {
      border-bottom-color: transparent;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal {
      .predictive-search__reset-button-icon {
        display: none;
      }

      .predictive-search__reset-button-text {
        display: block;
      }

      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

      .predictive-search-form__content-wrapper {
        box-shadow: none;
      }

      .predictive-search-form__header {
        box-shadow: none;
      }

      .predictive-search-form__footer {
        padding-block: var(--padding-2xl);
      }
    }
  }

  .predictive-search-results__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: 2px;

    &:hover {
      transform: scale(1.03);
      box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8));
    }
  }

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: var(--color-foreground-subdued);
  }

  .predictive-search-results__pill:focus,
  .predictive-search-results__pill:hover,
  .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));

    background-color: var(--pill-background-color);
    outline: var(--border-width-sm) solid var(--color-border);
    border: var(--border-width-sm);
    text-decoration: none;
  }

  .predictive-search-results__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);

    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
      calc(var(--padding-xl) + var(--button-padding-block) * 2);
    transition: transform var(--animation-speed-medium) var(--animation-timing-default),
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      border-color var(--animation-speed-medium) var(--animation-timing-hover);

    &:nth-last-child(3) {
      scroll-snap-align: end;
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }

    &:hover {
      background-color: var(--card-bg-hover);
      border-radius: var(--product-corner-radius);
      padding: calc(var(--padding-2xs) + 2px);
      margin: calc((var(--padding-2xs) + 2px) * -1);
    }

    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 1px);
      margin: calc((var(--padding-2xs) + 1px) * -1);
      outline: var(--border-width-sm) solid var(--color-border);
      border-radius: calc(var(--product-corner-radius) + 1px);
      border-color: var(--card-border-focus);
    }
  }

  .predictive-search-results__card:not(.predictive-search-results__card--product) {
    padding: var(--padding-sm);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--card-corner-radius);
    width: 60cqi;
    content-visibility: visible;

    @media screen and (min-width: 750px) {
      width: 27.5cqi;
    }

    &:hover {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &[aria-selected='true'].keyboard-focus {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--animation-speed-medium) var(--animation-timing-active);
    }
  }

  @keyframes search-element-scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes search-element-scale-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes search-element-slide-in-top {
    from {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }

    to {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }
  }

  @keyframes search-element-slide-out-top {
    from {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }

    to {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }
  }

  @keyframes content-slide {
    from {
      transform: translateY(var(--slide-from, 0));
      opacity: var(--slide-opacity-from, 1);
    }

    to {
      transform: translateY(var(--slide-to, 0));
      opacity: var(--slide-opacity-to, 1);
    }
  }

  .predictive-search-results__list {
    --slide-width: 27.5%;
    --slideshow-gap: var(--gap-md);

    /* Make space for the outline to be visible */
    padding-block-start: var(--border-width-sm);
  }

  .predictive-search-results__list slideshow-arrows {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .predictive-search-results__no-results,
  .predictive-search-results__wrapper,
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
  }

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results.removing,
  .predictive-search-results__wrapper.removing {
    animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__card.removing {
    animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__wrapper {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  @keyframes search-element-slide-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes search-element-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .predictive-search-results__card--query {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
    }
  }

  /* Products list styles */
  .predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }

  /* Resource carousel styles */
  .predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

    @media screen and (min-width: 750px) {
      padding-block-end: var(--padding-sm);
    }
  }

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */

/* START_SNIPPET:price-filter (INDEX:237) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }
  .price-facet--horizontal {
    min-width: 360px;
  }

  .price-facet__inputs-wrapper {
    display: flex;
    flex-direction: row;
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  @container (max-width: 199px) {
    .price-facet__inputs-wrapper {
      flex-wrap: wrap;
    }
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
  }

  .price-facet__input::placeholder {
    color: var(--facets-input-label-color);
  }

  .price-facet__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-paragraph--size);
  }

  .price-facet__highest-price {
    color: var(--color-foreground-muted);
    padding: var(--padding-xs) 0 var(--padding-sm);
  }

  .price-facet__highest-price--horizontal {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .price-facet__label {
    top: 0;
    left: 0;
    color: var(--facets-input-label-color);
    padding: var(--input-padding-y) var(--input-padding-x);
    transform: none;
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:price-styles (INDEX:238) */
.price,
  .compare-at-price,
  .unit-price {
    white-space: nowrap;
  }

  .unit-price {
    display: block;
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .tax-note.tax-note.tax-note {
    font-size: min(0.85em, var(--font-paragraph--size));
    font-weight: var(--font-paragraph--weight);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .tax-note:empty {
    display: none;
  }

  product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
    margin-block: 0;
  }

  /* Volume pricing note should match unit-price styling (small, grey text) */
  product-price .volume-pricing-note,
  product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) .volume-pricing-note {
    display: block;
    font-family: var(--font-body--family);
    font-weight: normal;
    font-size: var(--font-size--xs);
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .compare-at-price {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    text-decoration-line: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-30));
  }

  .price-item__group {
    display: inline-block;
  }
/* END_SNIPPET:price-styles */

/* START_SNIPPET:product-badges-styles (INDEX:240) */
.product-badges {
    --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));

    position: absolute;
    z-index: var(--layer-flat);
  }

  .product-badges--bottom-left {
    bottom: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-left {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-right {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    right: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges__badge {
    --badge-font-size: var(--font-size--xs);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-foreground);
    background: var(--color-background);
    font-size: var(--badge-font-size);
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
  }

  .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block);
    padding-inline: var(--badge-rectangle-padding-inline);
  }
/* END_SNIPPET:product-badges-styles */

/* START_SNIPPET:product-card-gallery-zoom-details-styles (INDEX:241) */
.product-grid-view-zoom-out--details {
    display: none;
  }

  .product-grid-view-zoom-out--details .h4,
  .product-grid-view-zoom-out--details span,
  .product-grid-view-zoom-out--details s {
    font-size: var(--font-size--xs);
    font-family: var(--font-paragraph--family);
  }

  .product-grid-view-zoom-out--details span {
    font-weight: 500;
  }

  .product-grid-view-zoom-out--details .h4 {
    line-height: 1.3;
    font-weight: 400;
  }

  .product-grid-view-zoom-out--details > span.h6,
  .product-grid-view-zoom-out--details > div.h6 > product-price {
    display: inline-block;
    line-height: 0;
    margin-top: var(--margin-2xs);
  }

  .product-grid-view-zoom-out--details > span.h6 > *,
  .product-grid-view-zoom-out--details > div.h6 > * > * {
    line-height: 1.2;
  }
/* END_SNIPPET:product-card-gallery-zoom-details-styles */

/* START_SNIPPET:product-card-styles (INDEX:242) */
.product-grid__card.product-grid__card {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--product-card-gap);
    align-items: var(--product-card-alignment);
    text-decoration: none;
    color: var(--color, var(--color-foreground));
    padding-block: var(--padding-block-start) var(--padding-block-end);
    padding-inline: var(--padding-inline-start) var(--padding-inline-end);
    overflow: hidden;
  }

  .product-grid__card .group-block > * {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  /* Collection and product list cards have equal heights */
  :is(.product-grid__item, .resource-list__item) .product-card {
    display: grid;
    height: 100%;
  }

  /* Product card title truncation - applied on mobile regardless of view */
  @media screen and (max-width: 749px) {
    :is(.product-card, .product-grid__card) :is(h4, .h4) {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
    }
  }

  .product-card__placeholder-image svg {
    height: 100%;
  }

  .product-card__content slideshow-component {
    --cursor: pointer;
  }

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }
/* END_SNIPPET:product-card-styles */

/* START_SNIPPET:product-grid (INDEX:244) */
/* Product grid */
  .product-grid-container {
    display: block;
    width: 100%;
    padding-block: var(--padding-block-start) var(--padding-block-end);

    @media screen and (min-width: 750px) {
      display: grid;
    }
  }

  [product-grid-view='default'] {
    --product-grid-gap: 16px;
    --padding-block-start: 24px;
    --padding-block-end: 24px;
    --padding-inline-start: 0px;
    --padding-inline-end: 0px;
  }

  .product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--product-grid-gap);
    margin: auto;
    padding: 0;
    list-style: none;
    isolation: isolate;

    @media screen and (min-width: 750px) {
      --product-grid-gap: var(--product-grid-gap-desktop);

      grid-template-columns: var(--product-grid-columns-desktop);
    }
  }

  .product-grid :is(h3, p) {
    margin: 0;
  }

  .product-grid__item {
    border: var(--product-card-border-width) solid rgb(var(--color-border-rgb) / var(--product-card-border-opacity));
  }

  [product-grid-view='default'] .product-grid__item {
    padding-block: 0;
  }

  .product-grid--organic[product-grid-view='default'] .product-grid__item {
    height: fit-content;
  }

  [product-grid-view='zoom-out'] .product-grid__card.product-grid__card {
    row-gap: var(--padding-xs);
  }

  [product-grid-view='mobile-single'],
  .product-grid-mobile--large {
    @media screen and (max-width: 749px) {
      grid-template-columns: 1fr;
    }
  }

  ul[product-grid-view='zoom-out'] .product-grid__card > * {
    display: none;
  }

  [product-grid-view='zoom-out'] {
    --product-grid-columns-desktop: repeat(
      10,
      minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr)
    );
  }

  @media (prefers-reduced-motion: no-preference) {
    :root:active-view-transition-type(product-grid) {
      details[open] floating-panel-component {
        view-transition-name: panel-content;

        .checkbox *,
        .facets__pill-label {
          transition: none;
        }

        .facets--vertical & {
          view-transition-name: none;
        }
      }

      .product-grid {
        view-transition-name: product-grid;
      }

      footer {
        view-transition-name: footer;
      }

      .product-grid__item,
      floating-panel-component {
        transition: none;
      }
    }
  }

  ::view-transition-group(panel-content) {
    z-index: 1;
  }

  ::view-transition-new(product-grid) {
    animation-delay: 150ms;
    animation-name: fadeInUp;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
  }

  results-list[initialized] {
    .product-grid__item {
      transition: opacity var(--animation-speed) var(--animation-easing),
        transform var(--animation-speed) var(--animation-easing);

      @starting-style {
        opacity: 0;
        transform: translateY(10px);
      }
    }
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Product card title truncation - applied only to zoom-out view */
  [product-grid-view='zoom-out'] :is(.product-card, .product-grid__card) :is(h4, .h4) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
  }

  .product-grid slideshow-arrows .slideshow-control {
    display: none;

    @media screen and (min-width: 750px) {
      display: grid;
    }
  }

  /* This triggers iOS < 16.4 */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
    .product-grid .product-media,
    .product-grid .product-media-container {
      aspect-ratio: auto;
    }
  }

  .main-collection-grid {
    grid-column: var(--grid-column--mobile);
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
      padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
    }
  }

  .main-collection-grid__empty {
    padding-block: var(--padding-6xl);
    padding-inline: var(--page-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--padding-sm);
  }

  .main-collection-grid__empty-title {
    margin: 0;
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-information-content (INDEX:245) */
.product-information {
    gap: var(--gap) 0;
  }

  /* Base grid layout */
  .product-information__grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }

  /* Default column positions */
  .product-details {
    order: 1;
  }

  .product-information__media {
    order: 0;
    width: 0;
    min-width: 100%;
  }

  .product-information__media .product-media-gallery__placeholder-image {
    width: 100%;
    height: 100%;
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .product-information__media {
      grid-column: 1 / -1;
    }

    .product-details {
      grid-column: 2 / 3;
    }
  }

  /* Desktop styles */
  @media screen and (min-width: 750px) {
    .product-information__grid {
      grid-column: 2;
    }

    /* Position when there is no media */
    .product-information__grid.product-information--media-none {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    /* Position when there is media */
    .product-information__grid:not(.product-information--media-none) {
      /* Media on the left side */
      &.product-information--media-left {
        grid-template-columns: 1fr min(50vw, var(--sidebar-width));

        .product-information__media {
          padding-right: calc(var(--gap, 0) / 2);
        }

        .product-details {
          padding-left: calc(var(--gap, 0) / 2);
        }

        &:has(.media-gallery--extend) {
          grid-column: 1 / 3;
        }
      }

      /* Media on the right side */
      &.product-information--media-right {
        grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;

        .product-information__media {
          padding-left: calc(var(--gap, 0) / 2);
          order: 1;
        }

        .product-details {
          padding-right: calc(var(--gap, 0) / 2);
          order: 0;
        }

        &:has(.media-gallery--extend) {
          grid-column: 2 / -1;
        }
      }

      /* Equal width columns */
      &.product-information__grid--half,
      &.product-information__grid--half:has(.media-gallery--extend) {
        grid-column: 1 / -1;
        grid-template-columns:
          var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc(
            var(--full-page-grid-central-column-width) / 2
          )
          var(--full-page-grid-margin);

        &.product-information--media-left {
          .product-information__media {
            grid-column: 2 / 3;

            &:has(.media-gallery--extend) {
              grid-column: 1 / 3;
            }
          }

          .product-details {
            grid-column: 3 / 4;
          }
        }

        &.product-information--media-right {
          .product-information__media {
            grid-column: 3 / 4;

            &:has(.media-gallery--extend) {
              grid-column: 3 / -1;
            }
          }

          .product-details {
            grid-column: 2 / 3;
          }
        }
      }
    }

    /* Handle full width section */
    .section--full-width {
      .product-information__grid:not(.product-information--media-none) {
        &.product-information--media-left,
        &.product-information--media-right {
          grid-column: 1 / -1;
        }

        &.product-information--media-left .product-details {
          padding-inline-end: var(--padding-lg);
        }

        &.product-information--media-right .product-details {
          padding-inline-start: var(--padding-lg);
        }

        &.product-information__grid--half.product-information--media-left {
          .product-information__media {
            grid-column: 1 / 3;
          }

          .product-details {
            grid-column: 3 / -1;
          }
        }

        &.product-information__grid--half.product-information--media-right {
          .product-information__media {
            grid-column: 3 / -1;
          }

          .product-details {
            grid-column: 1 / 3;
          }
        }
      }
    }
  }

  /* Wider sidebar for large screens */
  @media screen and (min-width: 1200px) {
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-template-columns: 2fr 1fr;
    }

    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      grid-template-columns: 1fr 2fr;
    }
  }

  .product-information__grid--limit-details .product-details > .group-block {
    --details-max-width: var(--sidebar-width);
    max-width: var(--details-max-width);
  }

  @media screen and (min-width: 1600px) {
    .product-information__grid--limit-details .product-details > .group-block {
      --details-max-width: 32rem;
    }
  }

  /* If the header is sticky, make product details content stick underneath the header */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-media-container-styles (INDEX:246) */
:where(:not(.dialog-zoomed-gallery)) > .product-media-container {
    --slide-width: 100%;

    display: flex;
    aspect-ratio: var(--gallery-aspect-ratio, var(--media-preview-ratio));
    max-height: var(--constrained-height);
    width: var(--slide-width, 100%);

    /* Relative position needed for video and 3d models */
    position: relative;
    overflow: hidden;

    &:where(.constrain-height) {
      /* arbitrary offset value based on average theme spacing and header height */
      --viewport-offset: 400px;
      --constrained-min-height: 300px;
      --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

      margin-right: auto;
      margin-left: auto;
    }

    @supports (--test: round(up, 100%, 1px)) {
      /* width and overflow forces children to shrink to parent width */
      --slide-width: round(up, 100%, 1px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-media-container.constrain-height {
      max-height: none;
    }
  }

  @media screen and (min-width: 750px) {
    .product-media-container.constrain-height {
      --viewport-offset: var(--header-height, 100px);
      --constrained-min-height: 500px;
    }

    body:has(header-component[transparent]) .product-media-container.constrain-height {
      --viewport-offset: 0px;
    }
  }

  .product-media-container img {
    aspect-ratio: inherit;
    object-fit: contain;
  }

  .product-media-container.media-fit-contain img {
    object-position: center center;
  }

  .product-media-container.media-fit {
    --product-media-fit: cover;

    img {
      object-fit: var(--product-media-fit);
    }
  }
/* END_SNIPPET:product-media-container-styles */

/* START_SNIPPET:product-media-gallery-content-styles (INDEX:247) */
/* Product Media */
  media-gallery {
    display: block;
    width: 100%;
  }

  :where(media-gallery, .product-grid__item) {
    .media-gallery__grid {
      grid-template-columns: 1fr;
      gap: var(--image-gap);
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery--large-first-image .product-media-container:first-child,
    .media-gallery--two-column .product-media-container:only-child {
      /* First child spans 2 columns */
      grid-column: span 2;
    }
  }

  media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

  media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
    /* Needed for safari to stretch to full grid height */
    height: 100%;
  }

  @media screen and (min-width: 750px) {
    .media-gallery--two-column .media-gallery__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Display grid view as a carousel on mobile, grid on desktop */
    media-gallery:is(.media-gallery--grid) slideshow-component {
      display: none;
    }

    media-gallery:where(.media-gallery--grid) .media-gallery__grid {
      display: grid;
    }
  }

  zoom-dialog dialog {
    width: 100vw;
    height: 100vh;
    border: none;
    margin: 0;
    padding: 0;
    max-width: 100%;
    max-height: 100%;
    background: #fff;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    scrollbar-width: none;

    &[open] {
      opacity: 1;
    }

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }

    &::backdrop {
      background: transparent;
    }
  }

  .product-media-container__zoom-button {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: var(--layer-flat);
    cursor: zoom-in;
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }
/* END_SNIPPET:product-media-gallery-content-styles */

/* START_SNIPPET:product-media-gallery-content (INDEX:248) */
.dialog-thumbnails-list-container {
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    z-index: var(--layer-raised);
  }

  .dialog-thumbnails-list {
    --active-thumbnail-border-color: rgb(var(--color-border-rgb) / var(--media-border-opacity));

    position: relative;
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    bottom: 0;
    overflow-x: auto;
    opacity: 0;
    padding: var(--padding-lg);
    margin-inline: auto;
    scrollbar-width: none;
    animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
    animation-delay: calc(var(--animation-speed) * 1.5);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
  }

  @media screen and (min-width: 750px) {
    .dialog-thumbnails-list {
      position: fixed;
      flex-direction: column;
      inset: 50% var(--margin-lg) auto auto;
      right: 0;
      max-height: calc(100vh - 200px);
      overflow-y: auto;
      animation: thumbnailsSlideInTop var(--spring-d220-b0-duration) var(--spring-d220-b0-easing) forwards;
      animation-delay: calc(var(--spring-d220-b0-duration) * 0.5);
    }

    .dialog--closed .dialog-thumbnails-list {
      animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
    }
  }

  .dialog-thumbnails-list__thumbnail {
    width: var(--thumbnail-width);
    height: auto;
    transition: transform var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
    border-radius: var(--media-radius);

    img {
      height: 100%;
      object-fit: cover;
      border-radius: var(--media-radius);
      aspect-ratio: var(--aspect-ratio);
    }

    &:is([aria-selected='true']) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
    }
  }

  @supports (anchor-name: --test) {
    .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
      --inset-offset: calc(var(--focus-outline-offset) / 2);

      content: '';
      position: absolute;
      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
      position-anchor: --selected-thumbnail;
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
      border-radius: var(--media-radius);
      z-index: var(--layer-raised);
    }

    @media (prefers-reduced-motion: no-preference) {
      .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
        transition-property: inset;
        transition-duration: var(--spring-d180-b0-duration);
        transition-timing-function: var(--spring-d180-b0-easing);
      }
    }

    .dialog-thumbnails-list__thumbnail:is([aria-selected='true']) {
      outline: none;
      border: none;
      anchor-name: --selected-thumbnail;
    }
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
    bottom: calc(var(--thumbnail-width) / var(--media-preview-ratio) + var(--padding-lg) * 2);
    right: var(--padding-lg);
  }

  @media screen and (min-width: 750px) {
    .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
      /* Move the controls up to match the padding on the thumbnails */
      bottom: var(--padding-lg);

      /* Move the controls to the left of the thumbnails list on the right */
      right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  .dialog-zoomed-gallery__dialog {
    background-color: var(--color-background);
    view-transition-name: zoom-dialog-ui;
  }

  .dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

  @media screen and (max-width: 749px) {
    .dialog-zoomed-gallery {
      /* Prevent scroll wheel or swipe scrolling */
      overscroll-behavior: none;
      scrollbar-width: none;
      display: flex;
      scroll-snap-type: x mandatory;
      overflow-x: hidden;
      scroll-behavior: smooth;
      height: 100%;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .dialog-zoomed-gallery .product-media-container {
      flex: 0 0 100%;
      scroll-snap-align: start;
      position: relative;
    }

    .dialog-zoomed-gallery .product-media-container--image .product-media {
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .dialog-zoomed-gallery .product-media-container--video,
    .dialog-zoomed-gallery .product-media-container--external_video {
      align-content: center;
    }

    .dialog-zoomed-gallery
      :is(.product-media-container--video, .product-media-container--external_video, .product-media-container--model)
      .product-media {
      aspect-ratio: auto;
      align-items: center;
      height: 100%;

      .product-media__image {
        height: 100%;
      }
    }

    .product-media__drag-zoom-wrapper {
      display: flex;
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: scroll;
      scrollbar-width: none;
      justify-content: center;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .product-media__drag-zoom-wrapper .product-media__image {
      --product-media-fit: contain;

      object-fit: var(--product-media-fit);
      overflow: hidden;
      transform: scale(var(--drag-zoom-scale))
        translate(var(--drag-zoom-translate-x, 0), var(--drag-zoom-translate-y, 0));
    }

    .media-gallery--hint {
      --slideshow-gap: var(--gap-2xs);

      :not(.dialog-zoomed-gallery) > .product-media-container:not(:only-child) {
        width: 90%;

        .product-media img {
          object-fit: cover;
        }
      }
    }
  }

  .dialog-zoomed-gallery__close-button {
    color: #fff;
    mix-blend-mode: difference;
    z-index: var(--layer-raised);
  }

  /* Mobile thumbnails styling */
  @media screen and (max-width: 749px) {
    .media-gallery__mobile-controls[thumbnails] {
      --thumbnail-width: 44px;
    }

    .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail {
      width: var(--thumbnail-width);
      height: auto;
    }
  }

  .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-out;
  }

  .dialog-zoomed-gallery .product-media-container--video deferred-media,
  .dialog-zoomed-gallery .product-media-container--external_video deferred-media {
    height: auto;
    aspect-ratio: var(--ratio);
  }

  .dialog-zoomed-gallery .product-media-container--model .product-media__image {
    /* Make the height match the height of the model-viewer */
    height: 100vh;
  }

  :root:active-view-transition .dialog-zoomed-gallery__dialog {
    background-color: transparent;
  }

  ::view-transition-group(zoom-dialog-ui) {
    z-index: calc(var(--layer-overlay) + 1);
  }

  ::view-transition-old(gallery-item-open),
  ::view-transition-new(gallery-item-open) {
    animation-timing-function: step-start;
  }

  ::view-transition-old(gallery-item-close),
  ::view-transition-new(gallery-item-close) {
    animation-timing-function: step-end;
  }

  @media screen and (min-width: 750px) {
    :root:active-view-transition .product-media__image {
      background-color: transparent;
    }
  }

  ::view-transition-group(gallery-item-open),
  ::view-transition-group(gallery-item-close) {
    z-index: var(--layer-overlay);
    border-radius: var(--gallery-media-border-radius);
    overflow: clip;
  }

  ::view-transition-group(gallery-item-open) {
    animation-timing-function: var(--spring-d300-b0-easing);
    animation-duration: var(--spring-d300-b0-duration);
  }

  ::view-transition-group(gallery-item-close) {
    animation-timing-function: var(--spring-d220-b0-easing);
    animation-duration: var(--spring-d220-b0-duration);
  }

  @media screen and (max-width: 749px) {
    ::view-transition-group(gallery-item-open),
    ::view-transition-group(gallery-item-close) {
      animation-timing-function: step-start;
      animation-duration: 0.1s;
    }

    ::view-transition-new(gallery-item-open) {
      animation: fade-in var(--spring-d180-b0-duration) var(--spring-d180-b0-easing) forwards;
      animation-timing-function: var(--spring-d180-b0-easing);
      animation-duration: var(--spring-d180-b0-duration);
    }

    ::view-transition-old(gallery-item-close) {
      animation: fade-out 0.08s linear forwards;
    }
  }

  @keyframes fade-in {
    from {
      scale: 0.98;
      opacity: 0.8;
    }
  }

  @keyframes fade-out {
    to {
      opacity: 0;
    }
  }

  /*
   * Product media gallery slideshow context styles
   */
  .product-media-gallery__slideshow--single-media slideshow-container {
    @media screen and (max-width: 749px) {
      grid-area: unset;
    }
  }

  /* Display grid view as a carousel on mobile, grid on desktop */
  media-gallery:is(.media-gallery--grid) slideshow-component {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) {
      &:has(slideshow-controls[pagination-position='right']) {
        display: grid;
        grid-template:
          'container controls' auto
          'arrows controls' min-content
          / 1fr auto;
      }

      &:has(slideshow-controls[pagination-position='left']) {
        display: grid;
        grid-template:
          'controls container' auto
          'controls arrows' min-content
          / auto 1fr;
      }

      slideshow-controls[pagination-position='left'] {
        order: -1;
      }
    }
  }

  .media-gallery--carousel slideshow-arrows .slideshow-control {
    padding-inline: 0 var(--padding-md);
    opacity: 1;
  }

  @media screen and (max-width: 749px) {
    slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  @media screen and (min-width: 750px) {
    slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-recommendations-styles (INDEX:250) */
.product-recommendations {
    display: block;
  }

  .product-recommendations__skeleton-item {
    aspect-ratio: 3 / 4;
    background-color: var(--color-foreground);
    opacity: var(--skeleton-opacity);
    border-radius: 4px;
  }

  @media screen and (max-width: 749px) {
    .product-recommendations__skeleton-item:nth-child(2n + 1) {
      display: none;
    }
  }

  product-recommendations:has([data-has-recommendations='false']) {
    display: none;
  }
/* END_SNIPPET:product-recommendations-styles */

/* START_SNIPPET:quantity-selector-styles (INDEX:251) */
/* Quantity selector */
  .quantity-selector {
    --quantity-selector-width: 124px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);
    flex: 1 1 var(--quantity-selector-width);
    align-self: stretch;
  }

  .product-form-buttons:has(.add-to-cart-button.button-secondary) .quantity-selector {
    border-radius: var(--style-border-radius-buttons-secondary);
  }

  .quantity-selector :is(.quantity-minus, .quantity-plus) {
    /* Unset button styles */
    padding: 0;
    background: transparent;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    flex-shrink: 0;
    color: var(--color-input-text);
  }

  .quantity-selector .quantity-minus {
    border-start-start-radius: var(--style-border-radius-inputs);
    border-end-start-radius: var(--style-border-radius-inputs);
  }

  .quantity-selector .quantity-plus {
    border-start-end-radius: var(--style-border-radius-inputs);
    border-end-end-radius: var(--style-border-radius-inputs);
  }

  .product-details .quantity-selector,
  .quick-add-modal .quantity-selector {
    border-radius: var(--style-border-radius-buttons-primary);
  }

  .product-details .quantity-selector .quantity-minus,
  .quick-add-modal .quantity-selector .quantity-minus {
    border-start-start-radius: var(--style-border-radius-buttons-primary);
    border-end-start-radius: var(--style-border-radius-buttons-primary);
  }

  .product-details .quantity-selector .quantity-plus,
  .quick-add-modal .quantity-selector .quantity-plus {
    border-start-end-radius: var(--style-border-radius-buttons-primary);
    border-end-end-radius: var(--style-border-radius-buttons-primary);
  }

  .quantity-selector .svg-wrapper {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .quantity-selector svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  :is(.quantity-minus, .quantity-plus):active .svg-wrapper {
    transform: scale(0.9);
  }

  .quantity-selector input[type='number'] {
    margin: 0;
    text-align: center;
    border: none;
    appearance: none;
    max-width: calc(var(--quantity-selector-width) - var(--minimum-touch-target) * 2);
    border-radius: var(--style-border-radius-buttons);
    color: var(--color-input-text);
    background-color: transparent;
  }

  /* Chrome, Safari, Edge, Opera */
  .quantity-selector input[type='number']::-webkit-inner-spin-button,
  .quantity-selector input[type='number']::-webkit-outer-spin-button {
    appearance: none;
  }

  /* Firefox */
  .quantity-selector input[type='number'] {
    appearance: textfield;
  }
/* END_SNIPPET:quantity-selector-styles */

/* START_SNIPPET:quantity-selector (INDEX:252) */
.quantity-selector-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .price-per-item {
    display: block;
    color: var(--color-foreground);
    font-size: var(--font-size--sm);
    font-weight: normal;
  }
/* END_SNIPPET:quantity-selector */

/* START_SNIPPET:quick-add-modal-styles (INDEX:253) */
#quick-add-dialog {
    display: contents;
  }

  /* Inputs inside the quick-add modal use the global Input Fields settings,
     not any per-block overrides set on the product page. */
  .quick-add-modal .quantity-selector-wrapper {
    --color-input-background: inherit;
    --color-input-text: inherit;
    --color-input-text-rgb: inherit;
    --color-input-border: inherit;
    --style-border-width-inputs: inherit;
    --style-border-radius-inputs: inherit;
    --style-border-radius-buttons-primary: var(--style-border-radius-inputs);
    --style-border-radius-buttons-secondary: var(--style-border-radius-inputs);
  }

  .quick-add-modal .product-details .quantity-selector {
    border-radius: var(--style-border-radius-inputs);
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--quick-add-modal-width);
      height: var(--quick-add-modal-height);
      max-width: none;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
    position: static;
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
    display: none;
  }

  .quick-add-modal__content .product-details .buy-buttons-block__bar {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-block: var(--gap-md) var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
    .quick-add-modal__content .product-details .buy-buttons-block__bar::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal-styles */

/* START_SNIPPET:quick-add-styles (INDEX:255) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));
    --quick-add-inset-inline-end: max(
      var(--quick-add-right),
      calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg)))
    );
    --quick-add-inset-block-end: max(
      var(--quick-add-bottom),
      calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg)))
    );

    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  /* Hide "Add" button when "Choose" button is shown */
  [data-quick-add-button='choose'] add-to-cart-component {
    display: none;
  }

  /* Hide "Choose" button when "Add" button is shown */
  [data-quick-add-button='add'] .quick-add__button--choose {
    display: none;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;

    &:disabled {
      opacity: var(--opacity-muted-text);
    }
  }

  button.quick-add__button {
    --quick-add-collapsed-width: var(--button-size-md);
    --quick-add-icon-width: calc(var(--button-size-md) - 4px);
    --quick-add-expanded-width: max-content;

    display: var(--quick-add-mobile-display, none);
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    background: linear-gradient(var(--quick-add-background, var(--color-background)) 0 100%) padding-box;
    padding: 0;
    border-radius: 50px;
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    width: var(--quick-add-collapsed-width);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--quick-add-foreground, var(--color-foreground));
    pointer-events: all;
    position: absolute;
    inset-inline-end: var(--quick-add-inset-inline-end);
    inset-block-end: var(--quick-add-inset-block-end);
    max-inline-size: calc(100% - var(--quick-add-inset-inline-end));
    min-inline-size: 0;
    white-space: nowrap;
    backdrop-filter: blur(20px) saturate(180%);
    interpolate-size: allow-keywords;

    &:hover {
      scale: 1.03;

      /* Hover stabilizer: extends hit area to maintain hover state */
      &::before {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: -1;
      }
    }

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: flex;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;

      /* Explicit "disabled" rule is needed to beat the `.button:disabled { opacity: 0.5 }` rule in base.css */
      &:disabled {
        opacity: 0;
      }
    }
  }

  .quick-add__button.add-to-cart-button {
    height: var(--button-size-md);
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button > .add-to-cart-icon {
    flex-shrink: 0;
    width: var(--quick-add-icon-width);
    height: 100%;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  @media screen and (min-width: 750px) {
    .quick-add__button:is(:hover, :focus-visible) {
      width: var(--quick-add-expanded-width);
      padding-inline-end: var(--padding-sm);
    }
  }

  .quick-add__button[data-added='true'] {
    width: var(--quick-add-collapsed-width);
    color: transparent;
  }

  .quick-add__button[data-added='true'] > .add-to-cart-icon {
    opacity: 0;
  }

  .quick-add__button[data-added='true'] .add-to-cart__added {
    color: var(--quick-add-foreground, var(--color-foreground));
  }

  @media (prefers-reduced-motion: no-preference) {
    button.quick-add__button {
      transition-property: scale, translate, opacity, width;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }
  }
/* END_SNIPPET:quick-add-styles */

/* START_SNIPPET:resource-card (INDEX:258) */
.resource-card__wrapper {
    display: block;
    height: 100%;
  }

  .resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:resource-image (INDEX:259) */
.resource-image {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: var(--layer-base);
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: var(--ratio);
  }

  .resource-image__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
  }

  .resource-image--placeholder {
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:resource-image */

/* START_SNIPPET:resource-list-carousel (INDEX:260) */
.resource-list__carousel {
    --slide-width: 60vw;
    width: 100%;
    position: relative;
    container-type: inline-size;
    container-name: resource-list-carousel;

    .slideshow-control[disabled] {
      display: none;
    }

    .slideshow-control--next {
      margin-inline-start: auto;
    }
  }

  @container resource-list-carousel (max-width: 749px) {
    .resource-list__carousel .resource-list__slide {
      --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
    }
  }

  @container resource-list-carousel (min-width: 750px) {
    .resource-list__carousel .resource-list__slide {
      --section-slide-width: calc(
        (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) /
          var(--column-count)
      );
      --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
      --slide-width: var(--section-slide-width, var(--fallback-slide-width));
    }
  }

  .resource-list__carousel slideshow-slides {
    gap: var(--resource-list-column-gap);

    /* Add padding to prevent hover animations from being clipped in slideshow
     15px accommodates:
     - Scale effect (9px on each side from 1.03 scale)
     - Lift effect (4px upward movement)
     - Shadow (15px spread with -5px offset)
     Using 16px for better alignment with our spacing scale */
    margin-block: -16px;
    padding-block: 16px;
  }

  .resource-list__carousel slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .resource-list__carousel .resource-list__slide {
    width: var(--slide-width);
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 0;
  }

  /*
   * Resource list carousels have peeking slides on both sides.
   * We try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .resource-list__carousel
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:resource-list-carousel */

/* START_SNIPPET:resource-list-styles (INDEX:261) */
.resource-list {
    --resource-list-mobile-gap-max: 9999px;
    --resource-list-column-gap: min(var(--resource-list-column-gap-desktop), var(--resource-list-mobile-gap-max));
    --resource-list-row-gap: min(var(--resource-list-row-gap-desktop), var(--resource-list-mobile-gap-max));

    width: 100%;

    @media screen and (max-width: 749px) {
      --resource-list-mobile-gap-max: 12px;
    }

    @container resource-list (max-width: 749px) {
      --resource-list-mobile-gap-max: 12px;
    }
  }

  .resource-list--grid {
    display: grid;
    gap: var(--resource-list-row-gap) var(--resource-list-column-gap);
    grid-template-columns: var(--resource-list-columns-mobile);

    @media screen and (min-width: 750px) {
      grid-template-columns: var(--resource-list-columns);
    }

    @container resource-list (max-width: 449px) {
      grid-template-columns: var(--resource-list-columns-mobile);
    }

    @container resource-list(min-width: 450px) and (max-width: 749px) {
      --resource-list-columns-per-row: 3;

      grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

      /* Avoid orphan in last row when there are 4, 7, or 10 items */
      &:has(.resource-list__item:first-child:nth-last-child(3n + 1)),
      /* Clean two full rows when there are 8 items */
      &:has(.resource-list__item:first-child:nth-last-child(8n)) {
        --resource-list-columns-per-row: 4;
      }
    }

    @container resource-list (min-width: 750px) {
      grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

      &:has(.resource-list__item:first-child:nth-last-child(n + 9)) {
        --resource-list-columns-per-row: 5;
      }

      &:has(.resource-list__item:first-child:nth-last-child(n + 7):nth-last-child(-n + 8)) {
        --resource-list-columns-per-row: 4;
      }

      &:has(.resource-list__item:first-child:nth-last-child(6)) {
        --resource-list-columns-per-row: 3;
      }

      &:has(.resource-list__item:first-child:nth-last-child(5)) {
        --resource-list-columns-per-row: 5;
      }

      &:has(.resource-list__item:first-child:nth-last-child(-n + 4)) {
        --resource-list-columns-per-row: 4;
      }
    }

    @container resource-list (min-width: 1200px) {
      &:has(.resource-list__item:first-child:nth-last-child(6)) {
        --resource-list-columns-per-row: 6;
      }
    }
  }

  .resource-list__item {
    height: 100%;
    color: var(--color-foreground);
    text-decoration: none;
  }
/* END_SNIPPET:resource-list-styles */

/* START_SNIPPET:search-modal (INDEX:264) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    overflow: hidden;

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-foreground);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xs) var(--padding-sm);
    }
  }

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  input.search-input::placeholder {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-muted-text));
  }

  input.search-input,
  input.search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  input.search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

    &:hover {
      color: var(--color-foreground);
    }

    &:active {
      transform: scale(0.9);
      transition: transform 100ms var(--animation-timing-active);
    }

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
      box-shadow: none;
    }
  }

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

    &:active {
      transform: scale(0.8);
      transition: transform 100ms var(--animation-timing-active);
    }

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:265) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  @media screen and (max-width: 749px) {
    .search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    [data-menu-style='drawer'] .search-action--hidden-on-drawer {
      display: none;
    }

    [data-menu-style='menu'] .search-action--hidden-on-menu {
      display: none;
    }
  }

  [data-menu-style='menu'] .header__column--left .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .header__column--right .search-action--text {
      margin-inline: 0;
    }

    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:search */

/* START_SNIPPET:section (INDEX:266) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

  body:has(#header-group > .header-section > #header-component[transparent]):not(
      :has(#header-group > .header-section + .shopify-section)
    )
    #MainContent
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */

/* START_SNIPPET:skip-to-content-link (INDEX:268) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    left: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */

/* START_SNIPPET:slideshow-arrow (INDEX:270) */
.slideshow-control--large {
    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .svg-wrapper,
    svg {
      width: var(--slideshow-controls-icon);
      height: var(--slideshow-controls-icon);
    }
  }

  /* Slideshow control shape styles */
  .slideshow-control.slideshow-control--shape-square,
  .slideshow-control.slideshow-control--shape-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
  }

  .slideshow-control.slideshow-control--shape-circle {
    border-radius: 50%;
  }

  .slideshow-control.slideshow-control--shape-square {
    border-radius: 0;
  }

  .slideshow-control .icon-caret {
    rotate: -90deg;
  }
/* END_SNIPPET:slideshow-arrow */

/* START_SNIPPET:slideshow-arrows (INDEX:271) */
slideshow-arrows {
    --cursor-previous: w-resize;
    --cursor-next: e-resize;

    position: absolute;
    inset: 0;
    display: flex;
    z-index: var(--layer-heightened);
    pointer-events: none;
    mix-blend-mode: difference;
    align-items: flex-end;

    &[position='left'] {
      justify-content: flex-start;
      padding-inline: var(--padding-xs);
    }

    &[position='right'] {
      justify-content: flex-end;
      padding-inline: var(--padding-xs);
    }

    &[position='center'] {
      justify-content: space-between;
      align-items: center;
    }
  }

  slideshow-arrows:has(.slideshow-control--shape-square),
  slideshow-arrows:has(.slideshow-control--shape-circle) {
    mix-blend-mode: normal;
  }

  slideshow-component[disabled='true'] slideshow-arrows {
    display: none;
  }

  slideshow-arrows .slideshow-control {
    pointer-events: auto;
    opacity: 0;
    min-height: var(--minimum-touch-target);
    min-width: var(--minimum-touch-target);
    padding: 0 var(--padding-xs);
    color: var(--color-white);
  }

  slideshow-arrows .slideshow-control.slideshow-control--style-none {
    display: none;
  }
/* END_SNIPPET:slideshow-arrows */

/* START_SNIPPET:slideshow-controls (INDEX:272) */
slideshow-controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    scrollbar-width: none;
    min-height: var(--minimum-touch-target);
    grid-area: controls;

    &[controls-on-media] {
      position: absolute;
      bottom: 0;
    }
  }

  slideshow-controls::-webkit-scrollbar {
    display: none;
  }

  slideshow-controls button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

    display: inline-block;
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
    cursor: pointer;
  }

  slideshow-controls .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-xs);
  }

  slideshow-controls[pagination-position='center'] {
    align-items: center;
    justify-content: center;
  }

  slideshow-controls[pagination-position='center'][thumbnails] {
    width: 100%;
  }

  slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
      display: flex;
      flex-direction: column;
      height: 0;
      min-height: 100%;

      .slideshow-controls__thumbnails-container {
        overflow: hidden auto;
      }

      &:not([controls-on-media]) {
        .slideshow-controls__thumbnails-container {
          position: sticky;
          top: var(--sticky-header-offset, 0);
        }

        .slideshow-controls__thumbnails {
          padding-block-start: var(--focus-outline-offset);
        }
      }
    }

    slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails {
      flex-direction: column;
    }

    slideshow-controls:not([controls-on-media]) {
      &:is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails {
        padding-block: var(--padding-2xs);
      }

      &[pagination-position='right'] .slideshow-controls__thumbnails {
        padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }

      &[pagination-position='left'] .slideshow-controls__thumbnails {
        padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }
    }
  }

  slideshow-controls:not([controls-on-media])[icons-on-media] {
    &[pagination-position='right'] {
      justify-content: flex-end;
    }

    &[pagination-position='left'] {
      justify-content: flex-start;
    }
  }

  slideshow-controls[controls-on-media] {
    z-index: var(--layer-raised);

    &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
      --color-foreground: #fff;
      --color-foreground-rgb: var(--color-white-rgb);
    }

    &[pagination-position='right'] {
      right: 0;
    }

    &[pagination-position='left'] {
      left: 0;
    }

    &[pagination-position='center'] {
      width: 100%;
    }

    &:not([thumbnails])[pagination-position='left'] {
      width: fit-content;
      align-self: flex-start;
    }

    &:not([thumbnails])[pagination-position='right'] {
      width: fit-content;
      align-self: flex-end;
    }
  }

  .slideshow-controls__arrows {
    display: flex;
    justify-content: space-between;
    height: var(--minimum-touch-target);
    grid-area: arrows;

    button {
      padding: 0 var(--padding-xs);
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    list-style: none;

    button {
      --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
      --color-active: var(--color-foreground);
      --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    }
  }

  slideshow-controls:has(.slideshow-controls__dots),
  slideshow-component[autoplay] slideshow-controls {
    mix-blend-mode: difference;
  }

  .slideshow-controls__dots {
    gap: 0.6rem;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: 3rem;
    overflow: hidden;

    button {
      --size: 0.56rem;

      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      margin: calc(var(--size) / -2);
      font-size: 0;
      border-radius: calc(var(--size));

      &::after {
        content: '';
        display: block;
        background-color: var(--color);
        height: var(--size);
        width: var(--size);
        border-radius: calc(var(--size) / 2);
        box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15);

        @supports not (view-timeline-axis: inline) {
          &[aria-selected='true'] {
            --color: var(--color-active);
          }
        }

        &:hover {
          --color: var(--color-hover);
        }
      }

      &[aria-selected='true'] {
        --color: var(--color-active);

        &::after {
          box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4);
        }
      }
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    &:only-child {
      margin-inline: auto;
    }
  }

  .slideshow-controls__counter {
    color: var(--color-foreground);
    background-color: rgb(0 0 0 / 40%);
    width: auto;
    border-radius: 2rem;
    padding: 0.3rem var(--padding-sm);
    margin-inline: var(--margin-sm);
    backdrop-filter: blur(10px);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--xs);

    .slash {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
      padding-inline: var(--padding-2xs);
      margin-block-start: -0.1rem;
    }
  }

  .slideshow-control[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Slideshow Thumbnails */
  .slideshow-controls__thumbnails-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .slideshow-controls__thumbnails {
    display: inline-flex;
    padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
    padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
    gap: var(--gap-xs);
    margin-inline: auto;
    height: fit-content;

    .slideshow-control {
      border-radius: var(--thumbnail-radius, var(--media-radius));
      width: clamp(44px, 7vw, var(--thumbnail-width));
      height: auto;
      aspect-ratio: var(--aspect-ratio);

      img {
        height: 100%;
        object-fit: cover;
        border-radius: var(--thumbnail-radius, var(--media-radius));
      }

      &:is([aria-selected='true']) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: calc(var(--focus-outline-offset) / 2);
        border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
      }
    }
  }

  .slideshow-controls__thumbnail {
    position: relative;
  }

  .slideshow-controls__thumbnail-badge {
    position: absolute;
    top: var(--padding-2xs);
    right: var(--padding-2xs);
    width: clamp(16px, 10%, 20px);
    height: clamp(16px, 10%, 20px);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .slideshow-controls__thumbnail-badge svg {
    width: 60%;
    height: 60%;
    fill: var(--color-foreground);
    opacity: 0.6;
  }

  /* Slideshow Play/Pause */
  .slideshow-control:is(.icon-pause, .icon-play) {
    color: var(--color-active);

    &:hover {
      color: var(--color-hover);
    }

    svg {
      display: none;
    }
  }

  slideshow-component:is([autoplay]) {
    &:is([paused]) {
      .icon-play > svg {
        display: block;
      }
    }

    &:not([paused]) {
      .icon-pause > svg {
        display: block;
      }
    }
  }
/* END_SNIPPET:slideshow-controls */

/* START_SNIPPET:slideshow-styles (INDEX:274) */
/*
   * Slideshow Component
   */
  slideshow-component {
    --cursor: grab;
    --slide-offset: 6px;

    position: relative;
    display: flex;
    flex-direction: column;
    timeline-scope: var(--slideshow-timeline);
  }

  .slideshow--single-media {
    --cursor: default;
  }

  a slideshow-component {
    --cursor: pointer;
  }

  slideshow-component [data-placeholder='true'] * {
    cursor: grab;
  }

  /*
   * Slideshow Slides
   */
  slideshow-slides {
    width: 100%;
    position: relative;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-color: transparent transparent;
    scrollbar-width: none;
    gap: var(--slideshow-gap, 0);
    cursor: var(--cursor);
    min-height: var(--slide-min-height);
    align-items: var(--slideshow-align-items, normal);

    @media (prefers-reduced-motion) {
      scroll-behavior: auto;
    }

    &::-webkit-scrollbar {
      width: 0;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: transparent;
      border: none;
    }

    @media screen and (min-width: 750px) {
      min-height: var(--slide-min-height-desktop);
    }
  }

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }

  slideshow-component[disabled='true'] slideshow-slides {
    overflow: hidden;
  }

  /**
   * By default, slideshows have overflow: hidden (no compositor layer).
   * When the slideshow enters the viewport, JavaScript adds [in-viewport] which enables scrolling.
   */
  slideshow-component:not([in-viewport]) slideshow-slides {
    overflow: hidden;
  }

  slideshow-component[mobile-disabled] slideshow-slides {
    @media screen and (max-width: 749px) {
      overflow: hidden;
    }
  }

  slideshow-slides[gutters*='start'] {
    padding-inline-start: var(--gutter-slide-width, 0);
    scroll-padding-inline-start: var(--gutter-slide-width, 0);
  }

  slideshow-slides[gutters*='end'] {
    padding-inline-end: var(--gutter-slide-width, 0);
  }

  slideshow-component[dragging] {
    --cursor: grabbing;

    * {
      pointer-events: none;
    }
  }

  slideshow-component[dragging] slideshow-arrows {
    display: none;
  }

  slideshow-container {
    width: 100%;
    display: block;
    position: relative;
    grid-area: container;
    container-type: inline-size;
    background-color: var(--color-background);
  }

  /*
   * Be specific about HTML children structure to avoid targeting nested slideshows.
   * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
   */
  slideshow-component:is([dragging], [transitioning], :hover)
    > slideshow-container
    > slideshow-slides
    > slideshow-slide {
    content-visibility: visible;
  }

  @keyframes slide-reveal {
    0% {
      translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0;
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0;
      opacity: 0;
    }
  }

  /*
   * Slideshow Slide
   */
  slideshow-slide {
    position: relative;
    scroll-snap-align: center;
    width: var(--slide-width, 100%);
    max-height: 100%;
    flex-shrink: 0;
    view-timeline-name: var(--slideshow-timeline);
    view-timeline-axis: inline;
    content-visibility: auto;
    contain-intrinsic-size: auto none;
    border-radius: var(--corner-radius, 0);
    overflow: hidden;

    slideshow-component[actioned] &,
    &[aria-hidden='false'] {
      content-visibility: visible;
    }

    slideshow-component slideshow-slide:not([aria-hidden='false']) {
      content-visibility: hidden;
    }

    &[hidden]:not([reveal]) {
      display: none;
    }

    /* Make inactive slides appear clickable */
    &[aria-hidden='true'] {
      cursor: pointer;
    }
  }

  slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    bottom: var(--padding-sm);
    right: var(--padding-sm);
  }

  slideshow-component.slideshow--content-below-media slideshow-slide {
    display: grid;
  }

  .slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
    position: static;
  }

  .slideshow--content-below-media slideshow-slide {
    grid-template-rows: var(--grid-template-rows);

    @media screen and (min-width: 750px) {
      grid-template-rows: var(--grid-template-rows-desktop);
    }
  }
/* END_SNIPPET:slideshow-styles */

/* START_SNIPPET:sorting (INDEX:276) */
.sorting-filter__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--drawer-padding) 0;
    padding-block: var(--padding-sm);
    margin-inline-end: var(--margin-md);
    position: relative;
  }

  .sorting-filter__container .facets__label {
    font-size: var(--font-h4--size);
  }

  .sorting-filter__select-wrapper {
    display: flex;
    position: relative;
    border-radius: var(--variant-picker-button-radius);
    align-items: center;
    overflow: clip;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
    outline: none;
  }

  .sorting-filter__container .sorting-filter__select {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding-inline-end: var(--icon-size-2xs);
    text-align: right;

    /* Needed for Safari */
    text-align-last: right;
  }

  .sorting-filter__select .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .sorting-filter {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    color: var(--color-foreground);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-popover);
    width: max-content;
    min-width: var(--facets-panel-min-width);
    min-height: 0;

    transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    grid-template-rows: 1fr;
  }

  .sorting-filter__options-inner {
    display: flex;
    flex-direction: column;
    grid-row: 1 / span 2;
    gap: var(--gap-sm);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }

    @media screen and (min-width: 750px) {
      gap: 0;
    }
  }

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    align-items: center;
    min-width: 180px;
    max-width: 16em;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &:focus {
      border-radius: calc(var(--style-border-radius-popover) / 2);
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: 500;
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper .sorting-filter .facets__panel {
    padding-inline: 0;
    position: relative;
  }

  .facets-mobile-wrapper .sorting-filter .facets__status {
    display: none;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
    left: 0;
    right: unset;
  }

  .facets-mobile-wrapper .sorting-filter .facets__label {
    margin-inline-end: var(--margin-2xs);
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 749px) {
      padding: 0;
    }
  }

  .facets-toggle .sorting-filter__container .facets__label {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets-toggle .sorting-filter::before {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--drawer .sorting-filter {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:summary-icon-styles (INDEX:282) */
details[open] > summary .icon-animated > svg {
    transform: rotate(180deg);
  }

  summary .svg-wrapper {
    margin-inline-start: auto;
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  /* Shared plus/minus icon animations */
  summary .icon-plus :is(.horizontal, .vertical) {
    transition: transform var(--animation-speed) var(--animation-easing);
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    opacity: 1;
  }

  details[open] > summary .icon-plus .horizontal {
    transform: rotate(90deg);
  }

  details[open] > summary .icon-plus .vertical {
    transform: rotate(90deg);
    opacity: 0;
  }
/* END_SNIPPET:summary-icon-styles */

/* START_SNIPPET:swatch-styles (INDEX:283) */
/* Swatches */
  .swatch {
    --color-border: rgb(var(--color-foreground-rgb) / var(--style-border-swatch-opacity));
    --min-width-unitless: 15.9999; /* want to avoid division by 0 */
    --min-height-unitless: 15.9999; /* want to avoid division by 0 */
    --min-height: 16px;
    --min-width: 16px;

    /* mobile values */
    --scaling-factor: 0.5;
    --max-swatch-size: 28px;
    --max-pill-size: 20px;
    --max-filter-size: 32px;

    /* From the settings */
    --offset-swatch-width: calc(var(--variant-picker-swatch-width-unitless) - var(--min-width-unitless));
    --offset-swatch-height: calc(var(--variant-picker-swatch-height-unitless) - var(--min-height-unitless));

    /**
    Offset values are obtained from the following formulas:
      offset-width = width - min-width
      offset-height = height - min-height

    The offset-scaled-width and heigth are obtained by extending the line from
    [min,min] to [W,H] and taking the intersection with a square that starts at
    [min,min] and ends at [max,max].

    The extending line forms right angle triangles with the [min,min]->[max,max]
    box that enable us to derive the following formulas

    We also want the result to always be smaller than the input (pdp > everywhere else)
    by some scaling factor.
  */
    --offset-scaled-width: calc(
      var(--scaling-factor) * var(--offset-swatch-width) / var(--offset-swatch-height) * var(--offset-max-swatch-size)
    );
    --offset-scaled-height: calc(
      var(--scaling-factor) * var(--offset-swatch-height) / var(--offset-swatch-width) * var(--offset-max-swatch-size)
    );
    --offset-max-swatch-size: calc(var(--max-swatch-size) - var(--min-width));

    /* width = min(m + sU, (m + s * W'/H' * M'), M) */
    --swatch-width: min(
      calc(var(--min-width) + var(--scaling-factor) * var(--offset-swatch-width) * 1px),
      calc(var(--min-width) + var(--offset-scaled-width)),
      var(--max-swatch-size)
    );

    /* height = min(m + sV, (m + s * H'/W' * M'), M) */
    --swatch-height: min(
      calc(var(--min-height) + var(--scaling-factor) * var(--offset-swatch-height) * 1px),
      calc(var(--min-height) + var(--offset-scaled-height)),
      var(--max-swatch-size)
    );

    display: block;
    background: var(--swatch-background);
    background-position: var(--swatch-focal-point, center);
    border-radius: var(--variant-picker-swatch-radius);
    border: var(--style-border-swatch-width) var(--style-border-swatch-style) var(--color-border);
    width: var(--swatch-width);
    height: var(--swatch-height);

    /* This is different than `background-size: cover` because we use `box-sizing: border-box`,
   * doing it like makes the background clip under the border without repeating.
   */
    background-size: var(--swatch-width) var(--swatch-height);

    &.swatch--unavailable {
      border-style: dashed;
    }

    &.swatch--unscaled {
      /* for when you want fixed sizing (e.g. pdp) */
      --swatch-width: var(--variant-picker-swatch-width);
      --swatch-height: var(--variant-picker-swatch-height);
    }

    &.swatch--filter {
      --swatch-width: var(--max-filter-size);
      --swatch-height: var(--max-filter-size);

      border-radius: var(--variant-picker-swatch-radius);
    }

    &.swatch--pill {
      --swatch-width: var(--max-pill-size);
      --swatch-height: var(--max-pill-size);

      border-radius: var(--variant-picker-swatch-radius);
    }

    /* swatches in filters and pills always have a border  */
    &.swatch--filter,
    &.swatch--pill {
      --style-border-swatch-width: var(--variant-picker-border-width);
      --style-border-swatch-style: var(--variant-picker-border-style);
      --color-border: rgb(var(--color-foreground-rgb) / var(--variant-picker-border-opacity));
    }

    &.swatch--variant-image {
      background-size: cover;
    }

    @media screen and (min-width: 750px) {
      /* desktop values */
      --max-swatch-size: 32px;
      --max-pill-size: 16px;
      --max-filter-size: 28px;
      --scaling-factor: 0.65;
    }
  }
/* END_SNIPPET:swatch-styles */

/* START_SNIPPET:text-block-styles (INDEX:286) */
.text-block {
    width: var(--width, 100%);
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);

    /* To avoid text being cropped when using a border radius we add a minimum padding. */
    padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }

  .text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width):is(.h1, .h2, .h3, .h4, .h5, .h6) {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. The doubled class beats the global paragraph-link styles in base.css. */
  .text-block.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-line: none;
    color: currentColor;

    &:hover {
      text-decoration-line: none;
      color: currentColor;
    }
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block p,
  .text-block.p > * {
    margin-block: var(--font-paragraph--spacing);
  }

  /* The doubled class lets these edge resets beat heading/paragraph margins without relying on source order. */
  .text-block.text-block > *:last-child,
  .text-block.text-block > *:has(+ *:last-child:empty) {
    margin-block-end: 0;
  }

  .text-block.text-block > style + *,
  .text-block.text-block > *:first-child,
  .text-block.text-block > *:first-child:empty + * {
    margin-block-start: 0;
  }
/* END_SNIPPET:text-block-styles */

/* START_SNIPPET:text-component-shimmer-styles (INDEX:287) */
text-component {
    --shimmer-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    --shimmer-color-light: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    --shimmer-speed: 1.25s;

    display: inline-block;
    position: relative;
    transition: color var(--animation-speed-slow) ease;
    line-height: 1;

    &::after {
      /* Empty alt text: the pseudo-element is a visual shimmer overlay, not announceable content.
        Without this, VoiceOver reads attr(value) in addition to the inner text node, doubling the announcement. */
      content: attr(value) / '';
      position: absolute;
      inset: 0;
      color: transparent;
      opacity: 0;
      transition: opacity var(--animation-speed-slow) var(--animation-easing);
      pointer-events: none;
      background-image: linear-gradient(
        -85deg,
        var(--shimmer-text-color) 10%,
        var(--shimmer-color-light) 50%,
        var(--shimmer-text-color) 90%
      );
      background-clip: text;
      background-size: 200% 100%;
      background-position: 100% 0;
      place-content: center;
    }

    &[shimmer] {
      color: transparent;

      &::after {
        opacity: 1;
        animation: text-shimmer var(--shimmer-speed) infinite linear;
      }
    }
  }

  @keyframes text-shimmer {
    0% {
      background-position: 100% 0;
    }

    100% {
      background-position: -100% 0;
    }
  }
/* END_SNIPPET:text-component-shimmer-styles */

/* START_SNIPPET:text (INDEX:288) */
:root {
    --text-align-default: left;
  }

  /* Base text-block sizing, spacing, wrapping, and helper classes live in text-block-styles.liquid. */
  .text-block {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
    color: var(--color, var(--color-foreground));
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block > * {
    width: var(--width, 100%);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:theme-drawer-styles (INDEX:290) */
theme-drawer {
    display: contents;
  }

  .theme-drawer__dialog {
    --theme-drawer-padding: var(--padding-xl);

    z-index: calc(var(--layer-sticky) + var(--drawer-stack-order, 0));
    position: fixed;
    inset: unset;
    top: 0;
    right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    flex-direction: column;
    width: var(--theme-drawer-width, var(--sidebar-width));
    max-width: 100%;
    max-height: none;
    height: 100dvh;
    padding: 0;
    border: none;
    border-left: var(--style-border-drawer);
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  .theme-drawer__dialog[open] {
    display: flex;
    right: 0;
  }

  .theme-drawer__dialog--opening {
    animation: drawer-slide-in var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--opening-inline-start {
    animation: drawer-slide-in-inline-start var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--closing {
    animation: drawer-slide-out var(--animation-speed) var(--animation-timing-fade-out) forwards;
  }

  .theme-drawer__dialog-instant {
    animation: none;
  }

  @keyframes drawer-slide-in {
    from {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  @keyframes drawer-slide-in-inline-start {
    from {
      right: calc(var(--theme-drawer-width, var(--sidebar-width)) / 2);
    }
  }

  @keyframes drawer-slide-out {
    to {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  .theme-drawer__dialog::backdrop {
    background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
  }

  /* Exclude open drawers from the page navigation cross-fade so they
     stay frozen (visually unchanged) while the rest of the page transitions. */
  html:active-view-transition-type(page-navigation) .theme-drawer__dialog[open] {
    view-transition-name: theme-drawer;
  }

  ::view-transition-old(theme-drawer),
  ::view-transition-new(theme-drawer) {
    animation: none;
  }

  .theme-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--theme-drawer-padding);
    flex-shrink: 0;
    color: var(--color-foreground);
  }

  .theme-drawer__title {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin: 0;
  }

  .theme-drawer__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: var(--style-border-radius-lg);
    background-color: rgb(var(--color-foreground-rgb) / 0.1);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
    padding-inline: 0.5em;
    line-height: 1;
  }

  .theme-drawer__badge[data-maintain-ratio] {
    aspect-ratio: 1 / 1;
    padding-inline: 0.2em;
  }

  .theme-drawer__close-button {
    --private-button-size: 34px;
    --private-focus-ring-size: 2px;
    --private-motion-speed: 150ms;
    --private-motion-ease: cubic-bezier(0.25, 0, 0.1, 1);
    --private-border-width: 1px;
    --private-button-border-color: rgb(0, 0, 0, 0.06);
    --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    width: var(--private-button-size);
    height: var(--private-button-size);
    border-radius: var(--private-button-size);
    background-color: var(--color-background);
    outline: var(--private-focus-ring-size) solid transparent;
    outline-offset: var(--private-focus-ring-size);
    transition-property: color, outline-color, background-color;
    transition-duration: var(--private-motion-speed);
    transition-timing-function: var(--private-motion-ease);

    /* Legacy non-contrast-aware color scheme */
    --button-icon-opacity: 0.8;
    color: var(--color-foreground);
    border: var(--private-border-width) solid var(--private-button-border-color);
    box-shadow: var(--private-button-shadow);

    &:hover:not(:active) {
      /* Legacy non-contrast-aware color scheme */
      --button-icon-opacity: 1;
    }

    &:focus-visible {
      outline-color: var(--color-foreground);
    }
  }

  @supports (color: oklch(from red l c h)) {
    .theme-drawer__close-button {
      --contrast-color: oklch(from var(--color-background) clamp(0, (0.6 / l - 1) * infinity, 1) 0 0);
      --button-icon-opacity: 1;
      --private-button-border-color: color-mix(in srgb, var(--contrast-color) 6%, transparent);
      --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

      color: color-mix(in srgb, var(--contrast-color) 50%, transparent);

      &:hover:not(:active) {
        color: color-mix(in srgb, var(--contrast-color) 70%, transparent);
      }
    }

    .theme-drawer__close-button:hover:not(:active) {
      background-color: color-mix(in srgb, var(--contrast-color) 6%, var(--color-background));
    }
  }
/* END_SNIPPET:theme-drawer-styles */

/* START_SNIPPET:variant-picker-styles (INDEX:303) */
/* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  /* Dropdown variant option styles */
  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-variant-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
    color: var(--color-variant-text);
  }

  .variant-option__select-wrapper:has(.swatch) {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  .variant-option__select-wrapper:hover {
    border-color: var(--color-variant-hover-border);
    color: var(--color-variant-hover-text);
  }

  .variant-option__select-wrapper:hover .variant-option__select {
    background-color: var(--color-variant-hover-background);
  }

  .variant-option__select:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__select {
    padding-block: var(--padding-md);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
    appearance: none;
    background-color: var(--color-variant-background);
    color: inherit;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
  }

  .variant-option__select-wrapper .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .variant-option__select--has-swatch {
    padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
  }

  .variant-option__select-wrapper .swatch {
    position: absolute;
    top: 50%;
    left: var(--padding-md);
    transform: translateY(-50%);
  }

  /* Variant picker alignment modifiers */
  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }

  .variant-picker .variant-option--buttons label:has(.swatch) {
    border-radius: var(--variant-picker-swatch-radius);
  }

  /* Variant option component */
  .variant-option {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);
    --variant-option-padding-inline: var(--padding-md);
  }

  .variant-option + .variant-option {
    margin-top: var(--padding-lg);
  }

  .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: 100%;

    overflow-list::part(list) {
      padding-block: var(--overflow-list-padding-block, 0);
      padding-inline: var(--overflow-list-padding-inline, 0);
    }
  }

  .variant-option--swatches > overflow-list {
    justify-content: var(--product-swatches-alignment);

    @media screen and (max-width: 749px) {
      justify-content: var(--product-swatches-alignment-mobile);
    }
  }

  .variant-option--buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    margin: 0;
    padding: 0;
    border: none;
  }

  .variant-option--buttons legend {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .variant-option--buttons legend,
  .variant-option--dropdowns > label,
  .variant-option[data-testid='variant-option-single'] {
    color: var(--variant-option-label-color, var(--color-foreground));
  }

  .variant-option__swatch-value {
    padding-inline-start: var(--padding-xs);
    color: var(--variant-option-label-color-subdued, var(--color-foreground-subdued));
  }

  @media (prefers-reduced-motion: no-preference) {
    .variant-option__button-label,
    .variant-option__select-wrapper,
    .variant-option__button-label::before,
    .variant-option__button-label::after,
    .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
      .variant-option__button-label__pill {
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--animation-easing);
    }

    .variant-option__button-label__pill {
      transition-property: transform;
    }

    .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
      .variant-option__button-label__pill {
      transition-property: transform;
    }

    .variant-option__button-label::after {
      transition-property: clip-path;
    }

    .variant-option__button-label::before {
      transition-property: border-color;
    }

    .variant-option__select-wrapper,
    .variant-option__button-label {
      transition-property: background-color, border-color, color;
    }
  }

  .variant-option__button-label {
    --variant-picker-stroke-color: var(--color-variant-border);

    cursor: pointer;
    display: flex;
    flex: 0 0 3.25em;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--options-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    overflow: clip;
    justify-content: center;
    min-height: 3.25em;
    min-width: fit-content;
    white-space: nowrap;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    gap: 0;

    &:hover,
    &:hover:has([aria-disabled='true']):has([data-option-available='false']) {
      --variant-picker-stroke-color: var(--color-variant-hover-border);

      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }

    /* we need something like overflow-clip-margin to use the pseudoelement but it doesn't work in Safari */

    /* so instead use the layered background image trick */
    &:not(.variant-option__button-label--has-swatch):has([data-option-available='false']) {
      border-width: 0;
    }

    /* ::after/::before act as a fake border for the button style variant */

    /* ::after is the unavailable variant border that clips in */
    &:not(.variant-option__button-label--has-swatch)::before,
    &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::after {
      content: '';
      position: absolute;
      inset: 0;
      border: var(--options-border-width) solid var(--color-selected-variant-border);
      border-radius: inherit;
      pointer-events: none;
      z-index: 2;
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(var(--clip, 0 0 0 0));
    }

    &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::before {
      inset: 0;
    }

    &:not(.variant-option__button-label--has-swatch)::before {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(0 0 0 0);
      border-color: var(--color-variant-border);
      inset: calc(var(--options-border-width) * -1);
    }

    &:has(:checked):not(.variant-option__button-label--has-swatch, :has([data-option-available='false']))::before {
      border-color: var(--color-selected-variant-border);
    }

    /* setting left/right accounts for variant buttons of different widths */
    &:not(:has(:checked)):has(~ label > :checked),
    &:has(:checked):has(~ label > [data-previous-checked='true']) {
      .variant-option__button-label__pill {
        right: 0;
        left: unset;
      }
    }

    &:has([data-previous-checked='true']) ~ label:has([data-current-checked='true']),
    &:has(:checked) ~ label {
      .variant-option__button-label__pill {
        left: 0;
        right: unset;
      }
    }

    &:not(:has(:checked)):has(~ label > :checked) {
      --pill-offset: calc(100% + 1px);
    }

    &:has(:checked) ~ label {
      --pill-offset: calc(-100% - 1px);
    }

    &:has([data-current-checked='true']):first-of-type
      ~ label:last-of-type:not(.variant-option__button-label--has-swatch),
    &:not(:has(:checked)):has(~ label > :checked):not(.variant-option__button-label--has-swatch) {
      --clip: 0 0 0 100%;
    }

    &:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked):not(
        .variant-option__button-label--has-swatch
      ),
    &:has(:checked) ~ label:not(.variant-option__button-label--has-swatch) {
      --clip: 0 100% 0 0;
    }

    &:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill {
      width: max(var(--pill-width-current, 100%), var(--pill-width-previous, 100%));
    }

    @media screen and (min-width: 750px) {
      padding: var(--padding-xs) var(--variant-option-padding-inline);
    }
  }

  /* wrap around only for 3 or more variants in a row */

  /* the more complex selector rules here produce the wrap around effect for first/last variants */
  .variant-option--buttons:has(:nth-of-type(3)) {
    .variant-option__button-label:has([data-current-checked='true']):first-of-type ~ label:last-of-type {
      --pill-offset: calc(100% + 1px);
    }

    .variant-option__button-label:not(:has([data-current-checked='true'])):first-of-type:has(
        ~ label:last-of-type > :checked
      ) {
      --pill-offset: calc(-100% - 1px);
    }
  }

  .variant-option__button-label__pill {
    background: var(--color-selected-variant-background);
    position: absolute;
    top: calc(var(--options-border-width) * -1);
    bottom: calc(var(--options-border-width) * -1);
    border-radius: inherit;
    pointer-events: none;
    width: 100%;
    transform: translateX(var(--pill-offset, 0));
  }

  .variant-option__button-label__text {
    pointer-events: none;
    text-align: start;
    text-wrap: auto;
    z-index: 2;
  }

  .variant-option--equal-width-buttons {
    --variant-min-width: clamp(44px, calc(var(--variant-option-padding-inline) * 2 + var(--variant-ch)), 100%);

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--variant-min-width), 1fr));

    .variant-option__button-label {
      min-width: var(--variant-min-width);
    }

    .variant-option__button-label__text {
      text-align: center;
      text-wrap: balance;
    }
  }

  .variant-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__button-label--has-swatch {
    --focus-outline-radius: var(--variant-picker-swatch-radius);

    padding: 0;
    border: none;
    flex-basis: auto;
    min-height: auto;
  }

  /* Override global label:has(input) display rule with higher specificity */
  .variant-option__button-label--has-swatch:has(input) {
    display: block;
  }

  .variant-option__button-label:has(:checked) {
    --variant-picker-stroke-color: var(--color-selected-variant-border);

    color: var(--color-selected-variant-text);
    border-color: var(--color-selected-variant-border);
  }

  .variant-option__button-label:has(:checked):hover {
    border-color: var(--color-selected-variant-hover-border);
    color: var(--color-selected-variant-hover-text);

    .variant-option__button-label__pill {
      background-color: var(--color-selected-variant-hover-background);
    }
  }

  .variant-option__button-label:has([data-option-available='false']) {
    color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
  }

  .variant-option__button-label--has-swatch:hover {
    outline: var(--focus-outline-width) solid var(--color-variant-hover-border);
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__button-label--has-swatch:has([data-option-available='false']) svg,
  .variant-option__button-label--has-swatch:has([data-option-available='false']) .swatch {
    stroke: rgb(var(--color-variant-text-rgb) / var(--opacity-subdued-text));
  }

  /* Disable the duplicate overlay line so the subdued stroke doesn't double up */
  .variant-option__button-label--has-swatch:has([data-option-available='false']) svg line:last-of-type {
    stroke: none;
  }

  .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: var(--focus-outline-width) solid var(--color-selected-variant-border);

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  /* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /** There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround. **/
    .variant-option__button-label--has-swatch:has(:checked),
    .variant-option__button-label:has(:focus-visible) .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .variant-option__button-label--has-swatch:has(:checked)::after,
    .variant-option__button-label:has(:focus-visible) .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }

  .variant-option__button-label:has([data-option-available='false']):has(:checked) {
    --variant-strikethrough-color: rgb(var(--color-selected-variant-text-rgb) / var(--opacity-subdued-text));

    background-color: var(--color-selected-variant-background);
    color: rgb(var(--color-selected-variant-text-rgb) / var(--opacity-subdued-text));
  }

  .variant-option__button-label:has([data-option-available='false']):has(:checked):hover {
    background-color: var(--color-selected-variant-hover-background);
    color: var(--color-selected-variant-hover-text);
  }

  .variant-option__button-label input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .variant-option__button-label svg {
    position: absolute;
    left: var(--options-border-width);
    top: var(--options-border-width);
    height: calc(100% - (var(--options-border-width) * 2));
    width: calc(100% - (var(--options-border-width) * 2));
    cursor: pointer;
    pointer-events: none;
    stroke-width: var(--style-border-width);
    stroke: var(--variant-picker-stroke-color);
  }

  .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg {
    stroke: var(--variant-strikethrough-color, rgb(var(--color-variant-text-rgb) / var(--opacity-60)));

    line {
      stroke-width: var(--options-border-width);
    }

    /* The second stroke line exists for "motion overlay". Disabled for swatches, remove line to avoid overlapping lines  */
    line:last-of-type {
      stroke: none;
    }
  }

  /* Override for swatch labels to maintain block display */
  .variant-option__button-label--has-swatch:has(input[type='radio']) {
    display: block;
  }

  /* Swatches do not take a background-color since a transparent or missing swatch would end up filled */
  .variant-option__button-label--has-swatch:has([data-option-available='false']):has(:checked),
  .variant-option__button-label--has-swatch:has([data-option-available='false']):has(:checked):hover {
    background-color: inherit;
  }
/* END_SNIPPET:variant-picker-styles */

/* START_SNIPPET:variant-swatches (INDEX:304) */
swatches-variant-picker-component {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: var(--product-swatches-alignment-mobile);

    @media screen and (min-width: 750px) {
      justify-content: var(--product-swatches-alignment);
    }

    --overflow-list-padding-block: calc(
        var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
      )
      calc(var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width));
    --overflow-list-padding-inline: calc(
        var(--product-swatches-padding-inline-start) + var(--focus-outline-offset) + (1.5 * var(--focus-outline-width))
      )
      calc(var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width));

    overflow-list::part(list) {
      gap: var(--gap-sm);
    }
  }

  swatches-variant-picker-component overflow-list[disabled='true'] {
    --overflow-list-padding-block: 0px;
    margin-block-start: calc(
      var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
    margin-block-end: calc(
      var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
  }

  .hidden-swatches__count {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;

    &::before {
      /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */
      counter-reset: overflow-count var(--overflow-count);
      content: '+' counter(overflow-count);
      line-height: 1;
      cursor: pointer;
    }
  }

  .hidden-swatches__count:hover {
    color: var(--color-foreground-rgb);
  }
/* END_SNIPPET:variant-swatches */

/* START_SNIPPET:video-background-styles (INDEX:305) */
.video-background,
  .video-background * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .video-background--cover * {
    object-fit: cover;
  }

  .video-background--contain * {
    object-fit: contain;
  }

  @media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:video-background-styles */

/* START_SNIPPET:video-placeholder-styles (INDEX:306) */
.video-placeholder-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: var(--size-style-aspect-ratio, auto);
  }

  :not(deferred-media) > .video-placeholder-wrapper {
    width: var(--video-placeholder-width);
  }

  .video-placeholder-wrapper > * {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .video-placeholder-wrapper.border-style {
    /* Apply the border radius to the video */
    overflow: hidden;
  }

  .video-placeholder-wrapper__poster-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .video-placeholder-wrapper__poster-icon svg {
    width: var(--button-size);
    height: var(--button-size);
    color: var(--color-white);
    filter: drop-shadow(var(--shadow-button));

    &:hover {
      color: rgb(var(--color-white-rgb) / var(--opacity-80));
    }

    @media screen and (min-width: 750px) {
      width: 4rem;
      height: 4rem;
    }
  }
/* END_SNIPPET:video-placeholder-styles */

/* START_SNIPPET:volume-pricing-info (INDEX:308) */
.volume-pricing-info {
    display: inline-flex;
  }

  .volume-pricing-info__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground-secondary);
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
  }

  .volume-pricing-info__button:hover {
    color: var(--color-foreground);
  }

  .volume-pricing-info__button .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .volume-pricing-info__button--with-label {
    width: auto;
    gap: var(--gap-sm);
  }

  .volume-pricing-info__popover {
    --volume-pricing-popover-max-width: 320px;
    --volume-pricing-popover-spacing: 8px;
    --volume-pricing-popover-viewport-margin: 16px;

    min-inline-size: 280px;
    max-inline-size: var(--volume-pricing-popover-max-width);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  /* Native anchor positioning for supported browsers */
  .volume-pricing-info__popover {
    inset: unset;
    top: calc(anchor(bottom) + var(--volume-pricing-popover-spacing));
    left: anchor(left);
  }

  @supports (position-try-fallbacks: --top-left) {
    .volume-pricing-info__popover {
      position-try-fallbacks: --top-left;
    }

    @position-try --top-left {
      top: calc(anchor(top) - var(--volume-pricing-popover-spacing));
      bottom: auto;
      transform: translateY(-100%);
    }
  }

  /* Fallback positioning using custom properties */
  @supports not (position-anchor: --volume-pricing-trigger) {
    .volume-pricing-info__popover {
      position: fixed;
      top: calc(var(--anchor-bottom) * 1px + var(--volume-pricing-popover-spacing));
      left: max(
        var(--volume-pricing-popover-viewport-margin),
        min(
          var(--anchor-left) * 1px,
          100vw - var(--volume-pricing-popover-max-width) - var(--volume-pricing-popover-viewport-margin)
        )
      );
    }
  }

  .volume-pricing-info__popover:popover-open {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .volume-pricing-info__popover:popover-open {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .volume-pricing-info__rules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    padding: var(--padding-md);
    font-size: var(--font-size--xs);
  }

  .volume-pricing-info__rules,
  .volume-pricing-info__rules > span {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .volume-pricing-info__table {
    display: flex;
    flex-direction: column;
  }

  .volume-pricing-info__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size--sm);
    background: var(--color-background);
    border-inline-start: 3px solid transparent;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .volume-pricing-info__row:nth-child(odd) {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing-info__row--active {
    border-inline-start-color: var(--color-foreground);
    font-weight: var(--font-weight-medium);
  }

  .volume-pricing-info__quantity {
    color: var(--color-foreground);
  }

  .volume-pricing-info__price {
    display: flex;
    align-items: center;
    color: var(--color-foreground);
  }

  .volume-pricing-info__checkmark {
    display: none;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-foreground);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */