/** Shopify CDN: Minification failed

Line 11773:10 Expected ":"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:aid-category-cards (INDEX:2) */
/* Headline size = the art director's card-title token (TOKENS §3: 28px desktop, 24px on phones),
     with WA's 35px port value replaced. One variable, so the design pod can retune it in one place. */
  .aid-category-cards {
    --aid-cc-head: var(--aid-fs-h3, 28px);
    font: 400 14px / 1.5 var(--bu-font-body);
    color: var(--bu-ink);
    background: var(--bu-paper);
  }

  /* "Space above" sits on the content, so a section whose cards are all hidden adds no empty gap. */
  .aid-category-cards .aid-category-cards__inner {
    padding-top: var(--aid-cc-pt, 0px);
  }

  .aid-category-cards .aid-category-cards__sub {
    max-width: 640px;
    margin: -12px var(--bu-gutter-3) 24px;
    font: 400 15px / 1.55 var(--bu-font-body);
    color: var(--bu-gray-2);
  }

  /* 12 columns: a card spans 4 (3 across = 448px incl. border at 1440, picture 446 x 297). */
  .aid-category-cards .aid-category-cards__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 20px;
    margin: 0 var(--bu-gutter-2) 36px;
    padding: 0;
    list-style: none;
  }

  .aid-category-cards .aid-category-cards__item {
    display: flex;
    grid-column: span 4;
    min-width: 0;
    margin: 0;
    padding: 0;
  }

  .aid-category-cards .aid-category-cards__card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    position: relative;
    isolation: isolate;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    background: var(--bu-paper);
    color: var(--bu-ink);
    border: 1px solid var(--bu-line-15);
    border-radius: 0;
    text-decoration: none;
  }

  /* The 3:2 box locks the card height whatever ratio is uploaded; the picture snippet fills it. */
  .aid-category-cards .aid-category-cards__visual {
    display: block;
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--bu-soft);
  }

  .aid-category-cards .aid-category-cards__caption {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 16px;
    padding: 22px;
  }

  /* One figure at a time, water blue (TOKENS §5: the logo owns the three-figure row). */
  .aid-category-cards .aid-category-cards__icon {
    display: inline-flex;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    color: var(--aid-blue, #0066cc);
  }

  .aid-category-cards .aid-category-cards__icon svg,
  .aid-category-cards .aid-category-cards__arrow svg {
    width: 100%;
    height: 100%;
  }

  .aid-category-cards .aid-category-cards__text {
    display: block;
    min-width: 0;
  }

  /* The category name: a caps eyebrow on the TOKENS scale (Figtree 700, spaced). */
  .aid-category-cards .aid-category-cards__eyebrow {
    display: block;
    margin: 0 0 8px;
    font: 700 12px / 1.4 var(--bu-font-body);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bu-ink);
  }

  .aid-category-cards .aid-category-cards__headline {
    display: block;
    font: 800 var(--aid-cc-head) / 0.98 var(--bu-font-head);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--bu-ink);
  }

  .aid-category-cards .aid-category-cards__arrow {
    display: inline-flex;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-left: auto;
    color: var(--bu-ink);
  }

  /* Desktop: centre short last rows (see the header comment for every count). */
  @media (min-width: 1001px) {
    .aid-category-cards .aid-category-cards__grid--1 .aid-category-cards__item {
      grid-column: 4 / span 6;
    }

    .aid-category-cards .aid-category-cards__grid--2 .aid-category-cards__item {
      grid-column: span 6;
    }

    .aid-category-cards .aid-category-cards__grid--4 .aid-category-cards__item:nth-child(odd),
    .aid-category-cards .aid-category-cards__grid--5 .aid-category-cards__item:nth-child(4),
    .aid-category-cards .aid-category-cards__grid--8 .aid-category-cards__item:nth-child(7) {
      grid-column: 3 / span 4;
    }

    .aid-category-cards .aid-category-cards__grid--4 .aid-category-cards__item:nth-child(even),
    .aid-category-cards .aid-category-cards__grid--5 .aid-category-cards__item:nth-child(5),
    .aid-category-cards .aid-category-cards__grid--8 .aid-category-cards__item:nth-child(8) {
      grid-column: 7 / span 4;
    }

    .aid-category-cards .aid-category-cards__grid--7 .aid-category-cards__item:nth-child(7) {
      grid-column: 5 / span 4;
    }
  }

  /* Tablet and phone: 2 across, an odd last card centred at the same width. */
  @media (max-width: 1000px) {
    .aid-category-cards .aid-category-cards__item {
      grid-column: span 6;
    }

    .aid-category-cards .aid-category-cards__item:last-child:nth-child(odd) {
      grid-column: 4 / span 6;
    }
  }

  /* Tablet captions get narrow (3 across at 1001-1100, 2 across below): tighten them (WA values). */
  @media (min-width: 701px) and (max-width: 1100px) {
    .aid-category-cards .aid-category-cards__caption {
      gap: 12px;
      padding: 18px;
    }
  }

  @media (max-width: 700px) {
    .aid-category-cards .aid-category-cards__inner {
      padding-top: calc(var(--aid-cc-pt, 0px) * 0.75);
    }

    .aid-category-cards .aid-category-cards__sub {
      margin: -8px var(--bu-gutter-3) 20px;
      font-size: 14px;
    }

    .aid-category-cards .aid-category-cards__grid {
      gap: 12px 10px;
      margin: 0 var(--bu-gutter-2) 27px;
    }

    /* "One per row": WA's stacked full card. (0,4,0) so it beats the odd-last-card rule above. */
    .aid-category-cards.aid-category-cards--stack .aid-category-cards__grid .aid-category-cards__item {
      grid-column: 1 / -1;
    }

    .aid-category-cards.aid-category-cards--stack .aid-category-cards__caption {
      gap: 12px;
      padding: 18px;
    }

    .aid-category-cards.aid-category-cards--stack .aid-category-cards__eyebrow {
      font-size: 11px;
    }

    /* Both two-per-row layouts: a small caption grid. Row 1 = icon · name · arrow, row 2 = the joke across
       the whole card (display: contents lets the name and the joke sit in the caption's own grid). The
       whole card stays the link: about 173 x 195 at 390, far over the 44px tap minimum. */
    .aid-category-cards.aid-category-cards--pairs .aid-category-cards__caption,
    .aid-category-cards.aid-category-cards--pairs_names .aid-category-cards__caption {
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr) 14px;
      grid-template-areas:
        "icon name arrow"
        "head head head";
      align-content: start;
      align-items: center;
      gap: 7px 8px;
      padding: 10px 12px 12px;
    }

    .aid-category-cards.aid-category-cards--pairs .aid-category-cards__text,
    .aid-category-cards.aid-category-cards--pairs_names .aid-category-cards__text {
      display: contents;
    }

    .aid-category-cards.aid-category-cards--pairs .aid-category-cards__icon,
    .aid-category-cards.aid-category-cards--pairs_names .aid-category-cards__icon {
      grid-area: icon;
      width: 18px;
      height: 18px;
    }

    .aid-category-cards.aid-category-cards--pairs .aid-category-cards__eyebrow,
    .aid-category-cards.aid-category-cards--pairs_names .aid-category-cards__eyebrow {
      grid-area: name;
      margin: 0;
      font-size: 11px;
      letter-spacing: 0.08em;
    }

    .aid-category-cards.aid-category-cards--pairs .aid-category-cards__headline,
    .aid-category-cards.aid-category-cards--pairs_names .aid-category-cards__headline {
      grid-area: head;
      font-size: 17px;
      line-height: 1;
    }

    .aid-category-cards.aid-category-cards--pairs .aid-category-cards__arrow,
    .aid-category-cards.aid-category-cards--pairs_names .aid-category-cards__arrow {
      grid-area: arrow;
      width: 14px;
      height: 14px;
      margin: 0;
    }

    /* No icon: the name takes the icon's cell too. */
    .aid-category-cards.aid-category-cards--pairs .aid-category-cards__item--no-icon .aid-category-cards__caption,
    .aid-category-cards.aid-category-cards--pairs_names .aid-category-cards__item--no-icon .aid-category-cards__caption {
      grid-template-areas:
        "name name arrow"
        "head head head";
    }

    /* "Names only": the joke and the arrow wait for the category page; the name is the card's text,
       set in the display face so it reads as a label, not a caption. */
    .aid-category-cards.aid-category-cards--pairs_names .aid-category-cards__headline,
    .aid-category-cards.aid-category-cards--pairs_names .aid-category-cards__arrow {
      display: none;
    }

    .aid-category-cards.aid-category-cards--pairs_names .aid-category-cards__caption {
      grid-template-columns: 18px minmax(0, 1fr);
      grid-template-areas: "icon name";
    }

    .aid-category-cards.aid-category-cards--pairs_names .aid-category-cards__item--no-icon .aid-category-cards__caption {
      grid-template-areas: "name name";
    }

    .aid-category-cards.aid-category-cards--pairs_names .aid-category-cards__eyebrow {
      font: 800 17px / 1.05 var(--bu-font-head);
      letter-spacing: 0.01em;
    }

    /* A names-only card with no name shows its headline at name size, so it is never just an icon. */
    .aid-category-cards.aid-category-cards--pairs_names .aid-category-cards__item--no-eyebrow .aid-category-cards__headline {
      display: block;
      grid-area: name;
    }
  }
/* END_SECTION:aid-category-cards */

/* START_SECTION:aid-reviews-placeholder (INDEX:3) */
/* Surfaces. --aid-wave-color feeds the optional wavy top edge (.aid-wave-top in aid-skin.css), so the
     wave is always the band's own colour. Cards: white on the tinted bands, mist on white. */
  .aid-reviews-placeholder {
    --aid-rp-band: var(--aid-pool, #eaf3fc);
    --aid-rp-card: var(--aid-white, #ffffff);
    --aid-wave-color: var(--aid-rp-band);
    padding: var(--aid-rp-pt, 56px) 0 var(--aid-rp-pb, 64px);
    background: var(--aid-rp-band);
    color: var(--bu-ink, #032350);
  }

  .aid-reviews-placeholder--cup {
    --aid-rp-band: var(--aid-cup, #fff5ec);
  }

  .aid-reviews-placeholder--white {
    --aid-rp-band: var(--aid-white, #ffffff);
    --aid-rp-card: var(--aid-mist, #f4f7fa);
  }

  .aid-reviews-placeholder__inner {
    padding-inline: var(--bu-gutter, 28px);
  }

  /* Head row: copy left, button right, bottoms aligned. */
  .aid-reviews-placeholder__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 40px;
    margin-bottom: 32px;
  }

  .aid-reviews-placeholder__copy {
    min-width: 0;
    max-width: 680px;
  }

  .aid-reviews-placeholder .aid-reviews-placeholder__eyebrow {
    color: var(--aid-orange-text, #c34404);
  }

  /* Section-head H2 size from TOKENS §3: Saira Condensed 800 caps, 56px desktop, 43px phone. */
  .aid-reviews-placeholder .aid-reviews-placeholder__h {
    margin: 0;
    font-size: var(--aid-fs-h2, 56px);
    line-height: 0.95;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  .aid-reviews-placeholder .aid-reviews-placeholder__sub {
    max-width: 540px;
    margin: 16px 0 0;
    font: 400 var(--aid-fs-long, 16px) / 1.6 var(--bu-font-body, Figtree, Arial, sans-serif);
    color: var(--bu-gray-2, #2b3a4d);
  }

  .aid-reviews-placeholder__cta {
    flex: none;
  }

  /* Lane-rope divider between the head and the cards. */
  .aid-reviews-placeholder .aid-reviews-placeholder__lane {
    margin: 0 0 28px;
  }

  /* The wall. Desktop columns from the setting; every card in a row shares the row's height. */
  .aid-reviews-placeholder__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .aid-reviews-placeholder__grid--d4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .aid-reviews-placeholder__item {
    display: flex;
    min-width: 0;
    margin: 0;
  }

  /* Masonry (mixed photo / no-photo walls): CSS columns, each card keeps its own height. */
  .aid-reviews-placeholder__grid.aid-reviews-placeholder__grid--masonry {
    display: block;
    columns: 3;
    column-gap: 20px;
  }

  .aid-reviews-placeholder__grid--masonry.aid-reviews-placeholder__grid--d4 {
    columns: 4;
  }

  .aid-reviews-placeholder__grid--masonry > .aid-reviews-placeholder__item {
    margin-bottom: 20px;
    break-inside: avoid;
  }

  /* One card: square corners, navy hairline, no shadow (Sloth / Wolden Art review cards). */
  .aid-reviews-placeholder__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--bu-line-15, rgba(3, 35, 80, 0.15));
    background: var(--aid-rp-card);
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Optional photo: portrait 4:5 so a shirt on a person shows whole. */
  .aid-reviews-placeholder__photo {
    aspect-ratio: 4 / 5;
    background: var(--aid-mist, #f4f7fa);
    overflow: hidden;
  }

  .aid-reviews-placeholder .aid-reviews-placeholder__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Swim · bike · run stripe: blue, navy, orange thirds, the brand's course motif. */
  .aid-reviews-placeholder__stripe {
    display: block;
    flex: none;
    height: 4px;
    background: var(--aid-course-solid, linear-gradient(90deg, #0066cc 0 33.333%, #032350 0 66.667%, #fb6a21 0));
  }

  .aid-reviews-placeholder__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 22px 22px 20px;
  }

  /* Star row. Orange = a real review's rating; the rest of the row and the whole placeholder row are grey. */
  .aid-reviews-placeholder__stars {
    display: flex;
    gap: 3px;
    font-size: 18px;
    line-height: 1;
  }

  .aid-reviews-placeholder__star {
    color: var(--aid-hairline, #cfd9e3);
  }

  .aid-reviews-placeholder .aid-reviews-placeholder__star--on {
    color: var(--aid-orange, #fb6a21);
  }

  .aid-reviews-placeholder .aid-reviews-placeholder__quote {
    margin: 14px 0 0;
    padding: 0;
    border: 0;
    font: 400 15px / 1.55 var(--bu-font-body, Figtree, Arial, sans-serif);
    color: var(--bu-gray-2, #2b3a4d);
  }

  .aid-reviews-placeholder .aid-reviews-placeholder__quote p {
    margin: 0;
  }

  /* Reviewer line pinned to the bottom edge so names line up across a row; padding-top is the minimum gap. */
  .aid-reviews-placeholder__by {
    margin-top: auto;
    padding-top: 18px;
  }

  .aid-reviews-placeholder__by::before {
    content: "";
    display: block;
    height: 1px;
    margin-bottom: 14px;
    background: var(--bu-line-12, rgba(3, 35, 80, 0.125));
  }

  .aid-reviews-placeholder .aid-reviews-placeholder__name {
    margin: 0;
    font: 700 15px / 1.3 var(--bu-font-body, Figtree, Arial, sans-serif);
    color: var(--bu-ink, #032350);
  }

  /* Detail line in the spaced-capitals label. Slate on white 7.27:1. */
  .aid-reviews-placeholder .aid-reviews-placeholder__detail {
    margin: 4px 0 0;
    font: 600 var(--aid-fs-label, 13px) / 1.3 var(--bu-font-head, "Saira Condensed", "Arial Narrow", sans-serif);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--aid-slate, #4a5868);
  }

  /* Theme editor only: the hidden-section note. */
  .aid-reviews-placeholder.aid-reviews-placeholder--off {
    padding: 14px var(--bu-gutter, 28px);
    background: var(--aid-mist, #f4f7fa);
    border-block: 1px dashed var(--bu-line-25, rgba(3, 35, 80, 0.25));
  }

  .aid-reviews-placeholder .aid-reviews-placeholder__off-note {
    margin: 0;
    font: 400 13px / 1.4 var(--bu-font-body, Figtree, Arial, sans-serif);
    color: var(--aid-slate, #4a5868);
  }

  @media (max-width: 1100px) {
    .aid-reviews-placeholder__grid--d4 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .aid-reviews-placeholder__grid--masonry.aid-reviews-placeholder__grid--d4 {
      columns: 3;
    }
  }

  @media (max-width: 900px) {
    .aid-reviews-placeholder__grid--d3,
    .aid-reviews-placeholder__grid--d4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aid-reviews-placeholder__grid.aid-reviews-placeholder__grid--masonry {
      columns: 2;
    }
  }

  @media (max-width: 700px) {
    .aid-reviews-placeholder {
      padding: calc(var(--aid-rp-pt, 56px) * 0.64) 0 calc(var(--aid-rp-pb, 64px) * 0.64);
    }

    .aid-reviews-placeholder__inner {
      padding-inline: 16px;
    }

    .aid-reviews-placeholder__head {
      flex-direction: column;
      align-items: stretch;
      gap: 22px;
      margin-bottom: 24px;
    }

    .aid-reviews-placeholder .aid-reviews-placeholder__sub {
      margin-top: 12px;
    }

    .aid-reviews-placeholder .aid-reviews-placeholder__lane {
      margin: 0 0 20px;
    }

    .aid-reviews-placeholder__grid.aid-reviews-placeholder__grid--m2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .aid-reviews-placeholder__grid.aid-reviews-placeholder__grid--m1 {
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
    }

    .aid-reviews-placeholder__grid.aid-reviews-placeholder__grid--masonry {
      columns: 2;
      column-gap: 10px;
    }

    .aid-reviews-placeholder__grid.aid-reviews-placeholder__grid--masonry.aid-reviews-placeholder__grid--m1 {
      columns: 1;
    }

    .aid-reviews-placeholder__grid--masonry > .aid-reviews-placeholder__item {
      margin-bottom: 10px;
    }

    .aid-reviews-placeholder__grid--masonry.aid-reviews-placeholder__grid--m1 > .aid-reviews-placeholder__item {
      margin-bottom: 12px;
    }

    /* Two across (grid only): an odd last card takes the whole row instead of leaving a hole beside it. */
    .aid-reviews-placeholder__grid--m2:not(.aid-reviews-placeholder__grid--masonry) > .aid-reviews-placeholder__item:last-child:nth-child(odd) {
      grid-column: 1 / -1;
    }

    .aid-reviews-placeholder__grid--m2:not(.aid-reviews-placeholder__grid--masonry) > .aid-reviews-placeholder__item:last-child:nth-child(odd) .aid-reviews-placeholder__photo {
      aspect-ratio: 3 / 2;
    }

    .aid-reviews-placeholder__content {
      padding: 16px 16px 14px;
    }

    .aid-reviews-placeholder__grid--m2 .aid-reviews-placeholder__content {
      padding: 14px 13px 13px;
    }

    .aid-reviews-placeholder__stars {
      gap: 2px;
      font-size: 16px;
    }

    .aid-reviews-placeholder .aid-reviews-placeholder__quote {
      margin-top: 11px;
      font-size: 14px;
      line-height: 1.5;
    }

    .aid-reviews-placeholder__by {
      padding-top: 14px;
    }

    .aid-reviews-placeholder__by::before {
      margin-bottom: 11px;
    }

    .aid-reviews-placeholder .aid-reviews-placeholder__name {
      font-size: 14px;
    }

    .aid-reviews-placeholder .aid-reviews-placeholder__detail {
      font-size: var(--aid-fs-label, 12px);
    }
  }
/* END_SECTION:aid-reviews-placeholder */

/* START_SECTION:aid-story (INDEX:4) */
.aid-story {
    --aid-story-band: var(--aid-white, #ffffff);
    padding: var(--aid-story-pt, 64px) 0 var(--aid-story-pb, 64px);
    background: var(--aid-story-band);
    color: var(--bu-ink, #032350);
  }

  .aid-story--pool {
    --aid-story-band: var(--aid-pool, #eaf3fc);
  }

  .aid-story--cup {
    --aid-story-band: var(--aid-cup, #fff5ec);
  }

  .aid-story__inner {
    padding-inline: var(--bu-gutter, 28px);
  }

  /* With a picture: 5 : 6 columns, words vertically centred against the picture. */
  .aid-story--pic .aid-story__inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 56px;
    align-items: center;
  }

  .aid-story--pic-right .aid-story__visual {
    order: 2;
  }

  /* The picture box: the parent owns the shape, bu-picture fills it (bu-sloth.css .bu-pic). */
  .aid-story__visual {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--aid-mist, #f4f7fa);
  }

  .aid-story__visual--1-1 {
    aspect-ratio: 1 / 1;
  }

  .aid-story__visual--3-2 {
    aspect-ratio: 3 / 2;
  }

  .aid-story__copy {
    min-width: 0;
  }

  .aid-story--text .aid-story__copy > :is(.aid-story__eyebrow, .aid-story__h, .aid-story__intro) {
    max-width: 760px;
  }

  .aid-story .aid-story__eyebrow {
    color: var(--aid-orange-text, #c34404);
  }

  /* Section-head H2 size from TOKENS §3: Saira Condensed 800 caps, 56px desktop, 43px phone. */
  .aid-story .aid-story__h {
    margin: 0;
    font-size: var(--aid-fs-h2, 56px);
    line-height: 0.95;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  .aid-story .aid-story__intro {
    margin: 18px 0 0;
    font: 400 var(--aid-fs-long, 16px) / 1.6 var(--bu-font-body, Figtree, Arial, sans-serif);
    color: var(--bu-gray-2, #2b3a4d);
  }

  /* Points: stacked beside a picture, side by side without one. Each sits under a navy hairline. */
  .aid-story__points {
    display: grid;
    gap: 0;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
  }

  .aid-story--text .aid-story__points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 36px;
  }

  .aid-story--text .aid-story__points--c1 {
    grid-template-columns: minmax(0, 520px);
  }

  .aid-story--text .aid-story__points--c2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aid-story--text .aid-story__points--c4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .aid-story__point {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid var(--bu-line-20, rgba(3, 35, 80, 0.2));
  }

  .aid-story--pic .aid-story__point:last-child {
    border-bottom: 1px solid var(--bu-line-20, rgba(3, 35, 80, 0.2));
  }

  .aid-story--text .aid-story__point {
    flex-direction: column;
    gap: 14px;
    padding: 22px 0 0;
  }

  .aid-story__icon {
    display: flex;
    flex: none;
    color: var(--aid-blue, #0066cc);
  }

  .aid-story__point-body {
    min-width: 0;
  }

  .aid-story .aid-story__point-h {
    margin: 0;
    font: 800 var(--aid-fs-h3, 28px) / 1 var(--bu-font-head, "Saira Condensed", "Arial Narrow", sans-serif);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--bu-ink, #032350);
  }

  .aid-story--pic .aid-story__point-h {
    font-size: 22px;
  }

  .aid-story .aid-story__point-p {
    margin: 8px 0 0;
    font: 400 15px / 1.6 var(--bu-font-body, Figtree, Arial, sans-serif);
    color: var(--bu-gray-2, #2b3a4d);
  }

  /* Closing line: the short course line over one line in the display face; the button beside it
     (it wraps under it when there is no room). */
  .aid-story__end {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 18px 28px;
    margin-top: 32px;
  }

  .aid-story__close {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
  }

  .aid-story .aid-story__closing {
    margin: 0;
    font: 800 28px / 1.05 var(--bu-font-head, "Saira Condensed", "Arial Narrow", sans-serif);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--bu-ink, #032350);
  }

  @media (max-width: 1000px) {
    .aid-story--pic .aid-story__inner {
      gap: 32px;
    }

    .aid-story--text .aid-story__points--c4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 700px) {
    .aid-story {
      padding: calc(var(--aid-story-pt, 64px) * 0.64) 0 calc(var(--aid-story-pb, 64px) * 0.64);
    }

    .aid-story__inner {
      padding-inline: 16px;
    }

    .aid-story--pic .aid-story__inner {
      grid-template-columns: minmax(0, 1fr);
      gap: 26px;
    }

    .aid-story--pic-right .aid-story__visual {
      order: 0;
    }

    .aid-story .aid-story__intro {
      margin-top: 14px;
    }

    .aid-story__points,
    .aid-story--text .aid-story__points,
    .aid-story--text .aid-story__points--c1,
    .aid-story--text .aid-story__points--c2,
    .aid-story--text .aid-story__points--c4 {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
      margin-top: 24px;
    }

    .aid-story--text .aid-story__point {
      flex-direction: row;
      gap: 14px;
      padding: 16px 0;
    }

    .aid-story--text .aid-story__point:last-child {
      border-bottom: 1px solid var(--bu-line-20, rgba(3, 35, 80, 0.2));
    }

    .aid-story .aid-story__point-h,
    .aid-story--pic .aid-story__point-h {
      font-size: 22px;
    }

    .aid-story .aid-story__closing {
      font-size: 24px;
    }

    .aid-story__end {
      margin-top: 26px;
    }
  }
/* END_SECTION:aid-story */

/* START_SECTION:bu-arrivals-banner (INDEX:5) */
.bu-section.bu-arrivals-banner {
    padding: 0;
    background: #fff;
  }
  .bu-arrivals-banner .bu-arrivals {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    height: clamp(230px, 24vw, 330px);
    margin: 0 var(--bu-gutter) 24px;
    background: var(--bu-sand);
    color: var(--bu-ink);
    text-decoration: none;
  }
  .bu-arrivals-banner .bu-arrivals__pic {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 0;
  }
  .bu-arrivals-banner .bu-arrivals__fade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(255, 255, 255, 0.5) 24%,
      rgba(255, 255, 255, 0.08) 38%,
      transparent 46%
    );
  }
  .bu-arrivals-banner .bu-arrivals__copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 42%;
    padding: 24px 36px;
  }
  /* P2 fix 2026-10-04 (QA round 1, home #1): text-wrap: balance. "Nothing new on race day." used to break
     "NOTHING NEW ON RACE / DAY." at 1440, pushing "RACE" (x 445-553) past the white fade onto mid-tone trees.
     Balanced, it breaks "NOTHING NEW / ON RACE DAY." at every width (both lines end by x 365 at 1440, inside
     the fade's strong half), the same break phones already showed. A heading that fits on one line is
     untouched, so Reviews' "The tape's still up." stays one line on desktop. Measured in Chromium with
     Saira Condensed 800 at 1440 / 1280 / 1100 / 900 / 701 / 390 / 360. Chosen over the judge's
     max-width: 400px, which would have split the Reviews heading. Original: no text-wrap rule. */
  .bu-arrivals-banner .bu-arrivals__h {
    font: 800 clamp(40px, 4.5vw, 62px) / 0.97 var(--bu-font-head);
    text-transform: uppercase;
    letter-spacing: -0.025em;
    color: var(--bu-ink);
    margin: 0;
    text-wrap: balance;
  }
  .bu-arrivals-banner .bu-arrivals__sub {
    font: 400 15px / 1.4 var(--bu-font-body);
    color: var(--bu-ink);
    margin: 0;
  }
  /* Arrivals flavour of the small primary button: 700 14 with a 17px arrow (BUILD-PLAN §B5). */
  .bu-arrivals-banner .bu-arrivals .bu-btn {
    font-size: 14px;
  }
  .bu-arrivals-banner .bu-arrivals .bu-btn .bu-icon {
    width: 17px;
    height: 17px;
  }

  @media (max-width: 700px) {
    .bu-arrivals-banner .bu-arrivals {
      height: 120px;
      margin: 0 var(--bu-gutter) 16px;
    }
    .bu-arrivals-banner .bu-arrivals__fade {
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.88) 0%,
        rgba(255, 255, 255, 0.64) 33%,
        rgba(255, 255, 255, 0.12) 56%,
        transparent 70%
      );
    }
    .bu-arrivals-banner .bu-arrivals__copy {
      width: 48%;
      padding: 12px;
      gap: 8px;
    }
    .bu-arrivals-banner .bu-arrivals__h {
      font-size: clamp(25px, 7vw, 32px);
      line-height: 1.02;
    }
    .bu-arrivals-banner .bu-arrivals__sub {
      display: none;
    }
    /* The button becomes a bold underlined text link on phones (Sloth parity) — no hover tint either. */
    .bu-arrivals-banner .bu-arrivals .bu-btn,
    .bu-arrivals-banner .bu-arrivals:hover .bu-btn,
    .bu-arrivals-banner .bu-arrivals .bu-btn:hover {
      background: transparent;
      color: var(--bu-ink);
      padding: 0;
      min-height: 24px;
      gap: 6px;
      font: 700 12px / 1.2 var(--bu-font-body);
      text-decoration: underline;
      text-underline-offset: 3px;
      justify-content: flex-start;
    }
    .bu-arrivals-banner .bu-arrivals .bu-btn .bu-icon {
      width: 14px;
      height: 14px;
    }
  }
/* END_SECTION:bu-arrivals-banner */

/* START_SECTION:bu-club (INDEX:6) */
.bu-club {
    font: 400 14px/1.5 var(--bu-font-body);
    color: var(--bu-ink);
    background: var(--bu-paper);
    text-align: left;
  }

  /* 1120px content column: side padding grows past 28px once the band is wider than 1176. */
  .bu-club__band {
    border-top: 1px solid var(--bu-line-12);
    padding: 64px max(28px, calc((100% - 1120px) / 2));
  }

  .bu-club__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 7vw, 100px);
    align-items: center;
  }

  /* 4:5 box on the link, so any upload gives the same 510 × 638 photo at 1440. */
  .bu-club__photo {
    position: relative;
    display: block;
    width: 100%;
    max-width: 510px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--bu-soft);
  }

  .bu-club__photo .bu-pic__ph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .bu-club__copy {
    min-width: 0;
  }

  /* Sloth's club eyebrow is 600 11 with a slightly wider .1em tracking and no margin. */
  .bu-club .bu-eyebrow {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.1em;
  }

  /* Two-class selector: section CSS is injected before bu-sloth.css, so this must outrank the shared .bu-h. */
  .bu-club .bu-club__h {
    max-width: 440px;
    margin: 14px 0 20px;
    font: 800 clamp(48px, 5.4vw, 74px) / 0.98 var(--bu-font-head);
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: var(--bu-ink);
  }

  .bu-club__intro {
    max-width: 330px;
    margin: 0 0 25px;
    font-size: 15px;
    line-height: 1.65;
  }

  .bu-club__list {
    max-width: 340px;
    margin-top: 34px;
    padding-top: 20px;
    border-top: 1px solid rgba(33, 33, 33, 0.208);
  }

  .bu-club__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 44px;
    color: inherit;
    font-size: 13px;
    line-height: 1.5;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .bu-club__item .bu-icon {
    flex: 0 0 18px;
  }

  @media (max-width: 700px) {
    .bu-club__band {
      padding: 32px 18px 40px;
    }

    .bu-club__grid {
      grid-template-columns: 1fr;
      gap: 26px;
    }

    .bu-club__photo {
      max-width: none;
    }

    .bu-club .bu-club__h {
      max-width: 330px;
      margin: 12px 0 16px;
      font-size: clamp(40px, 11vw, 52px);
    }

    .bu-club__intro {
      max-width: 340px;
      margin-bottom: 22px;
      font-size: 14px;
    }

    .bu-club__list {
      max-width: none;
      margin-top: 26px;
    }
  }
/* END_SECTION:bu-club */

/* START_SECTION:bu-collection-banner (INDEX:7) */
.bu-collection-banner {
    padding: 0;
  }

  /* The band: 330 tall at 1440, 120 on phones (spec 04 §2.3). Sand shows until the photo paints. */
  .bu-collection-banner__hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    height: clamp(230px, 24vw, 330px);
    background: var(--bu-sand);
    color: var(--bu-ink);
  }

  .bu-collection-banner__visual {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .bu-collection-banner__visual .bu-pic,
  .bu-collection-banner__visual .bu-pic img,
  .bu-collection-banner__visual .bu-pic__ph {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }

  .bu-collection-banner__visual .bu-pic img {
    object-fit: cover;
    object-position: var(--bu-pos, 50% 30%);
  }

  /* White fade on the left so the ink title reads over any photo (values from spec 04 §2.3). */
  .bu-collection-banner__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(255, 255, 255, 0.5) 24%,
      rgba(255, 255, 255, 0.08) 38%,
      transparent 46%
    );
  }

  .bu-collection-banner__copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    width: 35%;
    max-width: 500px;
    padding: 24px 36px;
  }

  .bu-collection-banner__h {
    margin: 0;
    font: 800 clamp(40px, 4.5vw, 62px) / 0.97 var(--bu-font-head);
    letter-spacing: -0.025em;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--bu-ink);
  }

  /* QA round 1 (P3, finding 5): text-wrap: pretty keeps a one-word last line (Race Day's "41?") from
     standing alone. Added rather than widening the box, which would only move the widow to other intros. */
  .bu-collection-banner__intro {
    margin: 0;
    max-width: 330px;
    font: 400 14px / 21px var(--bu-font-body);
    color: var(--bu-ink);
    text-wrap: pretty;
  }

  /*
    ADDED 2026-10-05 (review-1110 fix, All Shirts): the redrawn All Shirts picture has the runner filling ~86% of its
    height, so the 330px band (a 4.4:1 window on a 3:1 picture at 1440) cut her at mid-thigh - her cycling shoes and
    the bike's front wheel were out. "whole" sizes the desktop band to the picture's own 3:1 shape (480px at 1440,
    the page's max width), so she shows helmet to shoes at every desktop width. Phones (<=700) keep the 120px band.
  */
  @media (min-width: 701px) {
    .bu-collection-banner__hero--whole {
      height: auto;
      aspect-ratio: 3 / 1;
      min-height: 230px;
    }
  }

  @media (max-width: 700px) {
    .bu-collection-banner__hero {
      height: 120px;
    }

    .bu-collection-banner__visual .bu-pic img {
      object-position: var(--bu-pos-m, var(--bu-pos, 55% 30%));
    }

    /*
      Phone fade pulled LEFT (Joe, round-2 review 2026-09-28): the band-wide fade sat heavily over the
      first shirt (the "I Sleep on Top" tee on Shop All). ORIGINAL phone rule, Sloth's values (spec 04 §2.3):
        linear-gradient(90deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.64) 33%,
                        rgba(255,255,255,.12) 56%, transparent 70%)
      One fixed fade cannot fit every title — at 390 "Shop All" ends 26% across, "Bestsellers" 36%,
      "Related Picks" 40% (measured on DEV, 360–430 wide) — so on phones the SAME white ramp moves onto
      the title (::before below) and ends just past its last letter. Desktop keeps the band-wide fade.
    */
    .bu-collection-banner__shade {
      background: none;
    }

    .bu-collection-banner__copy {
      width: 55%;
      max-width: 310px;
      padding: 12px;
    }

    .bu-collection-banner__h {
      position: relative;
      font-size: clamp(25px, 7vw, 32px);
      line-height: 1.02;
    }

    /*
      ADDED: the phone fade, sized by the title. The copy column is flex-start, so the h1 is exactly as
      wide as its letters; this box runs from the band's left edge (back through the copy's 12px padding)
      to 1.5em past the last letter. Letters sit on .88 → .64 white, the same as the original fade gave
      them; the ramp is clear 1.5em later, so the shirts beside it are not veiled. Top/bottom overshoot
      the 120px band on purpose — the band's overflow:hidden trims them to full height.
      z-index -1 = behind the letters but still above the photo (the copy column is its own layer, z 2).
    */
    .bu-collection-banner__h::before {
      content: '';
      position: absolute;
      z-index: -1;
      top: -120px;
      bottom: -120px;
      left: -12px;
      right: -1.5em;
      pointer-events: none;
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.88) 0%,
        rgba(255, 255, 255, 0.64) calc(100% - 1.5em),
        rgba(255, 255, 255, 0.12) calc(100% - 0.6em),
        transparent 100%
      );
    }

    /* Sloth hides the intro on phones — the 120px band only has room for the title. */
    .bu-collection-banner__intro {
      display: none;
    }
  }
/* END_SECTION:bu-collection-banner */

/* START_SECTION:bu-collection-grid (INDEX:8) */
.bu-collection-grid {
    padding: 0;
  }

  /* When the collection fits on one page there is no pager, so the section carries the 40px bottom. */
  .bu-collection-grid--no-pager {
    padding-bottom: 40px;
  }

  /* One row at ≥1000: pills left, sort right. 14 + 44 + 10 = 68px tall (spec 04 §4.2). */
  .bu-collection-grid__controls {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 40px;
    padding: 14px 28px 10px;
  }

  .bu-collection-grid__pills {
    display: flex;
    gap: 8px;
    margin: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .bu-collection-grid__pills::-webkit-scrollbar {
    display: none;
  }

  .bu-collection-grid__pill {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--bu-line-33);
    border-radius: 0;
    background: transparent;
    color: var(--bu-ink);
    font: 400 12px / 18px var(--bu-font-body);
    text-decoration: none;
    white-space: nowrap;
  }

  /* Active pill = orange surface with ink text (A4). */
  .bu-collection-grid__pill[aria-current='page'] {
    background: var(--bu-orange);
    border-color: var(--bu-orange);
    color: var(--bu-ink);
  }

  .bu-collection-grid__sort {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    margin: 0;
  }

  .bu-collection-grid__sort-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    font: 400 12px / 18px var(--bu-font-body);
    color: var(--bu-gray);
  }

  /* Bottom-border-only native select, 170 × 44 (spec 04 §4.2). */
  .bu-collection-grid__sort .bu-select {
    width: 170px;
    min-height: 44px;
    padding: 8px 22px 8px 8px;
    border: 0;
    border-bottom: 1px solid var(--bu-line-33);
    border-radius: 0;
    background: var(--bu-paper);
    color: var(--bu-ink);
    font: 400 14px / 1.5 var(--bu-font-body);
    appearance: auto;
  }

  .bu-collection-grid__apply {
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--bu-ink);
    border-radius: 0;
    background: var(--bu-paper);
    color: var(--bu-ink);
    font: 400 12px / 18px var(--bu-font-body);
    cursor: pointer;
  }

  .bu-collection-grid__count {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 0 28px 10px;
    font: 400 11px / 1.5 var(--bu-font-body);
    color: var(--bu-gray);
  }

  .bu-collection-grid__empty {
    margin: 0;
    padding: 24px 28px 40px;
    font: 400 14px / 1.5 var(--bu-font-body);
    color: var(--bu-gray);
  }

  /* ADDED 2026-10-04 (P3): the optional link after the empty-state line. */
  .bu-collection-grid__empty-link {
    color: var(--bu-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* ADDED 2026-10-04 (P3): optional footnote under the grid. 24px under the last card row; after a
     pager (which already carries 42px below) it sits close under it and carries the section's 40px end. */
  .bu-collection-grid__note {
    margin: 0;
    padding: 24px 28px 0;
    font: 400 13px / 1.5 var(--bu-font-body);
    color: var(--bu-gray);
    text-align: center;
  }

  .bu-collection-grid .bu-pager + .bu-collection-grid__note {
    margin-top: -18px;
    padding-bottom: 40px;
  }

  .bu-collection-grid__note-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--bu-ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .bu-collection-grid__note-link .bu-icon {
    width: 1em;
    height: 1em;
  }

  /* Pager: centred 44px boxes, 30 above / 42 below = 116px (spec 04 §6). */
  .bu-collection-grid .bu-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 30px 18px 42px;
  }

  .bu-collection-grid .bu-pager a,
  .bu-collection-grid .bu-pager span {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    border: 1px solid var(--bu-hairline);
    border-radius: 0;
    background: transparent;
    color: var(--bu-ink);
    font: 400 14px / 21px var(--bu-font-body);
    text-decoration: none;
  }

  /* Current box = orange bg AND orange border (A4), so no hairline rim shows on the orange
     (QA round 1, P4 low: the shared 1px --bu-hairline border was leaking through). */
  .bu-collection-grid .bu-pager [aria-current='page'] {
    background: var(--bu-orange);
    border-color: var(--bu-orange);
    color: var(--bu-ink);
  }

  /* Tablet + phone: the controls become two stacked rows (Sloth's display:contents, 08 §7). */
  @media (max-width: 999px) {
    .bu-collection-grid__controls {
      display: contents;
    }

    .bu-collection-grid__pills {
      margin: 8px 28px;
    }

    .bu-collection-grid__sort {
      gap: 12px;
      margin: 0 28px 8px;
    }

    .bu-collection-grid__count {
      padding: 0 28px 8px;
    }
  }

  @media (max-width: 700px) {
    .bu-collection-grid--no-pager {
      padding-bottom: 30px;
    }

    .bu-collection-grid__pills {
      gap: 6px;
      margin: 6px 12px;
    }

    .bu-collection-grid__pill {
      padding: 8px 10px;
      font-size: 11px;
    }

    .bu-collection-grid__sort {
      gap: 8px;
      margin: 0 12px 6px;
    }

    /* The word "Sort" stays in the DOM for screen readers but takes no space (parity). */
    .bu-collection-grid__sort-label {
      gap: 0;
    }

    .bu-collection-grid__sort-word {
      font-size: 0;
    }

    /* 16px stops iOS zooming the page when the select gets focus.
       QA round 1 (P3, finding 4): ORIGINAL `width: 154px` chopped "Alphabetically, A-Z" to
       "Alphabetically, /" (the label needs ~190px at 16px). A native select at width:auto sizes to
       its longest option; 154px stays the floor and the 12px side gutters stay clear. */
    .bu-collection-grid__sort .bu-select {
      width: auto;
      min-width: 154px;
      max-width: calc(100vw - 24px);
      padding: 8px 18px 8px 4px;
      font-size: 16px;
    }

    .bu-collection-grid__count {
      padding: 0 12px 6px;
    }

    .bu-collection-grid__empty {
      padding: 20px 12px 30px;
    }

    .bu-collection-grid__note {
      padding: 20px 12px 0;
    }

    .bu-collection-grid .bu-pager + .bu-collection-grid__note {
      padding-bottom: 30px;
    }
  }

  /* QA round 1 (P4 low, polish): page 2 of a 5-page collection draws 7 boxes (← 1 [2] 3 4 5 →).
     7 × 44 + 6 × 8 gap + 2 × 18 padding = 392px — one pixel wider than a 390 phone, so the →
     dropped to a second row (pager 168px tall instead of 116). Sloth has the same numbers and
     wraps too; this is polish, not parity. 6px gaps (the same 8 → 6 step the pills take at ≤700)
     bring the row to 380px so it fits down to a 380px screen. Side padding stays 18 (spec 04 §6). */
  @media (max-width: 391px) {
    .bu-collection-grid .bu-pager {
      gap: 6px;
    }
  }
/* END_SECTION:bu-collection-grid */

/* START_SECTION:bu-collection-teaser (INDEX:9) */
.bu-collection-teaser {
    padding: 0;
  }

  /* Photos 1.15fr | copy 1fr on the soft field, 28px gutters, 25px below (spec 04 §7.1). */
  .bu-collection-teaser__feature {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: stretch;
    margin: 0 28px 25px;
    background: var(--bu-soft);
    color: var(--bu-ink);
  }

  .bu-collection-teaser__photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }

  /* 3:4 box; the picture fills it (A13-31). */
  .bu-collection-teaser__photo {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    min-height: 270px;
    background: var(--bu-soft);
    color: inherit;
    text-decoration: none;
  }

  .bu-collection-teaser__photo .bu-pic,
  .bu-collection-teaser__photo .bu-pic img,
  .bu-collection-teaser__photo .bu-pic__ph {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }

  .bu-collection-teaser__photo .bu-pic img {
    object-fit: cover;
    object-position: var(--bu-pos, 50% 35%);
  }

  .bu-collection-teaser__copy {
    padding: 29px;
  }

  .bu-collection-teaser__h {
    margin: 0 0 18px;
    font: 800 44px / 0.95 var(--bu-font-head);
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: var(--bu-ink);
  }

  .bu-collection-teaser__body {
    margin: 0;
    max-width: 320px;
    font: 400 12px / 1.75 var(--bu-font-body);
    color: var(--bu-gray);
  }

  .bu-collection-teaser__link {
    display: inline-block;
    margin-top: 18px;
  }

  @media (max-width: 850px) {
    .bu-collection-teaser__copy {
      padding: 23px;
    }

    .bu-collection-teaser__h {
      font-size: 39px;
    }
  }

  @media (max-width: 700px) {
    .bu-collection-teaser__feature {
      grid-template-columns: 1fr;
      margin: 0 16px 20px;
    }

    /* Phones: photos above the copy at a fixed 240px (spec 04 §7.1). */
    .bu-collection-teaser__photo {
      height: 240px;
      min-height: 0;
      aspect-ratio: auto;
    }

    .bu-collection-teaser__photo .bu-pic img {
      object-position: var(--bu-pos-m, var(--bu-pos, 50% 30%));
    }

    .bu-collection-teaser__copy {
      padding: 25px 22px;
    }

    .bu-collection-teaser__h {
      font-size: 42px;
    }
  }
/* END_SECTION:bu-collection-teaser */

/* START_SECTION:bu-collection-tiles (INDEX:10) */
.bu-collection-tiles {
    font: 400 14px/1.5 var(--bu-font-body);
    color: var(--bu-ink);
  }

  /* Two 682px tiles at 1440: (1440 - 56 gutter - 20 gap) / 2 */
  .bu-collection-tiles__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 0 28px 36px;
  }

  .bu-collection-tiles__tile {
    display: block;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 0;
    background: var(--bu-paper);
    color: var(--bu-ink);
    border: 1px solid var(--bu-line-15);
    border-radius: 0;
    text-decoration: none;
  }

  /* The 3:2 box locks the band height whatever ratio Joe uploads (plan §A13-16). */
  .bu-collection-tiles__visual {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--bu-soft);
  }

  .bu-collection-tiles__visual .bu-pic__ph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .bu-collection-tiles__caption {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px;
  }

  /* Two-class selectors: section CSS lands before bu-sloth.css, so these must outrank the shared .bu-icon. */
  .bu-collection-tiles__caption .bu-collection-tiles__icon {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    color: var(--bu-orange);
  }

  .bu-collection-tiles__text {
    min-width: 0;
  }

  .bu-collection-tiles__eyebrow {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1.5;
  }

  .bu-collection-tiles__headline {
    display: block;
    font: 800 35px/0.95 var(--bu-font-head);
    letter-spacing: -0.025em;
    text-transform: uppercase;
  }

  .bu-collection-tiles__caption .bu-collection-tiles__arrow {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-left: auto;
    color: var(--bu-ink);
  }

  @media (max-width: 700px) {
    .bu-collection-tiles__grid {
      grid-template-columns: 1fr;
      gap: 12px;
      margin: 0 16px 27px;
    }

    .bu-collection-tiles__caption {
      gap: 12px;
      padding: 18px;
    }

    .bu-collection-tiles__headline {
      font-size: 32px;
    }
  }
/* END_SECTION:bu-collection-tiles */

/* START_SECTION:bu-customer-photos (INDEX:11) */
.bu-customer-photos {
    font: 400 14px/1.5 var(--bu-font-body);
    color: var(--bu-ink);
    background: var(--bu-paper);
  }

  /* Padded band with full-opacity 1px rules top and bottom (1380 inner at 1440). */
  .bu-customer-photos__band {
    padding: 52px 30px 40px;
    border-top: 1px solid var(--bu-ink);
    border-bottom: 1px solid var(--bu-ink);
  }

  /* ---- Heading row ---- */
  .bu-customer-photos__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 30px;
  }

  .bu-customer-photos__intro {
    min-width: 0;
  }

  /* Two-class selector on purpose: section stylesheet CSS is injected via content_for_header,
     BEFORE bu-sloth.css, so a single-class rule would lose a tie against the shared .bu-h. */
  .bu-customer-photos .bu-customer-photos__h {
    margin: 8px 0 15px;
    font: 800 clamp(58px, 8vw, 88px) / 0.95 var(--bu-font-head);
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: var(--bu-ink);
  }

  .bu-customer-photos__sub {
    max-width: 410px;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
  }

  /* Rating summary: stars | number on row 1, count spans row 2, link row 3; left divider. */
  .bu-customer-photos__score {
    display: grid;
    grid-template-columns: auto auto;
    gap: 6px 12px;
    flex: 0 0 auto;
    padding-left: 25px;
    border-left: 1px solid var(--bu-line-33);
    color: inherit;
    text-decoration: none;
  }

  .bu-customer-photos__score .bu-stars {
    font-size: 17px;
    line-height: 1.3;
  }

  .bu-customer-photos__score strong {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.45;
  }

  /* Count only — never a bare `span`, which would also catch .bu-stars and push the number onto its own row. */
  .bu-customer-photos__score .bu-customer-photos__count {
    grid-column: span 2;
    font-size: 12px;
    line-height: 1.55;
  }

  .bu-customer-photos__score b {
    grid-column: span 2;
    margin-top: 4px;
    font-weight: 700;
    font-size: 11px;
    line-height: 1.45;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* ---- Featured review card ---- */
  .bu-customer-photos__feature {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    margin: 0 0 25px;
    border: 1px solid var(--bu-ink);
    background: var(--bu-sand);
  }

  /* 3:4 box with cover + a face-biased focal point (plan §A13-19, safer than Sloth's contain). */
  .bu-customer-photos__feature-photo {
    position: relative;
    display: block;
    align-self: center;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--bu-soft);
  }

  .bu-customer-photos__feature-photo .bu-pic__ph,
  .bu-customer-photos__photo .bu-pic__ph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .bu-customer-photos__badge {
    position: absolute;
    left: 17px;
    bottom: 17px;
    z-index: 1;
    padding: 8px 11px;
    background: var(--bu-paper);
    color: var(--bu-ink);
    font-weight: 600;
    font-size: 11px;
    line-height: 1.45;
    white-space: nowrap;
  }

  .bu-customer-photos__badge--sm {
    left: 10px;
    bottom: 10px;
    padding: 5px 7px;
    font-size: 10px;
  }

  .bu-customer-photos__feature-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    padding: 40px clamp(32px, 5vw, 80px);
  }

  .bu-customer-photos__feature-copy .bu-stars {
    font-size: 17px;
    line-height: 1.3;
  }

  .bu-customer-photos__quote {
    max-width: 100%;
    margin: 18px 0 20px;
    padding: 0;
    border: 0;
    font: 800 clamp(39px, 5.8vw, 63px)/0.98 var(--bu-font-head);
    letter-spacing: -0.025em;
    text-transform: uppercase;
    text-wrap: balance;
  }

  .bu-customer-photos__credit {
    margin: 0;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.45;
  }

  .bu-customer-photos__credit span {
    display: inline-block;
    margin-left: 8px;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.45;
  }

  .bu-customer-photos__label {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.45;
  }

  /* Worn-product mini-card inside the feature copy. */
  .bu-customer-photos__worn {
    display: flex;
    align-items: center;
    gap: 17px;
    width: 100%;
    margin-top: 24px;
    padding: 10px;
    border: 1px solid var(--bu-line-40);
    background: var(--bu-paper);
    color: inherit;
    text-decoration: none;
  }

  .bu-customer-photos__thumb {
    display: block;
    flex: 0 0 auto;
    width: 57px;
    height: 57px;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--bu-soft);
  }

  .bu-customer-photos__worn .bu-customer-photos__thumb {
    width: 85px;
    height: 85px;
  }

  .bu-customer-photos__worn strong {
    display: block;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.45;
  }

  .bu-customer-photos__worn small {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.45;
  }

  .bu-customer-photos__worn b {
    display: block;
    margin-top: 10px;
    font-weight: 700;
    font-size: 11px;
    line-height: 1.45;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* ---- Review-card grid ---- */
  .bu-customer-photos__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
  }

  .bu-customer-photos__card {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .bu-customer-photos__photo {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--bu-soft);
  }

  /* The caption's 14/1.45 strut sets the star and credit line boxes (110px total at 1440). */
  .bu-customer-photos__caption {
    flex: 1;
    padding: 16px 0 18px;
    font-size: 14px;
    line-height: 1.45;
  }

  .bu-customer-photos__caption .bu-stars {
    font-size: 13px;
  }

  .bu-customer-photos__caption p {
    margin: 8px 0;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.5;
  }

  .bu-customer-photos__caption small {
    font-size: 11px;
    line-height: 1.5;
  }

  /* Product strip: fixed min-height so the four strips line up across the row. */
  .bu-customer-photos__shop {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 106px;
    padding: 12px 0;
    border-top: 1px solid var(--bu-line-27);
    border-bottom: 1px solid var(--bu-line-27);
    color: inherit;
    text-decoration: none;
  }

  .bu-customer-photos__shop strong {
    display: block;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.3;
  }

  .bu-customer-photos__shop small {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.45;
  }

  .bu-customer-photos__shop b {
    display: block;
    margin-top: 7px;
    font-weight: 600;
    font-size: 11px;
    line-height: 1.45;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* ---- End row ---- */
  .bu-customer-photos__end {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 26px;
  }

  .bu-customer-photos__end span {
    font-size: 11px;
    line-height: 1.6;
  }

  .bu-customer-photos__end .bu-underlink {
    white-space: nowrap;
  }

  /* Tablet: Sloth narrows the feature photo column to 40%. */
  @media (min-width: 721px) and (max-width: 1000px) {
    .bu-customer-photos__feature {
      grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
    }
  }

  /* This section's own mobile breakpoint is 720 (spec 03 §2.9, 08 §7). */
  @media (max-width: 720px) {
    .bu-customer-photos__band {
      padding: 36px 18px;
    }

    .bu-customer-photos__head {
      align-items: flex-start;
      gap: 18px;
    }

    .bu-customer-photos__sub {
      font-size: 12px;
    }

    .bu-customer-photos__score .bu-stars {
      font-size: 13px;
    }

    .bu-customer-photos__score strong {
      font-size: 14px;
    }

    .bu-customer-photos__feature {
      grid-template-columns: 1fr;
    }

    .bu-customer-photos__feature-photo {
      align-self: auto;
    }

    .bu-customer-photos__feature-copy {
      padding: 24px 22px;
    }

    .bu-customer-photos__quote {
      margin: 14px 0 16px;
      font-size: clamp(34px, 10vw, 43px);
      line-height: 1.06;
      letter-spacing: -0.015em;
    }

    .bu-customer-photos__worn {
      gap: 10px;
    }

    .bu-customer-photos__worn .bu-customer-photos__thumb {
      width: 65px;
      height: 65px;
    }

    .bu-customer-photos__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 26px 15px;
    }

    .bu-customer-photos__shop {
      min-height: 90px;
    }

    .bu-customer-photos__end {
      flex-wrap: wrap;
      gap: 10px;
    }
  }

  /* Phones: heading row stacks, rating summary becomes a 3-column strip under the copy. */
  @media (max-width: 480px) {
    .bu-customer-photos__head {
      display: block;
    }

    .bu-customer-photos__score {
      grid-template-columns: auto auto 1fr;
      gap: 8px 12px;
      align-items: center;
      margin-top: 18px;
      padding: 17px 0 0;
      border-left: 0;
      border-top: 1px solid var(--bu-line-20);
    }

    .bu-customer-photos__score .bu-customer-photos__count {
      grid-column: 3;
      padding-left: 6px;
      font-size: 11px;
    }

    .bu-customer-photos__score b {
      grid-column: 1 / 4;
    }

    .bu-customer-photos__badge--sm {
      left: 6px;
      bottom: 6px;
      font-size: 9px;
    }

    .bu-customer-photos__caption p {
      font-size: 12px;
    }

    .bu-customer-photos__shop {
      align-items: flex-start;
      gap: 8px;
    }

    .bu-customer-photos__shop .bu-customer-photos__thumb {
      width: 44px;
      height: 44px;
    }
  }
/* END_SECTION:bu-customer-photos */

/* START_SECTION:bu-footer (INDEX:12) */
/* ---------- the <footer> wrapper Shopify renders ---------- */
  .bu-footer {
    display: block;
    background: var(--bu-ink, #212121);
    color: var(--bu-cream, #f2ede8);
    font-family: var(--bu-font-body, "DM Sans", Arial, sans-serif);
    font-size: 14px;
    line-height: 1.5;
    padding: 0;
    border-top: 0;
  }

  .bu-footer a {
    color: inherit;
  }

  /* ---------- row 1: tagline + links ---------- */
  .bu-footer__top {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px 32px;
    padding: 28px 28px 20px;
  }

  .bu-footer__tagline {
    font-size: 11px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .bu-footer__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 22px;
  }

  .bu-footer__nav-link {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
  }

  .bu-footer__nav-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* ---------- row 2: email + social ---------- */
  .bu-footer__contact {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px 24px;
    padding: 0 28px 20px;
  }

  .bu-footer__email {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: underline;
    text-underline-offset: 4px;
    overflow-wrap: anywhere;
  }

  .bu-footer__social {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .bu-footer__social li {
    display: block;
    margin: 0;
    padding: 0;
  }

  .bu-footer__social-link {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 1px solid currentColor;
    border-radius: 50%;
    text-decoration: none;
    line-height: 0;
  }

  .bu-footer__social-svg {
    display: block;
    width: 22px;
    height: 22px;
  }

  .bu-footer__email:hover,
  .bu-footer__social-link:hover {
    opacity: 0.8;
  }

  /* ---------- row 1, column mode (Aid 2026-10-04, IA §3): tagline left, up to 3 headed link columns right ----------
     QA round 1 (JUDGE-home #3, P1 low). ORIGINAL: a flex row — tagline (300 px) pinned left, the columns
     (720 px) pinned right — left a ~640 × 290 px empty block under the one-line tagline at 1440. NOW (wider than
     1000 px) a grid: the tagline is the first, slightly wider column (1.3 parts) and the link columns share the
     other 3 parts, so the four spread across the full width. The outer 40 px gap matches the columns' own gap, so
     all four read as one grid. With no tagline, the link columns take the whole row (:only-child below).
     Tablets and phones keep the stacked layout (the ≤1000 px rule switches back to flex). */
  .bu-footer__top--cols {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 3fr);
    align-items: start;
    gap: 24px 40px;
    padding-top: 36px;
  }

  .bu-footer__top--cols .bu-footer__tagline {
    max-width: 320px;
    padding-top: 2px;
  }

  .bu-footer__top--cols .bu-footer__cols:only-child {
    grid-column: 1 / -1;
  }

  /* ORIGINAL also carried `flex: 0 1 720px` (its width in the old flex row); dropped with the grid above. */
  .bu-footer__cols {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 24px 40px;
    min-width: 0;
  }

  .bu-footer .bu-footer__col-h {
    margin: 0 0 6px;
    font: 800 17px/1.1 var(--bu-font-head, "Barlow Condensed", "Arial Narrow", Impact, sans-serif);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--bu-cream, #f2ede8);
  }

  .bu-footer__col-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .bu-footer__col-list li {
    margin: 0;
    padding: 0;
  }

  /* Two classes: outranks the single-row link's 44 px rule above; a list reads as a list at 32 px on desktop. */
  .bu-footer__col-list .bu-footer__col-link {
    min-height: 32px;
    white-space: normal;
  }

  /* ---------- row 3: brand scene ---------- */
  .bu-footer__scene {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    isolation: isolate;
  }

  /* Aid 2026-10-04: ORIGINAL let the <img> set the height (height: auto). The picture now comes from the shared
     bu-picture snippet, which fills its parent absolutely, so this box carries the picture's own shape
     (--bu-footer-ratio, set in Liquid from the file's size) — the whole picture still shows on desktop. */
  .bu-footer__art {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--bu-footer-ratio, 3 / 1);
    line-height: 0;
  }

  /* Joe, 2026-09-28: more air between the wordmark and the drawing — +28px desktop, +12px phone.
     The wordmark stays put; the art (and its fade) move down by --bu-footer-gap of plain ink.

     Joe, 2026-10-04 (~2:15 PM GMT-5): "Add 28px above and below the big [brand name] in the footer graphic."
     ORIGINAL here: --bu-footer-gap: 28px, wordmark at top: 1%. Measured on DEV at 1440 the letters filled rows
     17-99 of the scene while the drawing showed from row 51 (the sun's top ray) and row 69 (the cloud), so the
     wordmark sat ON the sun and the cloud and only 17px under the link row.
     NOW (desktop): the letters move down 28px (28px more above), and the drawing starts 28px below the letters
     (28px clear below), so the sun's rays and the cloud sit under the wordmark instead of beside it. The gap is
     worked out from the wordmark's own size, so it holds at every desktop width, not just 1440:
       --aid-wm-top   the old top (1% of the old 28px + 3:1 scene = 0.28px + 1/300 of the width) + 28px
       0.804em        the letters' bottom edge below the wordmark box top (Saira Condensed 800, line-height 0.9,
                      measured 94.9px at 118.08px)
       1.6vw          how far into the picture the drawing first shows under the fade (23px at 1440)
     vw, not %, on purpose: --bu-footer-gap is also the fade's top/height, where % would mean the scene's HEIGHT.
     --bu-wm-n comes from the <figure> (set in the markup above), same count the wordmark's font size uses. */
  .bu-footer__scene {
    --aid-wm-size: min(8.2vw, calc((100vw - 56px) / (var(--bu-wm-n, 15) * 0.42)));
    --aid-wm-top: calc(0.28px + 100vw / 300 + 28px);
    --bu-footer-gap: calc(var(--aid-wm-top) + var(--aid-wm-size) * 0.804 + 28px - 1.6vw);
    padding-top: var(--bu-footer-gap);
  }

  /* Why the fade: it blends the top edge of the art into the footer colour so the wordmark sits on one surface.
     It starts where the art starts (below the gap) and spans 12% of the ART's height, as before. */
  .bu-footer__scene::before {
    content: "";
    position: absolute;
    inset: var(--bu-footer-gap, 0px) 0 auto;
    height: calc((100% - var(--bu-footer-gap, 0px)) * 0.12);
    background: linear-gradient(var(--bu-ink, #212121), transparent);
    z-index: 1;
    pointer-events: none;
  }

  /* Aid 2026-10-04: ORIGINAL a flat 8.2vw (BU's 15-letter name). The size is now also capped by the
     wordmark's own length (--bu-wm-n characters × 0.42em each, measured on the old 19-letter name = 0.373em per
     character in Saira Condensed 800), so 19 characters — or a longer name — always fit between the gutters.
     At 1440 and 390 the vw value still wins (118 px / 38 px), so the look is unchanged. */
  /* Joe, 2026-10-04: ORIGINAL top: 1%. NOW the old top + 28px (--aid-wm-top, set on the scene above). */
  .bu-footer__wordmark {
    position: absolute;
    z-index: 2;
    top: var(--aid-wm-top, 1%);
    left: 28px;
    right: 28px;
    display: block;
    margin: 0;
    font: 800 min(8.2vw, calc((100vw - 56px) / (var(--bu-wm-n, 15) * 0.42)))/0.9 var(--bu-font-head, "Barlow Condensed", "Arial Narrow", Impact, sans-serif);
    letter-spacing: -0.025em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    color: var(--bu-cream, #f2ede8);
    pointer-events: none;
  }

  /* ---------- row 4: © + bottom-row links + tagline ---------- */
  .bu-footer__bottom {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin: 0 28px;
    padding: 20px 0 24px;
    border-top: 1px solid rgba(242, 237, 232, 0.25);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
  }

  .bu-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 20px;
  }

  /* Two classes: outranks the 44 px / 13 px row-1 link rule; the bottom row is small print. */
  .bu-footer__legal .bu-footer__legal-link {
    min-height: 24px;
    font-size: 12px;
  }

  /* ---------- tablet: Sloth stacks row 1 early ---------- */
  @media (max-width: 1000px) {
    .bu-footer__top {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }

    /* Stacked: back to the flex column (the desktop grid above is wider-than-1000 only); the tagline and
       the columns each take the full width, and the tagline's desktop 320 px cap is lifted. */
    .bu-footer__top--cols {
      display: flex;
      gap: 20px;
    }

    .bu-footer__top--cols .bu-footer__tagline,
    .bu-footer__cols {
      flex: none;
      width: 100%;
    }

    .bu-footer__top--cols .bu-footer__tagline {
      max-width: none;
    }
  }

  /* ---------- phones ---------- */
  @media (max-width: 700px) {
    .bu-footer__top {
      align-items: center;
      text-align: center;
      gap: 14px;
      padding: 26px 20px 16px;
    }

    .bu-footer__nav {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 4px 14px;
      width: 100%;
    }

    .bu-footer__nav-link {
      justify-content: center;
      font-size: 12px;
      line-height: 1.4;
      white-space: normal;
      text-align: center;
    }

    /* Column mode on phones: lists read left-aligned in 2 columns; with 3 columns the first (the long Shop list)
       runs down the left while the other two stack on the right, so both sides end at about the same height. */
    .bu-footer__top--cols {
      align-items: stretch;
      text-align: left;
      gap: 20px;
      padding-top: 30px;
    }

    .bu-footer__cols {
      grid-auto-flow: row;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px 20px;
    }

    .bu-footer__col:first-child:nth-last-child(n + 3) {
      grid-row: span 2;
    }

    .bu-footer__col-list .bu-footer__col-link {
      justify-content: flex-start;
      min-height: 36px;
      font-size: 13px;
      text-align: left;
    }

    .bu-footer__contact {
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 0 20px 20px;
      text-align: center;
    }

    /* content-box: the 50:37 box is the art; the 12px gap is added above it (Joe, 2026-09-28).
       Joe, 2026-10-04 ("28px above and below" the wordmark): ORIGINAL --bu-footer-gap: 12px. NOW 68px =
       12 + 28 (the wordmark moved down 28px, below) + 28 (28px more clear sky between the letters and the
       drawing). The phone picture already had ~135px of sky under the letters, so phones get the literal
       +28 / +28 and the drawing stays whole; the band is 56px taller. */
    .bu-footer__scene {
      --bu-footer-gap: 68px;
      box-sizing: content-box;
      aspect-ratio: 50 / 37;
      overflow: hidden;
    }

    .bu-footer__art {
      position: absolute;
      inset: var(--bu-footer-gap) 0 0;
      width: auto;
      aspect-ratio: auto;
    }

    /* Joe, 2026-10-04: ORIGINAL top: 16px. NOW 44px = 28px more above the wordmark. */
    .bu-footer__wordmark {
      top: 44px;
      left: 20px;
      right: 20px;
      font-size: min(9.8vw, calc((100vw - 40px) / (var(--bu-wm-n, 15) * 0.42)));
    }

    .bu-footer__bottom {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 6px 14px;
      margin: 0 20px;
      padding: 18px 0 22px;
      font-size: 11px;
    }

    .bu-footer__legal {
      justify-content: center;
      gap: 0 18px;
    }

    .bu-footer__legal .bu-footer__legal-link {
      justify-content: center;
      min-height: 32px;
      font-size: 11px;
    }
  }
/* END_SECTION:bu-footer */

/* START_SECTION:bu-header (INDEX:13) */
/* ---------- wrapper (the <header> Shopify renders around this section) ---------- */
  .bu-header-section {
    display: block;
    position: static;
    background: #fff;
    color: var(--bu-ink, #212121);
    font-family: var(--bu-font-body, "DM Sans", Arial, sans-serif);
  }

  /* ---------- the bar ---------- */
  .bu-header {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 83px;
    max-width: var(--bu-max, 1440px);
    margin: 0 auto;
    padding: 13px 27px;
    border-bottom: 1px solid var(--bu-line-25, rgba(33, 33, 33, 0.25));
  }

  /* Three classes on purpose (contract check 2026-09-17): the shared `.bu-header .bu-icon-btn` rule below
     is two classes and sets display:inline-flex, so a single-class `.bu-header__menu { display:none }`
     lost the cascade and the ≡ button rendered on desktop. Sloth shows it on phones only. */
  .bu-header .bu-icon-btn.bu-header__menu {
    display: none;
  }

  /* Open/close cue (Aid 2026-10-04, QA round 1): ≡ while closed, × while open, driven by the aria-expanded
     value bu-header.js already sets. Three classes so these beat `.bu-header .bu-icon-btn svg { display: block }`
     (two classes + an element); the open-state rule adds the attribute, so it beats the default-hidden × rule. */
  .bu-header .bu-header__menu .bu-header__menu-x {
    display: none;
  }

  .bu-header .bu-header__menu[aria-expanded="true"] .bu-header__menu-open {
    display: none;
  }

  .bu-header .bu-header__menu[aria-expanded="true"] .bu-header__menu-x {
    display: block;
  }

  .bu-header__logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: inherit;
    text-decoration: none;
    line-height: 0;
  }

  .bu-header__logo-img {
    display: block;
    height: var(--bu-logo-h, 54px);
    width: auto;
    max-width: none;
    object-fit: contain;
    /* Why multiply: BU's logo PNG has an opaque near-white field; multiply makes it vanish on the white bar. */
    mix-blend-mode: multiply;
  }

  .bu-header__wordmark {
    font: 800 22px/1 var(--bu-font-head, "Barlow Condensed", "Arial Narrow", Impact, sans-serif);
    text-transform: uppercase;
    letter-spacing: -0.025em;
    white-space: nowrap;
  }

  /* ---------- desktop nav ---------- */
  .bu-header__nav {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: 21px;
    min-width: 0;
  }

  .bu-header__link {
    display: inline-block;
    box-sizing: border-box;
    padding: 12px 0;
    border-bottom: 2px solid transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: inherit;
  }

  .bu-header__link[aria-current="page"] {
    border-bottom-color: var(--bu-orange, #fb6a21);
  }

  /* ---------- tools: search + cart ---------- */
  .bu-header__tools {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex: 0 0 auto;
  }

  .bu-header .bu-icon-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 6px;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: inherit;
    cursor: pointer;
    line-height: 0;
    text-decoration: none;
  }

  .bu-header .bu-icon-btn svg {
    display: block;
    width: 18px;
    height: 18px;
  }

  /* No line-height: 0 here (QA round 1, P1 high). Horizon's cart drawer (<cart-drawer-component>,
     rendered INSIDE this cell by the cart-drawer snippet) inherited it — its "Log in" line and
     product titles collapsed to 0 px and drew over the price rows. The 44 px trigger, cart-icon and
     .svg-wrapper each carry their own line-height: 0 below, so the cell needs none; measured on the
     preview 2026-09-25: cell stays 44 × 44, bar 83 / 55. */
  .bu-header__cart {
    position: relative;
    flex: 0 0 auto;
  }

  /* Guard kept from the 2026-09-17 fix: the drawer gets the body line-height the LIVE theme uses
     (14 px → 19.6 px) instead of bu-sloth.css's body 1.5 (21 px), so the drawer reads exactly as it
     does on the live store. */
  .bu-header__cart cart-drawer-component {
    line-height: 1.4;
  }

  /* Drawer buttons keep the live theme's box (QA round 2, P1 low): Horizon's `.button` takes
     `line-height: var(--font-paragraph--line-height)` (base.css), and that token is 1.0 on the LIVE theme but
     1.4 on this one, so the empty state's "CONTINUE SHOPPING" grew from 46 to 52 px tall. line-height 1 gives
     every drawer button LIVE's line box; CHECKOUT has a fixed height and does not move. */
  .bu-header__cart .cart-drawer__dialog .button {
    line-height: 1;
  }

  /* Horizon's cart-drawer trigger button (from the cart-drawer snippet) sized like a Sloth icon button. */
  .bu-header__cart .cart-drawrer-btn,
  .bu-header__cart .bu-header__cart-link {
    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 6px;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: inherit;
    cursor: pointer;
    line-height: 0;
  }

  .bu-header__cart .cart-drawrer-btn:hover,
  .bu-header__cart .cart-drawrer-btn:focus {
    background: none;
    color: inherit;
  }

  /* Three classes (contract check 2026-09-17): Horizon's `.header-actions__action .svg-wrapper` sizes this
     wrapper to --button-size at two-class specificity; at width/height auto it shrinks to the 22px glyph,
     so the button's own centring places the cart icon in the middle of the 44px box.
     Scoped to the trigger button (QA round 2, same cause as the count chip below): the drawer's close
     button and the remove/shipping icons also use `.svg-wrapper`, and these rules reached them — the
     drawer's X rendered 22 px with a 1.33 stroke where the live theme draws it 13.6 px with a 1 px
     stroke. Inside .cart-drawrer-btn only the bag glyph is affected. */
  .bu-header .bu-header__cart .cart-drawrer-btn cart-icon,
  .bu-header .bu-header__cart .cart-drawrer-btn .svg-wrapper {
    display: block;
    position: static;
    width: auto;
    height: auto;
    line-height: 0;
  }

  .bu-header .bu-header__cart .cart-drawrer-btn .svg-wrapper svg,
  .bu-header .bu-header__cart .bu-header__cart-link > svg {
    display: block;
    width: 22px;
    height: 22px;
  }

  /* Glyph weight (QA round 1, P1 low): Horizon's bag is drawn on a 20-grid with a 1 px stroke
     (`--icon-stroke-width`), so at 22 px it read thinner than our 18 px search icon (1.6 on a
     24-grid) and than Sloth's bag. 1.6 × 20/24 = 1.33 gives both header glyphs one rendered
     weight (≈1.47 px). The shape stays Horizon's — the SVG lives in the cart-drawer snippet, which
     this theme leaves untouched (BUILD-PLAN §A11). */
  .bu-header .bu-header__cart .cart-drawrer-btn .svg-wrapper svg path {
    stroke-width: 1.33;
  }

  /* Cart count bubble: 19 px circle in the bottom-right quadrant of the 44 px box (colours come from bu-sloth.css).
     Why three classes: Horizon's header-actions stylesheet positions this same bubble (top-right, 20 px) at
     two-class specificity inside the one aggregated section-CSS file, and its order relative to ours is not
     guaranteed — so ours must simply outrank it.
     Why `.cart-drawrer-btn` is in the selector (QA round 2, P1 med): the cart-drawer snippet renders its <dialog>
     INSIDE this cell, and the drawer heading ("Cart" + count chip) uses the same .cart-bubble class. Without the
     button scope these rules outranked Horizon's `.cart-drawer__heading .cart-bubble` and tore the chip out of
     the heading (absolute, 26 × 19, floating mid-header). The header bubble lives inside the trigger button
     (cart-icon-component), so that is the scope; the drawer chip takes Horizon's own rules and sits 26 × 26
     beside "Cart" exactly as on the live theme. */
  .bu-header .bu-header__cart .cart-drawrer-btn .cart-bubble {
    position: absolute;
    left: calc(50% + 1px);
    top: calc(50% + 1px);
    right: auto;
    bottom: auto;
    width: 19px;
    height: 19px;
    aspect-ratio: auto;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    z-index: 1;
  }

  /* Empty cart: Horizon adds .visually-hidden (clip: rect(0 0 0 0)); keep it collapsed despite the 19 px rule above. */
  .bu-header .bu-header__cart .cart-drawrer-btn .cart-bubble.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
  }

  .bu-header .bu-header__cart .cart-drawrer-btn .cart-bubble__background {
    border-radius: 50%;
  }

  .bu-header .bu-header__cart .cart-drawrer-btn .cart-bubble__text {
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
  }

  /* Horizon carves a donut hole out of the cart glyph where ITS bubble sits (top-right). Ours sits bottom-right
     with a white ring instead (Sloth), so that mask would bite the wrong spot — turn it off. */
  .bu-header .bu-header__cart .header-actions__cart-icon svg {
    -webkit-mask: none;
    mask: none;
  }

  /* ---------- push-down panels ---------- */
  .bu-header__drawer,
  .bu-header__strip {
    display: none;
  }

  .bu-header__drawer[hidden],
  .bu-header__search[hidden] {
    display: none;
  }

  .bu-header__search {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: var(--bu-max, 1440px);
    margin: 0 auto;
    padding: 16px 28px;
    background: #fff;
    border-bottom: 1px solid var(--bu-hairline, #d9d3cb);
  }

  /* Two-class selector on purpose: bu-sloth.css loads after the aggregated section CSS, and its
     .bu-input carries a bottom border + 12px padding; Sloth's search box has neither. */
  .bu-header__search .bu-header__search-input {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: inherit;
    font-family: inherit;
    font-size: 16px;
    line-height: 24px;
    appearance: none;
    -webkit-appearance: none;
  }

  .bu-header__search .bu-header__search-input::placeholder {
    color: var(--bu-gray, #5c5751);
    opacity: 1;
  }

  /* No focus ring on the search box itself (QA round 1, P1 med). bu-header.js focuses this input
     the moment the panel opens (§C·P1 contract), and a text input always matches :focus-visible,
     so P0's global orange 3 px ring boxed the whole panel on open — Sloth shows a bare input with a
     caret (sloth/global/header-390-search-open.png). Three classes outrank the global rule; the
     submit button, the toggles and every other control keep the ring for keyboard users. */
  .bu-header__search .bu-header__search-input:focus-visible {
    outline: 0;
  }

  .bu-header__search .bu-header__search-input::-webkit-search-decoration,
  .bu-header__search .bu-header__search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }

  .bu-header__search-submit {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 44px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: inherit;
    cursor: pointer;
    line-height: 0;
  }

  .bu-header__search-submit svg {
    display: block;
    width: 18px;
    height: 18px;
  }

  /* Oh My Tri logo, 2026-10-07: the wordmark is 4.4 wide for 1 tall (282 px wide at 64 px), about twice as wide
     as the old logo, so on small tablets it ate the menu row. 701-900 px only: cap it at 48 px tall (211 px wide);
     desktop and phones keep the heights set in the section. */
  @media (min-width: 701px) and (max-width: 900px) {
    .bu-header__logo-img {
      height: min(var(--bu-logo-h, 54px), 48px);
    }
  }

  /* ---------- tablet: Sloth's own nav-density rules ---------- */
  @media (max-width: 1100px) {
    /* Let the nav scroll instead of spilling under the icons (QA round 2, P1 low — tablet, not a QA
       width). At 11 px / gap 12 the eight links are ~634 px wide; the tools box starts at viewport − 125,
       so below ~940 px the last links ran under the search/cart icons (seen at 768). overflow-x: auto with
       the scrollbar hidden — the same trick the ≤700 quick strip uses — keeps Sloth's density rules and
       just lets the row scroll on touch. (Sloth is broken here too; this is polish.) The 6 px padding
       + −6 px margin pair leaves room inside the scroll box for the global 3 px focus ring + 3 px offset,
       which a scroll container would otherwise clip; the content sits exactly where it did. */
    .bu-header__nav {
      gap: 12px;
      overflow-x: auto;
      scrollbar-width: none;
      padding: 6px;
      margin: -6px;
    }

    .bu-header__nav::-webkit-scrollbar {
      display: none;
    }

    .bu-header__link {
      font-size: 11px;
    }
  }

  @media (max-width: 850px) {
    .bu-header__nav {
      gap: 13px;
    }

    .bu-header__link {
      font-size: 10px;
    }
  }

  /* ---------- phones ---------- */
  @media (max-width: 700px) {
    /* Aid 2026-10-04 (TOKENS §7.2): ORIGINAL `min-height: 54px; padding: 5px 16px`. The logo is absolutely
       centred here, so it never stretched the bar: a 60 px logo hung 3 px out of a 54 px bar and the
       announcement bar's 6 px wave touched its figures. The bar now grows to logo + 8 px above and below
       (never under Sloth's 54), so the wave always clears the logo. */
    .bu-header {
      position: relative;
      justify-content: space-between;
      gap: 12px;
      min-height: max(54px, calc(var(--bu-logo-h-m, 42px) + 16px));
      padding: 8px 16px;
    }

    .bu-header .bu-icon-btn.bu-header__menu {
      display: inline-flex;
    }

    .bu-header__nav {
      display: none;
    }

    .bu-header__logo {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    /* Aid 2026-10-04: a wide logo (e.g. the words-only file at a tall height) can never run under the ≡ or the
       search/cart buttons — at 390 the free middle is ~190 px (≡ ends at 60, tools start at 290). object-fit:
       contain (above) shrinks it in proportion instead of squashing it. */
    .bu-header__logo-img {
      height: var(--bu-logo-h-m, 42px);
      max-width: calc(100vw - 200px);
    }

    .bu-header__wordmark {
      font-size: 20px;
    }

    /* Tools box 84 wide at x = 290 (QA round 2, P1 low): Sloth's .c-header-tools measures 84 × 44 with a 4 px
       gap because its search button shrinks to 36 px and its 44 px hit box overlaps the cart's by 4 px
       (sloth/global/mobile-menu-390.json). gap 4 + two full 44 px buttons made ours 92 wide, pushing the
       search glyph 8 px left of Sloth's (x 282 vs 290). gap 0 with a -4 px right margin on the search button
       keeps both 44 px hit boxes and lands search at x 290, cart at x 330, tools 84 wide — Sloth's boxes. */
    .bu-header__tools {
      gap: 0;
    }

    .bu-header .bu-icon-btn.bu-header__search-btn {
      margin-right: -4px;
    }

    .bu-header__drawer {
      box-sizing: border-box;
      display: block;
      padding: 12px 18px;
      background: #fff;
      border-bottom: 1px solid var(--bu-line-20, rgba(33, 33, 33, 0.2));
    }

    .bu-header__drawer[hidden] {
      display: none;
    }

    .bu-header__drawer-link {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      min-height: 40px;
      padding: 9px 0;
      color: inherit;
      font-size: 14px;
      font-weight: 400;
      line-height: 21px;
      text-decoration: none;
    }

    /* Aid 2026-10-04: the page you are on, and the hairline that splits shop links from page links (IA §3). */
    .bu-header__drawer-link[aria-current="page"],
    .bu-header__strip-link[aria-current="page"] {
      font-weight: 700;
      text-decoration: underline;
      text-decoration-color: var(--bu-orange, #fb6a21);
      text-decoration-thickness: 2px;
      text-underline-offset: 5px;
    }

    .bu-header__drawer-link--divided {
      margin-top: 8px;
      border-top: 1px solid var(--bu-line-20, rgba(33, 33, 33, 0.2));
    }

    .bu-header__strip {
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      gap: 5px;
      min-height: 39px;
      padding: 0 16px;
      background: var(--bu-soft, #f6f3ef);
      border-bottom: 1px solid var(--bu-line-15, rgba(33, 33, 33, 0.15));
      overflow-x: auto;
      white-space: nowrap;
      scrollbar-width: none;
    }

    .bu-header__strip::-webkit-scrollbar {
      display: none;
    }

    .bu-header__strip-link {
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
      min-height: 38px;
      padding: 3px 0;
      color: inherit;
      font-size: 11px;
      font-weight: 400;
      line-height: 1.4;
      text-decoration: none;
    }

    /* No phone override for .bu-header__search (QA round 1, P1 low ×3): Sloth keeps
       `padding: 16px 28px` at every width (390: input x = 28, w = 292, submit at x = 332 —
       sloth/global/header-390-states.json). The earlier `16px 16px` came from a line in
       BUILD-PLAN §C·P1 that disagreed with Sloth's own measurement. */
  }
/* END_SECTION:bu-header */

/* START_SECTION:bu-hero (INDEX:14) */
.bu-section.bu-hero {
    padding: 0;
    background: #fff;
  }

  /* ---- 1. Photo banner ------------------------------------------------ */
  .bu-hero .bu-hero__banner {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    height: clamp(430px, 42vw, 820px);
    background: var(--bu-ink);
    color: #fff;
  }
  /* The banner owns the box; the shared picture just fills it. */
  .bu-hero .bu-hero__pic {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 0;
  }
  .bu-hero .bu-hero__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      90deg,
      rgba(var(--bu-shade), 0.8) 0%,
      rgba(var(--bu-shade), 0.66) 26%,
      rgba(var(--bu-shade), 0.314) 41%,
      rgba(var(--bu-shade), 0) 57%
    );
  }
  .bu-hero .bu-hero__copy {
    position: relative;
    z-index: 2;
    width: 42%;
    max-width: 680px;
    padding: 40px clamp(28px, 4vw, 76px);
  }
  .bu-hero .bu-hero__copy .bu-hero__kicker {
    color: #fff;
    /* ADDED 2026-10-04 (review-1110 fix): Joe's eyebrow "Comfy shirts for swimmers, bikers, runners" is longer than
       the 272px cap the shared .bu-kicker--xs class sets (sized for an older, shorter line), so at 1440 it broke
       with "RUNNERS" alone on a second line. The hero is the only user of --xs; this widens it here only, so the
       eyebrow stays on one line. Phones hide the eyebrow, so this is desktop/tablet only. */
    max-width: 360px;
  }
  .bu-hero .bu-hero__h {
    font: 800 clamp(60px, 5.4vw, 88px) / 0.95 var(--bu-font-head);
    text-transform: uppercase;
    letter-spacing: -0.025em;
    color: #fff;
    margin: 0 0 22px;
  }
  .bu-hero .bu-hero__sub {
    font: 400 14px / 1.6 var(--bu-font-body);
    color: #fff;
    max-width: 290px;
    margin: 0 0 25px;
  }

  /* ---- 2. Ribbon ------------------------------------------------------ */
  .bu-hero .bu-hero__ribbon {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
    padding: 15px 20px;
    background: var(--bu-sand);
    border-bottom: 1px solid var(--bu-ink);
    color: var(--bu-ink);
  }
  .bu-hero .bu-hero__phrase {
    font: 800 19px / 1.45 var(--bu-font-head);
    text-transform: uppercase;
    letter-spacing: 0;
    white-space: nowrap;
  }
  /* The separator keeps an 18px line box at both widths (that is what makes the strip 59 / 51 tall);
     only the glyph shrinks on phones. */
  .bu-hero .bu-hero__ast {
    display: inline-block;
    font: 400 18px / 1.45 var(--bu-font-body);
    color: var(--bu-orange);
  }
  .bu-hero .bu-hero__ast .bu-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
  }

  /* ---- 3. Proof strip ------------------------------------------------- */
  .bu-hero .bu-hero__proof {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 18px;
    padding: 17px 22px;
    background: #fff;
    border-bottom: 1px solid var(--bu-line-20);
    color: var(--bu-ink);
    font: 400 12px / 1.45 var(--bu-font-body);
  }
  /* Stars are 17px / 22.1px on Sloth — lock the line box so the strip measures 57px. */
  .bu-hero .bu-hero__proof .bu-stars {
    line-height: 1.3;
  }
  .bu-hero .bu-hero__score {
    font: 700 14px / 1.45 var(--bu-font-body);
  }
  .bu-hero .bu-hero__count {
    font-size: 12px;
  }

  /* ---- Tablet band (Sloth rule, 08 §7) -------------------------------- */
  @media (min-width: 701px) and (max-width: 1000px) {
    .bu-hero .bu-hero__banner {
      height: clamp(380px, 44vw, 440px);
    }
    .bu-hero .bu-hero__copy {
      width: 44%;
    }
    .bu-hero .bu-hero__h {
      font-size: clamp(44px, 5.7vw, 56px);
    }
  }

  /* ---- Mobile --------------------------------------------------------- */
  @media (max-width: 700px) {
    .bu-hero .bu-hero__banner {
      height: clamp(460px, 132vw, 560px);
      align-items: flex-end;
    }
    .bu-hero .bu-hero__shade {
      background: linear-gradient(
        180deg,
        transparent 57%,
        rgba(var(--bu-shade), 0.4) 72%,
        rgba(var(--bu-shade), 0.86) 90%,
        rgba(var(--bu-shade), 0.93) 100%
      );
    }
    .bu-hero .bu-hero__copy {
      width: 100%;
      max-width: none;
      padding: 16px 20px 20px;
    }
    .bu-hero .bu-hero__copy .bu-hero__kicker,
    .bu-hero .bu-hero__sub {
      display: none;
    }
    .bu-hero .bu-hero__h {
      font-size: clamp(38px, 10.4vw, 44px);
      line-height: 0.94;
      margin-bottom: 12px;
    }
    /* Sloth's hero CTA is 48px tall with a 220px floor on phones (229 × 48). */
    .bu-hero .bu-hero__copy .bu-hero__cta {
      min-height: 48px;
      min-width: 220px;
    }
    .bu-hero .bu-hero__ribbon {
      gap: 12px;
      padding: 12px;
    }
    .bu-hero .bu-hero__phrase {
      font-size: 13px;
    }
    .bu-hero .bu-hero__ast .bu-icon {
      width: 13px;
      height: 13px;
    }
    /* Sloth hides the third phrase and its separator on phones. */
    .bu-hero .bu-hero__phrase--last,
    .bu-hero .bu-hero__ast--last {
      display: none;
    }
    .bu-hero .bu-hero__proof {
      gap: 6px 10px;
      font-size: 11px;
    }
    .bu-hero .bu-hero__count {
      font-size: 11px;
    }
    .bu-hero .bu-hero__proof-link {
      font-size: 11px;
    }
  }
/* END_SECTION:bu-hero */

/* START_SECTION:bu-newsletter (INDEX:15) */
.bu-newsletter {
    display: block;
    background: var(--bu-sand, #f2ede8);
    color: var(--bu-ink, #212121);
    font-family: var(--bu-font-body, "DM Sans", Arial, sans-serif);
  }

  /* Two-class selectors below on purpose: bu-sloth.css loads after the aggregated section CSS, so
     its shared .bu-h / .bu-input / .bu-btn rules would otherwise win ties against this section. */
  .bu-newsletter .bu-newsletter__inner {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 35px;
    min-height: 129px;
    padding: 32px 28px;
  }

  .bu-newsletter__copy {
    flex: 0 1 auto;
    min-width: 0;
  }

  .bu-newsletter .bu-newsletter__h {
    margin: 0 0 9px;
    font: 800 40px/38px var(--bu-font-head, "Barlow Condensed", "Arial Narrow", Impact, sans-serif);
    letter-spacing: -1px;
    text-transform: uppercase;
    color: inherit;
  }

  .bu-newsletter__p {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: inherit;
  }

  .bu-newsletter__form {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
    gap: 12px;
    max-width: 460px;
    margin: 0;
  }

  .bu-newsletter__form .bu-newsletter__input {
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 150px;
    margin: 0;
    padding: 12px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--bu-hairline, #d9d3cb);
    border-radius: 0;
    color: inherit;
    font-family: inherit;
    font-size: 16px;
    line-height: 24px;
    appearance: none;
    -webkit-appearance: none;
  }

  .bu-newsletter__form .bu-newsletter__input::placeholder {
    color: var(--bu-gray, #5c5751);
    opacity: 1;
  }

  /* A real <button> in the .bu-btn--news shape (B5): 12px 16px · min-h 44 · 400 14/21 · 1em arrow.
     Three classes so it also outranks a shared `.bu-btn.bu-btn--news` rule from bu-sloth.css, which loads later. */
  .bu-newsletter .bu-newsletter__form .bu-newsletter__btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    padding: 12px 16px;
    background: var(--bu-orange, #fb6a21);
    border: 0;
    border-radius: 0;
    color: var(--bu-ink, #212121);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }

  .bu-newsletter .bu-newsletter__form .bu-newsletter__btn:hover {
    background: var(--bu-orange-hover, #fb6a21);
  }

  .bu-newsletter .bu-newsletter__form .bu-newsletter__btn svg {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
  }

  .bu-newsletter__msg {
    width: 100%;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: inherit;
  }

  /* P2 2026-10-04: privacy small print, full width under the email box + button (12px, like the body line).
     Two classes so bu-sloth.css's later, shared rules cannot win a tie. */
  .bu-newsletter .bu-newsletter__privacy {
    width: 100%;
    margin: 0;
    font-size: 12px;
    line-height: 18px;
    color: inherit;
  }

  .bu-newsletter .bu-newsletter__privacy p {
    margin: 0;
  }

  .bu-newsletter .bu-newsletter__privacy a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  @media (max-width: 700px) {
    /* Same two-class selector as the desktop rule, or the desktop gap/padding/min-height would win the tie. */
    .bu-newsletter .bu-newsletter__inner {
      flex-direction: column;
      align-items: stretch;
      gap: 20px;
      min-height: 190px;
      padding: 28px 18px;
    }

    .bu-newsletter__form {
      max-width: none;
    }
  }
/* END_SECTION:bu-newsletter */

/* START_SECTION:bu-product-row (INDEX:16) */
.bu-section.bu-product-row {
    padding: var(--bu-row-pt, 0px) 0 var(--bu-row-pb, 40px);
    background: #fff;
  }
  @media (max-width: 700px) {
    .bu-section.bu-product-row {
      padding-top: min(var(--bu-row-pt, 0px), 16px);
      padding-bottom: min(var(--bu-row-pb, 40px), 30px);
    }
    /* Sloth keeps the full 40px under the headed row on phones. */
    .bu-section.bu-product-row--headed {
      padding-bottom: var(--bu-row-pb, 40px);
    }
  }
/* END_SECTION:bu-product-row */

/* START_SECTION:bu-quality-panel (INDEX:17) */
.bu-section.bu-quality-panel {
    padding: 20px var(--bu-gutter) 56px;
    background: #fff;
  }
  .bu-quality-panel .bu-quality {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--bu-sand);
    overflow: hidden;
  }

  /* Photo cell: the square box is the band's height. */
  .bu-quality-panel .bu-quality__photo {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--bu-soft);
    overflow: hidden;
  }
  .bu-quality-panel .bu-quality__pic {
    position: absolute;
    inset: 0;
    display: block;
  }
  /* Fallback-only: a 4% zoom keeps the baked headline of the stock photo out of the crop. */
  .bu-quality-panel .bu-quality__photo--fallback .bu-pic img {
    top: -2%;
    height: 104%;
  }

  /* Copy cell */
  .bu-quality-panel .bu-quality__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(28px, 3.8vw, 60px);
    color: var(--bu-ink);
  }
  .bu-quality-panel .bu-quality__h {
    font: 800 clamp(38px, 4.3vw, 66px) / 0.98 var(--bu-font-head);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--bu-ink);
    margin: 0 0 20px;
  }
  .bu-quality-panel .bu-quality__intro {
    font: 400 14px / 1.65 var(--bu-font-body);
    color: var(--bu-gray-2);
    max-width: 450px;
    margin: 0 0 22px;
  }
  .bu-quality-panel .bu-quality__list {
    list-style: none;
    display: grid;
    gap: 16px;
    width: 100%;
    padding: 0;
    margin: 0 0 27px;
  }
  .bu-quality-panel .bu-quality__item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
  }
  .bu-quality-panel .bu-quality__icon {
    flex: 0 0 auto;
    display: inline-flex;
    margin-top: 1px;
    color: var(--bu-orange);
  }
  /* P2: `svg` added so the Aid line icons (aid-icon) get the same 23px box whatever class they carry. */
  .bu-quality-panel .bu-quality__icon .bu-icon,
  .bu-quality-panel .bu-quality__icon svg {
    width: 23px;
    height: 23px;
  }
  .bu-quality-panel .bu-quality__title {
    font: 700 14px / 1.35 var(--bu-font-body);
    text-transform: none;
    letter-spacing: 0;
    color: var(--bu-ink);
    margin: 0 0 3px;
  }
  .bu-quality-panel .bu-quality__text {
    font: 400 12px / 1.5 var(--bu-font-body);
    color: var(--bu-gray-2);
    margin: 0;
  }

  /* Tablet band (Sloth rule, 08 §7): tighter copy padding, taller photo. */
  @media (min-width: 701px) and (max-width: 1000px) {
    .bu-quality-panel .bu-quality__copy {
      padding: 26px;
    }
    .bu-quality-panel .bu-quality__photo {
      min-height: 530px;
      /* Added 2026-09-29: without this, the 1:1 aspect-ratio turns min-height 530px into a 530px
         minimum WIDTH, so on 701-1000px screens the photo spilled over the copy cell and hid the
         heading and button (seen at 800 wide). 'auto' keeps the intended taller-than-wide photo in
         its own column; the picture then crops left-right only (focal point), never top or bottom. */
      aspect-ratio: auto;
    }
  }

  @media (max-width: 700px) {
    .bu-section.bu-quality-panel {
      padding: 12px var(--bu-gutter) 32px;
    }
    .bu-quality-panel .bu-quality {
      grid-template-columns: 1fr;
    }
    .bu-quality-panel .bu-quality__copy {
      padding: 26px 22px 28px;
    }
    .bu-quality-panel .bu-quality__h {
      font-size: clamp(38px, 11vw, 48px);
      margin-bottom: 16px;
    }
    .bu-quality-panel .bu-quality__intro {
      font-size: 13px;
    }
    .bu-quality-panel .bu-quality__list {
      gap: 17px;
      margin-bottom: 24px;
    }
    /* Full-width button, label left and chevron right (Sloth parity). */
    .bu-quality-panel .bu-quality__copy .bu-btn {
      width: 100%;
      justify-content: space-between;
    }
  }
/* END_SECTION:bu-quality-panel */

/* START_SECTION:bu-reviews-header (INDEX:18) */
/* Sloth: grid 1fr auto, gap 25, align center, padding 38 28 31 → 261 tall at 1440. */
  .bu-reviews-header__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 25px;
    align-items: center;
    padding: 38px 28px 31px;
    color: var(--bu-ink, #212121);
  }

  /* H1: Barlow Condensed 800, 65 / .95, uppercase. The textarea's line break becomes the <br>.
     Scoped under the section class: bu-sloth.css (the shared .bu-h rule) loads AFTER the aggregated
     section stylesheets, so a bare single-class rule here would lose a specificity tie to it. */
  .bu-reviews-header .bu-reviews-header__h {
    font: 800 65px/0.95 var(--bu-font-head, "Barlow Condensed", "Arial Narrow", Impact, sans-serif);
    text-transform: uppercase;
    letter-spacing: -0.025em;
    margin: 0 0 19px;
    color: var(--bu-ink, #212121);
  }

  .bu-reviews-header__p {
    font: 400 13px/1.5 var(--bu-font-body, "DM Sans", Arial, sans-serif);
    color: var(--bu-gray, #5c5751);
    max-width: 400px;
    margin: 0;
  }

  /* Aid (P4): no rating block → one column, and the body line may run a little wider. */
  .bu-reviews-header__grid--solo {
    grid-template-columns: minmax(0, 1fr);
  }

  .bu-reviews-header__grid--solo .bu-reviews-header__p {
    max-width: 560px;
  }

  /* Right block: centred, left hairline. Width is content-driven (~215 on Sloth). */
  .bu-reviews-header__rating {
    padding: 24px 28px;
    border-left: 1px solid var(--bu-line-20, rgba(33, 33, 33, 0.2));
    text-align: center;
  }

  /* Stars are 20 px (bu-stars--lg) at desktop; the scoped selector lets the mobile 16 px win below. */
  .bu-reviews-header__rating .bu-stars {
    display: inline-block;
  }

  /* The big number asks for DM Sans 400 on purpose (08 §1 #7: Sloth's 500 renders as 400). */
  .bu-reviews-header__num {
    display: block;
    font: 400 62px/1.2 var(--bu-font-body, "DM Sans", Arial, sans-serif);
    letter-spacing: -0.04em;
    color: var(--bu-ink, #212121);
  }

  .bu-reviews-header__den {
    font-size: 23px;
    letter-spacing: 0;
  }

  /* Two classes (contract check 2026-09-17): this <p> is the LAST child of the rating box, and Horizon's
     base.css `:last-child:is(p, h1…) { margin-block-end: 0 }` is (0,1,1) — it beat the single-class rule
     and stripped the 13px that makes the block (and the 261px header) measure. */
  .bu-reviews-header__rating .bu-reviews-header__count {
    font: 400 13px/1.5 var(--bu-font-body, "DM Sans", Arial, sans-serif);
    color: var(--bu-gray, #5c5751);
    margin: 7px 0 13px;
  }

  @media (max-width: 700px) {
    /* One column, padding 26 16 23 → 312 tall at 390. */
    .bu-reviews-header__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 20px;
      padding: 26px 16px 23px;
    }

    .bu-reviews-header .bu-reviews-header__h {
      font-size: 52px;
      margin-bottom: 14px;
    }

    .bu-reviews-header__p {
      font-size: 12px;
    }

    /* Divider on top; big number left, stars stacked over the count on the right. */
    .bu-reviews-header__rating {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 4px 14px;
      align-items: center;
      text-align: left;
      padding: 18px 0 0;
      border-left: 0;
      border-top: 1px solid var(--bu-line-20, rgba(33, 33, 33, 0.2));
    }

    .bu-reviews-header__rating .bu-stars {
      grid-column: 2;
      font-size: 16px;
    }

    .bu-reviews-header__num {
      grid-column: 1;
      grid-row: 1 / span 2;
      font-size: 49px;
      line-height: 1;
    }

    .bu-reviews-header__rating .bu-reviews-header__count {
      grid-column: 2;
      font-size: 12px;
      margin: 0;
    }
  }
/* END_SECTION:bu-reviews-header */

/* START_SECTION:bu-reviews-rail (INDEX:19) */
/* Strip: soft bg, padding 22 28 24 → 465 tall at 1440 (head 44 + 16 + rail 359). */
  .bu-reviews-rail {
    background: var(--bu-soft, #f6f3ef);
    color: var(--bu-ink, #212121);
  }

  .bu-reviews-rail__inner {
    padding: 22px 28px 24px;
  }

  .bu-reviews-rail__head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
  }

  /* Scoped under the section class so the size beats the shared .bu-h rule, which loads later. */
  .bu-reviews-rail .bu-reviews-rail__h {
    font: 800 30px/0.95 var(--bu-font-head, "Barlow Condensed", "Arial Narrow", Impact, sans-serif);
    text-transform: uppercase;
    letter-spacing: -0.025em;
    margin: 0;
    color: var(--bu-ink, #212121);
  }

  .bu-reviews-rail__sub {
    font: 400 11px/1.5 var(--bu-font-body, "DM Sans", Arial, sans-serif);
    color: var(--bu-gray, #5c5751);
  }

  .bu-reviews-rail__controls {
    margin-left: auto;
    display: flex;
    gap: 6px;
  }

  /* Round 44 px arrow buttons with the text glyphs ← → (never SVG). No hover state. */
  .bu-reviews-rail__arrow {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--bu-line-33, rgba(33, 33, 33, 0.333));
    border-radius: 50%;
    background: transparent;
    color: var(--bu-ink, #212121);
    font: 400 14px/1 var(--bu-font-body, "DM Sans", Arial, sans-serif);
    cursor: pointer;
  }

  /* The rail: 5 tiles + a 28 px peek at 1384 wide. calc(19.4175% - 8.54369px) → 260.19 px. */
  .bu-reviews-rail__rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(19.4175% - 8.54369px);
    gap: 11px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--bu-compare, #8a847c) var(--bu-soft, #f6f3ef);
    padding-bottom: 9px;
  }

  .bu-reviews-rail__tile {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bu-ink, #212121);
    text-align: left;
    cursor: pointer;
    scroll-snap-align: start;
    font-family: var(--bu-font-body, "DM Sans", Arial, sans-serif);
  }

  /* The photo box: 4:5, cover, focal 50% 30% (bu-picture fills it absolutely).
     The field is paper, not soft (QA round 1, P5): the strip itself is soft, so an empty tile
     painted soft vanished into it and only the line drawing floated. White keeps the six 4:5
     boxes reading as tiles until real photos (cover) hide the field anyway. */
  .bu-reviews-rail__photo {
    display: block;
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--bu-paper, #ffffff);
  }

  /* Two classes beat the shared one-class `.bu-pic__ph { background: var(--bu-soft) }`. */
  .bu-reviews-rail__photo .bu-pic__ph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--bu-paper, #ffffff);
  }

  .bu-reviews-rail__name {
    display: block;
    margin-top: 8px;
    font: 400 11px/1.5 var(--bu-font-body, "DM Sans", Arial, sans-serif);
    color: var(--bu-ink, #212121);
  }

  /* Dialog: native <dialog>, 840 wide max, centred; backdrop is the shade triplet at .7. */
  .bu-reviews-rail__dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(840px, 100% - 32px);
    max-width: none;
    max-height: 90dvh;
    padding: 24px;
    border: 0;
    border-radius: 0;
    background: var(--bu-paper, #ffffff);
    color: var(--bu-ink, #212121);
    overflow: auto;
    font-family: var(--bu-font-body, "DM Sans", Arial, sans-serif);
  }

  .bu-reviews-rail__dialog::backdrop {
    background: rgba(var(--bu-shade, 20, 18, 16), 0.7);
  }

  .bu-reviews-rail__dialog-bar {
    display: flex;
    justify-content: flex-end;
    margin: 0;
  }

  .bu-reviews-rail__close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--bu-ink, #212121);
    border-radius: 50%;
    background: transparent;
    color: var(--bu-ink, #212121);
    font: 400 24px/1 var(--bu-font-body, "DM Sans", Arial, sans-serif);
    cursor: pointer;
  }

  .bu-reviews-rail__dialog-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: center;
  }

  /* Dialog photo is NOT a box: it keeps its own ratio, contain, capped at 65dvh.
     `height: auto` is explicit (QA round 1, P5): the shared `.bu-pic` rule sets `height: 100%`
     for the absolute slot, which is meaningless here and collapsed the wrapper at 390. */
  .bu-reviews-rail__dialog-photo .bu-pic {
    display: block;
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
  }

  /* Three classes on the placeholder on purpose (final critic, 2026-09-17): bu-sloth.css positions
     `.bu-pic .bu-pic__ph` absolute at the same two-class specificity and loads AFTER the section
     stylesheets, so a two-class rule here lost the tie and the placeholder SVG stretched over the
     whole dialog, hiding the quote and name. */
  .bu-reviews-rail__dialog-photo .bu-pic img,
  .bu-reviews-rail__dialog-photo .bu-pic .bu-pic__ph {
    display: block;
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    max-height: 65dvh;
    object-fit: contain;
  }

  /* The placeholder stands in for a portrait customer photo (QA round 1, P5). Shopify's placeholder
     SVGs are square, so without a ratio the empty dialog sat 476 tall with a 384 × 384 box; Sloth's
     dialog photo measures 384 × 512 (3:4, the ratio the block asks Joe to upload) → 604 tall.
     A real upload keeps its own ratio — this rule never touches the img. */
  .bu-reviews-rail__dialog-photo .bu-pic .bu-pic__ph {
    aspect-ratio: 3 / 4;
  }

  .bu-reviews-rail__dialog-copy .bu-stars {
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  .bu-reviews-rail__quote {
    margin: 18px 0;
    padding: 0 0 0 16.5px;
    border-left: 2px solid var(--bu-hairline, #d9d3cb);
    font: italic 400 15px/1.7 var(--bu-font-body, "DM Sans", Arial, sans-serif);
    color: var(--bu-ink, #212121);
  }

  .bu-reviews-rail__credit {
    margin: 0;
    font: 400 14px/1.5 var(--bu-font-body, "DM Sans", Arial, sans-serif);
  }

  .bu-reviews-rail__credit strong {
    font-weight: 700;
  }

  .bu-reviews-rail__product {
    margin: 18px 0 0;
  }

  @media (max-width: 700px) {
    /* 20 16 17 padding; head wraps with the sub on its own line → 345 tall at 390. */
    .bu-reviews-rail__inner {
      padding: 20px 16px 17px;
    }

    .bu-reviews-rail__head {
      flex-wrap: wrap;
      gap: 6px 10px;
      margin-bottom: 13px;
    }

    .bu-reviews-rail .bu-reviews-rail__h {
      order: 0;
      font-size: 31px;
    }

    .bu-reviews-rail__controls {
      order: 1;
    }

    .bu-reviews-rail__sub {
      order: 2;
      flex-basis: 100%;
      font-size: 10px;
    }

    /* 2 tiles + a 19 px peek at 358 wide. */
    .bu-reviews-rail__rail {
      grid-auto-columns: 44%;
      gap: 12px;
    }

    .bu-reviews-rail__dialog {
      padding: 16px;
    }

    .bu-reviews-rail__dialog-body {
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
    }

    .bu-reviews-rail__dialog-photo .bu-pic img,
    .bu-reviews-rail__dialog-photo .bu-pic .bu-pic__ph {
      max-height: 45dvh;
    }

    .bu-reviews-rail__quote {
      padding-left: 11px;
    }
  }
/* END_SECTION:bu-reviews-rail */

/* START_SECTION:bu-reviews-wall (INDEX:20) */
.bu-reviews-wall {
    color: var(--bu-ink, #212121);
    font-family: var(--bu-font-body, "DM Sans", Arial, sans-serif);
  }

  /* Wrapper: 0 28 34 → the wall is 1384 wide at 1440 (keep the gutter ≤ 30 or 6 columns drop to 5). */
  .bu-reviews-wall__wrap {
    padding: 0 28px 34px;
    min-height: 180px;
  }

  /* The column count is decided by THIS box's width, not the viewport. */
  .bu-reviews-wall__inner {
    container-type: inline-size;
  }

  .bu-reviews-wall__app {
    margin-bottom: 20px;
  }

  /* Summary row (theme-drawn stand-in for the widget's header). */
  .bu-reviews-wall__summary {
    display: flex;
    align-items: center;
    min-height: 47px;
    margin: 20px 0 7px;
    padding: 0 7px 7px;
  }

  /* Scoped: the shared .bu-stars rule in bu-sloth.css loads after this sheet and would win a tie. */
  .bu-reviews-wall__summary .bu-stars {
    margin-right: 10px;
  }

  .bu-reviews-wall__summary-count {
    font-size: 16px;
    line-height: 1.5;
  }

  /* Static tabs (off by default). */
  .bu-reviews-wall__tabs {
    display: flex;
    gap: 8px;
    margin: 10px 0 10px 8px;
  }

  .bu-reviews-wall__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 2px;
    font: 600 12px/16px var(--bu-font-body, "DM Sans", Arial, sans-serif);
  }

  .bu-reviews-wall__tab--active {
    background: rgba(9, 18, 24, 0.06);
  }

  .bu-reviews-wall__badge {
    padding: 2px 8px;
    border-radius: 2px;
    background: rgba(9, 18, 24, 0.15);
    font: 600 12px/16px var(--bu-font-body, "DM Sans", Arial, sans-serif);
  }

  /* The stack holds one masonry block per batch; it carries the 20 px that used to sit under
     the single block, so the Show-more row lands in the same place whatever is revealed. */
  .bu-reviews-wall__stack {
    padding-bottom: 20px;
  }

  /* Masonry: CSS columns, no column gap — the 7 px item padding makes the 14 px gutters.
     Each batch is its own block, so revealing a batch never re-balances the ones above it. */
  .bu-reviews-wall__masonry {
    column-count: 2;
    column-gap: 0;
  }

  /* Batches past `initial` wait for the Show-more button. */
  .bu-reviews-wall .bu-wall__batch[hidden] {
    display: none;
  }

  @container (min-width: 480px) {
    .bu-reviews-wall__masonry {
      column-count: 3;
    }
  }

  @container (min-width: 920px) {
    .bu-reviews-wall__masonry {
      column-count: 4;
    }
  }

  @container (min-width: 1150px) {
    .bu-reviews-wall__masonry {
      column-count: 5;
    }
  }

  @container (min-width: 1380px) {
    .bu-reviews-wall__masonry {
      column-count: 6;
    }
  }

  .bu-reviews-wall .bu-wall__item {
    display: block;
    padding: 7px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
  }

  /* The one shadow in the theme — it is the review-widget look and is kept on purpose. */
  .bu-reviews-wall__card {
    background: var(--bu-paper, #ffffff);
    border-radius: 2px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    color: var(--bu-ink, #212121);
  }

  .bu-reviews-wall__photo {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--bu-soft, #f6f3ef);
  }

  .bu-reviews-wall__photo .bu-pic__ph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .bu-reviews-wall__body {
    padding: 16px;
  }

  .bu-reviews-wall__namerow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 8px;
  }

  .bu-reviews-wall__name {
    font: 700 14px/20px var(--bu-font-body, "DM Sans", Arial, sans-serif);
  }

  .bu-reviews-wall__verified {
    font: 400 12px/16px var(--bu-font-body, "DM Sans", Arial, sans-serif);
  }

  .bu-reviews-wall__date {
    padding-top: 4px;
    font: 400 11px/16px var(--bu-font-body, "DM Sans", Arial, sans-serif);
    color: #73777b;
  }

  /* Flex + line-height 1 (QA round 1, P5): as an inline-block the 14 px stars sat in the body's
     21 px line box, so the row measured 41 instead of Sloth's 12 + 14 + 8 = 34 and every card
     ran 7 px tall. The visually-hidden ".bu-sr" span inside is absolute, so flex ignores it. */
  .bu-reviews-wall__stars {
    display: flex;
    align-items: center;
    padding: 12px 0 8px;
    line-height: 1;
  }

  .bu-reviews-wall__stars .bu-stars {
    font-size: 14px;
  }

  /* No line clamp: long reviews run their full length, which is what varies the card heights. */
  .bu-reviews-wall__text {
    margin: 0;
    font: 400 14px/20px var(--bu-font-body, "DM Sans", Arial, sans-serif);
    white-space: pre-wrap;
  }

  .bu-reviews-wall__product {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2e2e2;
    min-height: 70px;
  }

  .bu-reviews-wall__product::after {
    content: "";
    display: block;
    clear: both;
  }

  .bu-reviews-wall__thumb-link {
    float: left;
    display: block;
    width: 56px;
    height: 56px;
  }

  .bu-reviews-wall__thumb {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
  }

  .bu-reviews-wall__ptitle {
    display: block;
    padding-left: 68px;
    font: 400 11px/16px var(--bu-font-body, "DM Sans", Arial, sans-serif);
    color: var(--bu-ink, #212121);
    text-decoration: none;
  }

  /* Show more: 142 × 32, hairline box, hover fills. */
  .bu-reviews-wall__more {
    text-align: center;
    padding: 20px 0 10px;
  }

  .bu-reviews-wall__more-btn {
    display: inline-block;
    min-width: 142px;
    min-height: 32px;
    padding: 5px 12px;
    border: 1px solid #e8e8e8;
    border-radius: 2px;
    background: transparent;
    color: var(--bu-ink, #212121);
    font: 400 12px/20px var(--bu-font-body, "DM Sans", Arial, sans-serif);
    cursor: pointer;
  }

  .bu-reviews-wall__more-btn:hover {
    background: #e8e8e8;
  }

  .bu-reviews-wall__more-btn[hidden] {
    display: none;
  }

  /* Feed row: centred outline button, only when a feed URL exists. */
  .bu-reviews-wall__feed {
    display: flex;
    justify-content: center;
    padding: 0 28px 35px;
  }

  @media (max-width: 700px) {
    .bu-reviews-wall__wrap {
      padding: 0 16px 25px;
    }

    .bu-reviews-wall__feed {
      padding: 0 16px 35px;
    }
  }
/* END_SECTION:bu-reviews-wall */

/* START_SECTION:bu-split-banner (INDEX:21) */
.bu-section.bu-split-banner {
    padding: 0 var(--bu-gutter);
    background: #fff;
  }
  .bu-split-banner .bu-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr);
    background: var(--bu-sand);
    overflow: hidden;
  }
  .bu-split-banner .bu-split__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    padding: 32px;
    color: var(--bu-ink);
  }
  /* The flex gap is the only spacing between the four elements (Sloth: no per-element margins). */
  .bu-split-banner .bu-split__copy .bu-eyebrow {
    margin: 0;
  }
  .bu-split-banner .bu-split__h {
    font: 800 clamp(34px, 4.4vw, 58px) / 1 var(--bu-font-head);
    text-transform: uppercase;
    letter-spacing: -0.025em;
    color: var(--bu-ink);
    margin: 0;
  }
  .bu-split-banner .bu-split__body {
    font: 400 14px / 1.6 var(--bu-font-body);
    color: var(--bu-ink);
    margin: 0;
  }
  /* Split flavour of the small primary button: 700 13 with a 1em (13px) arrow (BUILD-PLAN §B5). */
  .bu-split-banner .bu-split__copy .bu-btn {
    font-size: 13px;
    gap: 12px;
  }
  .bu-split-banner .bu-split__copy .bu-btn .bu-icon {
    width: 13px;
    height: 13px;
  }

  /* Photo cell: 3:2 box sets the band height. */
  .bu-split-banner .bu-split__photo {
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--bu-soft);
    overflow: hidden;
  }
  .bu-split-banner .bu-split__pic {
    position: absolute;
    inset: 0;
    display: block;
  }

  @media (max-width: 700px) {
    .bu-split-banner .bu-split {
      grid-template-columns: 1fr;
    }
    .bu-split-banner .bu-split__copy {
      padding: 22px;
      gap: 10px;
    }
    .bu-split-banner .bu-split__h {
      font-size: 37px;
    }
    .bu-split-banner .bu-split__body {
      font-size: 13px;
    }
  }
/* END_SECTION:bu-split-banner */

/* START_SECTION:bu-trust-bar (INDEX:22) */
.bu-trust-bar {
    padding: 0;
  }

  .bu-trust-bar__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 32px;
    padding: 5px 28px;
    background: var(--bu-soft);
    color: var(--bu-ink);
    font: 400 11px / 1.5 var(--bu-font-body);
  }

  .bu-trust-bar__link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0;
    color: var(--bu-ink);
    text-decoration: none;
  }

  /* Stars sit a touch tighter here than elsewhere (.08em vs .13em) — spec 04 §3. */
  .bu-trust-bar__link .bu-stars {
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.08em;
  }

  /* ADDED 2026-10-04 (P3): the real rating number beside the stars (only rendered when set). */
  .bu-trust-bar__rating {
    font-weight: 600;
  }

  .bu-trust-bar__link .bu-icon {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
  }

  .bu-trust-bar__guarantee {
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .bu-trust-bar__guarantee .bu-icon {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: var(--bu-orange);
  }

  @media (max-width: 850px) {
    .bu-trust-bar__guarantee {
      max-width: 245px;
    }
  }

  @media (max-width: 700px) {
    .bu-trust-bar__bar {
      justify-content: center;
      padding: 5px 12px;
    }

    .bu-trust-bar__link {
      gap: 7px;
    }

    .bu-trust-bar__guarantee {
      display: none;
    }
  }
/* END_SECTION:bu-trust-bar */

/* START_SECTION:collection-links-button (INDEX:23) */
collection-links-component {
    --alignment: flex-start;

    display: grid;
    align-items: center;


    &[alignment='center'] {
      --alignment: center;

      .text-block {
        text-align: center;
      }
    }

    &[alignment='right'] {
      --alignment: flex-end;

      .text-block {
        text-align: right;
      }
    }

  

  
     

      .collection-links__container {
        gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl);
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: var(--alignment);
      }

  }

  .collection-links__container {
    display: flex;
    gap: var(--gap-md);
    flex-direction: column;
  }

  .collection-links__images {
    overflow: hidden;
    grid-area: image;

    @media (max-width: 749px) {
      image-block {
        max-width: 100%;
      }
    }
  }
/* END_SECTION:collection-links-button */

/* START_SECTION:collection-links (INDEX:24) */
collection-links-component {
    --alignment: flex-start;

    display: grid;
    align-items: center;
    grid-gap: var(--gap-3xl);

    &:has([ratio='portrait']) {
      --template-column-ratio: 0.8fr;
    }

    &:has([ratio='square']) {
      --template-column-ratio: 1fr;
    }

    &:has([ratio='landscape']) {
      --template-column-ratio: 1.4fr;
    }

    &[alignment='center'] {
      --alignment: center;

      .text-block {
        text-align: center;
      }
    }

    &[alignment='right'] {
      --alignment: flex-end;

      .text-block {
        text-align: right;
      }
    }

    &[layout='spotlight'] {
      position: relative;
      grid-template-columns: 1fr var(--template-column-ratio);
      grid-template-areas: 'text image';

      &[reverse] {
        grid-template-areas: 'image text';
        grid-template-columns: var(--template-column-ratio) 1fr;
      }

      .collection-links__container {
        align-items: var(--alignment);
      }

      @media (max-width: 749px) {
        grid-template-columns: 1fr;
        grid-template-areas: 'text' 'image';
        grid-gap: var(--gap-2xl);

        .collection-links__container {
          gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl);
          justify-content: var(--alignment);
        }
      }
    }

    &[layout='text'] {
      grid-gap: 0;
      grid-template-areas: 'text';

      .collection-links__container {
        gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl);
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: var(--alignment);
      }
    }
  }

  .collection-links__container {
    display: flex;
    gap: var(--gap-md);
    flex-direction: column;
  }

  .collection-links__images {
    overflow: hidden;
    grid-area: image;

    @media (max-width: 749px) {
      image-block {
        max-width: 100%;
      }
    }
  }
/* END_SECTION:collection-links */

/* START_SECTION:featured-blog-posts (INDEX:29) */
.featured-blog-posts h3 {
    text-transform: uppercase;
  }
/* END_SECTION:featured-blog-posts */

/* START_SECTION:featured-product (INDEX:30) */
.featured-product-section .section-content-wrapper {
    grid-template-columns: 1fr;
    display: grid;
    overflow: hidden;

    @media (min-width: 750px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* Here I should maybe set the width to auto when the ratio is set to adapt */
  .featured-product-section .product-media-container.constrain-height {
    /* arbitrary offset value based on average theme spacing and header height */
    --viewport-offset: 400px;
    --constrained-min-height: var(--visual-preview--height, 80dvh);

    @media screen and (min-width: 750px) {
      --viewport-offset: 300px;
    }
  }

  .featured-product-section .product-grid__card {
    --padding-block: 20px;
    --padding-inline: 20px;

    @media screen and (min-width: 750px) {
      --padding-block: 40px;
      --padding-inline: 40px;
    }
  }

  @media screen and (max-width: 749px) {
    .featured-product-section .media-block {
      order: -1;
    }
  }
/* END_SECTION:featured-product */

/* START_SECTION:footer-utilities (INDEX:32) */
.utilities {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    text-wrap: nowrap;
    border-top: var(--border-width) solid var(--color-border);
    color: var(--color-foreground-muted);

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      justify-content: center;
      gap: var(--gap);
      align-items: center;
      text-align: left;
    }
  }

  .utilities a {
    color: var(--color-foreground-muted);
  }

  .utilities > * {
    text-align: center;

    @media screen and (min-width: 750px) {
      text-align: left;
    }
  }

  /* Dynamic positioning based on block order */
  @media screen and (min-width: 750px) {
    .utilities {
      position: relative;
    }

    /* Reset default positioning */
    .utilities > * {
      order: 0;
      margin-left: 0;
      margin-right: 0;
      position: static;
    }

    /* Exactly 3 items cases: */
    /* A : A : B => A left, A left, B right */
    /* Example: Copyright and policy left, social right */
    .utilities:has(
        .footer-utilities__text:nth-child(1)
          + .footer-utilities__text:nth-child(2)
          + .footer-utilities__icons:nth-child(3)
      ) {
      grid-template-columns: auto auto 1fr auto;

      .footer-utilities__icons:nth-child(3) {
        justify-content: end;
      }
    }

    /* A : B : A => A left, B center, A right */
    /* Example: Policy left, Socials center, Copyright right */
    .utilities:has(
        .footer-utilities__text:nth-child(1)
          + .footer-utilities__icons:nth-child(2)
          + .footer-utilities__text:nth-child(3)
      ) {
      grid-template-columns: 1fr auto 1fr;

      .footer-utilities__icons:nth-child(2) {
        justify-self: center;
      }

      .footer-utilities__text:nth-child(3) {
        justify-self: end;
      }
    }

    /* B : A : A => B left, A right, A right */
    /* Example: Socials left, Policy right, Copyright right */
    .utilities:has(
        .footer-utilities__icons:nth-child(1)
          + .footer-utilities__text:nth-child(2)
          + .footer-utilities__text:nth-child(3)
      ) {
      grid-template-columns: 1fr auto auto;

      .footer-utilities__text:nth-child(3) {
        justify-content: end;
      }
    }

    /* Exactly 2 items cases: */
    /* A : A => A left, A left */
    /* Example: Copyright left, Policy left */
    .utilities:has(.footer-utilities__text:first-child:nth-last-child(2) + .footer-utilities__text:last-child) {
      grid-template-columns: auto auto;
      justify-content: space-between;

      .footer-utilities__text:nth-child(2) {
        justify-self: end;
      }
    }

    /* B : A => B left, A right */
    /* Example: Socials left, Policy right */
    .utilities:has(.footer-utilities__icons:first-child:nth-last-child(2) + .footer-utilities__text:last-child) {
      grid-template-columns: 1fr 1fr;

      .footer-utilities__text:nth-child(2) {
        justify-self: end;
      }
    }

    /* A : B => A left, B right */
    /* Example: Socials left, Policy right */
    .utilities:has(.footer-utilities__text:first-child:nth-last-child(2) + .footer-utilities__icons:last-child) {
      grid-template-columns: 1fr 1fr;

      .footer-utilities__icons:nth-child(2) {
        justify-self: end;
      }
    }

    /* Exactly 1 items cases: */
    /* A => A left */
    /* Example: Policy left */
    .utilities:has(.footer-utilities__text:first-child:nth-last-child(1)) {
      grid-template-columns: 1fr;
      justify-content: start;

      .footer-utilities__text:nth-child(1) {
        justify-self: start;
      }
    }

    /* B => B left */
    /* Example: Socials left */
    .utilities:has(.footer-utilities__icons:first-child:nth-last-child(1)) {
      grid-template-columns: 1fr;
      justify-content: start;

      .footer-utilities__icons:nth-child(1) {
        justify-self: start;
      }
    }
  }
/* END_SECTION:footer-utilities */

/* START_SECTION:footer (INDEX:33) */
/* Mobile: Single column layout (base styles) */
  .footer-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--footer-gap);
  }

  .utilities .dropdown-localization{
    display: block !important;
  }

  @media screen and (min-width: 750px) and (max-width: 989px) {
    .footer-content {
      grid-template-columns: repeat(min(var(--grid-columns), 3), 1fr);
      grid-auto-flow: row;
    }
    .footer-content--isolated-grid-item-tablet > :last-child {
      grid-column: 1 / -1;
    }
  }

  @media screen and (min-width: 990px) {
    .footer-content {
      grid-template-columns: repeat(var(--grid-columns), 1fr);
    }

    /* Single item centered */
    .footer-content[style*='--grid-columns: 1'] {
      justify-items: center;
    }

    .footer-content--isolated-grid-item-desktop > :last-child {
      grid-column: 1 / -1;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:header-announcements (INDEX:34) */
.announcement-bar {
    border-block-end: var(--border-bottom-width) solid var(--color-border);
  }

  .announcement-bar__slider {
    display: flex;
    flex-direction: row;
    align-items: var(--announcement-vertical-alignment, center);
    justify-content: var(--announcement-horizontal-alignment, 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;

    &[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:35) */
body {
    --header-height: 0px;
    --header-group-height: var(--header-height);
    --transparent-header-offset-boolean: 0; /* stylelint-disable-line declaration-property-value-disallowed-list */
  }

  body:has(> #header-group > header) {
    --header-height: 60px;
  }

  body:has(> #header-group:empty) {
    --header-group-height: 0px;
  }

  .header[transparent] {
    --language-button-background-color: transparent;
    --language-button-border-color: transparent;

    /* used to apply transparency to .header__row, will only ever be transparent or unset */
    --header-bg-color: transparent;

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

    /* transparent color scheme on .header should never apply its background color */
    background-color: transparent;
    z-index: var(--layer-overlay);

    &[transparent='not-sticky'][data-sticky-state='active'],
    /* Only show opaque background when hovering over menu items with children (mega menu)
       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[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating])) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --header-bg-color: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;

      .header__row {
        /* Faster transition for "in" animation */
        transition: color var(--animation-values-fast), border-color var(--animation-values-fast),
          background-color var(--animation-values-fast);
      }
    }

    .header__row {
      /* Slower transition for "out" animation */
      transition: color var(--animation-values-slow), border-color var(--animation-values-slow),
        background-color var(--animation-values-slow);
    }
  }

  :is(.header[transparent]:not([data-sticky-state='active']), .header[transparent='always'][data-sticky-state='active'])
    .header__row:not(
      :has(
          .mega-menu__list:hover,
          .menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating]),
          .menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating])
        )
    ) {
    /* while transparent, header-row ignores its color-scheme settings, pull from the header-component */
    --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--inherit-color-scheme-on-menu-open:has(.mega-menu__list:hover) .header__row,
  .header--inherit-color-scheme-on-menu-open:has(
      .menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating])
    )
    .header__row,
  .header--inherit-color-scheme-on-menu-open:has(
      .menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating])
    )
    .header__row {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-background: inherit;
    --color-background-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
  }

  .header-section {
    position: relative;
  }

  #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-sticky);
  }

  .header[data-sticky-state] {
    transition: opacity var(--animation-speed) var(--animation-easing);
    opacity: 1;
  }

  .header[data-sticky-state='active'] {
    view-transition-name: sticky-header;
  }

  .header[data-sticky-state='idle'],
  .header[data-sticky-state='active'][data-animating] {
    opacity: 0;
  }

  .header__row {
    position: relative;

    /* will default to bg from its color scheme unless --header-bg-color is transparent */
    background-color: var(--header-bg-color, var(--color-background));
  }

  .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(--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);
    }
  }

  .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;
   /*padding-left: 50px;
   padding-right: 50px;*/
   padding-left: 5px;
   padding-right: 5px;
    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(.account-actions)) .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(.dropdown-localization__button:hover),
    .header__column:has(.header__icon--menu:hover) {
      header-menu:not(:hover),
      .header-actions__action:not(:hover),
      .dropdown-localization__button: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,
  .dropdown-localization__button,
  .header__icon--menu {
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  /* Extend hover area through padding to prevent flickering on actual menu items */
  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__link[aria-haspopup],
  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__link,
  .menu-list__list-item:where(:not([slot='overflow'])) > button.menu-list__link {
    margin-block: calc(-2 * var(--header-padding));
    padding-block: calc(2 * var(--header-padding));
    margin-inline: calc(-1 * var(--gap-xl) / 2);
    padding-inline: calc(var(--gap-xl) / 2);
  }

  /* Set header paddings based on height setting */
  .header {
    --header-padding: var(--padding-sm);
    --font-paragraph--line-height: 1;
  }

  .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;
    }
  }

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

  /* When the header is transparent, and when there is no header-section below it, offset the first main-section with
   * the height of the header
   */

  main > .shopify-section:first-child .section:not(.disable-section-top-offset) {
    &.spacing-style,
    .spacing-style {
      --section-top-offset: calc(var(--header-height) * var(--transparent-header-offset-boolean));

      /* Any nested sections should not be offset */
      :is(.spacing-style, .inherit-spacing) {
        --section-top-offset: 0px;
      }
    }

    /* Make sticky content immediately stick to the top of the page */
    .sticky-content {
      margin-top: calc(var(--header-height) * var(--transparent-header-offset-boolean) * -1);
    }
  }

  /* Joe 2026-08-16: menu bar 6px shorter — 3px off the top, 3px off the bottom */
  .header .header__columns {
    --padding-block-start: calc(var(--header-padding) - 3px);
    --padding-block-end: calc(var(--header-padding) - 3px);
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:36) */
.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-wrapper {
    position: absolute;
    inset: 0;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(var(--hero-media-count, 1), 1fr);
  }

  .hero--auto .hero__image,
  .hero--auto .hero__video {
    aspect-ratio: var(--hero-media-aspect-ratio);
  }

  .hero--no-blocks-auto-height {
    :is(.hero__image, .hero__video) {
      width: 100%;
      aspect-ratio: auto;
    }

    .hero__media-wrapper {
      /* When there are no blocks and the height is auto, allow the image to appear. */
      position: relative;
    }
  }

  .hero__image,
  .hero__video,
  .hero__video-poster {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
    z-index: var(--layer-base);
  }

  .hero__video-wrapper {
    position: relative;
  }

  .hero__video-poster {
    position: absolute;
  }

  .hero__link {
    position: absolute;
    inset: 0;
    grid-column: 1 / -1;
  }

  .hero__media-wrapper,
  .hero__content-wrapper {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      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 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:logo (INDEX:37) */
.logo-section {
    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: 750px) {
      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-section--center {
    margin-inline: auto;
  }

  .logo-section--flex-end {
    margin-inline-start: auto;
  }

  .logo-section--flex-start {
    margin-inline-end: auto;
  }

  .logo-section__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-section__image {
    object-fit: contain;
    width: 100%;
  }
/* END_SECTION:logo */

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

  /**
   * Apart from the first and second rows in the grid, all remaining blog posts
   * are arranged in a three-column layout:
   * +------------+------------+-------------+
   * |            |            |             |
   * |  (span 2)  |  (span 2)  |  (span 2)   |
   * |            |            |             |
   * +------------+------------+-------------+
   */
  .blog-post-item {
    --blog-post-card-scale: 0.6;

    grid-column: span 2;

    @media screen and (max-width: 749px) {
      --blog-post-card-scale: 0.5;

      grid-column: span 6;
    }
  }

  /**
   * The second row of blog posts has two columns:
   * +-------------------+-------------------+
   * |                   |                   |
   * |  (column span 3)  |  (column span 3)  |
   * |                   |                   |
   * +-------------------+-------------------+
   */
  .blog-post-item:nth-child(2),
  .blog-post-item:nth-child(3) {
    --blog-post-card-scale: 0.8;

    grid-column: span 3;

    @media screen and (max-width: 749px) {
      --blog-post-card-scale: 0.5;

      grid-column: span 6;
    }
  }

  /**
   * The first row of blog posts has only one column:
   * +---------------------------------------+
   * |                                       |
   * |           (1 column span 6)           |
   * |                                       |
   * +---------------------------------------+
   */
  .blog-post-item:first-child {
    --blog-post-card-scale: 1;

    grid-column: span 6;
  }

  /**
   * 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 {
    --cart-font-size--2xs: var(--font-size--2xs);
    --cart-font-size--xs: var(--font-size--xs);
    --cart-font-size--sm: var(--font-size--sm);
    --cart-font-size--md: var(--font-size--md);
    --cart-font-size--2xl: var(--font-size--2xl);

    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);
  }

  @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__container--extend) {
      grid-column: 2 / 4;
      grid-template-columns: 1fr minmax(
          var(--sidebar-width),
          calc((100vw - var(--page-width)) / 2 + var(--sidebar-width))
        );
    }

    .cart__container--extend {
      height: 100%;
    }
  }

  @media screen and (min-width: 1400px) {
    .cart-page {
      grid-template-columns: 1fr var(--sidebar-width);
    }
  }
/* END_SECTION:main-cart */

/* START_SECTION:main-collection (INDEX:43) */
.main-collection-grid {
    grid-column: var(--grid-column--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .collection-wrapper {
    @media screen and (min-width: 750px) {
      grid-template-columns:
        1fr repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        1fr;
    }
  }

  .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)));
    }
  }

  /* Featured collection card styling within product grid */
  .product-grid__item[data-collection="true"] {
    display: flex;
    align-items: stretch;
  }

  .product-grid__item[data-collection="true"] .collection-card {
    width: 100%;
    height: 100%;
  }

  
    .gen-custom-collection .collection-card{
      aspect-ratio: auto!important;

  }
/* END_SECTION:main-collection */

/* START_SECTION:marquee (INDEX:45) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
  }

  .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;
  }

  /* @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_SECTION:marquee */

/* START_SECTION:media-with-content (INDEX:46) */
.section--page-width {
    &.media-with-content {
      grid-template-areas: 'margin-left media margin-right' 'margin-left content margin-right';

      @media screen and (min-width: 750px) {
        /* Wide proportion is media 3.5 parts, content 2.5 parts. Which equals 7|5. So divide the central column by 7+5 and multiply accordingly */
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 7)
          calc((var(--full-page-grid-central-column-width) / 12) * 5) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left media content margin-right';
      }
    }

    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 5)
          calc((var(--full-page-grid-central-column-width) / 12) * 7) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left content media margin-right';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          repeat(2, calc(var(--full-page-grid-central-column-width) / 2)) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 3) * 2)
          calc(var(--full-page-grid-central-column-width) / 3) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc(var(--full-page-grid-central-column-width) / 3)
          calc((var(--full-page-grid-central-column-width) / 3) * 2) var(--full-page-grid-margin);
      }
    }
  }

  .section--full-width {
    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2.5fr 3.5fr;

        grid-template-areas: 'content media';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 1fr 1fr;
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2fr 4fr;
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 4fr 2fr;
      }
    }
  }

  /* Keep the CSS specificity lower assuming that liquid won't assign this class with a full width section */
  .media-with-content.media-with-content--media-extend {
    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'margin-left content margin-right';

    @media screen and (min-width: 750px) {
      grid-template-areas: 'media media content margin-right';
    }
  }

  .media-with-content--media-extend.media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content {
    --media-with-content-grid-columns: var(--full-page-grid-with-margins);

    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'content content content';

    @media screen and (min-width: 750px) {
      --media-with-content-grid-columns: 3.5fr 2.5fr;

      /* Default desktop layout is wide media, on the left, in full page section */
      grid-template-areas: 'media content';
    }

    .media-block {
      grid-area: media;
    }

    .media-with-content__content {
      grid-area: content;
    }

    /* Inner blocks spacing */
    .media-with-content__content > .group-block-content {
      padding-inline: var(--page-margin);
      padding-block: calc(2 * var(--page-margin));

      @media screen and (min-width: 750px) {
        padding-block: var(--page-margin);
      }
    }

    &.section--page-width .media-with-content__content > .group-block-content {
      padding-inline: 0;

      @media screen and (min-width: 750px) {
        padding-inline-start: var(--page-margin);
      }
    }

    &.section--page-width.media-with-content--media-right .media-with-content__content > .group-block-content {
      padding-inline-end: var(--page-margin);
      padding-inline-start: 0;
    }
  }

  .media-with-content[data-shopify-visual-preview] {
    --hero-min-height: 500px;

    min-height: 500px;
  }
/* END_SECTION:media-with-content */

/* START_SECTION:password (INDEX:47) */
.section--password {
    --section-min-height: calc(100svh - 8rem);
  }

  .password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-block-start: var(--padding-xl);
  }

  .password-enter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding-block: var(--padding-xl);
  }

  .password-enter__powered-by {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--padding-xs);
    height: 1em;

    a {
      display: flex;
    }

    svg {
      display: inline;
      height: 1.3em;
      color: var(--color-foreground);
    }
  }

  .password-enter__links {
    display: flex;
    align-items: center;
    gap: var(--gap-2xl);

    @media screen and (max-width: 749px) {
      flex-direction: column;
      gap: var(--gap-sm);
    }
  }

  .password-enter__admin-link {
    margin: 0;
  }

  .password-enter__button {
    height: var(--minimum-touch-target);
    background-color: transparent;
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration: none;
    }
  }

  .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_SECTION:password */

/* START_SECTION:predictive-search (INDEX:51) */
input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .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;
    }
  }

  .header[transparent] :is(.predictive-search):not(:focus-within) {
    background-color: transparent;
  }

  .header[transparent] .predictive-search-form__header-inner {
    border-color: var(--color-foreground);
  }

  .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: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .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__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__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    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 {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  .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;
  }

  .predictive-search-results__no-results:last-child {
    margin-block: var(--margin-lg);
    text-align: center;
  }

  slideshow-slide .resource-card {
    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] {
    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);
    }
  }
/* END_SECTION:predictive-search */

/* START_SECTION:product-information (INDEX:54) */
/* Base grid layout */
  .product-information__grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    gap: var(--gap, 0) 0;
  }

  /* Default column positions */
  .product-details {
    order: 1;
  }

  .product-information__media {
    order: 0;
    width: 0;
    min-width: 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-information__grid:has(.product-information__media:empty) {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    /* Position when there is media */
    .product-information__grid:not(:has(.product-information__media:empty)) {
      /* Media on the left side */
      &.product-information--media-left {
        grid-template-columns: 1fr min(50vw, var(--sidebar-width));

        .product-information__media {
          padding-right: 0;
        }

        .product-details {
          padding-left: 3rem;
        }

        &: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(:has(.product-information__media:empty)),
      .product-information__grid:not(:has(.product-information__media:empty)) {
        &.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,
        :has(.product-information__media:empty)
      ).product-information--media-left {
      grid-template-columns: 55% 45%;
      /*padding-left: 50px;
        padding-right: 50px;*/
    }

    .product-information__grid:not(
        .product-information__grid--half,
        :has(.product-information__media:empty)
      ).product-information--media-right {
      grid-template-columns: 45% 55%;
    }
  }

  .product-information__grid--limit-details .product-details > .group-block {
    max-width: var(--sidebar-width);
  }

  /* 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_SECTION:product-information */

/* START_SECTION:product-recommendations (INDEX:56) */
.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_SECTION:product-recommendations */

/* CSS from block stylesheet tags */
/* START_BLOCK:_accordion-row (INDEX:64) */
.details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
  
  /* Default spacing for icon (overridden by custom spacing with !important if enabled) */
  .details__header .icon-block__media {
    margin-inline-end: 8px;
    margin-inline-start: 0px;
  }
  
  
  /* Smooth opening animation */
  accordion-custom details[open] .details-content {
    animation: slideDown 0.3s ease-out;
  }
  
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_BLOCK:_accordion-row */

/* START_BLOCK:_announcement (INDEX:65) */
.text-block {
    width: var(--width);
    max-width: 100%;
  }

  .text-block > * {
    width: var(--width);
    max-width: var(--max-width, 100%);
    text-align: var(--text-align);
  }

  .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).h1,
  .text-block:not(.text-block--full-width).h2,
  .text-block:not(.text-block--full-width).h3,
  .text-block:not(.text-block--full-width).h4,
  .text-block:not(.text-block--full-width).h5,
  .text-block:not(.text-block--full-width).h6 {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .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 > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }
/* END_BLOCK:_announcement */

/* START_BLOCK:_blog-post-card (INDEX:66) */
.blog-post-card {
    display: flex;
    flex-direction: column;
    text-align: var(--text-align);
  }

  .blog-post-item .blog-post-card__image-container,
  .blog-post-item .blog-post-card__content {
    width: 100%;
  }

  .blog-post-item:first-child .blog-post-card {
    flex-direction: row;

    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .blog-post-item:first-child .blog-post-card__image-container {
    width: 70%;

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .blog-post-item:first-child:has(.blog-post-card__image-container) .blog-post-card__content {
    padding-inline-start: var(--columns-gap);
    width: 30%;

    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
      width: 100%;
    }
  }

  .blog-post-card__content {
    padding-block-start: 0.4rem;
    display: flex;
    flex-direction: column;
  }

  .blog-post-card__content a {
    display: block;
    text-wrap: pretty;
    text-decoration: none;
    padding-block-start: 0.75rem;
  }

  .blog-post-card__content a:hover,
  .blog-post-card__content a:hover [style*='--color: var(--color-primary)'] {
    color: var(--color-primary-hover);
  }

  .blog-post-card__content a:hover [style*='--color: var(--color-foreground-heading)'] {
    color: rgb(var(--color-foreground-heading-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-card__content a:hover [style*='--color: var(--color-foreground)'] {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }
/* END_BLOCK:_blog-post-card */

/* START_BLOCK:_blog-post-content (INDEX:67) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:68) */
.blog-post-card__content-text a {
    color: var(--color-primary);
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_BLOCK:_blog-post-description */

/* START_BLOCK:_blog-post-featured-image (INDEX:69) */
.blog-post-featured-image {
    --width: 100%;
    --custom-width: 100%;
    display: block;
    position: relative;
    width: var(--width);
  }

  .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:70) */
.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:71) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    white-space: nowrap;
    flex-wrap: wrap;
  }

  .blog-post-details > span {
    text-overflow: clip;
    overflow: hidden;
  }
/* END_BLOCK:_blog-post-info-text */

/* START_BLOCK:_cart-products (INDEX:72) */
.cart-page--empty .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:73) */
.cart__summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart__summary-item.tax-note {
    font-size: var(--cart-font-size--sm);
  }

  .cart__discount-label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart__total {
    align-items: baseline;
    font-weight: var(--font-weight-bold);
  }

  .cart__tax-note {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart__discount-label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
  }

  .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[sticky]) .cart__summary-inner {
    top: var(--header-height, 0);
  }

  .cart__summary-container {
    @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-container:not(.cart__container--extend),
  .cart__summary-container:not(.cart__container--extend) .cart__summary-inner {
    height: auto;
  }

  .cart__container--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__container--extend:not(.has-border-radius) {
    @media screen and (min-width: 750px) {
      border-top: none;
      border-bottom: none;
    }
  }

  .cart__container--extend .cart__summary-inner {
    height: 100%;
    padding: var(--padding-md) 0 var(--padding-4xl);

    @media screen and (min-width: 750px) {
      grid-row: 2 / -1;
      padding-inline: var(--page-margin);
      width: var(--sidebar-width);
    }
  }

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

  @media screen and (max-width: 749px) {
    .inherit-parent-scheme--mobile {
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-primary: inherit;
      --color-primary-rgb: inherit;
      --color-primary-hover: inherit;
      --color-primary-hover-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: inherit;
      --color-foreground-heading: inherit;
      --color-primary-button-text: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-border: inherit;
      --color-primary-button-hover-text: inherit;
      --color-primary-button-hover-background: inherit;
      --color-primary-button-hover-border: inherit;
      --color-secondary-button-text: inherit;
      --color-secondary-button-background: inherit;
      --color-secondary-button-border: inherit;
      --color-secondary-button-hover-text: inherit;
      --color-secondary-button-hover-background: inherit;
      --color-secondary-button-hover-border: inherit;
      --color-input-text: inherit;
      --color-input-text-rgb: inherit;
      --color-input-background: inherit;
    }
  }
/* 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;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-title .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
    min-width: 26px;
  }

  .cart-title .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-size: clamp(var(--cart-font-size--2xs), 0.7lh, var(--cart-font-size--xs));
  }
/* END_BLOCK:_cart-title */

/* START_BLOCK:_collection-card-image (INDEX:75) */
.collection-card__image {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: var(--ratio);
    z-index: var(--layer-base);
    overflow: hidden;
  }

  .collection-card__image--placeholder {
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:_collection-card-image */

/* 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-button (INDEX:79) */
.collection-links-button {
        padding: 8px 16px;
        transition: background-color 0.3s ease;
    }
    .collection-links-button:hover {
        background-color: #00000030;
    }
  .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));

    @media (hover: hover) {
      opacity: var(--disabled-opacity);
    }

    [layout='spotlight'] & {
      opacity: var(--disabled-opacity);
    }

    &[aria-current='true'] {
      opacity: 1;
    }

    .text-block {
      display: inline-block;
    }

  

    @media (max-width: 749px) {
      --min-font-size: var(--font-size--3xl);
      --max-font-size: var(--font-size--5xl);

      [layout='spotlight'] & {
        white-space: nowrap;
        scroll-snap-align: start;

        span {
          text-wrap: nowrap;
        }
      }
    }
  }

  .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-button */

/* START_BLOCK:_collection-link (INDEX:80) */
.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));

    @media (hover: hover) {
      opacity: var(--disabled-opacity);
    }

    [layout='spotlight'] & {
      opacity: var(--disabled-opacity);
    }

    &[aria-current='true'] {
      opacity: 1;
    }

    .text-block {
      display: inline-block;
    }

    @media (max-width: 749px) {
      --min-font-size: var(--font-size--3xl);
      --max-font-size: var(--font-size--5xl);

      [layout='spotlight'] & {
        white-space: nowrap;
        scroll-snap-align: start;

        span {
          text-wrap: nowrap;
        }
      }
    }
  }

  .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:_each-details (INDEX:86) */
.inherit h1,
.inherit h2,
.inherit h3,
.inherit h4,
.inherit h5,
.inherit h6,
.inherit a,
.inherit p {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.border-bottom-details{
  border-bottom: 2px solid #d4d8e1;
  padding-bottom: 5px;
  
}
/* END_BLOCK:_each-details */

/* START_BLOCK:_eachorder (INDEX:87) */
.inherit h1,
.inherit h2,
.inherit h3,
.inherit h4,
.inherit h5,
.inherit h6,
.inherit a,
.inherit p {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
/* END_BLOCK:_eachorder */

/* START_BLOCK:_eachorder2 (INDEX:88) */
.inherit h1,
.inherit h2,
.inherit h3,
.inherit h4,
.inherit h5,
.inherit h6,
.inherit a,
.inherit p {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
/* END_BLOCK:_eachorder2 */

/* START_BLOCK:_eachorder3 (INDEX:89) */
.inherit h1,
.inherit h2,
.inherit h3,
.inherit h4,
.inherit h5,
.inherit h6,
.inherit a,
.inherit p {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
/* END_BLOCK:_eachorder3 */

/* START_BLOCK:_featured-blog-posts-card (INDEX:90) */
.featured-blog-posts-card {
    width: 100%;
    position: relative;
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    gap: var(--gap);
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: var(--layer-flat);
    pointer-events: none;
  }

  .resource-list--grid .resource-list__item {
    min-width: 0;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
    height: 100%;

    .featured-blog-posts-card__image,
    .blog-placeholder-svg {
      aspect-ratio: 99;
      height: 100%;
    }

    .featured-blog-posts-card__content {
      flex-shrink: 0;
      height: auto;
    }
  }

  @media (max-width: 768px) {
    .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 {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    gap: var(--gap);
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .featured-blog-posts-card__link {
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius);
  }

  .featured-blog-posts-card__content h4 {
    margin: 0;
  }
/* END_BLOCK:_featured-blog-posts-card */

/* START_BLOCK:_featured-blog-posts-image (INDEX:91) */
.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 (INDEX:95) */
.featured-product-content-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-sm);
  }

  .featured-product-content-bottom:not(:has(product-swatches)) {
    display: none;
  }
/* END_BLOCK:_featured-product */

/* START_BLOCK:_footer-social-icons (INDEX:97) */
.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:98) */
.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;

    /* Make sure the logo visually hugs the left edge of the column when it is the first item in the left column */
    margin-inline: calc(-1 * var(--padding-inline-start));

    &[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:99) */
.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);
  }

  header-menu {
    width: 100%;
  }

  /* Drawer menu featured content */
  .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-list {
    --menu-horizontal-gap: var(--gap-xl);
    --menu-vertical-gap: var(--gap-xl);

    display: flex;
  }

  .menu-list__list {
    display: flex;
    justify-content: var(--grid-area-alignment);
  }

  .menu-list__list-item {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .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);
    transition: color var(--animation-speed) var(--animation-easing);
    text-decoration: none;
    display: flex;
    min-height: var(--minimum-touch-target);
    align-items: center;

    &:hover,
    &:focus {
      color: var(--menu-top-level-font-color);
    }

    @media screen and (min-width: 750px) {
      font-size: var(--menu-top-level-font-size-desktop);
    }
  }

  /*
      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[slot='overflow'] .menu-list__link[aria-expanded='true'] {
    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 var(--menu-horizontal-gap);
  }

  .overflow-menu {
    background-color: transparent;
    padding: var(--focus-outline-size);
    margin: calc(-1 * var(--focus-outline-size));
  }

  /* the submenu background element to animate */
  .overflow-menu::after {
    content: '';
    position: absolute;
    top: calc(100% - 1px + var(--border-bottom-width));
    left: 0;
    width: 100%;
    height: var(--submenu-height);
    background-color: var(--color-background);
    box-shadow: var(--shadow-popover);
    clip-path: inset(0.5px 0 -100px 0); /* stylelint-disable-line */
    opacity: var(--submenu-opacity, 1);
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic),
      opacity var(--animation-speed-slow) var(--ease-out-cubic) var(--animation-speed-fast);
    z-index: calc(var(--layer-header-menu) - 1);
  }

  /** 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.color-scheme-matches-parent,
    .overflow-menu.color-scheme-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);

    box-shadow: var(--shadow-drawer);
    visibility: hidden;
    background-color: var(--color-background);
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width));
    z-index: var(--layer-header-menu);
    padding-inline: var(--padding-inline);
    clip-path: rect(0 100% var(--submenu-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  /* 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),
  /* Keep the submenus open when they are hovered */
  .menu-list__submenu:is(:hover),
  .overflow-menu::part(overflow):hover {
    --submenu-content-opacity: 1;

    visibility: visible;
  }

  .menu-list__list-item:has([data-animating]) > .menu-list__submenu {
    --submenu-content-opacity: 0;

    visibility: visible;

    &::before {
      height: 0;
    }
  }

  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    grid-column: 2;
    padding-block-start: var(--submenu-padding-block-start);
    padding-block-end: var(--submenu-padding-block-end);
    padding-inline: var(--section-padding-inline);
  }

  .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) {
    --submenu-content-opacity: 0;

    position: relative;
    display: grid;
    grid-template-columns: minmax(auto, 200px) 1fr;
    grid-template-areas: 'left right';
    grid-template-rows: max-content;
    grid-gap: 0;
  }

  /* Make overflow menu scrollable when content exceeds viewport */
  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    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;
  }

  .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;

    .menu-list__link {
      --submenu-content-opacity: 0;

      grid-area: left;
      grid-row: auto;
      height: min-content;
      font-size: var(--font-size--xl);
      opacity: var(--submenu-content-opacity);
      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 {
        padding-block-start: 0;
        grid-column: unset;
      }
    }

    .menu-list__link[aria-expanded='true'] + .menu-list__submenu {
      visibility: visible;
    }
  }

  .header-menu[data-overflow-expanded='true'] .menu-list__list-item:where([slot='overflow']) .menu-list__link {
    --submenu-content-opacity: 1;
  }

  .menu-list__list-item:where([slot='overflow']):has([data-animating]) > .menu-list__link {
    --submenu-content-opacity: 0;
  }

  .menu-list__submenu-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    opacity: var(--submenu-content-opacity);
    transition: var(--submenu-content-animation);
  }

  .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;
    transition: color var(--animation-speed) var(--animation-easing);

    &: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__more-list-item .mega-menu__link {
    color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));
  }

  .mega-menu__more-list-item:where(:hover, .active) .mega-menu__link {
    color: var(--menu-top-level-font-color);
  }

  .mega-menu__more-list-item[aria-hidden='true'] {
    display: none;
  }

  .mega-menu__submenu {
    /* preserves the inherited grid layout when this submenu wrapper is used */
    display: contents;
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_image (INDEX:101) */
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:105) */
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:_order-istimate (INDEX:108) */
.inherit h1,
.inherit h2,
.inherit h3,
.inherit h4,
.inherit h5,
.inherit h6,
.inherit a,
.inherit p {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.order-parrent{
  /* background: #EFEFEF; */
  border-radius: 8px;
  padding: 16px 24px 24px 24px;
  /* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
}

.timeline-step {
  position: relative;
  text-align: center;
}

/* .timeline-step::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 0%;
  width: 96%;
  height: 1px;
  background-color: #d4d8e1;
  z-index: 0;
} */

.timeline-step::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 0%;
  width: 96%;
  height: 1px;
  background: linear-gradient(to right, #d4d8e1 50%, transparent 50%);
  background-size: 8px 1px;
  z-index: 0;
}
/* END_BLOCK:_order-istimate */

/* START_BLOCK:_pdp-details (INDEX:109) */
.inherit h1,
.inherit h2,
.inherit h3,
.inherit h4,
.inherit h5,
.inherit h6,
.inherit a,
.inherit p {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

.details-contents{
  
  /* background: #EFEFEF; */
  border-radius: 8px;
  
  /* margin-top: 10px; */
}

@media (max-width: 750px) {
  .details-contents{
    margin-top: 8px;
  }
}
/* END_BLOCK:_pdp-details */

/* START_BLOCK:_product-details (INDEX:113) */
/* 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;
    } */

    .product-details {
      display: block !important;
    }
  }

  .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:_product-discount-badge (INDEX:114) */
.inherit h1,
.inherit h2,
.inherit h3,
.inherit h4,
.inherit h5,
.inherit h6,
.inherit a,
.inherit p {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
/* END_BLOCK:_product-discount-badge */

/* START_BLOCK:_product-media-gallery (INDEX:118) */
slideshow-container.slideshow__container slideshow-arrows {
    display: none;
}
  .dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  @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: 100%;

        .product-media img {
          object-fit: cover;
        }
      }
    }
  }

  .dialog-zoomed-gallery__close-button {
    color: white;
    mix-blend-mode: difference;
    z-index: var(--layer-raised);
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-out;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }

  .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;
  }
/* END_BLOCK:_product-media-gallery */

/* START_BLOCK:_product-type (INDEX:119) */
.inherit h1,
.inherit h2,
.inherit h3,
.inherit h4,
.inherit h5,
.inherit h6,
.inherit a,
.inherit p {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
/* END_BLOCK:_product-type */

/* START_BLOCK:_search-input (INDEX:121) */
.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:123) */
.slide__content {
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
  }

  .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 > placeholder-image,
  .slide__image-container > placeholder-image > img {
    width: 100%;
  }

  .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;
  }
/* END_BLOCK:_slide */

/* START_BLOCK:_social-link (INDEX:124) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    fill: currentColor;
    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:accelerated-checkout (INDEX:125) */
.accelerated-checkout-block[data-shopify-visual-preview] {
    width: 300px;
  }

  more-payment-options-link {
    font-size: smaller;
  }

  more-payment-options-link a {
    --button-color: var(--color-primary);
  }

  more-payment-options-link a:hover {
    --button-color: var(--color-primary-hover);
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_BLOCK:accelerated-checkout */

/* START_BLOCK:accordion (INDEX:126) */
.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);
  }
/* END_BLOCK:accordion */

/* START_BLOCK:buy-buttons (INDEX:130) */
.buy-buttons-block {
    width: 100%;
  }

  .product-form-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .product-form-buttons > *:not(.quantity-selector) {
    flex: 1 1 185px;
    min-width: fit-content;
  }

  .product-form-buttons--stacked > *:not(.quantity-selector) {
    flex-basis: 51%; /* Force the buttons to be on separate rows */
  }

  .quantity-selector {
    flex-grow: 0;
  }

  .product-form-buttons button {
    width: 100%;
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

  .add-to-cart-button {
    text-transform: var(--button-text-case-primary);
  }

  .add-to-cart-button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .product-form-buttons .shopify-payment-button__button {
    width: 100%;
    min-height: var(--minimum-touch-target);
  }

  .quantity-selector,
  .add-to-cart-button {
    height: var(--height-buy-buttons);
  }

  .product__pickup-availabilities {
    width: 100%;
  }

  .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);
    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__dialog {
    padding: var(--padding-2xl);
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
    border: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);
  }

  .pickup-location__dialog:modal {
    max-height: 100dvh;
  }

  .pickup-location__text-sm {
    font-size: var(--font-size--sm);
    margin: 0;
  }

  .pickup-location__text-xs {
    font-size: var(--font-size--xs);
    margin: 0;
  }

  .product-form-text__error {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-xs);
  }

  .pickup-location__button {
    width: fit-content;
    color: var(--color-primary);
    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: var(--color-primary-hover);
  }

  .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;
  }

  .pickup-location__close-button {
    top: calc(var(--padding-2xl) - (var(--icon-size-xs) / 2));
    right: calc(var(--padding-2xl) - var(--icon-size-xs));
  }
/* END_BLOCK:buy-buttons */

/* START_BLOCK:contact-form-submit-button (INDEX:135) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:email-signup (INDEX:138) */
email-signup-block {
    display: block;
  }

  .email-signup-block {
    min-width: fit-content;

    @media screen and (max-width: 749px) {
      width: 100%;
      min-width: unset;
    }
  }

  .email-signup__heading {
    padding-block: var(--padding-sm);
  }

  .email-signup__form {
    display: flex;
    flex-direction: column;
  }

  .email-signup__input-group {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    background-color: transparent;
  }

  .email-signup__input-group:not(:has(.email-signup__button--integrated)) {
    gap: var(--gap-xs);
  }

  .email-signup__input-group:not(:has(.email-signup__button--arrow)) {
    @media screen and (max-width: 749px) {
      grid-template-columns: 1fr;
    }
  }

  .email-signup__input {
    width: 100%;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
  }

  .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 .email-signup__input--underline {
    --box-shadow-color: var(--color-input-border);
    --box-shadow-multiplier: 1;

    color: var(--color-input-text);
    background-color: transparent;
    padding: 12px 0;
    border: none;
    border-radius: 0;
    box-shadow: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color);
    transition: box-shadow var(--animation-values);

    &:focus-visible {
      --box-shadow-multiplier: 1.75;
      --box-shadow-color: var(--color-input-text);

      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 {
    --button-actual-width: var(--button-size);
  }

  .email-signup__input:has(+ .email-signup__button--arrow.email-signup__button--integrated) {
    padding-inline-end: calc(var(--button-size) + var(--padding-sm));

    @media screen and (max-width: 749px) {
      text-align: left;
    }
  }

  .email-signup__input:has(+ .email-signup__button--integrated.email-signup__button--text) {
    padding-inline-end: calc(var(--button-actual-width) + var(--padding-xs) + var(--margin-xs));

    @media screen and (max-width: 749px) {
      text-align: left;
    }
  }

  .email-signup__button-icon {
    fill: 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 {
    aspect-ratio: 1;
    padding-inline: var(--padding-xs);

    &:not(.email-signup__button--integrated) {
      width: auto;
    }
  }

  .email-signup__button--integrated {
    --button-offset: var(--margin-xs);

    position: absolute;
    height: calc(100% - (var(--button-offset) * 2) - (var(--border-width) * 2));
    right: calc(var(--button-offset) + var(--border-width));
    top: calc(var(--button-offset) + var(--border-width));
    width: max-content;

    @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__input--underline + .email-signup__button--integrated {
    --button-offset: calc(10% - var(--border-width));

    right: 0;

    &.email-signup__button--text.button-unstyled {
      padding: 0;
    }

    &.button-unstyled {
      border-radius: 0;
    }
  }

  .email-signup__button:not(.button-unstyled) {
    background-color: var(--button-background-color);
    color: var(--button-color);
    font-weight: var(--button-font-weight-primary);
    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 {
    color: rgb(var(--color-input-text-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:filters (INDEX:140) */
.collection-wrapper {
    @media screen and (min-width: 750px) {
      --facets-vertical-col-width: 6;
    }

    @media screen and (min-width: 990px) {
      --facets-vertical-col-width: 5;
    }
  }

  .facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: 0 0 8px 0;
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  /* Remove left padding on mobile to align filter with page content */
  .facets-toggle {
    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) {
    justify-content: space-between;
  }

  dialog-component.facets-block-wrapper:not(:has(.facets--drawer[open])) {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  .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%;

    top: auto;
    bottom: 0;
    height: var(--drawer-height);
    max-height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    box-shadow: none;
    padding-block: 0;

    &:not(.facets--drawer) {
      @media screen and (min-width: 750px) {
        padding-inline: var(--padding-inline-start) var(--padding-inline-end);
        width: 100%;
        max-width: 100%;
      }
    }
  }

  .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;
    }
  }

  .facts--horizontal-mobile .facets__summary .facets__status {
    margin-left: 0!important;
  }

  @media screen and (max-width: 749px) {
    .facts--horizontal-mobile{
     padding-block: 0 !important;
      display: flex !important;
      align-items: center !important;
      position: relative !important;
      z-index: var(--facets-upper-z-index) !important;
      border: none !important;
      height: auto !important;
      top: initial !important;
      bottom: initial !important;
      max-height: none !important;
      width: auto !important;
      overflow: visible !important;
  }
  
  

  .facts--horizontal-mobile .facets__panel-content,
  .sorting-filter__options{
      border-radius: var(--style-border-radius-popover) !important;
      position: absolute !important;
      top: 100% !important;
      width: max-content !important;
      min-width: var(--facets-panel-min-width) !important;
      max-width: var(--facets-panel-width) !important;
      max-height: var(--facets-panel-height) !important;
      z-index: var(--facets-upper-z-index) !important;
      box-shadow: var(--shadow-popover) !important;
      border: var(--style-border-popover) !important;
      background-color: var(--color-background) !important;
      overflow-y: hidden !important;
      gap: 0 !important;
      left: 0px !important;
  }

  .facts--horizontal-mobile .facets__label{
    font-size: 14px !important;
    margin-right: 6px !important;
  }
    .facts--horizontal-mobile .facets__summary{
    justify-content: center;
  }
    .facts--horizontal-mobile .facets__summary .icon-caret{
    margin-left: 0;
  }
    
  }

  .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;
    }
  }

  .collection-wrapper:has(.collection-wrapper--full-width) .facets--vertical:not(.facets--drawer) {
    @media screen and (min-width: 750px) {
      padding-inline-start: max(var(--padding-sm), var(--padding-inline-start));
    }
  }

  .facets--drawer {
    border-radius: 0;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    padding-inline: 0;
  }

  .facets--drawer[open] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .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);
    }
  }

  .collection-wrapper:has(.product-grid-mobile--large) .facets-mobile-wrapper.facets-controls-wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .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-muted);
    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-h4--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 - Bubble */
  .facets__bubble {
    display: inline-flex;
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  /* 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(--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,
  .sorting-filter__options {
    @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(--drawer-padding) * 2);
    border-top: var(--style-border-width) solid var(--color-border);
    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,
  .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__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  /* Products count */
  .products-count-wrapper {
    display: flex;
    align-items: center;
  }

  .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(--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__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-xs);

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets-drawer__close {
    position: relative;
    top: 0;
    right: 0;
    padding: 0;
    cursor: pointer;
  }

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

  .collection-wrapper:has(> .facets--horizontal) .facets__panel[open] {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-open-z-index);
    }
  }

  @media screen and (max-width: 500px) {
    .facts--horizontal-mobile .facets__panel-content,
  .sorting-filter__options{
    left: -20px !important;
  }
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-policy-list (INDEX:143) */
.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: 6ch 100%;
  }

  .terms-policies-popover.\:popover-open,
  .terms-policies-popover:popover-open {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  @media screen and (max-width: 750px) {
    .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: 750px) {
      .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:145) */
.icon-block {
    display: flex;
    fill: currentcolor;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:146) */
.placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  placeholder-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--ratio);
  }

  .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:148) */
.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: 750px) {
      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:149) */
.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;
  }
  footer .menu__heading {
    padding-top: 0;
  }

  @media screen and (max-width: 749px) {
    footer .menu .list-unstyled {
      text-align: var(--text-align-mobile, center);
      display: flex;
      flex-direction: column;
      align-items: var(--horizontal-alignment-mobile, center);
    }
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    footer .menu__heading {
      text-align: var(--text-align-mobile, center);
      justify-content: var(--horizontal-alignment-mobile, center);
    }

    footer .details-content, footer p {
      text-align: var(--text-align-mobile, center);
      width: 100%;
      max-width: 100%;
    }

    footer .text-block {
      justify-content: var(--horizontal-alignment-mobile, center);
      align-items: var(--horizontal-alignment-mobile, center);
    }

    .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);
    }
  }

  .menu--caret .icon-plus,
  .menu--plus .icon-caret {
    display: none;
  }
/* END_BLOCK:menu */

/* START_BLOCK:page (INDEX:151) */
.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);
  }

  .placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  .page-placeholder {
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:page */

/* START_BLOCK:payment-icons (INDEX:152) */
.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:153) */
.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:price (INDEX:154) */
.tax-note:empty {
    display: none;
  }

  form.payment-terms {
    padding-top: 0.5em;
  }

  .installments:not(:has(shopify-payment-terms)) {
    display: none;
  }
/* END_BLOCK:price */

/* START_BLOCK:product-custom-property (INDEX:156) */
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-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%;
    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;
    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:158) */
.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:159) */
.product-recommendations-wrapper {
    width: 100%;
  }

  .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) {
    width: 100vw;
  }

  .product-recommendations {
    display: block;
  }

  .product-recommendations__skeleton-item {
    aspect-ratio: 3 / 4;
    background-color: var(--color-foreground);
    opacity: var(--skeleton-opacity);
    border-radius: 4px;
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:review (INDEX:162) */
.rating-wrapper {
    width: 100%;
    gap: var(--gap-xs);
    flex-wrap: wrap;
  }

  .rating-color--primary {
    --star-fill-color: var(--color-primary);
    --star-fill-color-rgb: var(--color-primary-rgb);
  }

  .rating-color--foreground {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
  }

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-text,
  .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-icons (INDEX:165) */
.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:social-icons */

/* START_BLOCK:social-links (INDEX:166) */
.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;
    fill: currentColor;
    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:167) */
/* 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: 750px) {
    /* 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;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:168) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }

  swatches-variant-picker-component {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: var(--product-swatches-alignment-mobile);

    @media (min-width: 750px) {
      justify-content: var(--product-swatches-alignment);
    }
  }

  swatches-variant-picker-component .variant-option--swatches {
    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));
    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));
  }

  .variant-option--swatches {
    overflow-list::part(list) {
      gap: var(--gap-sm);
    }

    overflow-list[defer]::part(list) {
      flex-wrap: nowrap;
    }
  }

  .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_BLOCK:swatches */

/* START_BLOCK:video (INDEX:171) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:account-actions (INDEX:172) */
.account-actions {
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: height var(--animation-values);

    &:has([data-active]) .account-actions__main-menu {
      visibility: hidden;
    }
  }

  .account-actions__header {
    padding: var(--padding-xl);
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
  }

  .account-actions__title {
    /* Ideally we set the font-size here, but specificity issues make this necessary */
    --font-h5--size: var(--font-size--lg);

    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .account-actions__email {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
    max-width: var(--account-actions-max-width);
    word-break: break-all;
  }

  .account-actions__sign-ins {
    padding: var(--padding-xl);
    padding-block-start: 0;
    padding-block-end: var(--padding-md);
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .account-actions__sign-in-text {
    display: inline;
  }

  .account-actions__fallback-text {
    display: none;
  }

  .account-actions__sign-ins:not(:has(shop-login-button)) {
    gap: 0;

    .account-actions__sign-in-text {
      display: none;
    }

    .account-actions__fallback-text {
      display: block;
    }
  }

  /* Makes the shop login button radius match the theme settings */
  .account-actions__shop-login {
    --buttons-radius: var(--style-border-radius-buttons-primary);
  }

  .account-actions__nav {
    padding: var(--padding-xl);
    padding-block-start: 0;
  }

  .account-actions__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;

    @media screen and (max-width: 300px) {
      grid-template-columns: 1fr;
    }
  }

  .account-actions__link {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .account-actions__icon {
    display: flex;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    margin-block: -4px;
  }

  /* 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.
    Using element selector to increase specificity.
  **/

    .account-actions :is(a.button, a.button-secondary):focus-visible {
      outline: none;
      overflow: visible;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        inset: calc(-1 * var(--focus-outline-offset));
        border: var(--focus-outline-width) solid currentColor;
        border-radius: var(--style-border-radius-buttons-secondary);
        display: inherit;
      }
    }

    .account-actions a.button:focus-visible::after {
      border-color: var(--button-background-color);
      border-radius: var(--style-border-radius-buttons-primary);
    }
  }
/* END_SNIPPET:account-actions */

/* START_SNIPPET:account-button (INDEX:173) */
.account-button {
    color: var(--color-foreground);
    appearance: none;
    border: none;
    background: none;
    height: var(--button-size);
    width: var(--button-size-md);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .account-button__avatar {
    --account-button-size: 1.625rem;

    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--account-button-size);
    height: var(--account-button-size);
    border-radius: var(--style-border-radius-50);
    background-color: var(--color-primary-button-background);
    font-size: var(--font-size--sm);
    font-weight: 500;
    color: var(--color-primary-button-text);
    text-transform: uppercase;
    line-height: 1;
  }

  .account-button__icon {
    color: currentColor;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  /* The shop avatar doesn't bubble the click event up to our button, so we need to prevent that or the button doesn't work */
  .account-button shop-user-avatar {
    pointer-events: none;
  }
/* END_SNIPPET:account-button */

/* START_SNIPPET:account-drawer (INDEX:174) */
.account-drawer {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .account-drawer__dialog {
    --animation-speed: 0.24s;
    --dialog-drawer-opening-animation: account-drawer-slide-in;
    --dialog-drawer-closing-animation: account-drawer-slide-out;

    height: fit-content;
    margin: 0;
    inset-block-end: 0;
    inset-block-start: auto;
    border-radius: 0;
    padding: 0;
  }

  .account-drawer__close-button {
    z-index: 1;
    inset-block-start: var(--padding-xs);
    inset-inline-end: var(--padding-xs);
    color: var(--color-foreground);
    background-color: transparent;
  }

  .account-drawer__close-button .svg-wrapper {
    display: flex;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
  }

  @keyframes account-drawer-slide-in {
    from {
      transform: translateY(100%);
    }

    to {
      transform: translateY(0);
    }
  }

  @keyframes account-drawer-slide-out {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(100%);
    }
  }
/* END_SNIPPET:account-drawer */

/* START_SNIPPET:account-popover (INDEX:175) */
.account-popover {
    --account-popover-min-width: 22rem;
    --account-actions-max-width: 22rem;
  }

  .account-popover__summary {
    padding: 0;

    &:hover {
      color: var(--color-foreground);
    }
  }

  .account-popover__panel {
    --account-popover-opacity: 0;
    --account-popover-y: 20px;
    border-radius: var(--style-border-radius-popover);
    margin: 0;
    top: calc(var(--anchor-top) * 1px + var(--minimum-touch-target) + var(--header-padding));
    left: unset;
    right: calc(var(--anchor-right) * 1px);

    width: max-content;
    min-width: var(--account-popover-min-width);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    overflow-y: hidden;
    opacity: var(--account-popover-opacity);
    translate: 0 var(--account-popover-y);
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;

    &:popover-open {
      --account-popover-opacity: 1;
      --account-popover-y: 0px;
    }

    @supports not selector(:popover-open) {
      &.\:popover-open {
        --account-popover-opacity: 1;
        --account-popover-y: 0px;
      }
    }
  }

  @starting-style {
    .account-popover__panel {
      --account-popover-opacity: 0;
      --account-popover-y: 20px;
    }
    .account-popover__panel:popover-open {
      --account-popover-opacity: 0;
      --account-popover-y: 20px;
    }
  }
/* END_SNIPPET:account-popover */

/* START_SNIPPET:add-to-cart-button (INDEX:176) */
.add-to-cart-text {
    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: opacity var(--animation-speed) var(--animation-easing);
  }

  /* Keep Add to Cart button color stable on hover for theme-based styles */
  .add-to-cart-button.button:hover,
  .add-to-cart-button.button:focus {
    --button-color: var(--color-primary-button-text);
    --button-background-color: var(--color-primary-button-background);
    --button-border-color: var(--color-primary-button-border);
  }

  .add-to-cart-button.button-secondary:hover,
  .add-to-cart-button.button-secondary:focus {
    --button-color: var(--color-secondary-button-text);
    --button-background-color: var(--color-secondary-button-background);
    --button-border-color: var(--color-secondary-button-border);
  }

  .add-to-cart-text__suffix-price {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .atc-added .add-to-cart-text {
    animation-name: atc-slide-out;
  }

  .add-to-cart-text--added {
    position: absolute;
    inset: 0;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: forwards;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: width var(--animation-speed) var(--animation-easing),
      opacity var(--animation-speed) var(--animation-easing);
  }

  .atc-added .add-to-cart-text--added {
    animation-name: atc-slide-in;
  }

  @keyframes atc-slide-in {
    from {
      opacity: 0;
      transform: translateY(0.5em);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes atc-slide-out {
    from {
      transform: translateY(0);
      opacity: 1;
    }

    to {
      transform: translateY(-1em);
      opacity: 0;
    }
  }

  /* The availability check flips the button disabled for a moment; keep it
     the SAME height AND the same black look in that state — everything is
     print-on-demand, so "checking stock" must never read as a gray flash. */
  .add-to-cart-button[disabled] {
    height: auto !important;
    min-height: var(--button-addtocart-btn-heights) !important;
    background-color: rgb(0, 0, 0) !important;
    color: rgb(255, 255, 255) !important;
    opacity: 1 !important;
    filter: none !important;
  }

  /* Mobile fix: prevent label clipping when size not selected */
  @media (max-width: 560px) {
    .add-to-cart-button[disabled] {
      height: auto !important;
      min-height: var(--button-addtocart-btn-heights) !important;
    }
    .add-to-cart-button[disabled] .add-to-cart-text {
      flex-wrap: wrap;
    }
    .add-to-cart-button[disabled] .add-to-cart-text__suffix-price {
      display: none !important;
    }
    .add-to-cart-button[disabled] .add-to-cart-text svg {
      display: none !important;
    }
    .add-to-cart-button[disabled] .add-to-cart-text__content {
      white-space: normal;
    }
  }
/* END_SNIPPET:add-to-cart-button */

/* START_SNIPPET:background-video (INDEX:181) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-video */

/* START_SNIPPET:bento-grid (INDEX:182) */
.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 (max-width: 900px) {
    .bento-box {
      grid-template-columns: repeat(2, 1fr);
    }

    .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 (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 cases === */

    /* Exactly 1 item */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(1)) {
      grid-template-areas: 'A A A A A A A A A A A A';
    }

    /* Exactly 2 items */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(2)) {
      grid-template-areas: 'A A A A A A B B B B B B';
    }

    /* Exactly 4 items */
    .bento-box:has(.bento-box__item:first-child:nth-last-child(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:has(.bento-box__item:first-child:nth-last-child(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:has(.bento-box__item:first-child:nth-last-child(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:has(.bento-box__item:first-child:nth-last-child(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:has(.bento-box__item:first-child:nth-last-child(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:has(.bento-box__item:first-child:nth-last-child(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:184) */
.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:card-gallery (INDEX:196) */
.card-gallery {
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  .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: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-card-gallery__title-placeholder a {
    color: var(--color-foreground);
  }

  @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:has(.product-badges--top-right .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery:has(.product-badges--top-right .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery:has(.product-badges--top-right .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery:has(.product-badges--top-right .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery:has(.product-badges--top-left .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery:has(.product-badges--top-left .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery:has(.product-badges--top-left .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery:has(.product-badges--top-left .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery:has(.product-badges--bottom-left .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery:has(.product-badges--bottom-left .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery:has(.product-badges--bottom-left .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery:has(.product-badges--bottom-left .product-badges__badge)
      .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:has(.product-badges--top-right .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery:has(.product-badges--top-left .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery:has(.product-badges--bottom-left .product-badges__badge)
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:cart-discount (INDEX:198) */
.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;
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--cart-font-size--sm);
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discount__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .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-component {
    display: flex;
  }
/* END_SNIPPET:cart-discount */

/* START_SNIPPET:cart-drawer (INDEX:199) */
/* Remove underline from cart drawer links */
  .cart-drawer a,
  .cart-drawer a:hover,
  .cart-drawer a:focus,
  .cart-drawer a:active,
  .cart-drawer__dialog a,
  .cart-drawer__dialog a:hover,
  .cart-drawer__dialog a:focus,
  .cart-drawer__dialog a:active {
    text-decoration: none !important;
    text-decoration-line: none !important;
    blocks/variant-picker.liquid  }

  .cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .ca-font-size {
    font-size: var(--cart-announcement-font-size, 14px);

    @media (max-width: 750px) {
      font-size: calc(var(--cart-announcement-font-size, 14px) * 0.8);
    }
  }

  .cart-drawer__heading .cart-bubble {
    width: fit-content;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-drawer__heading .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
    min-width: 26px;
  }

  .cart-drawer__header {
    background-color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--cart-drawer-padding);
    border-bottom: var(--style-border-width) solid none;
    position: sticky;
    top: 0;
    z-index: 1;

    @media screen and (min-width: 750px) {
      padding: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer__dialog {
    overflow: hidden;
  }

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

  .cart-drawer__content {
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
  }

  .cart-drawer__summary {
    background-color: var(--color-background);
    position: sticky;
    bottom: 0;
    z-index: 1;
  }

  /* Small screen optimizations for progress bar */
  @media screen and (max-width: 390px) {
    .cart-progress-bar-wrapper {
      margin-bottom: 0.25rem;
    }

    .cart-progress-bar-message {
      font-size: var(--font-size--xs);
    }
  }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:cart-icon-component (INDEX:200) */
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;
    }
  }
/* END_SNIPPET:cart-icon-component */

/* START_SNIPPET:cart-products (INDEX:202) */
.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__table {
    width: 100%;
  }

  .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__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:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid var(--color-border);
    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-child {
    border-block-end: none;
    padding-block-end: 0;
    margin-bottom: 0;
  }

  .cart-items__details {
    grid-area: details;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__details > * + *,
  .cart-items__bundle li {
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__details * {
    font-size: var(--cart-font-size--sm);
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__title {
    font-size: var(--cart-font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
  }

  .cart-items__variant {
    display: inline-block;
  }

  .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 .quantity-selector {
    display: inline-flex;
    flex: 0 1 var(--quantity-selector-width);
    font-size: var(--cart-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(--cart-font-size--md);
  }

  .cart-items__price-unit {
    font-size: var(--cart-font-size--xs);
  }

  .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);
    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(--cart-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-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;
      justify-content: center;
    }
  }

  .cart__original-total-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &:has(.cart__installments) {
      row-gap: var(--gap-xs);
    }
  }

  .cart__original-total-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__original-total-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

    @media screen and (min-width: 750px) {
      padding-block-start: 0;
    }
  }

  .cart__original-total-container,
  .cart__original-total-container * {
    font-size: var(--cart-font-size--sm);
  }

  .cart__total {
    font-weight: var(--font-weight-bold);
  }

  .cart__total-label {
    font-size: var(--cart-font-size--sm);
  }

  .cart__total-value {
    font-size: var(--cart-font-size--2xl);
  }

  .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);
  }

  .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%;
  }

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

  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-row-gap: var(--checkout-button-gap, 10px);
  }

  .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-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--cart-font-size--sm);
  }

  .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(--cart-font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-note .svg-wrapper {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
    margin: 0;
  }

  .cart-note .icon-plus {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
  }

  /* 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__properties dt,
  .cart-items__properties dd {
    display: inline;
  }

  /* Small screen optimization for checkout button */
  @media screen and (max-width: 390px) {
    .cart__ctas .cart__checkout-button {
      height: clamp(25px, var(--height-buy-buttons), 44px);
      padding-inline: var(--padding-2xl);
    }
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:203) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    border-block: 1px solid var(--color-border);
    /* padding-block: var(--padding-sm); */
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid var(--color-border);
  }

  .cart__summary-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid var(--color-border);
    padding-block-start: var(--margin-xl);
  }

  .cart__installments {
    color: var(--color-foreground);
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:collection-card (INDEX:209) */
.collection-card {
    --fixed-card-height: var(--height-small);

    width: 100%;
    position: relative;
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    gap: var(--collection-card-gap);
    display: flex;
    flex-direction: column;
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__inner {
    z-index: var(--layer-flat);
    pointer-events: none;

    a,
    button {
      /* only allow interactive elements to be clickable separate from .collection-card__link */
      pointer-events: auto;
    }
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .collection-card__content * {
    pointer-events: auto;
  }

  .collection-card__content {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    max-width: 100%;
    gap: var(--collection-card-gap);
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .collection-card__link {
    position: absolute;
    inset: 0;

    /* allows focus outline to have radius in supported browsers */
    border-radius: var(--border-radius);
  }

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

  /* 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 .image-block__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%;
  }

  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }

    .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;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:contact-form (INDEX:211) */
.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_SNIPPET:contact-form */

/* START_SNIPPET:divider (INDEX:215) */
.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(--divider-color, var(--color-border));
    border-right: var(--divider-border-thickness) solid var(--divider-color, 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:218) */
.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 (max-width: 768px) {
    .editorial-blog__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-blog__spacer {
      display: none;
    }

    .featured-blog-posts-card__image {
      min-height: 200px;
    }

    /* 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:219) */
.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 (max-width: 768px) {
    .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:220) */
.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 {
      --gallery-aspect-ratio: 99 !important;
    }

    .card-gallery,
    slideshow-component,
    slideshow-container,
    slideshow-slides {
      height: 100%;
    }
  }

  .editorial-product__spacer {
    aspect-ratio: 1;
  }

  @media (max-width: 768px) {
    .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:facets-actions (INDEX:221) */
/* Facets - Actions */
  .facets__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
    );

    order: 1;
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    background-image: var(--to-top-gradient-background);
    z-index: var(--facets-sticky-z-index);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
  }

  .facets:not(.facets--drawer) .facets__actions {
    @media screen and (min-width: 750px) {
      position: static;
    }
  }

  .facets--vertical .facets__actions {
    padding-inline: 0;
    justify-content: center;
  }

  .facets--horizontal .facets__actions {
    @media screen and (min-width: 750px) {
      order: 0;
      bottom: auto;
      position: static;
      padding: 0;
      z-index: var(--layer-flat);
      flex-shrink: 0;
      align-items: center;
      margin-top: initial;
      background-image: none;
    }
  }

  .facets--horizontal .facets__actions--active::before {
    @media screen and (min-width: 750px) {
      content: '';
      border-inline-start: var(--style-border-width) solid var(--color-border);
      height: var(--font-paragraph--size);
      position: absolute;
    }
  }

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

  .clear-filter:hover {
    text-decoration: underline;
    background-color: transparent;
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    transition: transform var(--animation-values), opacity var(--animation-values);
    opacity: 0;
    transform: translateY(100%);
    flex-grow: 1;
    padding-block: var(--padding-lg);
  }

  .facets:not(.facets--drawer) .facets__clear-all {
    box-shadow: none;
  }

  .facets--horizontal .facets__clear-all {
    @media screen and (min-width: 750px) {
      --facets-clear-all-min-width: var(--minimum-touch-target);
      --button-color: var(--color-primary);

      text-decoration: underline transparent 0.075em;
      text-underline-offset: 0.125em;
      width: auto;
      transform: none;
      opacity: 1;
      height: var(--minimum-touch-target);
      align-items: center;
      flex-grow: 0;
      transition: text-decoration-color var(--animation-speed) var(--animation-easing);
    }
  }

  .facets--horizontal .facets__clear-all:hover {
    @media screen and (min-width: 750px) {
      --button-color: var(--color-primary-hover);
    }
  }

  @starting-style {
    .facets__clear-all {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .facets__clear-all.active {
    transform: translateY(0);
    opacity: 1;
    display: grid;
  }

  .facets--horizontal .facets__clear-all.active {
    @media screen and (min-width: 750px) {
      padding-block: 0;
      padding-inline: var(--facets-form-horizontal-gap);
      background-color: transparent;
      position: static;
      transform: none;
    }
  }

  @starting-style {
    .facets__clear-all.active {
      opacity: 0;
      transform: translateY(100%);
    }

    .facets--horizontal .facets__clear-all.active {
      @media screen and (min-width: 750px) {
        opacity: 1;
        transform: none;
      }
    }
  }

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
  }

  .facets:not(.facets--drawer) .facets__see-results {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:facets-actions */

/* START_SNIPPET:filter-remove-buttons (INDEX:222) */
/* 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__clear-all-link {
    --button-color: var(--color-primary);

    border: none;
    background-color: transparent;
    padding: var(--padding-xs);
    min-width: fit-content;
    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: var(--color-primary-hover);

    color: var(--button-color);
    text-decoration-color: var(--button-color);
  }

  .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:filters-toggle (INDEX:223) */
/* Facets - Toggle */
  .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 */
  .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) {
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }
/* END_SNIPPET:filters-toggle */

/* START_SNIPPET:footer-group (INDEX:225) */
.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:footer-group */

/* START_SNIPPET:gift-card-recipient-form (INDEX:227) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    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 {
    /* 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;
    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;
  }

  .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;
    transition: background-color var(--animation-speed) ease;
    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 */

/* START_SNIPPET:grid-density-controls (INDEX:228) */
.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;
    }
  }

  .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;
    cursor: pointer;
  }

  .column-picker {
    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-foreground-rgb));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  @media screen and (max-width: 749px) {
    .column-options {
      flex-wrap: nowrap;
      margin-left: 20px;
    }

    /* Make mobile view mode icons larger and clearer */
    .column-picker-mobile--single svg,
    .column-picker-mobile--double svg {
      width: 30px;
      height: 30px;
      /* Thicker strokes for better legibility on small screens */
      --icon-stroke-width: 2;
    }

    /* Increase hit area padding on mobile */
    /* .column-picker {
      padding: var(--padding-sm);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
    } */

    /* Ensure minimum tap target and centered content */
    /* .column-options__option {
      min-width: 48px;
      min-height: 48px;
      align-items: center;
      justify-content: center;
    } */
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:229) */
.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:230) */
.cart-drawer {
    --cart-drawer-padding: var(--padding-lg) var(--padding-xl);
    --cart-drawer-padding-desktop: var(--padding-xl) var(--padding-2xl);
    --cart-font-size--2xs: var(--font-size--2xs);
    --cart-font-size--xs: var(--font-size--xs);
    --cart-font-size--sm: var(--font-size--sm);
    --cart-font-size--md: var(--font-size--md);
    --cart-font-size--2xl: var(--font-size--2xl);
  }

  .cart-drawer__dialog {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
    padding: 0;
    border-left: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);
  }

  /* Needed to ensure the drawer is full height */
  .cart-drawer__dialog:modal {
    max-height: 100dvh;
    overflow-y: hidden;
  }

  .cart-drawer__inner {
    height: 100%;
  }

  .cart-drawer__content {
    padding: 0;
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
  }

  .cart-drawer__heading {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .cart-drawer__close-button {
    margin-right: calc(var(--padding-sm) * -1);
  }

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__heading {
    margin-bottom: var(--margin-md);
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
  }

  .cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-lg);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xl);
    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);
    }
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__original-total-container:empty)) {
    border-block-start: var(--style-border-width) solid var(--color-border);
    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__heading--empty {
    display: flex;
    justify-content: center;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer--empty .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    margin-top: 0;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-drawer__content {
    justify-content: center;
  }

  .cart-drawer--empty .cart-drawer__header {
    justify-content: right;
    border-bottom: none;
    padding-bottom: 0;
  }

  .cart-drawer--empty .cart-drawer__heading {
    text-align: center;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  header-actions {
    display: flex;

    @media screen and (max-width: 749px) {
      justify-self: flex-end;
    }
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-actions__action {
    --button-color: var(--color-foreground);

    cursor: pointer;
    display: flex;
    justify-content: center;
  }

  .header-actions__action .svg-wrapper {
    height: var(--button-size);
    width: var(--button-size);
  }

  .header-actions__action svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .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);
  }

  .header-actions__cart-icon .cart-bubble__text,
  .cart-drawer__heading .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%,
      white 45.45%,
      white 100%
    );
  }

  .cart-drawer__heading .cart-bubble__background {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-drawer__heading .cart-bubble__text {
    color: var(--color-foreground);
    font-size: var(--font-size--xs);
  }

  .cart-bubble--animating .cart-bubble__background {
    animation: grow var(--animation-speed) var(--animation-easing);
  }

  .cart-bubble--animating .cart-bubble__text {
    animation: cartBubbleSlideIn var(--animation-speed) var(--animation-easing);
  }

  /* Small screen optimizations for compact mobile devices */
  @media screen and (max-width: 390px) {
    .cart-drawer {
      --cart-drawer-padding: var(--padding-sm) var(--padding-md);
      --cart-font-size--md: var(--font-size--sm);
      --cart-font-size--2xl: var(--font-size--xl);
    }

    .cart-drawer__summary {
      --cart-drawer-summary-padding: var(--padding-sm);
      gap: var(--gap-md);
    }

    .cart-drawer__items .cart-items__table-row {
      padding-bottom: var(--gap-md);
      margin-bottom: var(--gap-md);
    }
  }

  /* Short viewport optimization for landscape and folding phones */
  @media screen and (max-height: 650px) {
    .cart-drawer__summary {
      --cart-drawer-summary-padding: var(--padding-sm);
      gap: var(--gap-md);
    }
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:231) */
.header__icon--menu {
    position: initial;
  }

  @media screen and (min-width: 750px) {
    .header--desktop header-menu + .header__drawer header-drawer {
      display: none;
    }
  }

  .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);
  }

  .header__drawer {
    display: flex;
    min-height: 60px;
    align-items: center;

    @media screen and (min-width: 750px) {
      min-height: 0;
    }
  }

  .header--compact .header__drawer {
    min-height: var(--minimum-touch-target);
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not([open]) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details[open] .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details[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);
    box-shadow: var(--shadow-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }

    .header__drawer--desktop & {
      height: 100vh;
    }
  }

  .menu-drawer:has(details[open]) {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-heightened);
    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;
    will-change: transform;
  }

  .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;
  }

  .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;
    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-start: 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 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-start: 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;
    padding: var(--padding-lg);
    will-change: transform;
  }

  .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;
  }

  .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);
    background-color: rgb(var(--color-foreground) 0.03);
  }

  .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);
    }
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:239) */
.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;
    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;
    white-space: pre;
    width: 100%;
    will-change: font-size;
    margin-left: var(--margin-left-nudge, 0);
    margin-right: var(--margin-right-nudge, 0);
    overflow: visible;
  }

  jumbo-text.ready {
    opacity: 1;
  }

  jumbo-text[data-cap-text='true'] {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    text-box-edge: cap text;
  }

  .jumbo-text-space {
    display: inline-flex;
    width: 0.5ch;
  }

  :is(.jumbo-text-char, .jumbo-text-line) {
    display: inline-flex;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Blur effect */
    [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'],
    .ready[data-text-effect='reveal'] .jumbo-text-line {
      overflow: hidden;
    }

    .ready[data-text-effect='reveal'] .jumbo-text-char {
      transform: translateY(100%);
    }

    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-char {
      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'],
    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line {
      overflow: visible;
      transition: overflow 0s linear 0.75s;
    }
  }
/* END_SNIPPET:jumbo-text */

/* START_SNIPPET:list-filter (INDEX:242) */
.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(:has(.checkbox__input: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));
  }

  .facets .checkbox:has(.checkbox__input:checked):not(:has(.checkbox__input:disabled)):hover .icon-checkmark {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
  }

  .facets .checkbox:not(:has(.checkbox__input:disabled)):hover .checkbox__label-text {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-90));
  }

  .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 {
    &: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;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .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;

    &.variant-option--swatches-disabled,
    &:has(input:disabled) {
      cursor: not-allowed;
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;

    .variant-option--swatches-disabled &,
    .variant-option--swatches:has(input:disabled) & {
      cursor: not-allowed;
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch {
    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--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));
  }

  .variant-option--images {
    position: relative;
  }

  .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);

    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:not(:has(input:disabled)),
    &:has(input:checked) {
      --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);
    }

    &:has(input:disabled),
    &:has(input:disabled):hover {
      --image-facet-border-opacity: 0;

      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      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);
      }
    }
  }

  .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);
  }

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

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;

    .variant-option--images:has(input:disabled) & {
      cursor: not-allowed;
    }
  }

  .facets__inputs-list--swatches .variant-option__button-label:hover:not(:has(input:disabled)) {
    font-weight: 500;
  }

  .variant-option--images:not(:has(input:disabled)) .facets__image-label:hover {
    font-weight: 500;
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:243) */
/* 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-primary);
    --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-primary-hover);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-primary-hover-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%;
  }

  .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));
  }
  footer .dropdown-localization {
    display: block !important;
  }

  .dropdown-localization__button .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);
  }

  .drawer-localization__button .icon-flag,
  .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;
  }

  .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;
    color: var(--color-foreground);
  }

  .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;
    }
  }

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

  .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: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .is-searching .localization-form__list-item .country {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .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);
  }

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  dropdown-localization-component .country-filter {
    position: relative;
    padding: 8px;
  }

  .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__label {
    flex-shrink: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-input-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;

    &: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);
  }

  dropdown-localization-component .localization-form__select:hover {
    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  .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;
  }

  .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);
  }

  dropdown-localization-component {
    position: relative;
    background-color: transparent;
  }

  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);
  }

  .footer-utilities__group dropdown-localization-component .localization-wrapper {
    top: unset;
    bottom: calc(100% + 10px);
    right: 0 !important;
    left: unset !important;

    @media screen and (max-width: 749px) {
     left: 50% !important;
     transform: translateX(-50%);
     right: unset !important;
    }
  }

   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
    :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(.top-shadow)) {
    font-weight: var(--menu-top-level-font-weight);
  }

  .dropdown-localization:not(dropdown-localization-component) .language-selector,
  .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;
  }

  .header__column .localization-form__select {
    background-color: var(--header-bg-color);
  }

  .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);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:244) */
.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__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:252) */
.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:predictive-search-products-list (INDEX:254) */
.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.5;
    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;
  }
/* END_SNIPPET:predictive-search-products-list */

/* START_SNIPPET:predictive-search-resource-carousel (INDEX:255) */
.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-resource-carousel */

/* START_SNIPPET:predictive-search (INDEX:256) */
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);
    will-change: transform, opacity;
    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-primary);
    }
  }

  .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;
    border-color: var(--color-border) !important;
  }

  .predictive-search-results__inner {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);
    --list-item-padding-block: var(--padding-sm);

    flex-grow: 1;
    overflow-y: auto;
    padding-block: var(--padding-lg);
    container-type: inline-size;
    color: var(--color-foreground);
  }

  .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;
  }

  .search-input::placeholder {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .search-input,
  .search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  .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-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;
    background: transparent;
    color: var(--color-foreground);
    opacity: 1;
    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 (max-width: 749px) {
      margin-right: var(--margin-md);
    }
  }

  .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-primary-hover-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);
    }

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:predictive-search */

/* START_SNIPPET:price-filter (INDEX:258) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }

  .facets__inputs-wrapper.price-facet__inputs-wrapper {
    flex-wrap: nowrap;
  }

  .price-facet__field {
    width: 50%;
    flex-grow: 0;
  }

  @container (max-width: 199px) {
    .facets__inputs-wrapper.price-facet__inputs-wrapper {
      flex-wrap: wrap;
      width: 100%;
    }

    .price-facet__inputs-wrapper .price-facet__field {
      width: 100%;
    }
  }

  .facets .facets__inputs-wrapper.price-facet__inputs-wrapper {
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  .facets--horizontal .facets__panel-content:has(.price-facet) {
    min-width: 360px;
  }

  .facets--horizontal .facets__inputs-wrapper.price-facet__inputs-wrapper {
    @media screen and (min-width: 750px) {
      padding: calc(var(--padding-md) + var(--style-border-width-inputs));
    }
  }

  .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 {
    padding: var(--padding-xs) 0 var(--padding-sm);
  }

  .facets--horizontal .price-facet__highest-price {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .field__label.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 (INDEX:259) */
.bu-sale-chip {
    position: relative;
    top: -1px;
    display: inline-block;
    background: #121212;
    color: #ffffff;
    font-size: 13px;
    line-height: 1;
    padding: 6px 14px;
    border-radius: 44px;
    margin-inline-start: 8px;
    vertical-align: middle;
  }
/* END_SNIPPET:price */

/* START_SNIPPET:product-card-badges (INDEX:260) */
.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);
    padding: 4px;
  }
/* END_SNIPPET:product-card-badges */

/* START_SNIPPET:product-card (INDEX:262) */
product-card-link,
  :not(product-card-link) product-card {
    width: 100%;
  }

  .product-card__placeholder-image svg {
    height: 100%;
  }

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }

  /* Hide the variant swatches for product cards that show a swatches variant picker */
  :is(.product-card):has(swatches-variant-picker-component) .quick-add .variant-option--swatches {
    display: none;
  }

  /* Hide "Add" button for single option product cards that show a swatches variant picker */
  :is(.product-card:not([data-no-swatch-selected])):has(.quick-add__product-form-component--single-option):has(
      swatches-variant-picker-component
    )
    .quick-add__button--choose {
    display: none;
  }

  /* Hide "Add" button for single option product cards that show a swatches variant picker */
  :is(.product-card[data-no-swatch-selected]):has(.quick-add__product-form-component--single-option):has(
      swatches-variant-picker-component
    )
    add-to-cart-component {
    display: none;
  }

  /* Hide "add" button for multi-variant product cards that don't show a swatches variant picker */
  :is(.product-card):has(.quick-add__product-form-component--multi-variant):not(:has(swatches-variant-picker-component))
    .quick-add__button--add {
    display: none;
  }

  /* Hover effect for single variant product cards and product blocks */

  /* stylelint-disable selector-max-specificity */
  :is(.product-card):has(.quick-add__product-form-component--single-variant) .card-gallery:hover {
    & .quick-add__button--choose {
      display: none;
    }

    & .quick-add__button--add {
      display: grid;
    }
  }

  .product-card[data-no-swatch-selected] slideshow-component[data-generic-media-size='1'] slideshow-arrows {
    display: none;
  }

  .product-card[data-no-swatch-selected]
    slideshow-component[data-generic-media-size='1']
    slideshow-arrows:has(+ slideshow-slides slideshow-slide[variant-image]:not([hidden])) {
    display: flex;
  }

  .product-card .variant-option__swatch svg {
    display: none;
  }

  .product-card [data-available-count='0'] ~ svg {
    display: block;
  }

  /* Product card title hover underline effect - excludes price */
  .product-card .text-block:not(product-price),
  .product-card .text-block:not(product-price) > * {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.3rem;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .product-card:hover .text-block:not(product-price),
  .product-card:hover .text-block:not(product-price) > * {
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 0.3rem;
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-grid (INDEX:263) */
.product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);

    isolation: isolate;

    @media screen and (min-width: 750px) {
      --product-grid-gap: var(--product-grid-gap-desktop);
    }
  }

  .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 {
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      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;
  }

  .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);
    }
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-media (INDEX:264) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

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

  ::view-transition-old(gallery-item),
  ::view-transition-new(gallery-item) {
    animation-duration: 0ms;
  }
/* END_SNIPPET:product-media */

/* START_SNIPPET:quick-add-modal (INDEX:266) */
.quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    height: fit-content;
    overflow: hidden;
    min-height: 500px;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));
    margin: auto!important;
    max-width: 850px;
    width: 100%;
    @media screen and (max-width: 750px) {
      position: fixed;
      display: block;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 750px) {
      display: none;
    }
  }
  .quick-add-modal .modal-content-inside {
     @media screen and (max-width: 750px) {
      height: auto !important;
    }
  }

  .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-md);
    right: var(--margin-md);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
  }

  .quick-add-modal__close:active {
    transform: scale(0.8);
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    max-width: 78rem;
    /* overflow-y: auto; */
    max-height: 90vh;
    gap: var(--gap-lg);

    @media screen and (max-width: 750px) {
      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: 85vh;
    }
  }

  .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: 750px) {
      display: flex;
      width: 100%;
      flex-direction: column;
      grid-column: 1 / 4;
      border: none;
      /* 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: 750px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .variant-picker__form {
    display: block;
  }

  .quick-add-modal__content .variant-option + .variant-option {
    margin-top: var(--padding-lg);
  }

  .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: block!important;
    /* flex-direction: column; */
    height: 100%;
    min-height: 0;
    margin: 40px 15px 0px 0;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 750px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      overflow-y: auto;
      max-height: 100%;
      height: 100%;
    }
  }

  .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 .variant-picker {
    --product-swatches-padding-block-end: 0px;
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding-block-end: calc(
      var(--product-swatches-padding-block-end) + 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 {
    padding: 0;
  }

  .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 .view-product-title {
    display: flex;
  }

  .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) {
      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: min(var(--gap-2xl), var(--gap));
    }

    .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 .media-gallery--grid .product-media-container:first-child {
      border-top-right-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media-container:last-child {
      border-bottom-right-radius: var(--style-border-radius-popover, 0);
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding: var(--padding-2xl);
    max-height: 100%;
  }

  .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 4;
    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;
      /* 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: flex;
  }

  .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: 750px) {
      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 slideshow-controls {
    /* display: none; */
  }

  .quick-add-modal__content .product-information__media .media-height-image{

    @media screen and (max-width: 750px) {
      height: auto!important;
    }
  }

  .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;
  }

  /* Gen Update class */
  .quick-add-modal__content .group-block-content {
    gap: 10px;
    align-self: flex-end;
  }
  .quick-add-modal__content #size-guide-modal-button {
    /* display: none; */
  }

  .quick-add-modal .quick-add-modal__close{
    height: 30px!important;
    width: 30px!important;
    right: 10px !important;
    top: 10px !important;
    cursor: pointer;
  }
  .view-full-details-link {
    display: flex;
    grid-column: 1 / 4;
    margin-top: 15px;
    color: inherit;
    text-transform: uppercase;
    text-decoration: underline;

    @media screen and (max-width: 750px) {
      margin: 0;
    }
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateX(10px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
/* END_SNIPPET:quick-add-modal */

/* START_SNIPPET:quick-add (INDEX:267) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-top: calc(var(--quick-add-offset) + var(--padding-block-start));
    --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-left: calc(var(--quick-add-offset) + var(--padding-inline-end));

    position: absolute;
    display: var(--quick-add-mobile-display, none);
    flex-direction: column;
    justify-content: flex-end;
    inset: max(var(--quick-add-top), calc((var(--border-radius) + var(--quick-add-top)) * (1 - cos(45deg))))
      max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))))
      max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))))
      max(var(--quick-add-left), calc((var(--border-radius) + var(--quick-add-left)) * (1 - cos(45deg))));
    width: auto;
    height: auto;
    z-index: var(--layer-raised);
    cursor: default;
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);

      display: var(--quick-add-display, flex);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  .quick-add[class*='color-scheme-'] {
    background-color: transparent;
  }

  .quick-add__button {
    display: grid;
    padding: var(--padding-xs);
    align-items: center;
    background-color: var(--color-background);
    color: var(--color-foreground);
    border-color: transparent;
    box-shadow: var(--shadow-popover);
    pointer-events: all;
    position: relative;
    overflow: hidden;
    border-radius: 100px;

    /* Disable by Gen */

    @media screen and (min-width: 750px) {
      /* display: none; */
      padding: 8px ;
    }

    .quick-add[stay-visible] & {
      display: grid;
    }
  }

  .quick-add__button-content,
  .quick-add__button-loader {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .quick-add__button-loader {
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .quick-add__button.loading .quick-add__button-content {
    opacity: 0;
  }

  .quick-add__button.loading .quick-add__button-loader {
    opacity: 1;
    display: flex !important;
  }

  .quick-add__button.loading {
    pointer-events: none;
  }

  .spinner {
    animation: rotate 2s linear infinite;
  }

  .spinner .path {
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
  }

  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes dash {
    0% {
      stroke-dasharray: 1, 150;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -35;
    }
    100% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -124;
    }
  }

  .quick-add__button .add-to-cart-text {
    gap: 0;
    line-height: 1;
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    animation: none;

    @media screen and (min-width: 750px) {
      /* offset button padding to show a round button in a collapsed state */
      margin-inline: calc(var(--padding-sm) * -1);
      padding-inline: var(--padding-xs);
    }
  }

  .quick-add__button .add-to-cart-text--added {
    position: relative;
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    justify-self: end;
    line-height: 1;

    @media screen and (min-width: 750px) {
      width: 0;
    }
  }

  .quick-add__button .add-to-cart-text__content {
    width: 0;
    opacity: 0;
    transform: translateX(1em);
    transition: width var(--animation-speed) ease-in-out, opacity var(--animation-speed) ease-in-out,
      transform var(--animation-speed) ease-in-out;
    interpolate-size: allow-keywords;
    will-change: width, opacity, transform;
  }

  @container (min-width: 99px) {
    .quick-add[stay-visible] .add-to-cart-text,
    .quick-add__button:is(:focus, :hover) .add-to-cart-text {
      gap: var(--gap-2xs);

      @media screen and (min-width: 750px) {
        /* offset button padding to show a round button in a collapsed state */
        margin-inline: 0;
        padding-inline: 0;
      }
    }

    .quick-add[stay-visible] .add-to-cart-text__content,
    .quick-add__button:is(:focus, :hover) .add-to-cart-text__content {
      width: fit-content;
      opacity: 1;
      transform: translateX(0);
    }
  }

  .quick-add__button.atc-added .add-to-cart-text {
    opacity: 0;
  }

  .quick-add__button.atc-added .add-to-cart-text--added {
    opacity: 1;
    width: auto;

    @supports (width: calc-size(auto, size)) {
      width: calc-size(auto, size);
    }
  }

  .quick-add__button.atc-added .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button.atc-added .add-to-cart-text--added {
    animation-name: atc-fade-in;
  }

  .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%;
    aspect-ratio: 1.6;
    
    @media screen and (min-width: 750px) {
      aspect-ratio: 1;
    }
  
  }

  .quick-add-modal .product-media img {
    object-fit: contain;
  }

  .quick-add-modal deferred-media {
    /* display: none; */
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    /* --cursor: pointer; */
  }

  @keyframes atc-fade-in {
    from {
      opacity: 0;
      transform: translateX(1em);
      position: absolute;
    }

    to {
      opacity: 1;
      transform: translateX(0);
      position: inherit;
    }
  }

  @keyframes atc-fade-out {
    from {
      opacity: 1;
      transform: translateX(0);
      position: inherit;
    }

    to {
      opacity: 0;
      transform: translateX(-1em);
      position: absolute;
    }
  }
/* END_SNIPPET:quick-add */

/* START_SNIPPET:resource-card (INDEX:268) */
.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;
    }
  }

  .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;
  }

  .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-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-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:269) */
.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-block__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .resource-image--placeholder {
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:resource-image */

/* START_SNIPPET:search-modal (INDEX:273) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .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);
    margin-inline: auto!important;
    @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;
  }

  /* Predictive search header tweaks for small screens */
  @media screen and (max-width: 749px) {
    .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;
      }
    }
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:274) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  .header__column--center .search-action {
    width: auto;
    flex-grow: 1;
  }

  :is(.header__column--left, .header__column--center) .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);
    }
  }
/* END_SNIPPET:search */

/* START_SNIPPET:section (INDEX:276) */
.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)
    )
    > main
    > .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:size-guide-modal (INDEX:278) */
.size-guide-modal-cont {
    bottom: 0;
  }
  
  /* Make modal larger on mobile devices */
  @media screen and (max-width: 749px) {
    .size-guide-modal-cont {
      padding: 0.5rem;
    }
    
    .size-guide-modal-cont .modal-content-inside {
      max-width: 100%;
      width: 100%;
      max-height: 95vh;
      border-radius: 12px;
    }
    
    .size-guide-modal-cont .size-guide-modal__content {
      padding-inline: 1rem;
      padding-bottom: 1.5rem;
    }
    
    .size-guide-modal-cont .size-guide-cross {
      padding: 0.75rem 1rem;
    }
  }
/* END_SNIPPET:size-guide-modal */

/* START_SNIPPET:slideshow (INDEX:286) */
@media screen and (min-width: 750px) {
    /* .section--page-width .slide-padding {
      padding-inline-end: calc(var(--gutter-slide-width, 0) + 20px);
    } */
 
    
  }

  @media screen and (min-width: 750px) {
     .section--page-width .slideshow-control--previous {
        margin-left: 50px;
        /* padding: 0 !important;
        background-color: transparent !important; */
        transform: rotate(-90deg);
    }
    .section--page-width .slideshow-control--next {
        margin-right: 50px;
        /* padding: 0 !important;
        background-color: transparent !important; */
        transform: rotate(-90deg);
    }
  }
/* END_SNIPPET:slideshow */

/* START_SNIPPET:sorting (INDEX:287) */
.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: flex;
    right: 0;
    flex-direction: column;
    gap: var(--margin-3xs);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    min-width: 180px;
    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-mobile-wrapper .sorting-filter__options {
    border-radius: var(--style-border-radius-popover);
    position: absolute;
    top: 0;
    right: 0;
    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;
    padding: var(--padding-sm);
    gap: var(--gap-sm);
  }

  .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;
    }
  }

  .sorting-filter__options {
    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);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    block-size: auto;

    @starting-style {
      block-size: 0;
      opacity: 0;
      overflow-y: clip;
    }

    &:focus-within {
      overflow-y: visible;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:text (INDEX:295) */
:root {
    --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;
  }

  [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);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .text-block > * {
    width: var(--width);
    max-width: var(--max-width, 100%);
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);

    @media (max-width: 749px) {
      text-align: var(--text-align-mobile, var(--text-align, var(--text-align-default)));
    }
  }

  .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. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .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);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .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));
  }

  /* Apply mobile font size when set (either custom or fallback to desktop) */
  @media (max-width: 749px) {
    .text-block > * {
      font-size: var(--font-size-mobile, var(--font-size)) !important;
    }
  }
/* END_SNIPPET:text */

/* START_SNIPPET:variant-main-picker (INDEX:305) */
.variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  .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--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: 100%;
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches > overflow-list {
    justify-content: var(--product-swatches-alignment);

    @media (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__swatch-value {
    /* match the label exactly — same color, same weight (Sloth pattern) */
    color: var(--color-foreground);
    font-weight: inherit;
  }

  .variant-option__button-label {
    --variant-picker-stroke-color: var(--color-variant-border);

    display: flex;
    flex: 0 0 calc(3ch + 1.3em);
    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-height: calc(3ch + 1.3em);
    min-width: fit-content;
    white-space: nowrap;
    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);
    }

    @media screen and (min-width: 750px) {
      padding: var(--padding-xs) var(--variant-option-padding-inline);
    }
  }

  .variant-option__button-label__text {
    text-align: left;
    text-wrap: auto;
  }

  .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;
    display: block;
    flex-basis: auto;
    min-height: auto;
  }

  .variant-option__button-label:has(:checked) {
    border-width: 2px;
    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);
    }
  }

  .variant-option__button-label:has([data-option-available='false']) {
    color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
  }

  .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;
  }

  .variant-option__button-label--has-swatch:hover {
    outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));
    outline-offset: var(--focus-outline-offset);
  }

  .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);
  }

  .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: var(--focus-outline-width) solid var(--color-foreground);
    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,
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .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,
    .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;
    }
  }

  .variant-option__button-label:has([data-option-available='false']):has(:checked) {
    --variant-picker-stroke-color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));

    background-color: inherit;
    color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
    border-color: var(--color-selected-variant-border);
  }

  .variant-option__button-label input,
  .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;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .variant-option__button-label svg {
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    pointer-events: none;
    stroke-width: var(--style-border-width);
    stroke: var(--variant-picker-stroke-color);
  }

  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);
  }

  .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);
  }

  .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;
    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--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-tooltip {
  display: none !important; /* Hide original inside swiper */
}

/* Color dots — Wolden Art spec, measured live on their PDP at desktop:
   dot 23px; soft halo shadow rgba(0,0,0,.18) 0 2px 5px on a circle 5px
   outside the dot (their .swatch::after); selected = crisp 2px dark ring on
   that same halo radius; ~22px between dots. */
.variant-option__button-label.bu-swatch-label {
  width: 23px !important;
  height: 23px !important;
  min-width: 23px !important;
  min-height: 23px !important;
  max-width: 23px !important;
  max-height: 23px !important;
  flex: 0 0 23px !important;
  padding: 0 !important;
  position: relative;
  overflow: visible;
  outline: none !important;
}
.bu-swatch-label .swatch {
  width: 100% !important;
  height: 100% !important;
  /* same seam problem at 1px — draw the hairline as an inset shadow instead */
  border: 0 none transparent !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
/* halo shadow behind every dot (the Wolden depth) */
.bu-swatch-label::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 5px 0px;
  pointer-events: none;
}
/* unselected: NO floating outline — the dot's own hairline is the edge,
   matching Wolden. (Must outrank the theme's customize-border outline.) */
.variant-option__button-label--has-swatch.bu-swatch-label:not(:has(:checked)),
.variant-option__button-label--has-swatch.bu-swatch-label:not(:has(:checked)):hover {
  outline: none !important;
}

/* selected: 2px dark ring riding the halo radius */
.bu-swatch-label:has(:checked) {
  outline: none !important;
  background: transparent !important;
}
.bu-swatch-label:has(:checked)::before {
  content: '';
  position: absolute;
  /* ONE CONTINUOUS RING. A CSS border with a 50% radius is painted as FOUR
     curved pieces joined at the diagonals; on high-density iPhone screens
     those four seams fail to close and leave hairline gaps at the four
     diagonal points — which reads as a white X across the ring, and as a
     square-cornered notch when zoomed in. A box-shadow ring is drawn as a
     single shape with no seams, so it cannot break. Same geometry as before:
     the ring occupies 14.5px-16.5px from centre. */
  inset: -3px;
  border: 0 none transparent;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #1c1c1c;
  background: transparent;
  pointer-events: none;
}
/* Static color row (no carousel): plain flex flow, nothing to clip the
   selection ring, nothing to rebuild during availability checks. */
.bu-swiper-static {
  overflow: visible !important;
}
/* the theme's buy-box card crops at its rounded edge, which slices the
   first dot's halo + selected ring on mobile. Unclip it only where it
   hosts the static color row. */
.group-block:has(.bu-swiper-static) {
  overflow: visible !important;
}
.bu-swiper-static .pro_var {
  display: flex;
  flex-wrap: nowrap;
}

/* Print-on-demand: color dots never show stock states. Pin the rendering so
   the availability round-trip cannot restyle them even for a frame. */
.bu-swatch-label .swatch,
.bu-swatch-label .swatch.swatch--unavailable {
  border-style: solid !important;
  opacity: 1 !important;
}
.bu-swatch-label svg {
  display: none !important;
}
/* the availability check re-renders labels with a strike SVG (white diagonal
   over the selected ring). Kill it on ANY color-swatch label, whichever
   markup version the page cache serves. Sizes keep their subtle handling. */
/* X KILL — every angle at once (Joe's doctrine: attack from all sides).
   The strike svg can never paint: not displayed, not visible, zero size,
   transparent stroke, buried z-index. The selected ring rides above all. */
.variant-option__button-label svg,
.variant-option__button-label--has-swatch svg,
.variant-option__button-label:has(.swatch) svg,
.bu-swatch-label svg {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  z-index: -999 !important;
  stroke: transparent !important;
  fill: transparent !important;
  pointer-events: none !important;
}
.variant-option__button-label svg line,
.variant-option__button-label svg path {
  stroke: transparent !important;
  fill: transparent !important;
}
variant-picker,
.variant-picker {
  --color-strikethrough-mix: transparent !important;
}
.variant-option__button-label--has-swatch,
.bu-swatch-label {
  --variant-picker-stroke-color: transparent !important;
}
.bu-swatch-label:has(:checked)::before {
  z-index: 999 !important;
}

/* BRUTE-FORCE X kill — written many redundant ways because the style
   compiler silently drops some declarations. Every line is an independent
   kill; any one alone makes the strike invisible. */
.variant-option--swatches svg,
.variant-swiper svg,
.pro_var svg,
fieldset.variant-option svg {
  display: none !important;
}
.variant-option--swatches svg line,
.variant-option--swatches svg path,
.variant-option__button-label svg line {
  stroke: #1c1c1c !important;
}
.variant-option--swatches svg,
.variant-option__button-label svg {
  color: #1c1c1c !important;
  transform: scale(0) !important;
  clip-path: circle(0) !important;
  max-width: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}
.variant-option__button-label--has-swatch {
  --variant-picker-stroke-color: #1c1c1c;
}
variant-picker {
  --color-strikethrough-mix: #1c1c1c;
}
/* ============ THE WHITE SQUARE — ALL ANGLES ============
   iOS paints a NATIVE tap highlight (a light rounded square the size of the
   touched element) ON TOP of the page. It is not in any stylesheet, it ignores
   z-index, and no desktop browser or emulator ever draws it — which is why it
   was invisible to every test rig and immune to every layer trick. Its corners
   are the only part that reaches the round ring: four light notches at the
   diagonals, which read as an X at phone size.
   (a) DELETE it: turn the highlight off everywhere, not just on the dot — iOS
       picks whichever ancestor it thinks owns the tap.
   (b) LAYERS: nothing to do — a native overlay is above all page layers.
   (c) COLOR: anything the theme could still paint here is forced to the ring
       color and a circular shape, so it can never contrast with the ring. */
html, body, html *, body * {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.bu-swatch-label,
.bu-swatch-label *,
.variant-option__button-label--has-swatch,
.variant-option__button-label--has-swatch *,
.variant-swiper,
.variant-swiper *,
.pro_var,
.pro_var * {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
/* the theme's own selected-state ring is a ROUNDED SQUARE fed by these
   variables — force it circular, zero width, ring-colored */
.bu-swatch-label,
.variant-option__button-label--has-swatch {
  --focus-outline: 0 solid #1c1c1c;
  --focus-outline-width: 0px;
  --focus-outline-offset: 0px;
  --focus-outline-radius: 50%;
  --variant-picker-swatch-radius: 50%;
}
.variant-option__button-label--has-swatch::after,
.variant-option__button-label--has-swatch:has(:checked)::after,
.bu-swatch-label::after,
.bu-swatch-label:has(:checked)::after {
  border: 0 solid #1c1c1c !important;
  border-radius: 50% !important;
  outline: none !important;
}

/* THE WHITE SQUARE — root cause, found 2026-08-16 via on-page trap + Joe's
   zoom. The hidden radio input fills the dot (inset 0, 100%x100%) and has NO
   corner rounding, so its 3px WHITE focus outline paints a SQUARE. Its four
   corners stick out past the round selection ring and cut four white notches
   into the black — which reads as an "X" at phone size. Only real touch taps
   move focus to the input, so no desktop browser or emulator ever showed it.
   Kill the outline on the input and everything inside a color dot. The ring
   (a ::before border) and the halo (an ::after shadow) are untouched. */
.bu-swatch-label,
.bu-swatch-label *,
.bu-swatch-label input,
.bu-swatch-label input:focus,
.bu-swatch-label input:focus-visible,
.bu-swatch-label input:active,
.bu-swatch-label input:checked,
.bu-swatch-label .swatch,
.bu-swatch-label .swatch:focus,
.variant-option__button-label--has-swatch,
.variant-option__button-label--has-swatch *,
.variant-option__button-label--has-swatch input,
.variant-option__button-label--has-swatch input:focus,
.variant-option__button-label--has-swatch input:focus-visible,
.variant-option__button-label--has-swatch input:active,
.variant-option__button-label--has-swatch .swatch {
  outline: 0 none transparent !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-color: transparent !important;
  outline-offset: 0 !important;
}
/* the input carries no paint of its own — it is an invisible hit target */
.bu-swatch-label input,
.variant-option__button-label--has-swatch input {
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* iOS TAP FOCUS KILL — a real iPhone tap sets focus on the radio; the
   theme then paints a focus outline / ::after focus ring on the label until
   the availability re-render steals focus ~300ms later. Desktop mouse clicks
   and emulated taps never trigger it — which is why it only shows on real
   phones. Kill every focus paint on color dots; keyboard users still get
   the browser default on size pills. */
.bu-swatch-label:has(:focus-visible),
.bu-swatch-label:has(:focus),
.variant-option__button-label--has-swatch:has(:focus-visible),
.variant-option__button-label--has-swatch:has(:focus) {
  outline: none !important;
  border-color: transparent !important;
  --variant-picker-stroke-color: transparent;
  --focus-outline: 0 solid transparent;
  --focus-outline-width: 0px;
  --focus-outline-offset: 0px;
}
@media (hover: none) {
  .bu-swatch-label::before,
  .bu-swatch-label::after,
  .variant-option__button-label--has-swatch::after {
    border-color: transparent;
  }
  .bu-swatch-label:has(:checked)::before {
    box-shadow: 0 0 0 2px #1c1c1c !important;
  }
  .variant-option__button-label--has-swatch::after {
    border: none !important;
  }
}
.bu-swatch-label,
.bu-swatch-label input,
.variant-option__button-label--has-swatch,
.variant-option__button-label--has-swatch input {
  -webkit-tap-highlight-color: transparent;
}

/* tooltip can never flash over the dots on touch screens */
@media (hover: none) {
  .variant-tooltip-floating,
  .variant-tooltip {
    display: none !important;
    opacity: 0 !important;
  }
}

/* the color dots ARE the gallery navigation — hide the photo arrows and
   the "1 / 8" position pill on product pages */
.media-gallery__mobile-controls,
.media-gallery .slideshow-control--previous,
.media-gallery .slideshow-control--next {
  display: none !important;
}
/* zap every remaining way a stock-state cross/dash could be drawn on a dot */
.bu-swatch-label .swatch::before,
.bu-swatch-label .swatch::after {
  content: none !important;
}
.bu-swatch-label .swatch {
  background-image: none !important;
}
.bu-swatch-label input[aria-disabled='true'] ~ .swatch,
.bu-swatch-label:has([data-option-available='false']) .swatch {
  border-style: solid !important;
  opacity: 1 !important;
}

/* Dot spacing — FIXED gaps, never flexible (rows with 5 colors must not
   stretch). Desktop matches Sloth's rhythm: their 35px dots sit 45px
   center-to-center, so our 23px dots get 22px edge gaps. Mobile: 18px gaps
   put eight dots edge-to-edge across a 360px phone exactly.
   (Measured: rendered gap = this margin + 13px of slider spacing.) */
.variant-swiper-color .swiper-slide,
.variant-swiper-colour .swiper-slide {
  margin-right: 9px !important;
}
@media screen and (max-width: 749px) {
  .variant-swiper-color .swiper-slide,
  .variant-swiper-colour .swiper-slide {
    margin-right: 5px !important;
  }
}

/* room for halo + ring in the scroll row; pulled left so the first dot
   lines up with the size pills' left edge */
.variant-swiper-color,
.variant-swiper-colour {
  padding: 9px !important;
  margin-inline-start: -12px;
}
/* air between the Size/Size-Guide row and the size pills (plain px — the
   theme's spacing var is undefined here and voided a calc()) */
.variant-option[data-is-size-option='true'] legend {
  margin-block-end: 10px !important;
}

/* Tooltip that floats on body */
.variant-tooltip-floating {
  position: absolute;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.9);
  color: white;
  padding: 5px 8px;
  font-size: 12px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 99999;
  display: none;
  min-width: 50px;
  text-align: center;
}

.variant-tooltip-floating::after {
  /* 5px wide x 3px tall pointer, per spec */
  content: "";
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 3px 2.5px 0 2.5px;
  border-style: solid;
  border-color: rgba(0,0,0,0.9) transparent transparent transparent;
}
/* END_SNIPPET:variant-main-picker */

/* START_SNIPPET:video (INDEX:308) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:video */