/** Shopify CDN: Minification failed

Line 3192:18 Unexpected "{"
Line 3192:27 Expected ":"
Line 3195:20 Unexpected "{"
Line 3195:29 Expected ":"
Line 3198:20 Unexpected "{"
Line 3198:29 Expected ":"
Line 3199:20 Unexpected "{"
Line 3199:29 Expected ":"
Line 3200:20 Unexpected "{"
Line 3200:29 Expected ":"
... and 18 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:collection-links (INDEX:2) */
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';

      @media screen and (min-width: 750px) {
        &[reverse] {
          grid-template-areas: 'image text';
          grid-template-columns: var(--template-column-ratio) 1fr;
        }
      }

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

      @media screen and (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 screen and (max-width: 749px) {
      image-block {
        max-width: 100%;
      }
    }
  }
/* END_SECTION:collection-links */

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

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

  .featured-product-section {
    --viewport-offset: 400px;
    --constrained-min-height: var(--visual-preview--height, 80dvh);
    --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

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

  @media screen and (min-width: 750px) {
    .featured-product-section .product-card__content {
      --hugged-width: calc(var(--constrained-height) * var(--gallery-aspect-ratio, var(--media-preview-ratio)));
      width: min(100%, var(--hugged-width));
      margin-left: auto;
      margin-right: auto;
    }
  }
/* END_SECTION:featured-product */

/* START_SECTION:footer-utilities (INDEX:9) */
.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;
      justify-self: start;
    }
  }

  /* Dynamic positioning based on number of blocks */
  @media screen and (min-width: 750px) {
    /* 1 block: Single column, left aligned */
    .utilities--blocks-1 {
      grid-template-columns: 1fr;
      justify-content: start;
    }

    .utilities--blocks-1 > * {
      justify-self: start;
      text-align: left;
    }

    /* 2 blocks: Two equal columns, start and end aligned */
    .utilities--blocks-2 {
      grid-template-columns: 1fr 1fr;
    }

    .utilities--blocks-2 > *:nth-child(2) {
      justify-self: end;
      text-align: right;
    }

    /* 3 blocks: Three columns (1fr auto 1fr), start/center/end aligned */
    .utilities--blocks-3 {
      grid-template-columns: 1fr auto 1fr;
    }

    .utilities--blocks-3 > *:nth-child(2) {
      justify-self: center;
      text-align: center;
    }

    .utilities--blocks-3 > *:nth-child(3) {
      justify-self: end;
      text-align: right;
    }
  }
/* END_SECTION:footer-utilities */

/* START_SECTION:footer (INDEX:10) */
.footer-content {
    contain: content;
    content-visibility: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--footer-gap);
  }

  @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[style*='--grid-columns: 4'] {
      grid-template-columns: repeat(2, 1fr);
    }

    .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:11) */
.announcement-bar {
    border-block-end: var(--border-bottom-width) solid var(--color-border);
  }

  .announcement-bar__slider {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;

    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .announcement-bar__slides {
    display: grid;
    grid: [stack] auto / [stack] auto;
    width: calc(100% - var(--button-size) * 2);
    max-width: 680px;
    margin-inline: auto;
  }

  .announcement-bar__slides > * {
    grid-area: stack;
  }

  .announcement-bar__slide {
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    content-visibility: visible;

    &[aria-hidden='true'] {
      opacity: 0;
      visibility: hidden;
    }
  }

  .announcement-bar__slider slideshow-arrows {
    padding: 0;
    mix-blend-mode: normal;
  }

  .announcement-bar__slider slideshow-arrows .slideshow-control {
    color: var(--color-foreground);
  }

  .announcement-bar__slider .slideshow-control {
    display: flex;
    padding: 0;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
    opacity: 1;
    animation: none;

    @media screen and (min-width: 750px) {
      --slideshow-control-offset: calc((var(--button-size) - var(--icon-size-xs)) / 2);

      .section--page-width &.slideshow-control--previous {
        transform: translateX(var(--slideshow-control-offset));
      }
    }
  }

  .announcement-bar__slider .slideshow-control .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .announcement-bar__slide {
    place-content: center;
  }

  .announcement-bar__text:first-child {
    margin: 0;
  }

  .announcement-bar__link {
    position: absolute;
    inset: 0;
  }
/* END_SECTION:header-announcements */

/* START_SECTION:header (INDEX:12) */
body {
    --header-height: 60px;
    --header-group-height: var(--header-height);
    --transparent-header-offset-boolean: 0; /* stylelint-disable-line declaration-property-value-disallowed-list */
  }

  .header {
    /* Set header paddings based on height setting */
    --header-padding: var(--padding-sm);
    --font-paragraph--line-height: 1;
    --header-content-transition-timing: 0s;

    display: block;
    contain: layout style;
    background: transparent;

    a,
    .button,
    .button-secondary,
    .header-actions__action {
      /* reset style from base.css */
      transition: color var(--header-content-transition-timing), border-color var(--header-content-transition-timing);
    }
  }

  #header-component :is(.header-menu, .dropdown-localization) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] :is(.header-menu, .dropdown-localization) {
      display: flex;
    }
  }

  #header-component[data-menu-style='drawer'] .header__column {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] .header__navigation-bar-row {
      display: none;
    }
  }

  .header[transparent] {
    --language-button-background-color: transparent;
    --language-button-border-color: transparent;
    --header-content-transition-timing: calc(var(--submenu-animation-speed) - var(--animation-speed-fast))
      var(--animation-speed-fast) var(--ease-out-cubic);

    --closed-underlay-height: 0px;

    /* used to display the appropriate logo based on transparency state */
    --header-logo-display: none;
    --header-logo-inverse-display: block;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    z-index: var(--layer-overlay);

    &[transparent='not-sticky'][data-sticky-state='active'],
    &:has(.menu-list__link:not([aria-haspopup]):hover) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --closed-underlay-height: 100%;
    }

    /** For transparent header, apply inherit to rows when menu is not hovered */
    &:not([data-sticky-state='active']):not(:has(.menu-list__link:is(:hover, [aria-expanded='true']))) .header__row {
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-text: inherit;
    }

    /* 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:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --header-content-transition-timing: var(--submenu-animation-speed) var(--ease-out-cubic);
    }
  }

  /* When top row has transparent background, make it inherit colors from header component */
  [data-transparent-rows='top']:hover .header__row--top,
  [data-transparent-rows='top']:focus-within .header__row--top,
  [data-transparent-rows='both']:hover .header__row--top,
  [data-transparent-rows='both']:focus-within .header__row--top {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  /* When bottom row has transparent background, make it inherit colors from header component */
  [data-transparent-rows='bottom']:hover .header__row--bottom,
  [data-transparent-rows='bottom']:focus-within .header__row--bottom,
  [data-transparent-rows='both']:hover .header__row--bottom,
  [data-transparent-rows='both']:focus-within .header__row--bottom {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  .header-section {
    position: relative;
    z-index: var(--layer-heightened);
  }

  /* need default values for non-flash transitions on first overflow menu open */
  #header-component {
    --submenu-height: 0px;
    --full-open-header-height: 0px;
  }

  #header-group:has(#header-component[sticky]) {
    display: contents;
  }

  .header-section:has(> #header-component[sticky='always']),
  .header-section:has(> #header-component[sticky='scroll-up'][data-sticky-state='active']) {
    position: sticky;

    /* Use -1 instead of 0 so intersection observer can track sticky state */
    top: -1px;
    z-index: var(--layer-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;
  }

  :active-view-transition-type(empty-cart-drawer) {
    .header[data-sticky-state='active'] {
      view-transition-name: none;
    }
  }

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

  /* ================================
     * Underlays
     * ================================ */
  .header__underlay {
    position: absolute;
    inset: 0;
  }

  .header__underlay-closed {
    height: var(--closed-underlay-height, 100%);
    z-index: var(--layer-lowest);
    background: linear-gradient(
      var(--header-top-row-background) 0 var(--top-row-height),
      var(--header-bottom-row-background) var(--top-row-height) var(--header-height)
    );
    transition: height var(--animation-speed-slow) var(--ease-out-cubic);
  }

  .header__underlay-open {
    height: var(--full-open-header-height);
    background: linear-gradient(
      var(--header-top-row-background) 0 var(--top-row-height),
      var(--header-bottom-row-background) var(--top-row-height) var(--header-height),
      var(--color-submenu) var(--header-height) 100%
    );
    /* header-height is updated via js, the transition works automagically */
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  .header__underlay-open::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--shadow-popover);
    clip-path: inset(var(--header-height) 0 -100px 0); /* stylelint-disable-line */
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  /* When top row has transparent background, make underlay inherit colors from header component */
  [data-transparent-rows='top']:hover,
  [data-transparent-rows='top']:focus-within,
  [data-transparent-rows='both']:hover,
  [data-transparent-rows='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --header-top-row-background: var(--color-background);
    }
  }

  /* When bottom row has transparent background, make underlay inherit colors from header component */
  [data-transparent-rows='bottom']:hover,
  [data-transparent-rows='bottom']:focus-within,
  [data-transparent-rows='both']:hover,
  [data-transparent-rows='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --header-bottom-row-background: var(--color-background);
    }
  }

  [data-submenu-overlap-bottom-row] {
    .header__underlay-open {
      background: linear-gradient(
        var(--header-top-row-background) 0 var(--top-row-height),
        var(--color-submenu) var(--top-row-height) 100%
      );
    }

    .header__row--bottom {
      z-index: var(--layer-lowest);
    }
  }

  /* End Underlays ================ */

  .header__row {
    /* The account component sets its own icon colour; override it so the icon inherits the header row colour */
    --color-account-icon: var(--color-foreground);

    position: relative;

    /* Overwrite the inherited text colour; background is controlled by the underlays */
    background-color: transparent;

    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      /* Only elevate the row when the submenu is open to avoid overlapping other elevated content */
      z-index: var(--layer-heightened);
    }
  }

  .header__row--top:not(.divider--page-width),
  .header__row--top.divider--page-width .header__columns,
  .header__row--bottom {
    border-bottom: var(--border-bottom-width) solid var(--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-component[data-menu-style='drawer'] .header__row--top:not(.divider--page-width),
  #header-component[data-menu-style='drawer'] .header__row--top.divider--page-width .header__columns {
    border-bottom-width: var(--border-bottom-width-mobile);
  }

  .header__row.divider--page-width:not(.section--page-width) .header__columns {
    @media screen and (min-width: 750px) {
      padding-inline-start: 0;
      padding-inline-end: 0;
      margin-inline-start: var(--page-margin);
      margin-inline-end: var(--page-margin);
    }
  }

  .header__column {
    display: flex;
    align-items: center;

    /* on mobile, header__column nodes are ignored to create a new grid-template-area based on all visible content */
    @media screen and (max-width: 749px) {
      display: contents;
    }
  }

  .header__column--left,
  .header__column--center {
    gap: var(--gap-xl);
    grid-area: left;
  }

  .header__column--center {
    justify-content: center;
    grid-area: center;

    header-menu:only-child .overflow-menu::part(list) {
      justify-content: center;
    }
  }

  .header__column--right {
    gap: var(--gap-xl);
    justify-content: flex-end;
    grid-area: right;

    .overflow-menu::part(list) {
      justify-content: flex-end;
    }
  }

  .header__columns {
    /* Three column layout */
    --header-left: 1fr;
    --header-center: auto;
    --header-right: 1fr;
    --header-template-columns: var(--header-left) var(--header-center) var(--header-right);

    /* Mobile layout */
    --header-mobile-bookend: 44px;

    display: grid;
    grid-template-areas: 'left center right';
    grid-gap: var(--gap-xl);
    grid-template-columns: var(--header-template-columns);

    /* If menu is in center column */
    &:has(.header__column--center header-menu) {
      --header-center: auto;
      --header-left: minmax(max-content, 1fr);
      --header-right: minmax(max-content, 1fr);
    }

    /* If there is no center column, make the column the menu is in grow eagerly */
    &:where(:not(:has(.header__column--center))) {
      @media screen and (min-width: 750px) {
        --header-template-columns: var(--header-left) var(--header-right);

        grid-template-areas: 'left right';
      }

      /* If the header-menu is in the right column */
      &:has(.header__column--right header-menu) {
        --header-right: auto;
        --header-left: minmax(max-content, 1fr);
      }

      /* If the header-menu is in the left column */
      &:has(.header__column--left header-menu) {
        --header-left: auto;
        --header-right: minmax(max-content, 1fr);
      }
    }

    @media screen and (max-width: 749px) {
      --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
        var(--header-mobile-bookend) var(--header-mobile-bookend);

      grid-template-areas: 'leftA leftB center rightA rightB';
      grid-column: span 3;
      column-gap: 0;
      align-items: center;
      padding-block: 0;
      padding-inline: 0 var(--padding-3xs);

      .header-logo {
        grid-area: center;
      }

      &:not(:has(header-actions)) .search-action {
        grid-area: leftB;
      }

      &:not(:has(shopify-account)) .search-action {
        grid-area: rightA;
      }

      .search-action {
        grid-area: leftB;
      }

      header-actions {
        grid-area: rightB;
      }
    }
  }

  /* not ideal but we need to duplicate these styles for when touch comes into play
    We could avoid the duplication using js to set the data-menu-style attribute on small screens instead of using @media queries */
  #header-component[data-menu-style='drawer'] .header__columns {
    --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
      var(--header-mobile-bookend) var(--header-mobile-bookend);

    grid-template-areas: 'leftA leftB center rightA rightB';
    grid-column: span 3;
    column-gap: 0;
    align-items: center;
    padding-block: 0;
    padding-inline: 0 var(--padding-3xs);

    .header-logo {
      grid-area: center;
    }

    &:not(:has(header-actions)) .search-action {
      grid-area: leftB;
    }

    &:not(:has(shopify-account)) .search-action {
      grid-area: rightA;
    }

    .search-action {
      grid-area: leftB;
    }

    header-actions {
      grid-area: rightB;
    }
  }

  /* Single column layout if there are no columns within */
  .header__columns:not(:has(.header__column)) {
    grid-template-columns: 1fr;
  }

  /* Check for hover support to avoid unnecessary expensive recalculations when tapping on mobile */
  @media (hover: hover) {
    /* Column-specific dimming effect when any interactive element is hovered
        Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    .header__column:has(header-menu:hover),
    .header__column:has(.header-actions__action:hover),
    .header__column:has(.header__icon--menu:hover) {
      header-menu:not(:hover),
      .header-actions__action:not(:hover),
      .header__icon--menu:not(:hover) {
        opacity: var(--opacity-subdued-text);
        transition: opacity var(--animation-speed) var(--animation-easing);
      }
    }
  }

  /* Ensure smooth transitions for all interactive elements */
  header-menu,
  .header-actions__action,
  .header__icon--menu {
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  /* Header action button styles */
  .header-actions__action {
    --button-color: var(--color-foreground);
    color: var(--button-color);
    cursor: pointer;
    display: flex;
    justify-content: center;

    &:hover {
      --button-color: var(--color-foreground);
    }
  }

  .header-actions__action:not(.account-button) .svg-wrapper {
    height: var(--button-size);
    width: var(--button-size);
  }

  .header-actions__action:not(.account-button) svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .header:has(#Details-menu-drawer-container[open]) {
    contain: style;
  }

  .header.header--compact {
    --header-padding: var(--padding-2xs);
  }

  .header__columns {
    --padding-block-start: var(--header-padding);
    --padding-block-end: var(--header-padding);
  }

  .header:not(.header--compact) .header__row--bottom {
    --header-padding: var(--padding-xs);
  }

  .header--collapse-row-paddings {
    .header__row--top .header__columns {
      --padding-block-end: 0px;
    }

    .header__row--bottom .header__columns {
      --padding-block-start: 0px;
    }
  }

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

  /* Optimize layout performance for hidden menus */
  .header-menu .menu-list__submenu {
    content-visibility: auto;
    contain-intrinsic-size: 0px 500px;
  }

  /* Force visibility when open/animating and in overflow submenu to prevent layout issues */
  .header-menu details[open] .menu-list__submenu,
  .header-menu .menu-list__submenu[data-active],
  .header-menu .menu-list__list-item[slot='overflow'] .menu-list__submenu {
    content-visibility: visible;
  }

  /* Dropdown Localization Styles */
  .dropdown-localization__button {
    display: flex;
    position: relative;
    align-items: center;
    gap: 4px;
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
    font-weight: var(--menu-top-level-font-weight);
    padding-inline: var(--padding-2xs);
    margin-inline: calc(-1 * var(--padding-2xs));
  }

  .dropdown-localization__button .svg-wrapper.icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    right: var(--margin-xs);
    top: calc(50% - var(--padding-2xs));
    flex-shrink: 0;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .dropdown-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .dropdown-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .dropdown-localization__button[aria-expanded='true'] .icon-caret svg {
    transform: rotate(180deg);
  }

  .dropdown-localization__button,
  .dropdown-localization__button:hover {
    box-shadow: none;
    background-color: transparent;
    border-color: transparent;
  }

  dropdown-localization-component .localization-form__list {
    max-height: 20.5rem;
  }

  .localization-wrapper {
    position: fixed;
    z-index: var(--layer-raised);
    border-radius: var(--style-border-radius-popover);
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  .localization-wrapper:not([hidden]) {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .localization-wrapper:not([hidden]) {
      translate: 0 20px;
      opacity: 0;
    }
  }

  dropdown-localization-component {
    position: relative;
    background-color: transparent;
  }

  dropdown-localization-component .country-filter {
    position: relative;
    padding: 8px;
  }

  dropdown-localization-component .country-filter__input {
    border: none;
  }

  dropdown-localization-component .localization-form__list-item {
    margin-inline: 8px;
  }

  dropdown-localization-component .localization-wrapper {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    max-height: 27.5rem;
    position: absolute;
    top: calc(100% + 10px);
    z-index: calc(var(--layer-header-menu) + 1);
  }

  dropdown-localization-component .localization-wrapper.right-bound {
    right: 0;
    left: unset;
  }

  dropdown-localization-component .localization-wrapper.left-bound {
    left: -8px;
    right: unset;
  }

  /* Additional specificity due to dropdown-localization-component getting a low score */
  dropdown-localization-component .language-selector.language-selector {
    padding: 10px 8px 10px 16px;
  }

  dropdown-localization-component .localization-form__currency {
    width: max-content;
    opacity: 0;
    visibility: hidden;
    transition: none;
  }

  dropdown-localization-component .localization-form__select:hover {
    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  dropdown-localization-component
    :is(
      .localization-form__list-item:hover,
      .localization-form__list-item[aria-selected='true'],
      .localization-form__list-item[aria-current='true']
    )
    .localization-form__currency {
    opacity: 1;
    color: var(--color-foreground-muted);
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
    visibility: visible;
  }

  .dropdown-localization .language-selector:where(:not(.top-shadow)) {
    font-weight: var(--menu-top-level-font-weight);
  }

  .dropdown-localization:not(dropdown-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:13) */
.hero-wrapper {
    --hero-height-offset: 0px;
  }

  /* Being extra specific in the selector for performance reasons */
  body:has(> #header-group > .header-section > #header-component) .hero-wrapper:first-child {
    --hero-height-offset: var(--header-group-height, 0);
  }

  .hero {
    position: relative;
    min-height: calc(var(--hero-min-height) - var(--hero-height-offset));
  }

  .hero[data-shopify-visual-preview] {
    --hero-min-height: 600px;

    min-height: 600px;
  }

  .hero__container {
    position: relative;
    overflow: hidden;
    border: var(--hero-border-width) var(--hero-border-style) rgb(var(--color-border-rgb) / var(--hero-border-opacity));
    min-height: inherit;
    align-items: var(--vertical-alignment-mobile);
    justify-content: var(--horizontal-alignment);
    z-index: var(--layer-base);

    @media screen and (min-width: 750px) {
      align-items: var(--vertical-alignment);
    }
  }

  .hero__content-wrapper.page-width {
    grid-column: 2 / 3;
  }

  .hero__content-wrapper {
    position: relative;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hero__content-wrapper .group-block-content {
    position: relative;
  }

  .hero__media-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(var(--hero-media-count, 1), 1fr);
  }

  .hero--auto .hero__media {
    aspect-ratio: var(--hero-media-aspect-ratio);
  }

  .hero--no-blocks-auto-height {
    .hero__media {
      width: 100%;
      aspect-ratio: auto;
    }

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

  .hero__media-wrapper {
    overflow: hidden;
    position: relative;
  }

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

  /* Mobile/Desktop media visibility */

  .hero__media-wrapper--mobile {
    display: none;
  }

  .hero__media-wrapper--desktop {
    display: block;
  }

  @media screen and (max-width: 749px) {
    .hero__media-wrapper--desktop {
      display: none;
    }

    .hero__media-wrapper--mobile {
      display: block;
    }

    .hero__media-grid {
      grid-template-columns: repeat(var(--hero-media-count-mobile, 1), 1fr);
    }

    /* Mobile stacking */
    .hero--stack-mobile .hero__media-grid {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(var(--hero-media-count-mobile, 1), calc(100% / var(--hero-media-count-mobile, 1)));
    }
  }

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

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

    :is(a, button, input, textarea, select, details, summary) {
      pointer-events: auto;
    }
  }

  .hero__content-wrapper--design-mode * {
    pointer-events: auto;
  }

  .hero[data-blur-shadow='true'] {
    --blurred-reflection-filter-saturate: saturate(1.5);
    --blurred-reflection-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
    --blurred-reflection-box-shadow: rgb(0 0 0 / 5%) 0 0 1rem;
    --blurred-reflection-filter-blur: blur(20px);
    --blurred-reflection-scale: scale(2, 1.25);
    --blurred-reflection-padding-block-end: 60px;
  }

  .hero[data-blur-shadow='true'] .hero__container::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--blurred-reflection-box-shadow);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
  }

  .hero__blurred-image {
    position: absolute;
    inset: 0;
    z-index: -1;
    mask-image: var(--blurred-reflection-mask-image);
    filter: var(--blurred-reflection-filter-saturate);
    pointer-events: none;
    transform: translateY(50%);
    overflow: hidden;
  }

  .hero__blurred-image--desktop {
    display: none;

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

  .hero__blurred-image--mobile {
    display: block;

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .hero__blurred-image img,
  .hero__blurred-image svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: var(--blurred-reflection-filter-blur);
    opacity: var(--blur-opacity);
    transform: var(--blurred-reflection-scale);
    padding-block-end: var(--blurred-reflection-padding-block-end);

    &:not(:only-child) {
      width: 50%;

      &:last-child {
        right: 0;
        left: auto;
      }
    }
  }
/* END_SECTION:hero */

/* START_SECTION:hw-bundle-promo-tabs (INDEX:14) */
.hw-bundle-promo-tabs-section {
    overflow: clip;
    margin-block: var(--hw-bundle-promo-tabs-section-margin-mobile, 0px);
  }

  @media (min-width: 750px) {
    .hw-bundle-promo-tabs-section {
      margin-block: var(--hw-bundle-promo-tabs-section-margin-desktop, 0px);
    }
  }

  .hw-bundle-promo-tabs {
    display: grid;
    grid-template-columns: 1fr;
    min-height: var(--hw-bundle-promo-tabs-min-height-mobile, 0px);
  }

  @media (min-width: 750px) {
    .hw-bundle-promo-tabs {
      grid-template-columns: 1fr 1fr;
      align-items: stretch;
      min-height: var(--hw-bundle-promo-tabs-min-height-desktop, 0px);
    }

    .hw-bundle-promo-tabs--image-right .hw-bundle-promo-tabs__image-stack {
      order: 2;
    }
  }

  .hw-bundle-promo-tabs__image-stack {
    display: grid;
    position: relative;
  }

  .hw-bundle-promo-tabs__image {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-border, #efefef);
  }

  @media (min-width: 750px) {
    .hw-bundle-promo-tabs__image {
      aspect-ratio: auto;
      height: 100%;
    }
  }

  .hw-bundle-promo-tabs__image--active {
    opacity: 1;
    visibility: visible;
    position: relative;
  }

  .hw-bundle-promo-tabs__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .hw-bundle-promo-tabs__content {
    position: relative;
    background: var(--hw-bundle-promo-tabs-content-bg, #f5f5f5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--hw-bundle-promo-tabs-content-gap-mobile, 32px);
    text-align: center;
    padding-block: calc(22px + var(--hw-bundle-promo-tabs-content-padding-block-mobile, 0px));
  }

  @media (min-width: 750px) {
    .hw-bundle-promo-tabs__content {
      gap: var(--hw-bundle-promo-tabs-content-gap-desktop, 44px);
      padding-inline: 60px;
      padding-block: calc(22px + var(--hw-bundle-promo-tabs-content-padding-block-desktop, 0px));
    }
  }

  .hw-bundle-promo-tabs__pill-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--hw-bundle-promo-tabs-pill-row-bg, #fff);
    border: 1px solid var(--hw-bundle-promo-tabs-pill-row-border, #000);
    border-radius: 41px;
    padding: 6px 8px 6px 6px;
  }

  .hw-bundle-promo-tabs__pill {
    appearance: none;
    border: 1px solid transparent;
    background: none;
    border-radius: 37px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 16px;
    cursor: pointer;
    color: var(--hw-bundle-promo-tabs-pill-text, #000);
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  .hw-bundle-promo-tabs__pill--active {
    background: var(--hw-bundle-promo-tabs-pill-active-bg, #000);
    border-color: var(--hw-bundle-promo-tabs-pill-active-bg, #000);
    color: var(--hw-bundle-promo-tabs-pill-active-text, #fff);
  }

  .hw-bundle-promo-tabs__body-stack {
    display: grid;
  }

  .hw-bundle-promo-tabs__body {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hw-bundle-promo-tabs-content-gap-mobile, 32px);
  }

  @media (min-width: 750px) {
    .hw-bundle-promo-tabs__body {
      gap: var(--hw-bundle-promo-tabs-content-gap-desktop, 44px);
    }
  }

  .hw-bundle-promo-tabs__body--active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    position: relative;
  }

  .hw-bundle-promo-tabs__heading {
    line-height: 1.1;
    margin: 0;
  }

  .hw-bundle-promo-tabs__heading.custom-typography {
    font-family: var(--font-heading--family, serif);
    font-size: var(--hw-bundle-promo-tabs-heading-size-mobile, 22px);
  }

  @media (min-width: 750px) {
    .hw-bundle-promo-tabs__heading.custom-typography {
      font-size: var(--hw-bundle-promo-tabs-heading-size-desktop, 24px);
    }
  }

  .hw-bundle-promo-tabs__meta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
  }

  .hw-bundle-promo-tabs__colors {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .hw-bundle-promo-tabs__colors.custom-typography {
    font-size: 12px;
  }

  .hw-bundle-promo-tabs__color-dots {
    display: inline-flex;
  }

  .hw-bundle-promo-tabs__color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--hw-bundle-promo-tabs-content-bg, #f5f5f5);
    margin-inline-end: -2px;
  }

  .hw-bundle-promo-tabs__color-dot--1 { background: var(--hw-bundle-promo-tabs-color-dot-1, #000000); }
  .hw-bundle-promo-tabs__color-dot--2 { background: var(--hw-bundle-promo-tabs-color-dot-2, #808080); }
  .hw-bundle-promo-tabs__color-dot--3 { background: var(--hw-bundle-promo-tabs-color-dot-3, #000080); }
  .hw-bundle-promo-tabs__color-dot--4 { background: var(--hw-bundle-promo-tabs-color-dot-4, #f5f5dc); margin-inline-end: 0; }

  .hw-bundle-promo-tabs__sold {
    border: 1px solid var(--hw-bundle-promo-tabs-sold-color, #c52f2f);
    color: var(--hw-bundle-promo-tabs-sold-color, #c52f2f);
    border-radius: 63px;
    padding: 2px 6px;
    font-size: 12px;
  }

  .hw-bundle-promo-tabs__usps {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    max-width: 390px;
  }

  .hw-bundle-promo-tabs__usps.custom-typography {
    font-size: 14px;
  }

  .hw-bundle-promo-tabs__usp {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1.1px solid var(--hw-bundle-promo-tabs-usp-border, #000);
    border-radius: 36px;
    padding: 4px 8px;
    white-space: nowrap;
  }

  .hw-bundle-promo-tabs__usp img {
    display: block;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
  }

  .hw-bundle-promo-tabs__thumbs {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hw-bundle-promo-tabs__thumb {
    width: var(--hw-bundle-promo-tabs-thumb-size, 55px);
    height: var(--hw-bundle-promo-tabs-thumb-size, 55px);
    border-radius: 39px;
    border: 1px solid var(--hw-bundle-promo-tabs-content-bg, #f5f5f5);
    margin-inline-end: calc(-1 * var(--hw-bundle-promo-tabs-thumb-overlap, 16px));
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .hw-bundle-promo-tabs__thumb:last-child {
    margin-inline-end: 0;
  }

  .hw-bundle-promo-tabs__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hw-bundle-promo-tabs__thumb--placeholder {
    background: var(--hw-bundle-promo-tabs-content-bg, #f5f5f5);
    border: 1px dashed var(--hw-bundle-promo-tabs-thumb-placeholder-border, #989898);
  }

  .hw-bundle-promo-tabs__thumb--placeholder img {
    width: 14px;
    height: 14px;
    object-fit: contain;
  }

  .hw-bundle-promo-tabs__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-button-background, #000);
    color: var(--color-primary-button-text, #fff);
    border-radius: 100px;
    padding-block: var(--hw-bundle-promo-tabs-cta-padding-block, 11px);
    padding-inline: var(--hw-bundle-promo-tabs-cta-padding-inline, 32px);
    font-size: 14px;
    text-decoration: none;
    text-transform: capitalize;
  }

  .hw-bundle-promo-tabs__empty-state {
    text-align: center;
    opacity: 0.6;
  }

  /* Editor: keep every panel visible/selectable rather than relying on JS state */
  body.shopify-design-mode .hw-bundle-promo-tabs__image,
  body.shopify-design-mode .hw-bundle-promo-tabs__body {
    opacity: 1;
    visibility: visible;
  }
/* END_SECTION:hw-bundle-promo-tabs */

/* START_SECTION:hw-collection-hero (INDEX:20) */
/* assets/hw-hero.css zeroes min-height on the percent-based frame (.hw-hero__frame-m--percent /
     --d--percent); this rule needs three classes to out-specificity that shared 2-class rule so a
     merchant-set floor actually applies on top of the aspect-ratio frame instead of being zeroed. */
  .hw-collection-hero.hw-hero .hw-hero__ratio-box {
    min-height: var(--hw-ch-min-height, 0);
  }

  @media screen and (min-width: 750px) {
    .hw-collection-hero.hw-hero .hw-hero__ratio-box {
      min-height: var(--hw-ch-min-height-desktop, 0);
    }
  }

  .hw-collection-hero .hw-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: var(--hw-ch-valign, flex-end);
    gap: 8px;
  }

  .hw-collection-hero .hw-hero__content-inner {
    flex: 0 0 auto;
    height: auto;
    justify-content: var(--hw-ch-valign, flex-end);
    align-items: var(--hw-ch-halign, flex-start);
  }

  .hw-collection-hero__group {
    display: flex;
    flex-direction: column;
    align-items: var(--hw-ch-halign, flex-start);
    text-align: var(--hw-ch-text-align, left);
    gap: var(--hw-ch-gap, 8px);
    max-width: var(--hw-ch-max-width, 660px);
    padding-block: var(--hw-ch-padding-block, 32px);
    color: var(--hw-ch-text-color, #ffffff);
  }

  .hw-collection-hero__heading-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: var(--hw-ch-halign, flex-start);
    gap: 8px;
    width: 100%;
  }

  .hw-collection-hero__subheading {
    margin: 0;
    color: inherit;
  }

  .hw-collection-hero__heading {
    text-transform: capitalize;
    color: inherit;
    margin: 0;
  }

  @media screen and (min-width: 750px) {
    .hw-collection-hero .hw-hero__content {
      justify-content: var(--hw-ch-valign-desktop, flex-end);
    }

    .hw-collection-hero .hw-hero__content-inner {
      justify-content: var(--hw-ch-valign-desktop, flex-end);
      align-items: var(--hw-ch-halign-desktop, flex-start);
    }

    .hw-collection-hero__group {
      align-items: var(--hw-ch-halign-desktop, flex-start);
      text-align: var(--hw-ch-text-align-desktop, left);
      gap: var(--hw-ch-gap-desktop, 12px);
      padding-block: var(--hw-ch-padding-block-desktop, 40px);
    }

    .hw-collection-hero__heading-row {
      justify-content: var(--hw-ch-halign-desktop, flex-start);
    }
  }

  .hw-collection-hero__badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 4px 8px;
    border-radius: 86px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-family: var(--font-paragraph--family);
    font-style: var(--font-paragraph--style);
    font-weight: var(--font-paragraph--weight);
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .hw-collection-hero__badge--dark {
    background: rgba(0, 0, 0, 0.66);
    color: #ffffff;
  }

  .hw-collection-hero__badge--sale {
    background: rgba(200, 40, 40, 0.66);
    color: #ffffff;
  }

  .hw-collection-hero__badge--light {
    background: rgba(255, 255, 255, 0.85);
    color: #000000;
  }

  .hw-collection-hero__button.button {
    padding-inline: 46px;
    padding-block: 12px;
    backdrop-filter: blur(13.2px);
    -webkit-backdrop-filter: blur(13.2px);
  }

  .hw-collection-hero__trust-bar {
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    backdrop-filter: blur(13.2px);
    -webkit-backdrop-filter: blur(13.2px);
    background: rgba(0, 0, 0, 0.11);
    padding-block: 2px;
  }

  .hw-collection-hero__trust-item {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding-block: 4px;
  }

  .hw-collection-hero__trust-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: #ffffff;
  }

  .hw-collection-hero__trust-text {
    font-family: var(--font-paragraph--family);
    font-style: var(--font-paragraph--style);
    font-weight: var(--font-paragraph--weight);
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0;
    color: #ffffff;
    white-space: nowrap;
  }

  .hw-collection-hero__trust-divider {
    flex-shrink: 0;
    width: 1px;
    height: 18px;
    align-self: center;
    background: rgb(255 255 255 / 0.2);
  }
/* END_SECTION:hw-collection-hero */

/* START_SECTION:hw-collection-scroll (INDEX:21) */
/*
   * Vertical slider on a sticky runway — the browser owns the pin, not JS.
   *
   * The section is taller than the stage by one step per extra collection:
   * that surplus is the slider's scroll budget. The stage is `position: sticky`
   * at the dock (measured header height + optional offset) and exactly one
   * frame tall, so it locks under the header the moment it is fully in view and
   * releases on the last slide. No fixed/static swap, no scroll hijacking.
   *
   * Without JS the `--ready` class never lands, so the runway collapses to a
   * single frame and the section behaves like a plain background band.
   */
  .shopify-section:has(.hw-collection-scroll-section) {
    isolation: isolate;
  }

  .hw-collection-scroll {
    --hw-cs-frame: var(--hw-cs-frame-mobile, 100svh);
    --hw-cs-list-gap: var(--hw-cs-list-gap-mobile, 4px);
    --hw-cs-list-inset-inline: var(--hw-cs-list-inset-inline-mobile, 24px);
    --hw-cs-list-inset-block: var(--hw-cs-list-inset-block-mobile, 24px);
    --hw-cs-align-h: var(--hw-cs-align-h-mobile, flex-start);
    --hw-cs-align-v: var(--hw-cs-align-v-mobile, flex-end);

    /*
     * Only an always-sticky header permanently covers the top of the viewport,
     * so only that one earns reserved space. `scroll-up` headers come and go —
     * reserving for those would move the dock mid-scroll — and they simply
     * overlay the stage the way they overlay any hero. 0 is the safe default,
     * which is also what browsers without `:has()` fall back to.
     */
    --hw-cs-sticky-header: 0px;
    --hw-cs-dock-top: calc(var(--hw-cs-sticky-header) + var(--hw-cs-top-offset, 0px));
    --hw-cs-stage-height: min(var(--hw-cs-frame), calc(100svh - var(--hw-cs-dock-top)));
    /*
     * Mirrors --hw-cs-dock-top so the stage has the same target rect from
     * either inset. A `top`-only sticky box clamps its overflow protection
     * against the container's bottom edge, which only guards the forward
     * (scroll-down) approach — reversing direction re-enters the runway from
     * its trailing edge and that same clamp math pins the box off-screen
     * until most of the travel budget has been scrolled back through. Setting
     * `bottom` too gives the reverse approach its own protection anchored to
     * the container's top edge, so the stage docks immediately either way.
     */
    --hw-cs-dock-bottom: calc(100svh - var(--hw-cs-dock-top) - var(--hw-cs-stage-height));
    --hw-cs-step: calc(var(--hw-cs-stage-height) * var(--hw-cs-step-ratio, 0.8));

    position: relative;
    width: 100%;
    block-size: var(--hw-cs-stage-height);
  }

  /* Header height itself is measured live on <body> by the theme (utilities.js). */
  body:has(#header-group #header-component[sticky='always']) .hw-collection-scroll {
    --hw-cs-sticky-header: var(--header-height, 0px);
  }

  /* JS opens the runway — the surplus over one frame is the slider's budget. */
  .hw-collection-scroll--ready {
    block-size: calc(
      var(--hw-cs-stage-height) + var(--hw-cs-step) * var(--hw-cs-steps, 0)
    );
  }

  .hw-collection-scroll__stage {
    position: sticky;
    top: var(--hw-cs-dock-top);
    bottom: var(--hw-cs-dock-bottom);
    block-size: var(--hw-cs-stage-height);
    overflow: hidden;
    isolation: isolate;
  }

  .hw-collection-scroll__media {
    position: absolute;
    inset: 0;
    z-index: var(--layer-base);
  }

  .hw-collection-scroll__media-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition:
      opacity var(--hw-cs-duration, 600ms) ease,
      transform var(--hw-cs-duration, 600ms) ease,
      clip-path var(--hw-cs-duration, 600ms) ease;
    will-change: opacity, transform;
  }

  .hw-collection-scroll__media-item--active {
    opacity: 1;
  }

  .hw-collection-scroll__image {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
  }

  .hw-collection-scroll__media-item picture {
    display: contents;
  }

  .hw-collection-scroll__image--placeholder {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-10, 0.1));
  }

  .hw-collection-scroll[data-hw-cs-effect='zoom'] .hw-collection-scroll__media-item {
    transform: scale(1.06);
  }

  .hw-collection-scroll[data-hw-cs-effect='push'] .hw-collection-scroll__media-item {
    transform: translateY(calc(var(--hw-cs-dir, 1) * 8%));
  }

  .hw-collection-scroll[data-hw-cs-effect='wipe'] .hw-collection-scroll__media-item {
    clip-path: inset(0 0 100% 0);
  }

  /* Same 0,3,0 as the effect rules so the active slide can settle. */
  .hw-collection-scroll[data-hw-cs-effect] .hw-collection-scroll__media-item--active {
    transform: none;
    clip-path: none;
  }

  .hw-collection-scroll__content {
    position: absolute;
    inset: 0;
    z-index: var(--layer-heightened);
    display: flex;
    justify-content: var(--hw-cs-align-h, flex-start);
    align-items: var(--hw-cs-align-v, flex-end);
    padding-inline: var(--hw-cs-list-inset-inline, 24px);
    padding-block: var(--hw-cs-list-inset-block, 24px);
    pointer-events: none;
  }

  .hw-collection-scroll__list-wrap {
    pointer-events: auto;
  }

  .hw-collection-scroll__list {
    display: flex;
    flex-direction: column;
    gap: var(--hw-cs-list-gap, 4px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .hw-collection-scroll__item {
    margin: 0;
    padding: 0;
  }

  /*
   * Triple-class beats type-preset `.h3.h3` (0,2,0) so section Text color and
   * Active title color can paint the links. Color blends with --hw-cs-reveal so
   * it tracks the opacity crossfade instead of snapping with --active.
   * When --hw-cs-active-color is unset, both mix ends are currentColor (no-op).
   */
  .hw-collection-scroll .hw-collection-scroll__link.hw-collection-scroll__link {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3em;
    color: color-mix(
      in srgb,
      var(--hw-cs-active-color, currentColor) calc(var(--hw-cs-reveal, 0) * 100%),
      currentColor
    );
    text-decoration: none;
    opacity: calc(
      var(--hw-cs-inactive-opacity, 0.45) +
      (1 - var(--hw-cs-inactive-opacity, 0.45)) * var(--hw-cs-reveal, 0)
    );
  }

  .hw-collection-scroll__link:focus-visible {
    outline: var(--focus-outline-width, 2px) solid currentcolor;
    outline-offset: 2px;
  }

  .hw-collection-scroll__arrow {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    opacity: var(--hw-cs-reveal, 0);
    transition: opacity var(--hw-cs-duration, 600ms) ease;
  }

  .hw-collection-scroll__arrow-img {
    display: block;
    width: 0.75em;
    height: 0.75em;
    object-fit: contain;
  }

  .hw-collection-scroll__footer {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--layer-heightened);
    pointer-events: none;
  }

  .hw-collection-scroll__overlay {
    position: absolute;
    inset: 0;
    z-index: var(--layer-heightened);
    pointer-events: none;
  }

  .hw-collection-scroll__overlay > * {
    pointer-events: auto;
  }

  .hw-collection-scroll__progress {
    inline-size: 100%;
    block-size: 2px;
    background: rgb(var(--color-foreground-rgb) / var(--opacity-20, 0.2));
  }

  .hw-collection-scroll__progress-fill {
    display: block;
    block-size: 100%;
    background: var(--hw-cs-progress-color, var(--color-primary));
    transform: scaleX(var(--hw-cs-progress, 0));
    transform-origin: left center;
  }

  @media (prefers-reduced-motion: reduce) {
    .hw-collection-scroll__media-item,
    .hw-collection-scroll__link,
    .hw-collection-scroll__arrow {
      transition: none;
    }

    .hw-collection-scroll[data-hw-cs-effect] .hw-collection-scroll__media-item {
      transform: none;
      clip-path: none;
    }
  }

  @media screen and (min-width: 750px) {
    .hw-collection-scroll {
      --hw-cs-frame: var(--hw-cs-frame-desktop, 100svh);
      --hw-cs-list-gap: var(--hw-cs-list-gap-desktop, 4px);
      --hw-cs-list-inset-inline: var(--hw-cs-list-inset-inline-desktop, 48px);
      --hw-cs-list-inset-block: var(--hw-cs-list-inset-block-desktop, 48px);
      --hw-cs-align-h: var(--hw-cs-align-h-desktop, flex-start);
      --hw-cs-align-v: var(--hw-cs-align-v-desktop, flex-end);
    }
  }
/* END_SECTION:hw-collection-scroll */

/* START_SECTION:hw-collection-tabs-cards (INDEX:22) */
.hw-collection-tabs-panels {
    margin-top: 24px;
  }

  .hw-collection-tabs-panel[hidden] {
    display: none;
  }

  .hw-collection-tabs-panel__filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 12px;
    border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
    border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
    margin-bottom: 16px;
  }

  @media screen and (min-width: 990px) {
    .hw-collection-tabs-panel__filter-bar {
      padding-block: 16px;
    }
  }

  /* Figma specs a 6px icon-to-text gap on the Filter & Sort toggle - close
     to but not exactly the shared --gap-2xs token (0.35rem/5.6px, computes
     to ~4.8px here), so set it explicitly rather than nudging a token used
     elsewhere in the theme. */
  .hw-collection-tabs-panel__filter-toggle.button-unstyled--with-icon {
    gap: 6px;
  }

  .hw-collection-tabs-panel__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 12px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  @media screen and (min-width: 990px) {
    .hw-collection-tabs-panel__grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 24px 24px;
    }
  }

  /* Shown by applyTabFilters() (client-side, see the script above) in
     place of the product cards when a filtered Apply comes back with zero
     results - mirrors the real collection page's own
     .main-collection-grid__empty treatment for the same case, just scoped
     to one tab's grid instead of a whole page. */
  .hw-collection-tabs-panel__grid-empty {
    grid-column: 1 / -1;
    padding-block: 32px;
    text-align: center;
    color: var(--color-foreground-secondary, rgba(0, 0, 0, 0.6));
  }

  .hw-collection-tabs-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-foreground-secondary, rgba(0, 0, 0, 0.6));
    margin-bottom: 12px;
  }

  .hw-collection-tabs-breadcrumb a {
    color: inherit;
    text-decoration: none;
  }

  .hw-collection-tabs-breadcrumb a:hover {
    text-decoration: underline;
  }

  .hw-collection-tabs-breadcrumb__sep {
    color: var(--color-foreground-secondary, rgba(0, 0, 0, 0.4));
  }

  .hw-collection-tabs-panel__shop-all {
    display: flex;
    justify-content: center;
    margin-top: 24px;
  }
/* END_SECTION:hw-collection-tabs-cards */

/* START_SECTION:hw-expanding-cards (INDEX:25) */
.hw-expanding-cards-section__inner {
    display: flex;
    flex-direction: column;
    /* No flex gap — empty Shopify-wrapped header/footer slots would still
       reserve strips. Spacing is margin on slots that actually have content. */
    gap: 0;
    width: 100%;
  }

  .hw-expanding-cards__header:has(.hw-expanding-cards__header-inner *) {
    margin-block-end: var(--padding-md, 1rem);
  }

  .hw-expanding-cards__footer:has(.hw-expanding-cards__footer-inner *) {
    margin-block-start: var(--padding-md, 1rem);
  }

  /* Shopify wraps blocks, so the inner is rarely a direct child of the slot. */
  .hw-expanding-cards__header:not(:has(.hw-expanding-cards__header-inner *)),
  .hw-expanding-cards__footer:not(:has(.hw-expanding-cards__footer-inner *)) {
    display: none;
  }

  /* Full-width sections span the viewport; keep header/footer on the normal
     page gutter so copy lines up with other page-width content while the
     card track stays edge-to-edge. Page-width sections already sit in the
     center grid column — do not double the inset there. */
  .section--full-width .hw-expanding-cards__header,
  .section--full-width .hw-expanding-cards__footer {
    padding-inline: var(--util-page-margin-offset, var(--page-margin, 16px));
    box-sizing: border-box;
  }

  .hw-expanding-cards {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
  }

  .hw-expanding-cards__track {
    display: flex;
    width: 100%;
    height: var(--hw-ec-desktop-height, 560px);
    overflow: hidden;
    /* Match card chrome so any mid-transition flex remainder is not a white flash. */
    background: rgb(var(--color-foreground-rgb, 26 26 25) / 1);
  }

  .hw-expanding-cards__card {
    position: relative;
    overflow: hidden;
    /* flex-grow + basis 0 keeps the track filled even if every card briefly
       shares the inactive factor — percentage `width` left a white gap. */
    flex: var(--hw-ec-inactive-grow, 1) 0 0%;
    width: auto;
    min-width: 0;
    height: 100%;
    background: rgb(var(--color-foreground-rgb, 26 26 25) / 1);
    color: var(--color-foreground);
    cursor: pointer;
    transition: flex-grow var(--hw-ec-transition, 650ms) cubic-bezier(0.77, 0, 0.175, 1);
  }

  .hw-expanding-cards__card.is-active {
    flex-grow: var(--hw-ec-active-grow, 2);
  }

  .hw-expanding-cards__card:focus-visible {
    outline: 0.2rem solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.5);
    outline-offset: -0.2rem;
    z-index: var(--layer-raised, 2);
  }

  .hw-expanding-cards__media {
    position: absolute;
    inset: 0;
    z-index: var(--layer-base, 0);
  }

  .hw-expanding-cards__img,
  .hw-expanding-cards__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .hw-expanding-cards__overlay-shell {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat, 1);
    pointer-events: none;
  }

  .hw-expanding-cards__stretch-link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-raised, 2);
    pointer-events: none;
  }

  .hw-expanding-cards__card.is-active .hw-expanding-cards__stretch-link {
    pointer-events: auto;
  }

  .hw-expanding-cards__content {
    position: absolute;
    inset: 0;
    z-index: var(--layer-heightened, 3);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    min-width: 0;
    pointer-events: none;
    /* Keep content over media; optional card background_color only sets tokens. */
    background-color: transparent;
    /* Photo-readable defaults; card text_color via color-style overrides tokens. */
    --color-foreground: #ffffff;
    --color-foreground-heading: #ffffff;
    --color-foreground-rgb: 255 255 255;
    color: var(--color-foreground);
  }

  /* Desktop layout tokens from hw-layout-panel-style (same as hw-group panel). */
  @media screen and (min-width: 750px) {
    .hw-expanding-cards__content.layout-panel-flex[data-hw-desktop-layout='row'] {
      flex-flow: row var(--hw-group-flex-wrap-desktop, nowrap);
      flex-direction: row;
      justify-content: var(--hw-group-horizontal-desktop);
      align-items: var(--hw-group-vertical-desktop);
      gap: var(--hw-group-gap-desktop, var(--gap));
    }

    .hw-expanding-cards__content.layout-panel-flex[data-hw-desktop-layout='column'] {
      flex-flow: column nowrap;
      flex-direction: column;
      align-items: var(--hw-group-horizontal-desktop);
      justify-content: var(--hw-group-vertical-desktop);
      gap: var(--hw-group-gap-desktop, var(--gap));
    }
  }

  .hw-expanding-cards__content > * {
    pointer-events: auto;
  }

  .hw-expanding-cards__card:not(.is-active) .hw-expanding-cards__content > *:not(:first-child) {
    opacity: 0;
    max-height: 0;
    margin: 0;
    overflow: hidden;
    transition:
      max-height 0.5s linear,
      opacity 0.5s linear,
      margin 0.5s linear;
    pointer-events: none;
  }

  .hw-expanding-cards__card.is-active .hw-expanding-cards__content > *:not(:first-child) {
    opacity: 1;
    max-height: 4rem;
    transition:
      max-height 0.5s linear,
      opacity 0.5s linear,
      margin 0.5s linear;
  }

  .hw-expanding-cards__progress {
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    z-index: var(--layer-heightened, 4);
    height: 3px;
    width: 0%;
    opacity: 0;
    background: rgb(var(--color-background-rgb, 255 255 255) / 0.9);
    pointer-events: none;
  }

  .hw-expanding-cards__card.is-active .hw-expanding-cards__progress.is-running {
    opacity: 1;
    animation: hw-ec-progress var(--hw-ec-autoplay-ms, 5000ms) linear forwards;
  }

  .hw-expanding-cards__pause {
    position: absolute;
    z-index: var(--layer-heightened, 5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--hw-ec-pause-size, 32px);
    height: var(--hw-ec-pause-size, 32px);
    padding: 0;
    border-radius: 999px;
    background: rgb(var(--color-background-rgb, 255 255 255) / 0.92);
    color: rgb(var(--color-foreground-rgb, 26 26 25) / 1);
    border: 1px solid rgb(var(--color-foreground-rgb, 26 26 25) / 0.2);
    box-shadow: 0 1px 4px rgb(var(--color-foreground-rgb, 26 26 25) / 0.12);
    cursor: pointer;
    transition:
      background 0.15s ease,
      color 0.15s ease,
      transform 0.15s ease,
      box-shadow 0.15s ease;
  }

  .hw-expanding-cards__pause--top-right {
    inset-block-start: 0.75rem;
    inset-inline-end: 0.75rem;
  }

  .hw-expanding-cards__pause--top-left {
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
  }

  .hw-expanding-cards__pause--bottom-right {
    inset-block-end: 0.75rem;
    inset-inline-end: 0.75rem;
  }

  .hw-expanding-cards__pause--bottom-left {
    inset-block-end: 0.75rem;
    inset-inline-start: 0.75rem;
  }

  /* Two classes + :hover so this beats base.css's
     `.button-unstyled:hover { background-color: inherit }`. */
  .hw-expanding-cards__pause.button-unstyled:hover {
    background-color: rgb(var(--color-foreground-rgb, 26 26 25) / 1);
    color: rgb(var(--color-background-rgb, 255 255 255) / 1);
    transform: scale(1.06);
    box-shadow: 0 2px 6px rgb(var(--color-foreground-rgb, 26 26 25) / 0.18);
  }

  .hw-expanding-cards__pause:focus-visible {
    outline: 0.2rem solid rgb(var(--color-foreground-rgb, 0 0 0) / 0.5);
    outline-offset: 0.2rem;
  }

  .hw-expanding-cards__pause-icon {
    display: inline-flex;
    width: 58%;
    height: 58%;
  }

  /* Class display:inline-flex beats the UA [hidden] rule — force hide. */
  .hw-expanding-cards__pause-icon[hidden] {
    display: none;
  }

  .hw-expanding-cards__pause-icon svg {
    width: 100%;
    height: 100%;
  }

  @keyframes hw-ec-progress {
    from {
      width: 0%;
    }

    to {
      width: 100%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hw-expanding-cards__card {
      transition: none;
    }

    .hw-expanding-cards__card:not(.is-active) .hw-expanding-cards__content > *:not(:first-child),
    .hw-expanding-cards__card.is-active .hw-expanding-cards__content > *:not(:first-child) {
      transition: none;
    }

    .hw-expanding-cards__card.is-active .hw-expanding-cards__progress.is-running {
      animation: none;
      width: 100%;
    }
  }

  @media screen and (max-width: 749px) {
    /* Native scroll-snap owns paging on mobile so touch, trackpad, keyboard
       and programmatic autoplay all share one scroll position. */
    .hw-expanding-cards__track {
      height: auto;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
    }

    .hw-expanding-cards__track::-webkit-scrollbar {
      display: none;
    }

    .hw-expanding-cards__card,
    .hw-expanding-cards__card.is-active {
      flex: 0 0 var(--hw-ec-peek-width, 90%);
      width: var(--hw-ec-peek-width, 90%);
      height: auto;
      aspect-ratio: 1 / 1;
      scroll-snap-align: start;
      transition: none;
      cursor: default;
    }

    .hw-expanding-cards__card:not(.is-active) .hw-expanding-cards__content > *:not(:first-child),
    .hw-expanding-cards__card.is-active .hw-expanding-cards__content > *:not(:first-child) {
      opacity: 1;
      max-height: none;
      overflow: visible;
      transition: none;
      pointer-events: auto;
    }

    .hw-expanding-cards__stretch-link {
      pointer-events: auto;
    }
  }
/* END_SECTION:hw-expanding-cards */

/* START_SECTION:hw-fade-slider (INDEX:26) */
.hw-fade-slider {
    position: relative;
    overflow: visible;
  }

  .hw-fade-slider__bg-image {
    position: absolute;
    z-index: 0;
    width: var(--hw-fade-slider-bg-image-width, 50%);
    opacity: var(--hw-fade-slider-bg-image-opacity, 1);
  }

  .hw-fade-slider__bg-image-el {
    display: block;
    width: 100%;
    height: auto;
    transform: rotate(var(--hw-fade-slider-bg-image-rotation, 0deg));
  }

  .hw-fade-slider__bg-image--top-left,
  .hw-fade-slider__bg-image-mobile--top-left {
    top: var(--hw-fade-slider-bg-offset-top, 0px);
    left: var(--hw-fade-slider-bg-offset-left, 0px);
  }

  .hw-fade-slider__bg-image--top-right,
  .hw-fade-slider__bg-image-mobile--top-right {
    top: var(--hw-fade-slider-bg-offset-top, 0px);
    right: var(--hw-fade-slider-bg-offset-right, 0px);
  }

  .hw-fade-slider__bg-image--top-center,
  .hw-fade-slider__bg-image-mobile--top-center {
    top: var(--hw-fade-slider-bg-offset-top, 0px);
    left: calc(50% + var(--hw-fade-slider-bg-offset-left, 0px));
    transform: translateX(-50%);
  }

  .hw-fade-slider__bg-image--bottom-left,
  .hw-fade-slider__bg-image-mobile--bottom-left {
    bottom: var(--hw-fade-slider-bg-offset-bottom, 0px);
    left: var(--hw-fade-slider-bg-offset-left, 0px);
  }

  .hw-fade-slider__bg-image--bottom-right,
  .hw-fade-slider__bg-image-mobile--bottom-right {
    bottom: var(--hw-fade-slider-bg-offset-bottom, 0px);
    right: var(--hw-fade-slider-bg-offset-right, 0px);
  }

  .hw-fade-slider__bg-image--center,
  .hw-fade-slider__bg-image-mobile--center {
    top: calc(50% + var(--hw-fade-slider-bg-offset-top, 0px));
    left: calc(50% + var(--hw-fade-slider-bg-offset-left, 0px));
    transform: translate(-50%, -50%);
  }

  @media screen and (min-width: 750px) {
    .hw-fade-slider__bg-image {
      width: var(--hw-fade-slider-bg-image-width-desktop, var(--hw-fade-slider-bg-image-width, 50%));
    }

    .hw-fade-slider .hw-fade-slider__bg-image-desktop--top-left {
      top: var(--hw-fade-slider-bg-offset-top-desktop, var(--hw-fade-slider-bg-offset-top, 0px));
      left: var(--hw-fade-slider-bg-offset-left-desktop, var(--hw-fade-slider-bg-offset-left, 0px));
      right: auto; bottom: auto; transform: none;
    }

    .hw-fade-slider .hw-fade-slider__bg-image-desktop--top-right {
      top: var(--hw-fade-slider-bg-offset-top-desktop, var(--hw-fade-slider-bg-offset-top, 0px));
      right: var(--hw-fade-slider-bg-offset-right-desktop, var(--hw-fade-slider-bg-offset-right, 0px));
      left: auto; bottom: auto; transform: none;
    }

    .hw-fade-slider .hw-fade-slider__bg-image-desktop--top-center {
      top: var(--hw-fade-slider-bg-offset-top-desktop, var(--hw-fade-slider-bg-offset-top, 0px));
      left: calc(50% + var(--hw-fade-slider-bg-offset-left-desktop, var(--hw-fade-slider-bg-offset-left, 0px)));
      right: auto; bottom: auto; transform: translateX(-50%);
    }

    .hw-fade-slider .hw-fade-slider__bg-image-desktop--bottom-left {
      bottom: var(--hw-fade-slider-bg-offset-bottom-desktop, var(--hw-fade-slider-bg-offset-bottom, 0px));
      left: var(--hw-fade-slider-bg-offset-left-desktop, var(--hw-fade-slider-bg-offset-left, 0px));
      top: auto; right: auto; transform: none;
    }

    .hw-fade-slider .hw-fade-slider__bg-image-desktop--bottom-right {
      bottom: var(--hw-fade-slider-bg-offset-bottom-desktop, var(--hw-fade-slider-bg-offset-bottom, 0px));
      right: var(--hw-fade-slider-bg-offset-right-desktop, var(--hw-fade-slider-bg-offset-right, 0px));
      top: auto; left: auto; transform: none;
    }

    .hw-fade-slider .hw-fade-slider__bg-image-desktop--center {
      top: calc(50% + var(--hw-fade-slider-bg-offset-top-desktop, var(--hw-fade-slider-bg-offset-top, 0px)));
      left: calc(50% + var(--hw-fade-slider-bg-offset-left-desktop, var(--hw-fade-slider-bg-offset-left, 0px)));
      right: auto; bottom: auto; transform: translate(-50%, -50%);
    }
  }
/* END_SECTION:hw-fade-slider */

/* START_SECTION:hw-footer-utilities (INDEX:31) */
.hw-footer-utilities .utilities {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-wrap: wrap;
    border-top: var(--border-width) solid var(--color-border);
    color: var(--color-foreground-muted);
  }

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

  .hw-footer-utilities .utilities > * {
    text-align: left;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
  }

  .hw-footer-utilities__inner--flex {
    display: flex;
    flex-direction: var(--hw-fu-fd, column);
    flex-wrap: var(--hw-fu-fw, nowrap);
    justify-content: var(--hw-fu-jc, flex-start);
    align-items: var(--hw-fu-ai, flex-start);
    gap: var(--hw-fu-gg, 12px);
    min-width: 0;
    width: 100%;
  }

  @media screen and (min-width: 750px) {
    .hw-footer-utilities__inner--flex {
      flex-direction: var(--hw-fu-fd-d, var(--hw-fu-fd, column));
      flex-wrap: var(--hw-fu-fw-d, var(--hw-fu-fw, nowrap));
      justify-content: var(--hw-fu-jc-d, var(--hw-fu-jc, flex-start));
      align-items: var(--hw-fu-ai-d, var(--hw-fu-ai, flex-start));
      gap: var(--hw-fu-gg-d, var(--hw-fu-gg, 12px));
    }
  }

  .hw-footer-utilities__inner--grid {
    display: grid;
    grid-template-columns: repeat(
      var(--hw-fu-gc, 1),
      minmax(0, 1fr)
    );
    gap: var(--hw-fu-gg, 12px);
    min-width: 0;
    width: 100%;
  }

  .hw-footer-utilities__inner.hw-footer-utilities__inner--border-top {
    border-block-start-style: solid;
    border-block-start-color: var(--color-border);
  }

  .hw-footer-utilities__inner.hw-footer-utilities__inner--border-top.hw-footer-utilities__inner--border-top-all {
    border-block-start-width: var(--hw-fu-inner-border-top-width, 1px);
  }

  .hw-footer-utilities__inner.hw-footer-utilities__inner--border-top.hw-footer-utilities__inner--border-top-mobile {
    border-block-start-width: var(--hw-fu-inner-border-top-width, 1px);
  }

  @media screen and (min-width: 750px) {
    .hw-footer-utilities__inner.hw-footer-utilities__inner--border-top.hw-footer-utilities__inner--border-top-mobile {
      border-block-start-width: 0;
    }
  }

  .hw-footer-utilities__inner.hw-footer-utilities__inner--border-top.hw-footer-utilities__inner--border-top-desktop {
    border-block-start-width: 0;
  }

  @media screen and (min-width: 750px) {
    .hw-footer-utilities__inner.hw-footer-utilities__inner--border-top.hw-footer-utilities__inner--border-top-desktop {
      border-block-start-width: var(--hw-fu-inner-border-top-width, 1px);
    }
  }

  @media screen and (min-width: 750px) {
    .hw-footer-utilities__inner--grid {
      grid-template-columns: repeat(
        var(--hw-fu-gc-d, var(--hw-fu-gc, 1)),
        minmax(0, 1fr)
      );
      gap: var(--hw-fu-gg-d, var(--hw-fu-gg, 12px));
    }
  }
/* END_SECTION:hw-footer-utilities */

/* START_SECTION:hw-header (INDEX:35) */
/*
   * Paint open-menu border/shadow on the outermost visible panel per type,
   * not `.menu-list__submenu-inner` (larger than a plain card; covered by
   * the grid fill; and for grid the overflow wrapper is 100dvh so the edge
   * sat on the viewport fold). Vars stay on #header-component.
   *
   * Mega menu (grid) is the exception: the wrapper sits inside a scroll
   * box. Chromium clips an element's own box-shadow when that element
   * has overflow:auto, so `--hw-menu-shadow` paints on the fixed submenu
   * (`overflow: visible`) and the inner is the scrollport.
   */
  #header-component .hw-dropdown-menu__wrapper:not(.hw-dropdown-menu__wrapper--grid) {
    background-color: var(--color-submenu, var(--color-background));
    box-shadow: var(--hw-menu-shadow, none);
    border-bottom: var(--hw-menu-border, none);
  }

  #header-component .mega-menu {
    background-color: var(--color-submenu, var(--color-background));
    box-shadow: var(--hw-menu-shadow, none);
    border-bottom: var(--hw-menu-border, none);
    /*
     * Flush-under-header panels: keep side/bottom shadow, clip the upward
     * blur that otherwise sits on the nav row. Negative inset is the
     * merchant offset+blur (--hw-menu-shadow-outset).
     */
    clip-path: inset(
      0 calc(-1 * var(--hw-menu-shadow-outset, 40px))
        calc(-1 * var(--hw-menu-shadow-outset, 40px))
        calc(-1 * var(--hw-menu-shadow-outset, 40px))
    ); /* stylelint-disable-line */
  }

  #header-component .hw-dropdown-menu__wrapper--grid {
    background-color: var(--color-submenu, var(--color-background));
    border-bottom: var(--hw-menu-border, none);
  }

  #header-component .header-menu .hw-nav-item__anchor .hw-dropdown-submenu[data-mega-target] {
    box-shadow: var(--hw-menu-shadow, none);
  }

  /*
   * "Hug" width: the shadow has to move off the fixed submenu and onto the card.
   * That submenu is always the full nav-row width, so leaving the shadow there
   * painted a full-width slab around the hugged card — the panel still read as
   * edge-to-edge even once its own box shrank. Background already lives on the
   * wrapper (rule above), so only the shadow needed relocating.
   */
  #header-component
    .header-menu[data-hw-grid-width='hug']
    .hw-nav-item__anchor
    .hw-dropdown-submenu[data-mega-target] {
    box-shadow: none;
  }

  #header-component .header-menu[data-hw-grid-width='hug'] .hw-dropdown-menu__wrapper--grid {
    box-shadow: var(--hw-menu-shadow, none);
  }

  /*
   * Showcase inner is a Horizon scroll box (`overflow-y: auto`). A child
   * box-shadow / border-bottom was either clipped or extended the scroll
   * height, which read as a second bar under the products. The panel is
   * content-tall, so let chrome paint outside it.
   */
  #header-component
    .menu-list__submenu[data-submenu-type='mega_menu']
    > .menu-list__submenu-inner {
    overflow: visible;
    background-color: transparent;
  }

  .hw-menu-backdrop {
    position: fixed;
    /*
     * `#header-component` uses `contain: layout`, so `position: fixed` is
     * positioned against the header box, not the viewport. `bottom: 0` would
     * collapse this to ~0 height (top ≈ header bottom). Use host-relative top
     * plus remaining viewport height so the dim paints over the page below.
     */
    top: var(--hw-submenu-top, var(0, 80px));
    right: 0;
    bottom: auto;
    left: 0;
    height: calc(100dvh - var(--hw-submenu-viewport-top, var(--header-height, 80px)));
    /*
     * Stay behind the open panel (positive --layer-header-menu) but remain
     * inside #header-component's stacking context so the dim still covers
     * the page. `layer-header-menu - 1` painted ON TOP of the mega panel
     * because the panel is z-index auto.
     */
    z-index: 0;
    background: var(--hw-menu-overlay-color, rgb(0 0 0 / 0.4));
    backdrop-filter: blur(var(--hw-menu-overlay-blur, 6px));
    -webkit-backdrop-filter: blur(var(--hw-menu-overlay-blur, 6px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--animation-speed, 150ms) var(--animation-easing, ease),
      visibility var(--animation-speed, 150ms) var(--animation-easing, ease);
  }

  .hw-menu-backdrop.is-open {
    opacity: 1;
    visibility: visible;
  }

  /*
   * "Header and page" coverage: the dim starts at the top of <header-component>
   * instead of below the nav row, so whatever shows through the header — the hero
   * behind a transparent header, the underlay behind an opaque one — is covered by
   * the same scrim as the page below it, with no bright band across the header.
   *
   * `top` is host-relative: #header-component has `contain: layout`, so it is the
   * containing block for this fixed element and 0 is the header's own top edge.
   * The height cannot use that same 0 — it has to be measured in VIEWPORT terms, and
   * the header is not always flush with the viewport top (announcement bar, unscrolled
   * page). The header's viewport offset is the difference between the two anchor vars
   * header-menu.js already publishes off one shared rect: --hw-submenu-viewport-top is
   * the nav row's bottom in viewport coordinates, --hw-submenu-top is that same edge in
   * host coordinates, so viewport-top minus host-top is exactly the host's own offset.
   * Both fall back to --header-height, which cancels to 0 and leaves a full 100dvh
   * before JS has run.
   *
   * z-index stays 0 deliberately. That is above the underlays (--layer-lowest) so what
   * the header paints or lets through is dimmed, and below the row, which is raised to
   * --layer-heightened while a submenu is open — so the logo, nav links and icons stay
   * legible on top of the scrim, and the open panel (--layer-header-menu, inside that
   * raised row) stays clear of it.
   */
  [data-hw-menu-overlay-coverage='full'] .hw-menu-backdrop {
    top: 0;
    height: calc(
      100dvh -
        (
          var(--hw-submenu-viewport-top, var(--header-height, 80px)) -
            var(--hw-submenu-top, var(--header-height, 80px))
        )
    );
  }


  #header-component .header__columns {
    --padding-block-start: var(--hw-header-row-padding-block-start, var(--header-padding));
    --padding-block-end: var(--hw-header-row-padding-block-end, var(--header-padding));
  }

  /*
   * Space between the items inside one bookend — logo / menu / search field /
   * region / action links. hw-header.css sets this from --gap-xl on each column;
   * the section setting overrides it only when above 0 (id selector, so it beats
   * that class rule), which keeps an unset header rendering exactly as before.
   * Utilities have their own tighter gap inside the action links block.
   */
  #header-component .header__column {
    column-gap: var(--hw-header-column-gap, var(--gap-xl));
  }

  @media screen and (min-width: 750px) {
    #header-component[data-hw-override-header-padding-desktop] .header__columns {
      --padding-block-start: var(
        --hw-header-row-padding-block-start-desktop,
        var(--hw-header-row-padding-block-start, var(--header-padding))
      );
      --padding-block-end: var(
        --hw-header-row-padding-block-end-desktop,
        var(--hw-header-row-padding-block-end, var(--header-padding))
      );
    }
  }

  /*
   * Page-level transparent header: keep the row and closed underlay clear over the hero.
   * (A translucent row colour alone also sets data-transparent-rows when that checkbox is off.)
   */
  /*
   * Orphan transparent attribute (no data-hw-transparent-header): keep row opaque on
   * first paint until sanitize scripts run — avoids transparent flash when toggles are off.
   */
  #header-component[transparent]:not([data-hw-transparent-header]) .header__row--top,
  #header-component[transparent]:not([data-hw-transparent-header]) .header__underlay-closed {
    background-color: var(--color-background);
  }

  #header-component[transparent]:not([data-sticky-state='active']):is(
      [data-hw-transparent-header]
    )
    .header__row--top {
    background-color: transparent;
  }

  #header-component[transparent]:not([data-sticky-state='active'])[data-hw-transparent-header]
    .header__underlay-closed {
    background: none;
  }

  /*
   * Transparent header: section wrapper collapses to 0px because HEADER-COMPONENT is
   * position:absolute. This is intentional — calculateHeaderGroupHeight() in utilities.js
   * already uses Math.max(element.offsetHeight, header.offsetHeight) for the transparent
   * case, so --header-group-height stays correct even when the wrapper has no in-flow height.
   * Do NOT add min-height here: it adds px to the layout without adding to
   * --header-group-flow-height, which shifts the hero landing position and causes a visible
   * white gap between the announcement bar and the hero.
   */
  #header-group > .header-section:has(> #header-component[transparent]) {
    /*
     * Do NOT set position: relative here — its specificity (2,2,0) beats the sticky rule
     * in hw-header.css (1,3,0), preventing position: sticky from ever applying.
     * hw-header.css already sets .header-section { position: relative } at (0,1,0),
     * which the sticky rule can correctly override.
     */
    background-color: transparent;
  }

  /*
   * base.css pulls the first main section under the header group. When an opaque
   * section (e.g. HW Section starter) precedes the hero, that shows as a solid bar.
   * Pull the first hero instead; --hw-transparent-hero-pull is the sum of preceding
   * main section heights (not hero.offsetTop — that loops with negative margin).
   */
  body:has(#header-component[data-hw-transparent-header])
    .content-for-layout
    > .shopify-section:first-child:not(.hw-hero-wrapper):not(.slideshow-section) {
    margin-top: 0;
  }

  body:has(#header-component[data-hw-transparent-header])
    .content-for-layout
    [data-hw-transparent-pull-target] {
    margin-top: calc(
      (var(--hw-transparent-hero-pull, 0px) + var(--header-group-height, 0px)) * -1
    );
  }

  /* HW Header — mobile/tablet grid below the configurable desktop menu
     breakpoint (menu_breakpoint setting). Gated on the JS-set data-menu-style
     attribute rather than a fixed @media condition, since Liquid output can't
     be interpolated into an @media condition inside {% stylesheet %} — see
     Dev Notes -> shopify-liquid-limitations.md. */
    #header-component[data-menu-style='drawer']:has([data-hw-menu-layout='block-nav']) .header__column {
      display: contents;
    }

    #header-component[data-menu-style='drawer']:has([data-hw-menu-layout='block-nav']) .header__columns {
      overflow: visible;
      padding-inline: var(--padding-sm);
    }

    #header-component[data-menu-style='drawer']:has([data-hw-menu-layout='block-nav']) .header-logo {
      grid-area: var(--hw-header-logo-mobile-area, center);
      justify-self: center;
    }

    #header-component[data-menu-style='drawer']:has([data-hw-menu-layout='block-nav']) .header__drawer {
      grid-area: var(--hw-header-menu-mobile-area, leftA);
      justify-self: start;
    }

    #header-component[data-menu-style='drawer']:has([data-hw-menu-layout='block-nav'])[data-hw-menu-mobile='leftA']
      .header__drawer {
      justify-self: start;
    }

    #header-component[data-menu-style='drawer']:has([data-hw-menu-layout='block-nav'])[data-hw-menu-mobile='rightB']
      .header__drawer {
      justify-self: end;
    }

    #header-component[data-menu-style='drawer']:has([data-hw-menu-layout='block-nav']):is(
        [data-hw-actions-mobile='leftA'],
        [data-hw-actions-mobile='leftB'],
        [data-hw-actions-mobile='center'],
        [data-hw-actions-mobile='rightA'],
        [data-hw-actions-mobile='rightB']
      )
      .hw-header__utilities {
      display: flex;
      align-items: center;
      grid-area: var(--hw-header-actions-mobile-area, rightB);
      min-width: 0;
    }

    #header-component[data-menu-style='drawer']:has([data-hw-menu-layout='block-nav'])[data-hw-actions-mobile='leftA']
      .hw-header__utilities {
      grid-area: leftA;
    }

    #header-component[data-menu-style='drawer']:has([data-hw-menu-layout='block-nav'])[data-hw-actions-mobile='rightB']
      .hw-header__utilities {
      grid-area: rightB;
    }

    #header-component[data-menu-style='drawer']:has([data-hw-menu-layout='block-nav'])[data-hw-actions-mobile='rightB']:not(
        [data-hw-menu-mobile='rightB']
      )
      .hw-header__utilities {
      grid-column: rightA / -1;
      justify-self: stretch;
    }

    #header-component[data-menu-style='drawer']:has([data-hw-menu-layout='block-nav']):is(
        [data-hw-actions-mobile='leftA'],
        [data-hw-actions-mobile='leftB']
      )
      .hw-header__utilities {
      justify-self: start;
    }

    #header-component[data-menu-style='drawer']:has([data-hw-menu-layout='block-nav']):is(
        [data-hw-actions-mobile='rightA'],
        [data-hw-actions-mobile='rightB']
      )
      .hw-header__utilities {
      justify-content: flex-end;
      justify-self: end;
    }

    #header-component[data-menu-style='drawer']:has([data-hw-menu-layout='block-nav'])[data-hw-actions-mobile='rightB']:not(
        [data-hw-menu-mobile='rightB']
      )
      .hw-header__utilities-list {
      margin-inline-start: auto;
    }

    #header-component[data-menu-style='drawer']:has([data-hw-menu-layout='block-nav'])[data-hw-actions-mobile='center']
      .hw-header__utilities {
      justify-self: center;
    }

    #header-component[data-menu-style='drawer']:has([data-hw-menu-layout='block-nav']) :is(.header-menu, .dropdown-localization) {
      display: none;
    }
  #header-component[data-menu-style='menu']:has([data-hw-menu-layout='block-nav'])
    :is(.header-menu, .dropdown-localization) {
    display: flex;
  }

  #header-component[data-menu-style='drawer']:has([data-hw-menu-layout='block-nav']) .header-logo {
    grid-area: var(--hw-header-logo-mobile-area, center);
  }

  #header-component[data-menu-style='drawer']:has([data-hw-menu-layout='block-nav']) .header__drawer {
    grid-area: var(--hw-header-menu-mobile-area, leftA);
  }

  #header-component[data-menu-style='drawer']:has([data-hw-menu-layout='block-nav']):is(
      [data-hw-actions-mobile='leftA'],
      [data-hw-actions-mobile='leftB'],
      [data-hw-actions-mobile='center'],
      [data-hw-actions-mobile='rightA'],
      [data-hw-actions-mobile='rightB']
    )
    .hw-header__utilities {
    display: flex;
    align-items: center;
    grid-area: var(--hw-header-actions-mobile-area, rightB);
  }
/* END_SECTION:hw-header */

/* START_SECTION:hw-hero-cards (INDEX:36) */
.hw-hero-cards__row {
    /* Positioning context for a section-level hw-group-overlay, which pins itself
       to the nearest positioned ancestor. */
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--hw-hero-cards-gap, 0);
    width: 100%;
  }

  /*
   * Mobile default: one card per row. flex-grow is there so a card always fills
   * the row it lands on.
   */
  .hw-hero-cards__row > .hw-hero-card {
    flex: 1 1 100%;
    max-width: 100%;
  }

  /*
   * Two cards per row on mobile. The pair splits the row evenly, and an odd last
   * card grows to full width: on a full row the two bases already add up to 100%
   * so there is nothing to grow into, while a card left alone on the last row has
   * the rest of the row as free space and takes it.
   */
  .hw-hero-cards__row--mobile-pair > .hw-hero-card {
    flex: 1 1 calc((100% - var(--hw-hero-cards-gap, 0px)) / 2);
  }

  /*
   * Width: the root .section defines --full-page-grid-central-column-width
   * (base.css), so the row uses the same centre column as .section--page-width > *
   * — matching hw-hero's .hw-hero__content-inner.page-width.
   */
  .hw-hero-cards__row.page-width {
    box-sizing: border-box;
    max-width: var(--full-page-grid-central-column-width);
    margin-inline: auto;
  }

  .hw-hero-cards__row.full-width {
    box-sizing: border-box;
    max-width: none;
  }

  @media screen and (min-width: 750px) {
    .hw-hero-cards__row {
      gap: var(--hw-hero-cards-gap-desktop, 0);
    }

    /*
     * Desktop: every card takes an equal share of the single row, whatever the
     * count — a zero basis plus equal grow is 100%/N without anyone counting,
     * and the row's gap comes off the top before the split. Overrides the mobile
     * pair rule, so Two cards per row stays a small-screen setting.
     */
    .hw-hero-cards__row > .hw-hero-card,
    .hw-hero-cards__row--mobile-pair > .hw-hero-card {
      flex: 1 1 0;
      max-width: 100%;
    }
  }
/* END_SECTION:hw-hero-cards */

/* START_SECTION:hw-hero-slideshow (INDEX:37) */
.hw-hero-slideshow slideshow-component {
    display: block;
    position: relative;
    width: 100%;
  }

  .hw-hero-slideshow slideshow-container,
  .hw-hero-slideshow slideshow-slides {
    width: 100%;
  }

  .hw-hero-slideshow slideshow-slide.hw-hero-slide {
    width: 100%;
    max-height: none;
    height: auto;
  }

  /* The control wrappers span the whole media, so they must never paint a
     background — only their own icon colour applies. Each falls back to the
     inherited section foreground when the merchant leaves its picker blank. */
  .hw-hero-slideshow .hw-hero-slideshow__arrows {
    background-color: transparent;
    color: var(--hw-hero-arrow-icon, var(--color-foreground));
  }

  .hw-hero-slideshow .hw-hero-slideshow__pagination {
    background-color: transparent;
    color: var(--hw-hero-pagination-icon, var(--color-foreground));
    position: absolute;
    inset-inline: 0;
    bottom: var(--padding-sm, 0.75rem);
    z-index: var(--layer-heightened);
    width: 100%;
    pointer-events: none;
    mix-blend-mode: normal;
  }

  .hw-hero-slideshow .hw-hero-slideshow__pagination[pagination-position='left'] {
    padding-inline-start: var(--hw-hero-arrow-inset, 16px);
  }

  .hw-hero-slideshow .hw-hero-slideshow__pagination[pagination-position='right'] {
    padding-inline-end: var(--hw-hero-arrow-inset, 16px);
  }

  .hw-hero-slideshow .hw-hero-slideshow__pagination > * {
    pointer-events: auto;
  }

  .hw-hero-slideshow .hw-hero-slideshow__arrows {
    z-index: var(--layer-heightened);
    padding-inline: var(--hw-hero-arrow-inset, 16px);
    mix-blend-mode: normal;
  }

  /* Base slideshows reveal arrows on hover only; a hero keeps them visible so
     the chosen style and colour are usable on touch devices too. */
  .hw-hero-slideshow .hw-hero-slideshow__arrows .slideshow-control {
    color: var(--hw-hero-arrow-icon, var(--color-foreground));
    opacity: 1;
  }

  .hw-hero-slideshow
    .hw-hero-slideshow__arrows
    .slideshow-control.slideshow-control--shape-square,
  .hw-hero-slideshow
    .hw-hero-slideshow__arrows
    .slideshow-control.slideshow-control--shape-circle {
    background-color: var(--hw-hero-arrow-bg, var(--color-primary-button-background));
    color: var(--hw-hero-arrow-icon, var(--color-primary-button-text));
  }

  .hw-hero-slideshow .hw-hero-slideshow__pagination .slideshow-controls__dots {
    gap: var(--hw-hero-pagination-gap, 10px);
  }

  .hw-hero-slideshow .hw-hero-slideshow__pagination .slideshow-controls__dots button {
    --size: var(--hw-hero-pagination-dot-size, 9px);
  }

  .hw-hero-slideshow__inner {
    position: relative;
  }

  /* Frame values are minimums; in-flow content can make a slide taller. */
  .hw-hero-slideshow .hw-hero__ratio-box.hw-hero__frame-m--vh {
    height: auto;
    min-height: var(--hw-hero-frame-mobile, 100vh);
    padding-top: 0;
  }

  .hw-hero-slideshow .hw-hero__ratio-box.hw-hero__frame-m--px {
    height: auto;
    min-height: var(--hw-hero-frame-mobile, 480px);
    padding-top: 0;
  }

  .hw-hero-slideshow .hw-hero__content {
    position: relative;
    inset: auto;
    height: 100%;
    min-height: inherit;
  }

  .hw-hero-slideshow .hw-hero__content-inner {
    height: 100%;
    min-height: inherit;
  }

  /* The frame is content-sized (min-height only), so `height: 100%` on
     .group-block-content resolves to auto and its vertical alignment has no
     space to work with. Stretch the panel with flex instead. */
  .hw-hero-slideshow .hw-hero__content-inner > .group-block {
    display: flex;
    flex-direction: column;
  }

  .hw-hero-slideshow .hw-hero__content-inner > .group-block > .group-block-content {
    flex: 1 1 auto;
    min-height: 0;
  }

  @media screen and (min-width: 750px) {
    .hw-hero-slideshow .hw-hero__ratio-box.hw-hero__frame-d--vh {
      height: auto;
      min-height: var(--hw-hero-frame-desktop, 70vh);
      padding-top: 0;
    }

    .hw-hero-slideshow .hw-hero__ratio-box.hw-hero__frame-d--px {
      height: auto;
      min-height: var(--hw-hero-frame-desktop, 560px);
      padding-top: 0;
    }
  }

  .hw-hero-slideshow[data-shopify-visual-preview] .hw-hero__ratio-box {
    min-height: 28rem;
    height: auto;
    padding-top: 0;
  }
/* END_SECTION:hw-hero-slideshow */

/* START_SECTION:hw-loop-faq (INDEX:42) */
#shopify-section-{{ section.id }} .hw-carousel-grid-content slideshow-slides {
    align-items: stretch;
  }
  #shopify-section-{{ section.id }} .hw-carousel-grid-content slideshow-slides > * {
    align-self: stretch;
  }
  #shopify-section-{{ section.id }} .hw-carousel-grid-content slideshow-slides > .card,
  #shopify-section-{{ section.id }} .hw-carousel-grid-content slideshow-slides > [data-carousel-card],
  #shopify-section-{{ section.id }} .hw-carousel-grid-content slideshow-slides > slideshow-slide > .card,
  #shopify-section-{{ section.id }} .hw-carousel-grid-content slideshow-slides > slideshow-slide > [data-carousel-card],
  #shopify-section-{{ section.id }} .hw-carousel-grid-content:not(slideshow-component) > .card,
  #shopify-section-{{ section.id }} .hw-carousel-grid-content:not(slideshow-component) > [data-carousel-card] {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  #shopify-section-{{ section.id }} .hw-carousel-grid-content slideshow-slides > slideshow-slide {
    height: auto;
    min-height: 0;
    display: flex;
    align-self: stretch;
  }
  #shopify-section-{{ section.id }} .hw-carousel-grid-content .card > div,
  #shopify-section-{{ section.id }} .hw-carousel-grid-content [data-carousel-card] > div {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  #shopify-section-{{ section.id }} .hw-carousel-grid-content .card > div > *,
  #shopify-section-{{ section.id }} .hw-carousel-grid-content [data-carousel-card] > div > * {
    flex: 1 1 auto;
    min-height: 0;
  }
  #shopify-section-{{ section.id }} .hw-carousel-progress-bar__track {
    min-height: 4px;
  }
/* END_SECTION:hw-loop-faq */

/* START_SECTION:hw-product-information (INDEX:53) */
.sticky-add-to-cart__bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    z-index: calc(var(--layer-sticky) - 1); /* Below sticky header */
    display: block;
    width: 600px;
    border-radius: calc(
      var(--style-border-radius-buttons-primary) + min(var(--padding-sm), var(--style-border-radius-buttons-primary))
    );
    box-shadow: var(--shadow-popover);
    padding: var(--padding-sm);
    /* Layout styling */
    display: flex;
    align-items: center;
    gap: var(--gap-md);

    @starting-style {
      opacity: 0;
      transform: translateX(-50%) translateY(calc(100% + 40px));
    }

    &::before {
      --border: 2px;
      content: '';
      position: absolute;
      inset: calc(var(--border) * -1);
      background: linear-gradient(var(--color-background) 0 100%), linear-gradient(hsl(0 0% 0% / 0.15) 0 100%);
      background-clip: content-box, border-box;
      border: var(--border) solid #0000;
      border-radius: inherit;
      z-index: -1;
      backdrop-filter: blur(20px) saturate(180%) brightness(1.5);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .sticky-add-to-cart__bar {
      transition-property: transform, opacity, display;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
      transition-behavior: allow-discrete;
    }
  }

  .sticky-add-to-cart__bar[data-stuck='true'] {
    transform: translateX(-50%) translateY(0%);
    opacity: 1;
  }

  sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__bar {
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    display: none;
  }

  .sticky-add-to-cart__info[data-has-image='false'] {
    padding-left: var(--padding-lg);
  }

  .sticky-add-to-cart__image {
    flex-shrink: 0;
    aspect-ratio: 1;
    height: var(--height-buy-buttons);
    overflow: hidden;
    border-radius: var(--style-border-radius-buttons-primary);
    background: var(--color-background-secondary);
  }

  .sticky-add-to-cart__image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sticky-add-to-cart__info {
    flex: 1;
    min-width: 0; /* Allow text truncation */
  }

  .sticky-add-to-cart__title {
    font-size: var(--font-paragraph-medium--size);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sticky-add-to-cart__variant {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    font-size: var(--font-paragraph-small--size);
    margin-top: var(--margin-3xs);
  }

  .sticky-add-to-cart__price {
    font-weight: var(--font-weight-semibold);
  }

  .sticky-add-to-cart__button {
    height: var(--height-buy-buttons);
    position: relative;
  }

  /* Mobile adjustments */
  @media screen and (max-width: 749px) {
    .sticky-add-to-cart__bar {
      bottom: 0;
      width: 100%;
      max-width: none;
      border-radius: 0;

      &::before {
        --border: 1px;
      }
    }

    .sticky-add-to-cart__bar .add-to-cart-text__content {
      display: none;
    }

    .sticky-add-to-cart__info[data-has-image='false'] {
      padding-left: 0;
    }

    .sticky-add-to-cart__title {
      font-size: var(--font-paragraph--size);
    }

    .sticky-add-to-cart__button {
      padding: var(--padding-lg);
    }

    .sticky-add-to-cart__price {
      font-size: var(--font-paragraph-small--size);
    }

    .sticky-add-to-cart__button {
      width: var(--height-buy-buttons);
    }

    sticky-add-to-cart:not([data-variant-available='true']) .add-to-cart-text__content {
      display: initial;
    }

    sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__button {
      width: auto;
    }
  }

  /* Small mobile - hide text content and compare price */
  @media screen and (max-width: 389px) {
    .sticky-add-to-cart__bar {
      .compare-at-price {
        display: none;
      }
    }

    .sticky-add-to-cart__title {
      display: none;
    }

    /* For product with only default variant show title */
    .sticky-add-to-cart__info[data-singleton='true'] .sticky-add-to-cart__title {
      display: block;
    }

    /* For single variant show title and variant, truncate both. variant should be identifiable with truncation */
    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__title {
      display: block;
    }

    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__variant {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
/* END_SECTION:hw-product-information */

/* START_SECTION:layered-slideshow (INDEX:61) */
.layered-slideshow-section {
    position: relative;
  }

  layered-slideshow-component {
    display: block;
    width: 100%;
  }

  .layered-slideshow__container {
    --radius: calc(var(--corner-radius, 1) * 1rem);
    --button-width: 56px;
    --border-color: var(--color-background);
    --inactive-tabs-width: calc((var(--total-tabs) - 1) * var(--button-width));
    --active-panel-width: calc(100cqi - var(--inactive-tabs-width));
    width: 100%;
    position: relative;
    container-type: inline-size;
    border-radius: var(--radius);
    overflow: hidden;
  }

  .layered-slideshow__container:not([size='auto']) {
    height: 100%;
  }

  .layered-slideshow__container[size='auto'] {
    height: auto;
  }

  @media screen and (min-width: 750px) {
    layered-slideshow-component {
      min-height: var(--layered-min-height-desktop, 0px);
    }
  }

  .layered-slideshow__tablist {
    display: grid;
    grid-template-columns: var(--active-tab);
    position: absolute;
    inset: 0;
    height: 100%;
    pointer-events: none;
    z-index: var(--layer-raised);
  }

  .layered-slideshow__tablist button {
    width: var(--button-width);
    height: 100%;
    pointer-events: all;
    opacity: 0;
    cursor: grab;
    border: none;
    background: transparent;
    padding: 0;
    position: relative;
    outline: none;
    transition: opacity 0.2s ease;
  }

  .layered-slideshow__tablist button:active {
    cursor: grabbing;
  }

  .layered-slideshow__tablist button[aria-selected='true'] {
    cursor: default;
  }

  .layered-slideshow__tablist button:focus-visible {
    opacity: 1;
  }

  .layered-slideshow__container[data-dragging] {
    cursor: grabbing;
  }

  .layered-slideshow__container[data-instant-transitions],
  .layered-slideshow__container:is([data-dragging], [data-instant-transitions])
    :is(
      .layered-slideshow__tablist,
      .layered-slideshow__panels,
      .layered-slideshow__panel-content,
      .layered-slideshow__content
    ) {
    transition: none;
  }

  .layered-slideshow__panels {
    display: grid;
    grid-template-columns: var(--active-tab);
    height: 100%;
    overflow: hidden;
  }

  .layered-slideshow__panel {
    position: relative;
    height: 100%;
    min-width: var(--button-width);
    border-radius: var(--radius);
    z-index: calc(var(--total-tabs) - var(--index));
  }

  .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
    width: var(--active-panel-width);
    border-left: var(--border-width) solid var(--border-color);
  }

  .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
    padding-inline-start: calc((var(--radius) * 2) + var(--padding-inline-start, 0px));
  }

  .layered-slideshow__panel-content {
    border: var(--border-width) solid var(--border-color);
    border-left: none;
    border-radius: var(--radius);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    width: calc(var(--active-panel-width) + (var(--radius) * 2));
  }

  .layered-slideshow__panel-content :is(img, video, svg) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Video poster visibility - poster shows initially and hides when panel becomes active */
  .layered-slideshow__video-poster {
    z-index: 1;
  }

  .layered-slideshow__video {
    z-index: 0;
  }

  /* When panel is active, hide poster so video is visible */
  .layered-slideshow__panel:not([inert]) .layered-slideshow__video-poster {
    opacity: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__video-poster {
      transition: opacity 0.3s ease;
    }
  }

  .layered-slideshow__content {
    height: 100%;
    position: relative;
    z-index: 1;
  }

  .layered-slideshow__content > * {
    margin: auto;
  }

  .layered-slideshow__content.background-transparent {
    background-color: transparent;
  }

  .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
    box-shadow: 4px 0 12px 0 rgba(0, 0, 0, 0.1);
  }

  /* Shared transitions (desktop and mobile) */
  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__panels,
    .layered-slideshow__tablist {
      transition-property: grid-template-columns, grid-template-rows;
      transition-duration: 0.6s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    .layered-slideshow__content {
      opacity: 0;
      transform: translateY(0.5lh);
      transition: opacity 0.48s, transform 0.48s;
    }

    .layered-slideshow__panel:not([inert]) .layered-slideshow__content {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.24s;
    }
  }

  @media screen and (max-width: 749px) {
    .layered-slideshow__container {
      --button-height: 44px;
      --inactive-tabs-height: calc((var(--total-tabs) - 1) * var(--button-height));
    }

    .layered-slideshow__container:not([size='auto']) {
      --layered-total-height: calc(var(--layered-panel-height-mobile, 260px) + var(--inactive-tabs-height));
      --active-panel-height: var(--layered-panel-height-mobile, 260px);
      min-height: var(--layered-total-height);
      height: var(--layered-total-height);
    }

    .layered-slideshow__container[size='auto'] {
      height: auto;
    }

    .layered-slideshow__tablist {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__tablist button {
      width: 100%;
      height: var(--button-height);
    }

    .layered-slideshow__panels {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__panel {
      min-height: var(--button-height);
      width: 100%;
      height: 100%;
      position: relative;
      z-index: calc(var(--total-tabs) - var(--index));
    }

    .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
      width: 100%;
      height: var(--active-panel-height);
      border-top: var(--border-width) solid var(--border-color);
      left: 0;
      right: 0;
      border-left: var(--border-width) solid var(--border-color);
    }

    .layered-slideshow__panel-content {
      position: absolute;
      border: var(--border-width) solid var(--border-color);
      border-radius: var(--radius);
      box-sizing: border-box;
      width: 100%;
      /* Clamp overlap to (button-height - border-width) to prevent visual issues with large radius + border */
      height: calc(var(--active-panel-height) + min(var(--radius) * 2, var(--button-height) - var(--border-width)));
      top: unset;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
    }

    .layered-slideshow__panel:not(:first-child) .layered-slideshow__panel-content {
      border-top: none;
    }

    .layered-slideshow__panel:not(:first-child) {
      margin-top: calc(var(--border-width) * -1);
    }

    .layered-slideshow__content {
      padding-inline-start: var(--padding-inline-start, 0px);
      padding-inline-end: var(--padding-inline-end, 0px);
    }

    /* Adjust padding for non-first slides to account for radius overlap at the top (not sides on mobile) */
    .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
      padding-block-start: calc((var(--radius) * 2) + var(--padding-block-start, 0px));
      padding-inline-start: var(--padding-inline-start, 0px);
    }

    .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
/* END_SECTION:layered-slideshow */

/* START_SECTION:logo (INDEX:62) */
.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: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-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:64) */
.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:65) */
/**
   * Blog posts page layout
   */
  .blog-posts {
    --page-content-width: var(--narrow-page-width);
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    --columns-gap: 36px;
    --rows-gap: 36px;
  }

  .blog-posts-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    width: 100%;
    column-gap: var(--columns-gap);
    row-gap: var(--rows-gap);
  }

  /**
   * Blog post item grid positioning and scaling.
   * Layout is calculated in Liquid based on total article count.
   * Mobile overrides are applied per-item in inline styles for proper specificity.
   */
  .blog-post-item {
    grid-column: span var(--col-span);
  }

  /**
   * 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:66) */
.cart-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--padding-5xl);
  }

  .cart-page--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .cart-page--empty .cart-page__title,
  .cart-page--empty .cart-page__more-blocks {
    margin-top: var(--margin-6xl);
  }

  .cart-page__more-blocks {
    width: 100%;
  }

  .cart-page--empty .cart-title {
    text-align: center;
  }

  .cart-page__main {
    grid-column: 1;
  }

  .cart-page__summary {
    padding-top: var(--padding-xl);
  }

  .cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }

  @media screen and (min-width: 750px) {
    .cart-page {
      grid-template-columns: 1fr min(50vw, var(--sidebar-width));
      grid-template-rows: min-content min-content 1fr;
    }

    .cart-page__summary {
      display: grid;
      height: 100%;
      grid-column: 2;
      grid-row: 1 / -1;
      align-self: stretch;
      grid-template-rows: subgrid;
      padding-top: 0;

      /* needed to support blurred effect from hero section */
      position: relative;
    }

    .section--page-width .cart-page:has(.cart-summary--extend) {
      grid-column: 2 / 4;
      grid-template-columns: 1fr minmax(
          var(--sidebar-width),
          calc((100vw - var(--page-width)) / 2 + var(--sidebar-width))
        );
    }
  }

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

  html:active-view-transition-type(empty-cart-page) {
    .cart-items-component {
      view-transition-name: cart-page-content;
    }
  }

  ::view-transition-old(cart-page-content) {
    animation: cart-page-content-old var(--animation-speed-fast) var(--animation-easing) forwards;
  }

  @keyframes cart-page-content-old {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      filter: blur(4px);
    }
  }
/* END_SECTION:main-cart */

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

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }
/* END_SECTION:main-collection */

/* START_SECTION:marquee (INDEX:70) */
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:71) */
.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-footer (INDEX:72) */
.password-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding-block: var(--padding-xl);
  }

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

    > a {
      display: flex;
    }

    .icon-shopify {
      display: inline;
      height: 1.3em;
      color: var(--color-foreground);
    }
  }

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

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

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

  .password-footer__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;
    }
  }
/* END_SECTION:password-footer */

/* START_SECTION:password (INDEX:73) */
.section-password {
    flex-grow: 1;
    display: flex;
  }

  .password-content {
    text-align: center;
  }
/* END_SECTION:password */

/* START_SECTION:predictive-search (INDEX:75) */
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;
    }
  }

  .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 {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);

    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
      calc(var(--padding-xl) + var(--button-padding-block) * 2);
    transition: transform var(--animation-speed-medium) var(--animation-timing-default),
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      border-color var(--animation-speed-medium) var(--animation-timing-hover);

    &:nth-last-child(3) {
      scroll-snap-align: end;
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }

    &:hover {
      background-color: var(--card-bg-hover);
      border-radius: var(--product-corner-radius);
      padding: calc(var(--padding-2xs) + 2px);
      margin: calc((var(--padding-2xs) + 2px) * -1);
    }

    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 1px);
      margin: calc((var(--padding-2xs) + 1px) * -1);
      outline: var(--border-width-sm) solid var(--color-border);
      border-radius: calc(var(--product-corner-radius) + 1px);
      border-color: var(--card-border-focus);
    }
  }

  .predictive-search-results__card:not(.predictive-search-results__card--product) {
    padding: var(--padding-sm);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--card-corner-radius);
    width: 60cqi;
    content-visibility: visible;

    @media screen and (min-width: 750px) {
      width: 27.5cqi;
    }

    &:hover {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &[aria-selected='true'].keyboard-focus {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--animation-speed-medium) var(--animation-timing-active);
    }
  }

  @keyframes search-element-scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes search-element-scale-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes search-element-slide-in-top {
    from {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }

    to {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }
  }

  @keyframes search-element-slide-out-top {
    from {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }

    to {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }
  }

  @keyframes content-slide {
    from {
      transform: translateY(var(--slide-from, 0));
      opacity: var(--slide-opacity-from, 1);
    }

    to {
      transform: translateY(var(--slide-to, 0));
      opacity: var(--slide-opacity-to, 1);
    }
  }

  .predictive-search-results__list {
    --slide-width: 27.5%;
    --slideshow-gap: var(--gap-md);

    /* Make space for the outline to be visible */
    padding-block-start: var(--border-width-sm);
  }

  .predictive-search-results__list slideshow-arrows {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .predictive-search-results__no-results {
    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 {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results.removing,
  .predictive-search-results__wrapper.removing {
    animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__card.removing {
    animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__wrapper {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  @keyframes search-element-slide-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes search-element-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .predictive-search-results__card--query {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
    }
  }
/* END_SECTION:predictive-search */

/* START_SECTION:product-hotspots (INDEX:76) */
/* Section layout */
  .section-product-hotspots {
    position: relative;
  }

  .section-product-hotspots__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
    height: 100%;
  }

  /* Image container */
  .section-product-hotspots__content {
    position: relative;
    aspect-ratio: var(--ratio, 21 / 9);
    overflow: hidden;
  }

  /* Hide hotspots without products on touch devices (tablets included) */
  @media (hover: none) {
    .hotspot.hotspot--hidden-touch {
      display: none;
    }
  }

  /* Responsive adjustments */
  @media screen and (max-width: 749px) {
    /* Hide dialog on mobile - hotspot opens quick-add modal instead */
    .hotspot .hotspot-dialog {
      display: none;
    }
  }

  /* Hotspot button - positioned element with clickable area */
  .hotspot {
    position: absolute;
    cursor: pointer;
    width: var(--button-size);
    height: var(--button-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    outline: none;
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
    z-index: var(--layer-flat);
  }

  .hotspot:has(.hotspot-dialog[open]) {
    z-index: var(--layer-raised);
  }

  .hotspot .hotspot-trigger {
    padding: 0;
    border: none;
  }

  .hotspot-dialog__product-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--padding-xs);
    padding-inline-start: 0;
    overflow: hidden;
  }

  /* Visual target circle */
  .hotspot-trigger {
    width: var(--hotspot-size);
    height: var(--hotspot-size);
    background: var(--hotspot-bg, rgb(0 0 0 / 0.5));
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: width 0.1s ease-out, height 0.1s ease-out;
  }

  /* On mobile, ensure trigger is tappable */
  @media screen and (max-width: 749px) {
    .hotspot-trigger {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
  }

  /* Bullseye using ::after pseudo-element */
  .hotspot-trigger::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--hotspot-size) * 0.4);
    height: calc(var(--hotspot-size) * 0.4);
    background: var(--hotspot-bullseye, #fff);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.1s ease-out, height 0.1s ease-out, background 0.1s ease-out;
  }

  /* Bullseye grows on hover or when dialog is open (desktop only) */
  @media screen and (min-width: 750px) {
    .hotspot:hover .hotspot-trigger::after,
    .hotspot:has(.hotspot-dialog[open]) .hotspot-trigger::after {
      width: calc(var(--hotspot-size) * 0.55);
      height: calc(var(--hotspot-size) * 0.55);
      transition: width 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out;
      transition-delay: 0.2s;
    }
  }

  .hotspots-container {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
    overflow: clip;
  }

  .hotspots__background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Dialog positioning */
  .hotspot .hotspot-dialog {
    position: absolute;
    padding: 0;
    border-radius: var(--style-border-radius-popover);
    border: var(--style-border-popover);
    width: max-content;
    min-width: var(--minimum-width-dialog);
    max-width: var(--maximum-width-dialog);
    box-shadow: var(--shadow-popover);

    &[data-placement*='bottom'] {
      --offset-y: 0px;
      --origin-y: calc(var(--hotspot-size) / 2);
      top: calc((var(--button-size) - var(--hotspot-size)) / 2 + var(--dialog-vertical-offset, 0px));
      bottom: unset;
    }
    &[data-placement*='top'] {
      --offset-y: 0px;
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      top: unset;
      bottom: calc((var(--button-size) - var(--hotspot-size)) * 0.5 - var(--dialog-vertical-offset, 0px));
    }
    &[data-placement*='left'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      --origin-x: calc(100% - (var(--hotspot-size) * 0.5));
      left: unset;
      right: 100%;
    }
    &[data-placement*='right'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      --origin-x: calc(var(--hotspot-size) * 0.5);
      left: 100%;
      right: unset;
    }
    &[data-placement*='center'] {
      left: 50%;
      translate: -50% 0;
      right: unset;
    }
    &[data-placement*='center'][data-placement*='bottom'] {
      --origin-y: calc(var(--hotspot-size) * 0.5);
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      top: 100%;
      bottom: unset;
      margin: 0;
    }
    &[data-placement*='center'][data-placement*='top'] {
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      bottom: 100%;
    }
  }

  .hotspot .hotspot-dialog:is(:focus, :focus-visible),
  .hotspot .hotspot-dialog__link:is(:focus, :focus-visible) {
    outline: none;
  }

  .hotspot-dialog__product {
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .hotspot-dialog__product-image,
  .hotspot-dialog svg.hotspot-dialog__placeholder-product-image {
    width: var(--width-product-image-dialog);
    height: var(--width-product-image-dialog);
    aspect-ratio: 1;
    padding: var(--padding-product-image-popover, var(--padding-xs));
    object-fit: cover;
    border-radius: var(--style-border-radius-popover);
  }

  .hotspot-dialog__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hotspot-dialog__product-title {
    margin-block-end: var(--product-title-gap);
    padding-inline-end: var(--padding-sm);
    min-width: 0;
  }

  .hotspot .hotspot-dialog .hotspot-dialog__sold-out-badge {
    display: flex;
    width: fit-content;
    justify-self: flex-end;
    align-self: flex-end;
    justify-content: center;
    align-items: center;
    font-size: var(--font-body--size);
    padding: var(--padding-2xs) var(--padding-sm);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    border-radius: var(--border-radius-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-sm);
    opacity: var(--opacity-80);
  }

  /* Dialog transitions */
  .hotspot .hotspot-dialog {
    --hotspot-blur: 4px;
    --hotspot-scale: 0.8;
    --hotspot-entry-duration: 0.2s;
    --hotspot-exit-duration: 0.1s;

    /* Firefox doesn't have reverse transitions */
    /* in webkit/chromium we can set a closing attribute as we transition the exit and hook there */
    filter: blur(var(--hotspot-blur));
    opacity: 0;
    transform: scale(var(--hotspot-scale)) translate(0, 0);
    transition-property: display, opacity, filter, transform;
    transition-duration: var(--hotspot-entry-duration);
    transition-timing-function: ease;

    transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
    transform-origin: var(--origin-x) var(--origin-y);
    transition-timing-function: cubic-bezier(0.65, -0.49, 0.35, 1.12);

    &[data-closing='true'] {
      transition-duration: var(--hotspot-exit-duration);
      transition-timing-function: ease-out;
      transform: scale(1) translate(0, calc(var(--hotspot-size) * 0.25));
    }

    /* We can only set transition-behavior once we've measured the dialog dimensions */
    &[data-showing='true'] {
      transition-behavior: allow-discrete;
    }
  }

  .hotspot .hotspot-dialog[open][data-showing='true'] {
    opacity: 1;
    transform: scale(1) translate(0, 0);
    filter: blur(0px);
  }

  @starting-style {
    .hotspot .hotspot-dialog[open][data-showing='true'] {
      opacity: 0;
      filter: blur(var(--hotspot-blur));
      transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
      transform-origin: var(--origin-x) var(--origin-y);
    }
  }

  /* Safety triangles for dialogs */
  .hotspot .hotspot-dialog::after {
    content: '';
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: all;
    transition: opacity 0.22s ease-out, translate 0.22s 0.1s ease-out;
    scale: var(--scale-x, 1) var(--scale-y, 1);
    z-index: var(--layer-flat);
  }

  .hotspot-dialog[open]:is([data-placement*='left'], [data-placement*='right'])::after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    width: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
  }

  .hotspot-dialog[open][data-placement*='right']::after {
    right: 100%;
    left: unset;
  }

  .hotspot-dialog[open][data-placement*='left']::after {
    left: 100%;
    right: unset;
    --scale-x: -1;
  }

  .hotspot-dialog[open][data-placement*='top']::after {
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center']::after {
    height: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
    width: 100%;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 50% calc(100% - var(--hotspot-size) * 0.25));
    --scale-x: 1;
    --scale-y: 1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='bottom']::after {
    top: unset;
    bottom: 100%;
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='top']::after {
    top: 100%;
    bottom: unset;
  }

  /* Quick add button */
  .hotspot-dialog[open] {
    .quick-add {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      width: auto;
      height: auto;
      position: relative;
      z-index: var(--layer-flat);
    }

    .quick-add__button {
      position: relative;
      padding-block: 0;
      box-shadow: none;
      align-items: center;
      justify-self: flex-end;
      height: fit-content;
      translate: var(--padding-2xs) 0;
      border: none;
      color: var(--color-foreground);
      background-color: var(--color-background);
      overflow: visible;
      pointer-events: all;
      opacity: 1;
      animation: elementSlideInTop var(--animation-speed) var(--animation-easing);
      transition-property: translate;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      &::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: calc(50px + 2px);
        border: 2px solid transparent;
        pointer-events: none;
        transition-property: border-color;
        transition-duration: 0s;
        transition-timing-function: var(--ease-out-cubic);
      }

      &:is(:hover, :focus, :focus-visible, :active) {
        translate: 0 0;
        transition-delay: var(--animation-speed-slow);

        &::before {
          border-color: rgb(var(--color-foreground-rgb) / var(--opacity-15));
          transition-duration: var(--animation-speed);
          transition-delay: var(--animation-speed-slow);
        }
      }
    }
  }
/* END_SECTION:product-hotspots */

/* START_SECTION:product-information (INDEX:77) */
.sticky-add-to-cart__bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    z-index: calc(var(--layer-sticky) - 1); /* Below sticky header */
    display: block;
    width: 600px;
    border-radius: calc(
      var(--style-border-radius-buttons-primary) + min(var(--padding-sm), var(--style-border-radius-buttons-primary))
    );
    box-shadow: var(--shadow-popover);
    padding: var(--padding-sm);
    /* Layout styling */
    display: flex;
    align-items: center;
    gap: var(--gap-md);

    @starting-style {
      opacity: 0;
      transform: translateX(-50%) translateY(calc(100% + 40px));
    }

    &::before {
      --border: 2px;
      content: '';
      position: absolute;
      inset: calc(var(--border) * -1);
      background: linear-gradient(var(--color-background) 0 100%), linear-gradient(hsl(0 0% 0% / 0.15) 0 100%);
      background-clip: content-box, border-box;
      border: var(--border) solid #0000;
      border-radius: inherit;
      z-index: -1;
      backdrop-filter: blur(20px) saturate(180%) brightness(1.5);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .sticky-add-to-cart__bar {
      transition-property: transform, opacity, display;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
      transition-behavior: allow-discrete;
    }
  }

  .sticky-add-to-cart__bar[data-stuck='true'] {
    transform: translateX(-50%) translateY(0%);
    opacity: 1;
  }

  sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__bar {
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    display: none;
  }

  .sticky-add-to-cart__info[data-has-image='false'] {
    padding-left: var(--padding-lg);
  }

  .sticky-add-to-cart__image {
    flex-shrink: 0;
    aspect-ratio: 1;
    height: var(--height-buy-buttons);
    overflow: hidden;
    border-radius: var(--style-border-radius-buttons-primary);
    background: var(--color-background-secondary);
  }

  .sticky-add-to-cart__image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sticky-add-to-cart__info {
    flex: 1;
    min-width: 0; /* Allow text truncation */
  }

  .sticky-add-to-cart__title {
    font-size: var(--font-paragraph-medium--size);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sticky-add-to-cart__variant {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    font-size: var(--font-paragraph-small--size);
    margin-top: var(--margin-3xs);
  }

  .sticky-add-to-cart__price {
    font-weight: var(--font-weight-semibold);
  }

  .sticky-add-to-cart__button {
    height: var(--height-buy-buttons);
    position: relative;
  }

  /* Mobile adjustments */
  @media screen and (max-width: 749px) {
    .sticky-add-to-cart__bar {
      bottom: 0;
      width: 100%;
      max-width: none;
      border-radius: 0;

      &::before {
        --border: 1px;
      }
    }

    .sticky-add-to-cart__bar .add-to-cart-text__content {
      display: none;
    }

    .sticky-add-to-cart__info[data-has-image='false'] {
      padding-left: 0;
    }

    .sticky-add-to-cart__title {
      font-size: var(--font-paragraph--size);
    }

    .sticky-add-to-cart__button {
      padding: var(--padding-lg);
    }

    .sticky-add-to-cart__price {
      font-size: var(--font-paragraph-small--size);
    }

    .sticky-add-to-cart__button {
      width: var(--height-buy-buttons);
    }

    sticky-add-to-cart:not([data-variant-available='true']) .add-to-cart-text__content {
      display: initial;
    }

    sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__button {
      width: auto;
    }
  }

  /* Small mobile - hide text content and compare price */
  @media screen and (max-width: 389px) {
    .sticky-add-to-cart__bar {
      .compare-at-price {
        display: none;
      }
    }

    .sticky-add-to-cart__title {
      display: none;
    }

    /* For product with only default variant show title */
    .sticky-add-to-cart__info[data-singleton='true'] .sticky-add-to-cart__title {
      display: block;
    }

    /* For single variant show title and variant, truncate both. variant should be identifiable with truncation */
    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__title {
      display: block;
    }

    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__variant {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
/* END_SECTION:product-information */

/* START_SECTION:quick-order-list (INDEX:80) */
.quick-order-list {
    --quantity-selector-width: 124px;
    --image-size: 43px;
    --quantity-header-padding: calc(var(--minimum-touch-target) + var(--gap-sm));
    --quick-order-quantity-column-width: calc(
      var(--quantity-selector-width) + 2 * var(--gap-sm) + 2 * var(--minimum-touch-target)
    );
    --transform-offset-negative: calc(-1 * var(--icon-stroke-width));
    --quick-order-first-column-width: 2fr; /* Takes 2 fractions of available space */
    --quick-order-price-column-width: 1fr; /* Takes 1 fraction */
    --quick-order-total-column-width: 1fr; /* Takes 1 fraction */

    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .quick-order-list__container {
    width: 100%;
  }

  /* Grid container setup */
  .quick-order-list__grid {
    width: 100%;
    display: block; /* Container is block, children use grid */
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-body {
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-header,
  .quick-order-list__grid-row {
    display: grid;
    grid-template-columns:
      var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
      var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
      var(--quick-order-price-column-width) /* Price column - takes 1 part */
      var(--quick-order-total-column-width); /* Total column - takes 1 part */
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list__grid-header {
    border-block-end: var(--style-border-width) solid var(--color-border);
    padding-block-end: var(--padding-xl);
    margin-block-end: var(--padding-sm);
    opacity: var(--opacity-85);
    font-weight: normal;
    font-size: var(--font-size--xs);
    letter-spacing: var(--letter-spacing--body-loose);
  }

  /* Add padding to quantity column header to align with content */
  .quick-order-list__grid-header .quick-order-list__grid-cell--quantity {
    padding-inline-start: var(--quantity-header-padding);
  }

  .quick-order-list__grid-row {
    padding-block-start: var(--padding-sm);
    padding-block-end: var(--padding-sm);
    content-visibility: auto;
    contain-intrinsic-size: auto
      calc(2 * var(--padding-sm) + var(--image-size) + var(--minimum-touch-target) + var(--padding-2xl));
  }

  @media screen and (min-width: 750px) {
    .quick-order-list__grid-row {
      contain-intrinsic-size: auto calc(2 * var(--padding-sm) + var(--image-size));
    }
  }

  .quick-order-list__grid-cell--variant {
    text-align: start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity .variant-item__inner-container {
    width: 100%;
    justify-content: flex-start;
  }

  .quick-order-list__grid-cell--price {
    text-align: end;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--total {
    text-align: end;
    justify-self: stretch;
  }

  .variant-item__image-container,
  .quick-order-list__table-image {
    width: var(--image-size);
    height: auto;
  }

  .quick-order-list .pagination {
    margin-block-start: 0;
    padding-block-start: var(--padding-xl);
    padding-block-end: 0;
  }

  .variant-item__inner-container {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .volume-pricing-info-placeholder {
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
  }

  .variant-item__quantity .quantity-selector {
    display: flex;
    flex: 0 0 var(--quantity-selector-width);
    min-width: var(--quantity-selector-width);
    font-size: var(--font-size--xs);
    height: auto;
  }

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

  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .variant-item__remove:not(.variant-item__remove--hidden):hover .remove-icon-top {
    transform: translate(var(--transform-offset-negative), var(--icon-stroke-width)) rotate(-15deg);
  }

  .variant-item__remove:not(.variant-item__remove--hidden):is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  /* Hide remove button with opacity to prevent layout shift */
  .variant-item__remove--hidden {
    opacity: 0;
    pointer-events: none;
    cursor: default;
  }

  .variant-item__name {
    font-weight: var(--font-weight-medium);
  }

  .variant-item__sku {
    font-size: var(--font-size--3xs);
    opacity: var(--opacity-85);
  }

  .variant-item__details {
    display: inline-flex;
    flex-direction: column;
  }

  .variant-item__totals {
    flex: 0 0 auto;
    padding-block-start: var(--padding-2xs);
  }

  /* Compare at price styles */
  .variant-item__discounted-prices {
    display: flex;
    gap: var(--gap-2xs);
    justify-content: flex-end;
  }

  .variant-item__discounted-prices dd {
    margin: 0;
  }

  /* Mobile layout */
  @media screen and (max-width: 749px) {
    .quick-order-list__grid-header,
    .quick-order-list__grid-row {
      grid-template-columns: 1fr auto; /* Variant column and total column on mobile */
      gap: var(--gap-sm);
      max-width: 100%;
      overflow: hidden;
      align-items: flex-start;
    }

    .quick-order-list__grid-header .quick-order-list__grid-cell--total {
      text-align: end;
    }

    .quick-order-list__grid-row {
      margin-block-end: var(--margin-2xl);
      padding-block-end: var(--padding-2xl);
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .quick-order-list__grid-row:last-child {
      margin-block-end: 0;
      border-block-end: none;
    }

    .variant-item__inner {
      flex: 1 1 auto;
      padding-inline-end: var(--padding-lg);
    }

    .variant-item__inner-container {
      display: flex;
      gap: var(--gap-md);
      align-items: flex-start;
    }

    .variant-item__details {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0; /* Allow text to shrink */
    }

    .variant-item__totals {
      flex: 0 0 auto;
      text-align: end;
      padding-block-start: var(--padding-2xs);
    }

    .variant-item__totals .variant-item__total-price {
      font-size: var(--font-size--sm);
      font-weight: var(--font-weight-medium);
    }

    .variant-item__title-container .variant-item__name {
      display: block;
      font-size: var(--font-size--sm);
      line-height: var(--line-height-tight);
      margin: 0;
    }

    .variant-item__mobile-price-container {
      margin-block-end: var(--margin-xs);
    }

    .variant-item__mobile-price {
      font-size: var(--font-size--sm);
      opacity: var(--opacity-85);
      white-space: nowrap;
    }

    /* Mobile compare at price styles */
    .variant-item__discounted-prices--mobile {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      justify-content: flex-start;
      gap: var(--gap-xs);
      margin-block-start: var(--margin-2xs);
      margin-block-end: 0;
    }

    .variant-item__discounted-prices--mobile dd {
      display: inline;
    }

    .variant-item__mobile-quantity {
      display: flex;
      align-items: center;
      gap: 0;
    }

    /* Mobile-only content styles */
    .variant-item__mobile-info {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .variant-item__image-container {
      flex: 0 0 var(--image-size);
      width: var(--image-size);
      height: var(--image-size);
    }

    .quick-order-list__table-image {
      width: 100%;
      height: 100%;
    }

    .variant-item__mobile-quantity .quantity-selector {
      display: flex;
      flex: 0 0 var(--quantity-selector-width);
      min-width: var(--quantity-selector-width);
      font-size: var(--font-size--xs);
      margin: 0;
      padding: 0;
    }

    /* Mobile remove button styling */
    .variant-item__remove--mobile {
      background-color: transparent;
      color: var(--color-foreground);
      width: var(--minimum-touch-target);
      height: var(--minimum-touch-target);
      min-width: var(--minimum-touch-target);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
      padding: 0;
      margin: 0;
      flex-shrink: 0;
      border: none;
      cursor: pointer;
    }

    .variant-item__remove--mobile svg {
      width: var(--icon-size-sm);
      height: var(--icon-size-sm);
    }

    .variant-item__remove--mobile:not(.variant-item__remove--hidden):hover {
      opacity: var(--opacity-70);
    }

    .quick-order-list .pagination {
      padding-block-start: var(--padding-2xl);
    }
  }

  .quick-order-list-disabled {
    pointer-events: none;
  }

  .quick-order-list-total {
    background: var(--color-background);
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* Tablet and Desktop styles - sticky footer */
  @media screen and (min-width: 750px) {
    .quick-order-list-total {
      position: sticky;
      inset-block-end: 0;
      z-index: var(--layer-raised);
    }
  }

  .quick-order-list-total__info,
  .quick-order-list-total__confirmation {
    min-height: 8rem;
    padding-block-start: var(--padding-4xl);
  }

  .quick-order-list-total__info {
    align-items: flex-start;
    gap: var(--gap-md);
  }

  .quick-order-list-total__confirmation {
    display: flex;
    gap: var(--gap-2xl);
    align-items: center;
    justify-content: center;
    padding: var(--padding-2xl) var(--padding-xl);
  }

  .quick-order-list-total__column {
    display: flex;
    flex-direction: column;
  }

  .quick-order-list-total__actions {
    display: flex;
  }

  /* Desktop layout - Use CSS Grid to match main table alignment */
  @media screen and (min-width: 750px) {
    .quick-order-list-total__info {
      display: grid;
      grid-template-columns:
        var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
        var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
        var(--quick-order-price-column-width) /* Price column - takes 1 part */
        var(--quick-order-total-column-width); /* Total column - takes 1 part */
    }

    .quick-order-list-total__column {
      grid-column: 1;
      display: flex;
      flex-direction: column;
      gap: var(--gap-md);
    }

    .quick-order-list-total__summary {
      grid-column: 2 / 5;
      display: grid;
      grid-template-columns: var(--quick-order-quantity-column-width, 234px) auto;
    }

    .quick-order-list-total__items {
      grid-column: 1;
      justify-self: center;
      text-align: center;
    }

    .quick-order-list-total__price {
      grid-column: 3;
      justify-self: end;
      text-align: end;
    }
  }

  /* Tablet-specific overrides - 750px to 989px */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .quick-order-list-total__actions {
      flex-direction: column;
    }

    .quick-order-list-total__messages {
      align-items: stretch;
    }

    .quick-order-list__remove-all-button {
      padding-inline: 0;
    }
  }

  .quick-order-list__button.button--full-width {
    width: 100%;
  }

  .quick-order-list__button.button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .quick-order-list-total .button--unstyled {
    border: none;
    box-shadow: none;
    background-color: transparent;
    color: var(--color-foreground);
    cursor: pointer;
  }

  .quick-order-list__remove-all-button svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex-shrink: 0;
  }

  .quick-order-list-total__items span {
    display: block;
    margin-block-end: var(--margin-xs);
  }

  .quick-order-list-total__items .h5 {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__subtotal-value {
    display: block;
    margin-block-end: var(--margin-xs);
    line-height: var(--font-paragraph--line-height);
  }

  /* Ensure text-component displays properly */
  .quick-order-list-total__subtotal-value text-component {
    display: block;
  }

  .quick-order-list-total__subtotal {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__tax-note {
    opacity: var(--opacity-subdued-text);
  }

  .quick-order-list-total__messages {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success,
  .quick-order-list-total__error {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success .icon-success,
  .quick-order-list-total__error .quick-order-list-total__icon--error {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: inherit;
  }

  .quick-order-list-total__success .icon-success svg,
  .quick-order-list-total__error .quick-order-list-total__icon--error svg {
    width: 100%;
    height: 100%;
  }

  .quick-order-list-total__error:empty,
  .quick-order-list-total__success:empty {
    display: none;
  }

  .quick-order-list-total__info.confirmation-visible {
    display: none;
  }

  .quick-order-list-total__confirmation-text {
    white-space: nowrap;
  }

  .quick-order-list-total__confirmation-buttons {
    display: flex;
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list-total__confirmation button {
    margin: 0;
    white-space: nowrap;
  }

  .quick-order-list__remove-all-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .quick-order-list-total__info {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .quick-order-list-total__column {
      order: 3; /* Move column to the end on mobile */
      width: 100%;
      flex: 1 1 auto;
    }

    .quick-order-list-total__actions {
      flex-direction: column;
      width: 100%;
    }

    .quick-order-list-total__messages {
      width: 100%;
      align-items: center;
      margin-block-start: var(--margin-xs);
    }

    .quick-order-list-total__summary {
      order: 1; /* First on mobile */
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      gap: var(--gap-md);
    }

    .quick-order-list-total__items {
      text-align: center;
      width: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__items span {
      display: inline;
      margin-block-end: 0;
    }

    .quick-order-list-total__items .h5 {
      display: inline;
    }

    .quick-order-list-total__price {
      text-align: center;
      width: 100%;
    }

    .quick-order-list-total__product-total {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal-value {
      display: inline-block;
      margin-block-end: 0;
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal {
      display: inline;
    }

    .quick-order-list__button,
    .quick-order-list__remove-all-button {
      width: 100%;
      justify-content: center;
    }

    .quick-order-list-total__confirmation {
      flex-direction: column;
    }

    .quick-order-list-total__tax-note {
      margin-block-start: var(--margin-xs);
    }
  }
/* END_SECTION:quick-order-list */

/* START_SECTION:slideshow (INDEX:85) */
.slideshow-section {
    slideshow-arrows .slideshow-control:first-of-type {
      margin-inline-start: var(--padding-xs);
    }

    slideshow-arrows .slideshow-control:last-of-type {
      margin-inline-end: var(--padding-xs);
    }

    .slideshow--with-hints--mobile-with-hints {
      gap: var(--slideshow-gap, 0);
      grid-column: 1 / -1;
    }

    /* Hide navigation arrows at boundaries for with-hints mode */
    .slideshow--with-hints--mobile-with-hints slideshow-arrows .slideshow-control {
      transition: opacity 0.3s ease;
    }

    /* Override animation for boundary arrows in with-hints mode on hover */
    slideshow-component.slideshow--with-hints--mobile-with-hints:has(
        slideshow-slide:first-child:not([aria-hidden='true'])
      )
      > slideshow-container
      > slideshow-arrows
      .slideshow-control--previous,
    slideshow-component.slideshow--with-hints--mobile-with-hints:has(
        slideshow-slide:last-child:not([aria-hidden='true'])
      )
      > slideshow-container
      > slideshow-arrows
      .slideshow-control--next {
      animation: none;
      opacity: 0;
      pointer-events: none;
    }

    @media screen and (max-width: 749px) {
      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        padding-inline: var(--page-margin);
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slide {
        width: 96%;
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        gap: min(var(--slideshow-gap, 0), 10px);
      }
    }

    @media screen and (min-width: 750px) {
      .slideshow--with-hints {
        gap: var(--slideshow-gap, 0);
        grid-column: 1 / -1;
      }

      .slideshow--with-hints slideshow-slides {
        padding-inline: var(--page-margin);
        gap: var(--slideshow-gap, 0);
      }

      .slideshow--with-hints slideshow-slide {
        width: calc((100vw - var(--page-margin) * 2));
        overflow: hidden;
      }

      .slideshow--with-hints slideshow-arrows .slideshow-control {
        transition: opacity 0.3s ease;
      }

      slideshow-component.slideshow--with-hints:has(slideshow-slide:first-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--previous,
      slideshow-component.slideshow--with-hints:has(slideshow-slide:last-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--next {
        animation: none;
        opacity: 0;
        pointer-events: none;
      }
    }
  }
/* END_SECTION:slideshow */

/* CSS from block stylesheet tags */
/* START_BLOCK:_accordion-row (INDEX:86) */
.details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_BLOCK:_accordion-row */

/* START_BLOCK:_announcement (INDEX:87) */
.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:88) */
.blog-post-card {
    display: flex;
    flex-direction: column;
    text-align: var(--text-align);
    column-gap: var(--columns-gap);
  }

  .blog-post-item--horizontal:has(.blog-post-card__image-container) .blog-post-card {
    & > *:first-child {
      flex-basis: 70%;
    }

    & > *:last-child {
      flex-basis: 30%;
    }
  }

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

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

  /**
   * Horizontal layout (image left, content right)
   * Applied to hero posts based on total article count
   * Only applies the split layout when an image is actually present
   */
  .blog-post-item--horizontal .blog-post-card {
    flex-direction: row;

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

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

  .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:89) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:90) */
.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:91) */
.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:92) */
.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:93) */
.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:_card (INDEX:94) */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius, 0);
    border-width: var(--border-width, 0);
    border-style: var(--border-style, none);
    border-color: var(--border-color);
    container-type: inline-size;
  }

  .card__content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
    display: flex;
    flex-direction: column;
    aspect-ratio: var(--card-ratio, 1);
  }

  .card__content.background-transparent {
    background-color: transparent;
  }

  /* When card has both image and content, use min-height from container query */
  .card__content--has-min-height {
    min-height: calc(100cqw / var(--card-ratio-numeric));
  }

  .card__inner {
    flex: 1;
  }

  .card__media-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }

  .card__media-wrapper video {
    z-index: var(--layer-raised);
  }

  .card__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
  }

  .card__link ~ :is(.card__content, .card__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  /* Needs the .card__link ~ to be specific enough to take effect. */
  .card__link ~ .card__content--design-mode {
    pointer-events: auto;
  }
/* END_BLOCK:_card */

/* START_BLOCK:_carousel-content (INDEX:95) */
.carousel-content slideshow-slides {
    --slideshow-gap: var(--carousel-gap);
  }

  .carousel-content slideshow-slides > .card {
    flex: 0 0 auto;
    width: calc(
      (100% - (var(--carousel-gap, 8px) * (var(--carousel-mobile-columns, 2) - 1)) - var(--peek-next-slide-size, 0px)) /
        var(--carousel-mobile-columns, 2)
    );
  }

  @media screen and (min-width: 750px) {
    .carousel-content slideshow-slides > .card {
      width: calc(
        (100% - (var(--carousel-gap, 8px) * (var(--carousel-columns, 4) - 1)) - var(--peek-next-slide-size, 0px)) /
          var(--carousel-columns, 4)
      );
    }
  }

  .carousel-content .slideshow-control[disabled] {
    display: none;
  }

  .carousel-content slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .carousel-content .slideshow-control--next {
    margin-inline-start: auto;
  }
/* END_BLOCK:_carousel-content */

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

/* START_BLOCK:_cart-summary (INDEX:97) */
.cart-summary__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xl);
    container-type: inline-size;
    padding: 0;
    position: sticky;
    top: 0;
    align-self: start;

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
      grid-row: 1 / -1;
    }
  }

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

  .cart-summary {
    @media screen and (max-width: 749px) {
      border: none;
    }

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
    }
  }

  .cart-summary--extend {
    height: 100%;

    @media screen and (min-width: 750px) {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

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

  .cart-summary--extend .cart-summary__inner {
    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 {
      /* The palette color is applied inline, so these two need !important to
         win — a plain rule cannot override an inline declaration. The custom
         properties below do not, they are only read by descendants. */
      background-color: transparent !important;
      color: inherit !important;
      --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:98) */
.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] {
    width: min(1lh, 26px);
    height: min(1lh, 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-weight: var(--font-paragraph--weight);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }
/* END_BLOCK:_cart-title */

/* START_BLOCK:_collection-image (INDEX:101) */
.collection-image {
    width: var(--image-width);
  }

  .collection-image .collection-image__featured-image {
    aspect-ratio: var(--ratio);
    object-fit: cover;
  }
/* END_BLOCK:_collection-image */

/* START_BLOCK:_collection-link (INDEX:103) */
.collection-links__link {
    --min-font-size: var(--font-size--4xl);
    --max-font-size: var(--font-size--6xl);

    display: flex;
    color: inherit;
    text-decoration: none;
    text-wrap: pretty;
    font-size: clamp(var(--min-font-size), 4.5vw, var(--max-font-size));

    /* When hovering over container, dim non-current links (text layout only) */
    @media (hover: hover) {
      collection-links-component:not([layout='spotlight']) .collection-links__container:hover & {
        opacity: var(--opacity-subdued-text);
      }

      collection-links-component:not([layout='spotlight']) .collection-links__container:hover &[aria-current='true'] {
        opacity: 1;
      }
    }

    [layout='spotlight'] & {
      /* Spotlight layout: dimmed by default */
      opacity: var(--disabled-opacity);

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

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

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

      [layout='spotlight'] & {
        white-space: normal;
        scroll-snap-align: start;
        text-wrap: pretty;

        span {
          text-wrap: pretty;
        }
      }
    }
  }

  .collection-links__count {
    font-size: 0.5em;
    opacity: var(--disabled-opacity);
    font-weight: var(--font-paragraph--weight);
  }

  .collection-links__image {
    align-items: center;
    justify-content: center;

    &:not([hidden]) {
      display: flex;
    }

    &[reveal] {
      --offset: 15px;

      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--layer-temporary);
      display: block;
      translate: calc(var(--x) + var(--offset)) calc(var(--y) + var(--offset));
      pointer-events: none;
      width: auto;

      image-block {
        --image-height-basis: 5rem;

        height: var(--image-height);
      }
    }
  }
/* END_BLOCK:_collection-link */

/* START_BLOCK:_featured-blog-posts-card (INDEX:107) */
.featured-blog-posts-card {
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    gap: var(--gap);
  }

  .resource-list--grid .resource-list__item {
    min-width: 0;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
    .featured-blog-posts-card__content {
      --flex-wrap: nowrap;
    }
  }

  @media screen and (max-width: 749px) {
    .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
      .featured-blog-posts-card__image,
      .blog-placeholder-svg {
        aspect-ratio: unset;
      }
    }
  }

  .featured-blog-posts-card__inner a,
  .featured-blog-posts-card__inner button {
    pointer-events: auto;
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .featured-blog-posts-card__content * {
    pointer-events: auto;
  }

  .featured-blog-posts-card__content {
    --flex-wrap: wrap;
  }

  .featured-blog-posts-card__content h4 {
    margin: 0;
  }
/* END_BLOCK:_featured-blog-posts-card */

/* START_BLOCK:_featured-blog-posts-image (INDEX:108) */
.featured-blog-posts-card__image {
    width: 100%;
  }

  .featured-blog-posts-card__image .blog-placeholder-svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:_featured-blog-posts-image */

/* START_BLOCK:_featured-product-gallery (INDEX:110) */
.featured-product-section .card-gallery .quick-add__button {
    position: absolute;
    right: var(--quick-add-offset, var(--padding-sm));
    bottom: var(--quick-add-offset, var(--padding-sm));
  }
/* END_BLOCK:_featured-product-gallery */

/* START_BLOCK:_featured-product (INDEX:113) */
.featured-product-content-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-sm);
  }
/* END_BLOCK:_featured-product */

/* START_BLOCK:_footer-social-icons (INDEX:114) */
.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:115) */
.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:116) */
.header__drawer {
    --header-drawer-min-height: 60px;
    display: flex;
    min-height: var(--header-drawer-min-height);
    align-items: center;
  }

  #header-component[data-menu-style='drawer'] .header__drawer {
    display: flex;
    min-height: var(--header-drawer-min-height);
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] .header__drawer {
      display: none;
      min-height: 0;
    }
  }

  .header--compact .header__drawer {
    min-height: var(--minimum-touch-target);
  }

  .menu-list--mobile {
    &.menu-list {
      display: grid;
    }

    & .menu-list__list {
      width: max-content;
      margin-inline: auto;
      gap: var(--menu-horizontal-gap);
    }

    & li {
      width: max-content;
      padding-block: var(--padding-sm);
    }

    & li:first-of-type {
      padding-inline-start: var(--menu-horizontal-gap);
    }

    & li:last-of-type {
      padding-inline-end: var(--menu-horizontal-gap);
    }

    & a {
      color: var(--color-foreground);
    }
  }

  .menu-list__scroll-container {
    position: relative;
    overflow-x: auto;
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    padding-block: var(--padding-2xs);
  }

  .menu-list {
    --menu-horizontal-gap: var(--gap-xl);
    --menu-vertical-gap: var(--gap-xl);

    display: flex;
    height: 100%;
  }

  .menu-list__list {
    display: flex;
    justify-content: var(--grid-area-alignment);
  }

  .menu-list__list-item {
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .menu-list__list-item[aria-hidden='true'] {
    visibility: hidden;
  }

  .menu-list__link {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    margin-block: 0;

    &:hover,
    &:focus {
      color: var(--menu-top-level-font-color);
    }

    @media screen and (min-width: 750px) {
      font-size: var(--menu-top-level-font-size-desktop);
    }
  }

  .menu-list__link-title {
    padding-inline: calc(var(--gap-xl) / 2);
  }
  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

  .menu-list__list-item:not([slot='overflow']) {
    flex-direction: column;
  }
  .menu-list__list-item:not([slot='overflow'])::after {
    content: '';
    width: 100%;
    height: var(--header-padding);
    margin-bottom: calc(-1 * var(--header-padding));
  }

  [slot='overflow'] > .menu-list__link::after {
    content: none;
  }

  /*
    High specificity selectors to subdue non-hovered links without javascript.
    If the need for js-generated `hovered` and `focused` classes arises for another reason we can simplify these.
  */
  .menu-list:where(:has(.menu-list__list-item:hover)),
  .menu-list:where(:has(.menu-list__list-item:focus-within)),
  .menu-list:where(:has(.menu-list__list-item:not([aria-hidden='true']) .menu-list__link--active)) {
    .menu-list__link {
      color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));
    }
  }

  /* stylelint-disable-next-line selector-max-specificity */
  .menu-list:not(:has(.menu-list__list-item:hover)) .menu-list__link--active,
  .menu-list .menu-list__list-item:where(:hover, :focus-within) .menu-list__link,
  .menu-list .menu-list__list-item[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;
    margin-inline: calc(-1 * var(--menu-horizontal-gap) / 2);
  }

  .overflow-menu {
    background-color: transparent;
    padding: var(--focus-outline-size);
    margin: calc(-1 * var(--focus-outline-size));
  }

  /** mega menu **/
  .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-padding-block-start: var(--padding-3xl);
    --submenu-padding-block-end: var(--padding-3xl);

    background-color: transparent;
  }

  .header__row[style*='--border-bottom-width: 0px'] {
    .menu-list__submenu.submenu-matches-parent,
    .overflow-menu.submenu-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);

    visibility: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width) - (var(--full-open-header-height) - var(--submenu-height)));
    z-index: var(--layer-header-menu);
    padding-inline: var(--padding-inline);
    /* Clip path starts at header height so it doesn't mess with the pointer events in the header */
    clip-path: rect(var(--header-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic); /* stylelint-disable-line */
  }

  [data-submenu-overlap-bottom-row] {
    .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
    .overflow-menu::part(overflow) {
      clip-path: rect(var(--top-row-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    }
  }

  /* Show the submenus on hover */
  .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu,
  /* Show the overflow menu when a menu item is hovered */
  .overflow-menu:has([slot="overflow"] [aria-expanded='true'])::part(overflow-list),
  /* Keep the submenus open when they are hovered */
  .menu-list__submenu:is(:hover),
  .overflow-menu::part(overflow):hover {
    --submenu-content-opacity: 1;

    visibility: visible;
  }

  .overflow-menu::part(overflow) {
    --menu-top-level-font-size: var(--font-size--xlarge);

    display: grid;
    grid-template-columns: var(--full-page-grid-with-margins);
  }

  .overflow-menu::part(overflow-list) {
    position: relative;
    display: grid;
    grid-template-columns: minmax(auto, 200px) 1fr;
    grid-template-areas: 'left right';
    grid-template-rows: max-content;
    grid-gap: 0;
    grid-column: 2;
  }

  .menu-list__list-item:is([slot='overflow']) {
    --menu-top-level-font-color: var(--color-foreground);
    --menu-top-level-font-color-rgb: var(--color-foreground-rgb);

    display: contents;
    white-space: normal;

    .menu-list__link {
      grid-area: left;
      grid-row: auto;
      height: min-content;
      font-size: var(--font-size--xl);
      transition: var(--submenu-content-animation);
    }

    .menu-list__submenu {
      visibility: hidden;
      grid-row: 1;
      grid-area: right;
      grid-row-end: span calc(var(--overflow-count) + 1);
      padding-inline-start: var(--menu-horizontal-gap);
    }

    .menu-list__submenu-inner {
      transform: none;
      grid-column: unset;
      padding-block: 0;
    }

    .menu-list__link[aria-expanded='true'] + .menu-list__submenu {
      visibility: visible;
    }
  }

  .header-menu {
    height: 100%;
  }

  .menu-list__submenu-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    padding-block-start: var(--submenu-padding-block-start);
    padding-block-end: var(--submenu-padding-block-end);
    padding-inline: var(--section-padding-inline);
    opacity: var(--submenu-content-opacity);
    transition: var(--submenu-content-animation);
    transform: translateY(calc(var(--full-open-header-height) - var(--submenu-height)));

    background-color: var(--color-background);

    /* Make overflow menu scrollable when content exceeds viewport */
    max-height: calc(80vh - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent;
  }

  .mega-menu__link {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);
    white-space: normal;
    text-decoration: none;
    display: inline-flex;
    padding: var(--padding-2xs) 0;

    &:hover {
      color: var(--menu-child-active-font-color);
    }
  }

  .mega-menu__link--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-active-font-color);
    }
  }

  @media screen and (max-width: 989px) {
    .mega-menu__content-list-item--hidden-tablet {
      display: none;
    }
  }

  .mega-menu__link:has(.mega-menu__link-image) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    object-fit: cover;
    border-radius: var(--menu-image-border-radius);
  }

  /* Fix alignment for collection image mode links without images */

  /* Target only top-level links (direct children of column > div) in collection image mode */
  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image)) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--menu-columns-tablet), minmax(0, 1fr));
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: 100%;

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__column {
    grid-column: span 1;
  }

  .mega-menu__column--span-2 {
    grid-column: span 2;
  }

  .mega-menu__column--span-3 {
    grid-column: span 3;
  }

  .mega-menu__column--span-4 {
    grid-column: span 4;
  }

  .mega-menu__column--wide-collection-image {
    grid-column: span 1;

    @media screen and (min-width: 990px) {
      grid-column: span 2;
    }
  }

  .mega-menu__submenu .mega-menu__column--wide-collection-image {
    grid-column: span 1;
  }

  .mega-menu__content-list {
    display: grid;
    justify-content: end;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
  }

  .mega-menu__content-list--products {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 1fr));

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

  .mega-menu__content-list--collections {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 300px));
    }
  }

  .mega-menu__list {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span var(--menu-columns-tablet);
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-columns-desktop);
    }
  }

  .mega-menu__content {
    grid-column: span var(--menu-content-columns-tablet) / -1;

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-content-columns-desktop) / -1;
    }
  }

  .menu-list__list-item[slot='overflow'] .section {
    grid-template-columns: 1fr;
  }

  .menu-list__list-item[slot='overflow'] .section .mega-menu__grid {
    grid-column: 1;
  }

  .mega-menu__content-list li {
    white-space: normal;
  }

  /* mega more menu */
  .mega-menu__more-list {
    --menu-child-font-size: var(--font-size--xl);

    width: 200px;
  }

  .mega-menu__submenu {
    /* preserves the inherited grid layout when this submenu wrapper is used */
    display: contents;
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_hw-carousel-navigation (INDEX:123) */
/* Always show in theme editor to prevent drag interference */
  body.shopify-design-mode .hw-carousel-navigation-wrapper {
    display: block !important;
    visibility: visible !important;
  }

  /* Hide on mobile when layout is grid */
  .hw-carousel-navigation-wrapper--hide-on-grid-mobile {
    display: none;
  }

  /* Hide on tablet (750px+) when layout is grid on tablet */
  @media screen and (min-width: 750px) {
    .hw-carousel-navigation-wrapper--hide-on-grid-mobile {
      display: block;
    }
    .hw-carousel-navigation-wrapper--hide-on-grid-tablet {
      display: none;
    }
  }

  /* Hide on desktop (990px+) when layout is grid on desktop */
  @media screen and (min-width: 990px) {
    .hw-carousel-navigation-wrapper--hide-on-grid-tablet {
      display: block;
    }
    .hw-carousel-navigation-wrapper--hide-on-grid-desktop {
      display: none;
    }
  }

  /* User visibility controls (override layout-based visibility) */
  /* Default visibility based on checkbox settings (mobile first) */
  .hw-carousel-navigation-wrapper--hide-mobile {
    display: none !important;
  }

  /* Tablet overrides */
  @media screen and (min-width: 750px) {
    /* If hidden on mobile but shown on tablet, restore display */
    .hw-carousel-navigation-wrapper--hide-mobile:not(.hw-carousel-navigation-wrapper--hide-tablet) {
      display: block !important;
    }
    
    /* Explicitly hide on tablet */
    .hw-carousel-navigation-wrapper--hide-tablet {
      display: none !important;
    }
  }

  /* Desktop overrides */
  @media screen and (min-width: 990px) {
    /* If hidden on tablet but shown on desktop, restore display */
    .hw-carousel-navigation-wrapper--hide-tablet:not(.hw-carousel-navigation-wrapper--hide-desktop) {
      display: block !important;
    }

    /* Handle case where hidden on mobile but shown on desktop (and not hidden on tablet logic above covers it) */
    .hw-carousel-navigation-wrapper--hide-mobile:not(.hw-carousel-navigation-wrapper--hide-desktop) {
      display: block !important;
    }

    /* Explicitly hide on desktop */
    .hw-carousel-navigation-wrapper--hide-desktop {
      display: none !important;
    }
  }
/* END_BLOCK:_hw-carousel-navigation */

/* START_BLOCK:_hw-fade-slider-content (INDEX:135) */
/*
   * Stack all direct children in the same grid cell.
   * JS adds .hw-fade-slider__slide--active to the current one to fade it in.
   */
  hw-fade-slider {
    display: grid;
    position: relative;
  }

  hw-fade-slider > * {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity var(--hw-fade-slider-duration, 0.5s) ease;
    pointer-events: none;
    visibility: hidden;
  }

  hw-fade-slider > *.hw-fade-slider__slide--active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    z-index: 1;
  }

  /* In the theme editor, show all slides so they're selectable on the canvas */
  body.shopify-design-mode hw-fade-slider > * {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    position: relative;
    grid-area: unset;
  }
/* END_BLOCK:_hw-fade-slider-content */

/* START_BLOCK:_hw-header-menu (INDEX:143) */
/* Mobile drawer shell — ported from _hw-header-menu (HW2 does not load v1 menu block CSS) */
  .header__drawer {
    --header-drawer-min-height: 60px;
    display: flex;
    min-height: var(--header-drawer-min-height);
    align-items: center;
  }

  #header-component[data-menu-style='drawer'] .header__drawer {
    display: flex;
    min-height: var(--header-drawer-min-height);
  }

  /* HW2 block nav: never show mobile drawer / hamburger once switched to menu
   * mode. Gated on the JS-set data-menu-style attribute (driven by the
   * section's configurable menu_breakpoint setting) instead of a fixed
   * @media condition, since Liquid output can't be interpolated into an
   * @media condition inside {% stylesheet %} — see Dev Notes ->
   * shopify-liquid-limitations.md. Dropping the media wrapper here also
   * fixes a latent gap: a non-block-nav header could reach data-menu-style
   * 'menu' as low as 750px, but this rule previously only applied at 990px+. */
  #header-component[data-menu-style='menu']:has([data-hw-menu-layout='block-nav']) .header__drawer,
  #header-component[data-menu-style='menu'] .header__drawer {
    display: none;
    min-height: 0;
  }

  .header--compact .header__drawer {
    min-height: var(--minimum-touch-target);
  }

  /* Block-based nav: wrap links in the row — no More / overflow drawer */
  .hw-overflow-menu {
    --overflow-list-overflow-y: visible;
  }

  /*
   * column-gap has to be re-declared here, not just on .menu-list. The flex
   * container that actually lays the nav items out is [part='list'] inside
   * <overflow-list>'s shadow root, and assets/overflow-list.css hard-codes
   * `column-gap: 1rem` on it. `--menu-horizontal-gap` was set on .menu-list and
   * read by nobody, so "Space between nav items" silently did nothing — it only
   * ever looked correct because the default nav-item-gap (16px) happens to equal
   * that 1rem. Custom properties inherit through the shadow boundary, so the var
   * set on .menu-list resolves fine here; it just needed a consumer, and a
   * ::part() declaration from this tree outranks the shadow stylesheet's own.
   */
  .hw-overflow-menu::part(list) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: inherit;
    column-gap: var(--menu-horizontal-gap, 1rem);
    row-gap: var(--menu-vertical-gap, var(--gap-xs));
    overflow: visible;
  }

  /* HW Header Menu — hover contract (assets/hw-header-menu.js); delays from inline style */
  .header-menu {
    height: 100%;
    /* box-sizing is border-box theme-wide, so this eats into the 100% rather than
       adding to it — the nav shrinks inside the row instead of growing it. */
    padding-block: var(--hw-menu-pad-block-start, 0px) var(--hw-menu-pad-block-end, 0px);
    --hw-submenu-link-padding-block: 8px;
    --hw-submenu-link-padding-inline-start: 14px;
    --hw-submenu-link-padding-inline-end: 10px;
  }

  .header-menu .hw-nav-item__anchor .hw-dropdown-submenu {
    margin-block-start: var(--hw-dropdown-gap, 0);
  }

  .header-menu__inner {
    height: 100%;
  }

  /* Vertical centering (ported from _hw-header-menu — HW2 does not load v1 menu CSS) */
  .menu-list {
    --menu-horizontal-gap: var(--hw-nav-item-gap, var(--gap-xl));
    --menu-vertical-gap: var(--gap-xl);
    display: flex;
    height: 100%;
  }

  .menu-list__list-item {
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .menu-list__list-item[aria-hidden='true'] {
    visibility: hidden;
  }

  .menu-list__link {
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    margin-block: 0;
  }

  .menu-list__link-title {
    padding-inline: calc(var(--gap-xl) / 2);
    color: inherit;
  }

  .header-menu .menu-list__link-title.hw-header-menu-2-nav-typo--top-level.custom-typography.custom-font-size,
  .header-menu .hw-dropdown-menu .mega-menu__link.hw-header-menu-2-nav-typo--submenu.custom-typography.custom-font-size {
    font-family: var(--font-family);
    font-style: var(--font-style);
    font-weight: var(--font-weight);
    font-size: var(--font-size);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    text-transform: var(--text-transform);
  }

  @media screen and (min-width: 750px) {
    .header-menu .menu-list__link-title.hw-header-menu-2-nav-typo--top-level.custom-typography.custom-font-size,
    .header-menu .hw-dropdown-menu .mega-menu__link.hw-header-menu-2-nav-typo--submenu.custom-typography.custom-font-size {
      font-size: var(--font-size-desktop, var(--font-size));
    }
  }

  .header-menu .menu-list__link-title.hw-header-menu-2-nav-typo--top-level.custom-typography.custom-color,
  .header-menu .hw-dropdown-menu .mega-menu__link.hw-header-menu-2-nav-typo--submenu.custom-typography.custom-color {
    color: var(--color);
  }

  /* Top-level links with submenus — pill hover + chevron (Glowwa-style) */
  .menu-list__list-item:has([aria-haspopup='true']) > .menu-list__link,
  .menu-list__list-item:has([aria-haspopup='true']) .hw-nav-item__anchor > .menu-list__link {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--hw-submenu-chevron-gap, var(--gap-2xs));
    width: max-content;
    max-width: 100%;
    height: auto;
    padding-block: var(--hw-submenu-link-padding-block, 8px);
    padding-inline-start: var(--hw-submenu-link-padding-inline-start, 14px);
    padding-inline-end: var(--hw-submenu-link-padding-inline-end, 10px);
    border-radius: var(--style-border-radius-buttons, 999px);
    transition:
      background-color var(--animation-speed, 0.15s) ease,
      color var(--animation-speed, 0.15s) ease;
  }

  .menu-list__list-item:has([aria-haspopup='true']) > .menu-list__link .menu-list__link-title,
  .menu-list__list-item:has([aria-haspopup='true']) .hw-nav-item__anchor > .menu-list__link .menu-list__link-title {
    flex: 0 1 auto;
    padding-inline: 0;
  }

  .menu-list__list-item:has([aria-haspopup='true']) > .menu-list__link:hover,
  .menu-list__list-item:has([aria-haspopup='true']) > .menu-list__link:focus-visible,
  .menu-list__list-item:has([aria-haspopup='true']) > .menu-list__link[aria-expanded='true'],
  .menu-list__list-item:has([aria-haspopup='true']) .hw-nav-item__anchor > .menu-list__link:hover,
  .menu-list__list-item:has([aria-haspopup='true']) .hw-nav-item__anchor > .menu-list__link:focus-visible,
  .menu-list__list-item:has([aria-haspopup='true']) .hw-nav-item__anchor > .menu-list__link[aria-expanded='true'] {
    background-color: rgb(var(--color-foreground-rgb) / 0.06);
  }

  .header-menu[data-hw-show-nav-chevron='false'] .hw-submenu-chevron-icon-wrap {
    display: none;
  }

  .header-menu[data-hw-show-promo-arrow='false'] .hw-dropdown-menu__promo-arrow {
    display: none;
  }

  .menu-list__link-chevron,
  .hw-submenu-chevron-icon-wrap.menu-list__link-chevron {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin-inline: 0;
    color: inherit;
  }

  .menu-list__link-chevron .svg-wrapper,
  .menu-list__link-chevron .hw-custom-inline-svg-wrap,
  .hw-submenu-chevron-icon-wrap.menu-list__link-chevron .svg-wrapper,
  .hw-submenu-chevron-icon-wrap.menu-list__link-chevron .hw-custom-inline-svg-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--hw-submenu-chevron-size, 18px);
    height: var(--hw-submenu-chevron-size, 18px);
  }

  .menu-list__link-chevron-icon svg,
  .menu-list__link-chevron .hw-custom-inline-svg-wrap svg,
  .hw-submenu-chevron-icon-wrap.menu-list__link-chevron .hw-submenu-chevron-icon svg,
  .hw-submenu-chevron-icon-wrap.menu-list__link-chevron .hw-custom-inline-svg-wrap svg {
    width: var(--hw-submenu-chevron-size, 18px);
    height: var(--hw-submenu-chevron-size, 18px);
    display: block;
    transition: transform var(--animation-speed, 0.15s) ease;
  }

  .menu-list__link[aria-expanded='true'] .menu-list__link-chevron-icon svg,
  .menu-list__link[aria-expanded='true'] .menu-list__link-chevron .hw-custom-inline-svg-wrap svg,
  .menu-list__link[aria-expanded='true'] .hw-submenu-chevron-icon-wrap.menu-list__link-chevron .hw-submenu-chevron-icon svg,
  .menu-list__link[aria-expanded='true'] .hw-submenu-chevron-icon-wrap.menu-list__link-chevron .hw-custom-inline-svg-wrap svg {
    transform: rotate(var(--hw-submenu-chevron-open-rotate, 180deg));
  }

  /* Mega items keep column layout for bridge; dropdown uses .hw-nav-item__anchor */
  .menu-list__list-item:has([data-submenu-type='mega_menu']) {
    flex-direction: column;
    align-items: flex-start;
  }

  /* List items use nowrap for top-level links; mega panels need normal wrapping */
  .menu-list__list-item:has([data-submenu-type='mega_menu']) .menu-list__submenu,
  .menu-list__list-item:has([data-submenu-type='mega_menu']) .hw-mega-showcase {
    white-space: normal;
  }
/* END_BLOCK:_hw-header-menu */

/* START_BLOCK:_hw-mobile-drawer-rich-item (INDEX:161) */
.hw-mobile-drawer-rich-item {
    inline-size: 100%;
  }

  .hw-mobile-drawer-rich-item__inner {
    display: flex;
    align-items: center;
    min-inline-size: 0;
  }

  .hw-mobile-drawer-rich-item__inner > * {
    min-inline-size: 0;
  }

  .hw-mobile-drawer-rich-branch--panel {
    display: flex;
    flex-direction: column;
    margin-inline: calc(var(--drawer-padding) * -1);
    padding-inline: var(--drawer-padding);
    margin-block-start: var(--hw-mdr-panel-mt, 0px);
    margin-block-end: var(--hw-mdr-panel-mb, 0px);
    padding-block-start: var(--hw-mdr-panel-pt, 0px);
    padding-block-end: var(--hw-mdr-panel-pb, 0px);
    gap: var(--hw-mdr-panel-gap, 12px);
  }

  @media (width >= 990px) {
    .hw-mobile-drawer-rich-branch--panel {
      margin-block-start: var(--hw-mdr-panel-mt-d, var(--hw-mdr-panel-mt, 0px));
      margin-block-end: var(--hw-mdr-panel-mb-d, var(--hw-mdr-panel-mb, 0px));
      padding-block-start: var(--hw-mdr-panel-pt-d, var(--hw-mdr-panel-pt, 0px));
      padding-block-end: var(--hw-mdr-panel-pb-d, var(--hw-mdr-panel-pb, 0px));
    }
  }
/* END_BLOCK:_hw-mobile-drawer-rich-item */

/* START_BLOCK:_hw-product-details (INDEX:162) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

  .view-product-title {
    display: none;
  }

  /* Container styles */
  .product-details {
    display: flex;
    align-self: start;
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .product-details > .group-block {
      height: min-content;
    }

    .full-height--desktop {
      height: 100%;
      max-height: calc(100vh - var(--header-group-height, 0));
      min-height: fit-content;
    }

    .full-height--desktop .group-block {
      align-self: var(--details-position, 'flex-start');
    }
  }
/* END_BLOCK:_hw-product-details */

/* START_BLOCK:_hw-product-usp-chip-item (INDEX:165) */
.hw-product-usp-chip-item__shell {
    --hw-product-usp-chip-background: #f2dce5;
    --hw-product-usp-chip-padding-block: 4px;
    --hw-product-usp-chip-padding-inline: 6px;
    --hw-product-usp-chip-padding-block-desktop: 4px;
    --hw-product-usp-chip-padding-inline-desktop: 6px;
    --hw-product-usp-chip-radius: 4px;

    display: flex;
    max-width: 100%;
    min-width: 0;
  }

  .hw-product-usp-chip-item__shell > .hw-product-usp-chip-item.group-block {
    width: auto;
    max-width: 100%;
    min-width: 0;
    border-radius: var(--hw-product-usp-chip-radius);
  }

  /* The chip surface is always chip_background; text comes from the block's
     text_color, which `group` applies inline on this same element. */
  .hw-product-usp-chip-item__shell > .hw-product-usp-chip-item.group-block {
    background: var(--hw-product-usp-chip-background);
  }

  .hw-product-usp-chip-item__shell > .hw-product-usp-chip-item .group-block-content {
    padding-block: var(--hw-product-usp-chip-padding-block);
    padding-inline: var(--hw-product-usp-chip-padding-inline);
  }

  @media screen and (min-width: 990px) {
    .hw-product-usp-chip-item__shell > .hw-product-usp-chip-item .group-block-content {
      padding-block: var(--hw-product-usp-chip-padding-block-desktop);
      padding-inline: var(--hw-product-usp-chip-padding-inline-desktop);
    }
  }

  .hw-product-usp-chip-item > * {
    min-width: 0;
  }
/* END_BLOCK:_hw-product-usp-chip-item */

/* START_BLOCK:_image (INDEX:167) */
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:171) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-background);
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
  }

  .hero__content-wrapper.layout-panel-flex--column marquee-component {
    --margin-inline: var(--full-page-margin-inline-offset);

    width: -webkit-fill-available;
    min-height: max-content;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
/* END_BLOCK:_marquee */

/* START_BLOCK:_product-card-gallery (INDEX:174) */
.product-badges {
    --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));

    position: absolute;
    z-index: var(--layer-flat);
  }

  .product-badges--bottom-left {
    bottom: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-left {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-right {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    right: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges__badge {
    --badge-font-size: var(--font-size--xs);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-foreground);
    background: var(--color-background);
    font-size: var(--badge-font-size);
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
  }

  .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block);
    padding-inline: var(--badge-rectangle-padding-inline);
  }
/* END_BLOCK:_product-card-gallery */

/* START_BLOCK:_product-details (INDEX:177) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

  .view-product-title {
    display: none;
  }

  /* Container styles */
  .product-details {
    display: flex;
    align-self: start;
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .product-details > .group-block {
      height: min-content;
    }

    .full-height--desktop {
      height: 100%;
      max-height: calc(100vh - var(--header-group-height, 0));
      min-height: fit-content;
    }

    .full-height--desktop .group-block {
      align-self: var(--details-position, 'flex-start');
    }
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_search-input (INDEX:182) */
.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:183) */
.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 > .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:184) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:_social-link */

/* START_BLOCK:accelerated-checkout (INDEX:185) */
.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:186) */
.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[style*='--border-width: 0'],
  .accordion--dividers[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:189) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;

    width: 100%;
  }

  .product-form-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  .product-form-buttons:not(:has(.quantity-rules)) {
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .product-form-buttons > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing) {
    flex: 1 1 var(--buy-button-preferred-width, 0);
    min-width: fit-content;
  }

  .product-form-buttons--stacked
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing) {
    flex-basis: 51%;
  }

  .product-form-buttons button {
    width: 100%;
    padding-block: var(--padding-lg);
  }

  .quantity-selector {
    flex-grow: 0;
    flex-shrink: 0;
    height: var(--height-buy-buttons);
  }

  .quantity-label {
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--sm);
    margin-block-end: var(--gap-xs);
  }

  .quantity-label__cart-count {
    color: var(--color-foreground-secondary);
  }

  .quantity-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    row-gap: calc(var(--gap-xs) / 2);
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--xs);
    color: var(--color-foreground-secondary);
    margin-block-start: var(--gap-xs);
    margin-block-end: var(--gap);
  }

  .product-form-buttons:has(~ .volume-pricing .volume-pricing__title) .quantity-rules {
    margin-block-end: var(--gap-md);
  }

  .quantity-rules__item {
    position: relative;
    display: inline-block;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .quantity-rules__item:not(:last-child) {
    padding-right: var(--padding-xl);
    margin-right: var(--margin-2xs);
  }

  .quantity-rules__item:not(:last-child)::after {
    content: '•';
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5em;
    line-height: 0;
  }

  .add-to-cart-button {
    height: var(--height-buy-buttons);
    text-transform: var(--button-text-case-primary);
  }

  .add-to-cart-button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .product-form-text__error {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-xs);
    margin-block-end: var(--gap-xs);
  }

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

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

  .volume-pricing {
    display: block;
    width: 100%;
    margin-bottom: var(--gap);
  }

  .volume-pricing:not(:has(.volume-pricing__title)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .volume-pricing__title {
    display: block;
    margin-block-end: var(--gap-sm);
    font-size: var(--font-size--sm);
    font-weight: var(--font-body--weight);
    color: var(--color-foreground);
  }

  .volume-pricing__table {
    width: 100%;
  }

  .volume-pricing__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-md);
    font-size: var(--font-size--sm);
  }

  .volume-pricing__row--even {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing__row--odd {
    background: var(--color-background);
  }

  .volume-pricing__collapsible-wrapper {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition: opacity var(--animation-speed-slow) var(--animation-easing),
      block-size var(--animation-speed-slow) var(--animation-easing);
  }

  .volume-pricing__toggle {
    width: 100%;
    padding-bottom: 0;
    padding-inline: 0;
    text-align: left;
    color: var(--color-foreground-secondary);
    font-size: var(--font-size--xs);
    cursor: default;
    margin-block-start: 0;
    pointer-events: none;
  }

  button.volume-pricing__toggle {
    /* Need the extra specificity to override .product-form-buttons button */
    padding-block: var(--padding-sm);
  }

  .volume-pricing__toggle-text {
    cursor: pointer;
    display: inline-block;
    pointer-events: auto;
  }

  .volume-pricing__show-less {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__collapsible-wrapper {
    opacity: 1;
    block-size: auto;

    @starting-style {
      block-size: 0;
      opacity: 0;
      overflow-y: clip;
    }
  }

  .volume-pricing--expanded .volume-pricing__show-more {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__show-less {
    display: inline;
  }
/* END_BLOCK:buy-buttons */

/* START_BLOCK:comparison-slider (INDEX:192) */
comparison-slider-component {
    display: block;
  }

  .comparison-slider {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider:not(:has(img)) {
    min-width: 25dvh;
  }

  .comparison-slider__container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Container and Layout */
  .comparison-slider__media-wrapper {
    --compare: 50;

    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: 1fr / 1fr;
    overflow: hidden;
  }

  /* Layer Containers */
  .comparison-slider__layer {
    grid-area: 1 / 1;
    position: relative;
    width: 100%;
    height: 100%;
    transition: clip-path var(--transition-duration, 0s) ease-in-out;
  }

  .comparison-slider__layer--after {
    z-index: var(--layer-base);
  }

  /* Before Layer Clipping (inverse of after layer) */
  [data-orientation='horizontal'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 calc((100 - var(--compare)) * 1%) 0 0);
  }

  [data-orientation='vertical'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 calc(var(--compare) * 1%) 0);
  }

  /* After Layer Clipping */
  [data-orientation='horizontal'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 0 calc(var(--compare) * 1%));
  }

  [data-orientation='vertical'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(calc((100 - var(--compare)) * 1%) 0 0 0);
  }

  /* Images and Placeholders */
  .before-image,
  .after-image,
  .comparison-slider__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider__placeholder {
    position: absolute;
    inset: 0;
  }

  .comparison-slider__placeholder svg {
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    fill: var(--color-foreground);
  }

  /* Range Input (Hidden but Functional) */
  .cs-slider {
    position: absolute;
    inset: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: inherit;
    appearance: none;
  }

  [data-orientation='horizontal'] .cs-slider {
    cursor: ew-resize;
  }

  [data-orientation='vertical'] .cs-slider {
    cursor: ns-resize;
    writing-mode: vertical-lr;
    direction: rtl;
  }

  /* Range Input Thumb */
  .cs-slider::-webkit-slider-thumb,
  .cs-slider::-moz-range-thumb {
    width: var(--button-size);
    height: var(--button-size);
    border: 0;
    background: transparent;
    cursor: inherit;
    appearance: none;
  }

  /* Range Input Track */
  .cs-slider::-webkit-slider-track,
  .cs-slider::-moz-range-track {
    background: transparent;
    border: 0;
    appearance: none;
  }

  /* Visual Slider Elements */
  .comparison-slider__media-wrapper::before,
  .comparison-slider__media-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out;
    z-index: var(--layer-raised);
  }

  /* Slider Track Line */
  .comparison-slider__media-wrapper::after {
    background: var(--color-background);
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
  }

  .comparison-slider__media-wrapper::before {
    background: var(--color-background);
  }

  .comparison-slider__media-wrapper[data-orientation='horizontal']::after {
    inset: 0 auto;
    left: calc(var(--compare) * 1%);
    width: 4px;
    transform: translateX(-50%);
  }

  .comparison-slider__media-wrapper[data-orientation='vertical']::after {
    inset: auto 0;
    top: calc((100 - var(--compare)) * 1%);
    height: 4px;
    transform: translateY(-50%);
  }

  /* Slider Handle */
  .cs-slider__handle {
    position: absolute;
    z-index: var(--layer-heightened);
    pointer-events: none;
    width: var(--button-size);
    height: var(--button-size);
    background: var(--color-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out,
      gap 0.2s ease-in-out;
    gap: var(--gap-sm);
    padding: var(--padding-xs);
  }

  .comparison-slider__media-wrapper:hover .cs-slider__handle {
    gap: var(--gap-2xs);
  }

  .cs-slider__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  [data-orientation='horizontal'] .cs-slider__handle {
    top: 50%;
    left: calc(var(--compare) * 1%);
    transform: translate(-50%, -50%);
    flex-direction: row;
  }

  [data-orientation='vertical'] .cs-slider__handle {
    left: 50%;
    top: calc((100 - var(--compare)) * 1%);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Text Labels */
  .comparison-slider__text {
    position: absolute;
    padding: var(--padding-xs);
    pointer-events: none;
  }

  .comparison-slider__text--with-bg {
    background: var(--text-background-color);
    border-radius: var(--text-corner-radius);
  }

  /* Horizontal: before/after control inline (left/right), position controls block (top/bottom) */
  [data-orientation='horizontal'] .comparison-slider__text--before {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='horizontal'] .comparison-slider__text--after {
    inset-inline-end: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='start'] .comparison-slider__text {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='end'] .comparison-slider__text {
    inset-block-end: var(--padding-sm);
  }

  /* Vertical: before/after control block (top/bottom), position controls inline (left/right) */
  [data-orientation='vertical'] .comparison-slider__text--before {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='vertical'] .comparison-slider__text--after {
    inset-block-end: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='start'] .comparison-slider__text {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='end'] .comparison-slider__text {
    inset-inline-end: var(--padding-sm);
  }
/* END_BLOCK:comparison-slider */

/* START_BLOCK:contact-form-submit-button (INDEX:193) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:194) */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .contact-form__form-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);

    @media screen and (min-width: 750px) {
      flex-direction: row;
      align-items: center;
    }
  }

  .contact-form__input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding: var(--padding-lg) var(--padding-xl);
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .contact-form__error,
  .contact-form__success {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }
/* END_BLOCK:contact-form */

/* START_BLOCK:email-signup (INDEX:196) */
.email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 42px;
    --arrow-button-size-small: 20px;
    --arrow-icon-size: 32px;
    --arrow-icon-size-small: 24px;

    min-width: fit-content;

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

  .email-signup__heading {
    padding-block: var(--padding-sm);
  }

  .email-signup__form {
    display: flex;
    flex-direction: column;
  }

  .email-signup__input-group {
    display: flex;
    align-items: stretch;
    background-color: transparent;
  }

  .email-signup__input-group:not(.email-signup__input-group--integrated):not(.email-signup__input-group--underline) {
    gap: var(--gap-xs);
    align-items: center;
  }

  .email-signup__input-group:not(.email-signup__input-group--arrow):not(.email-signup__input-group--underline):not(
      .email-signup__input-group--integrated
    ) {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .email-signup__input-group--integrated {
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
  }

  .email-signup__input-group--integrated.email-signup__input-group--no-border {
    border: none;
  }

  .email-signup__input {
    flex: 1;
    min-width: 0;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);

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

  .email-signup__input-group--integrated .email-signup__input {
    background-color: transparent;
    border: none;
    border-radius: 0;
  }

  .email-signup__input.paragraph {
    color: var(--color-input-text);
    outline-color: var(--color-input-background);
  }

  .email-signup__button {
    white-space: nowrap;
    padding: 0;

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

  .email-signup__input,
  .email-signup__button--text {
    padding: var(--padding-lg) var(--padding-3xl);
  }

  .email-signup__input-group--underline {
    --box-shadow-color: var(--color-input-border);
    --box-shadow-multiplier: 1;
    --box-shadow-focused-multiplier: 1.75;

    box-shadow: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color);
    transition: box-shadow var(--animation-values);
    margin-block-end: calc(var(--border-width) * var(--box-shadow-focused-multiplier));

    &:focus-within {
      --box-shadow-multiplier: var(--box-shadow-focused-multiplier);
      --box-shadow-color: var(--color-input-text);
    }
  }

  .email-signup__input-group .email-signup__input--underline {
    color: var(--color-input-text);
    background-color: transparent;
    padding: 12px 0;
    border: none;
    border-radius: 0;

    &:focus-visible {
      outline: none;
    }
  }

  .email-signup__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
  }

  .email-signup__input-group .email-signup__input--none {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: none;
  }

  .email-signup__button-icon {
    color: currentcolor;
    padding: 5px;

    @media screen and (max-width: 749px) {
      padding: 0;
      align-self: center;
      justify-self: center;
      width: var(--icon-size-lg);
      height: var(--icon-size-lg);
    }
  }

  .email-signup__button--arrow {
    width: var(--arrow-button-size-small);
    height: var(--arrow-button-size-small);
    padding: 0;

    &:not(.email-signup__button--integrated) {
      width: var(--arrow-button-size);
      height: var(--arrow-button-size);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size);
        height: var(--arrow-icon-size);
        padding: 0;
      }
    }
  }

  .email-signup__button--integrated {
    --button-offset: var(--margin-xs);
    align-self: stretch;
    margin: var(--button-offset);
    flex-shrink: 0;

    @media screen and (max-width: 749px) {
      width: fit-content;
    }

    &.email-signup__button--text {
      padding: 0 var(--padding-3xl);
    }

    &.email-signup__button--text.button-unstyled {
      padding: 0 var(--padding-xl);
    }

    &.button-unstyled {
      border-radius: var(--border-radius);
    }

    > .email-signup__button-icon {
      padding: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      align-self: center;
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__input--underline + .email-signup__button--integrated {
    margin: 0;
    align-self: center;

    &.email-signup__button--text {
      padding-block: 9px;
    }

    &.email-signup__button--text.button-unstyled {
      padding-inline: 0;
    }

    &.button-unstyled {
      border-radius: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__button:not(.button-unstyled) {
    background-color: var(--button-background-color);
    color: var(--button-color);
    text-transform: var(--button-text-case-primary);
  }

  .email-signup__button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .email-signup__button.button-unstyled {
    background-color: transparent;
    color: var(--color-input-text);
  }

  .email-signup__button.button-unstyled:hover {
    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:198) */
.facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: var(--facets-margin);
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-toggle {
    --icon-offset: -3px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    margin: var(--facets-margin);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-toggle__wrapper {
    margin-left: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      /* stylelint-disable-next-line declaration-no-important */
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    dialog-component.facets-block-wrapper {
      position: absolute;
      width: 0;
      height: 0;
    }
  }

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

  .facets--vertical {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: 0 var(--padding-block-end);
      display: block;
      position: static;
      top: auto;
      bottom: auto;
      height: auto;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--drawer {
    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;
    height: 100%;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper .facets__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__filters {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .facets-drawer__filters .facets__filters-wrapper,
  .facets-drawer__filters .filter-remove-buttons,
  .facets-drawer__filters .sorting-filter-component {
    overflow: visible;
  }

  .facets.facets-controls-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: column-1 / column-12;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
      gap: 0 var(--facets-form-horizontal-gap);
      padding-bottom: var(--padding-xs);
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-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-h5--size);
    display: flex;
    justify-content: space-between;

    &:hover {
      --icon-opacity: 1;
    }
  }

  .facets__filters-wrapper:hover .facets__summary,
  .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
    opacity: var(--facets-hover-opacity);
  }

  .facets__filters-wrapper .facets__summary:hover,
  .facets__filters-wrapper .facets__panel[open] .facets__summary {
    opacity: 1;
  }

  .facets--horizontal .facets__summary {
    @media screen and (min-width: 750px) {
      font-size: var(--font-paragraph--size);
      justify-content: flex-start;
      height: var(--minimum-touch-target);
    }
  }

  .facets__summary .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
    margin-block: var(--margin-2xs);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  /* Facets - 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 {
    @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-link,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link {
    display: none;
    cursor: pointer;
    padding: var(--padding-xs);
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: var(--color-primary-hover);

    text-decoration: underline;
    text-decoration-color: var(--button-color);
  }

  .facets__clear-all-link--horizontal {
    height: var(--minimum-touch-target);
    padding-inline: var(--facets-form-horizontal-gap);
    min-width: var(--facets-clear-all-min-width);
  }

  .facets__clear-all-link--active {
    display: block;
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  .clear-filter:hover {
    text-decoration: underline;
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 750px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

  .facets__clear--active {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;
    white-space: nowrap;

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  .facets--horizontal .products-count-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: var(--color-foreground);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-xs);
    padding-inline-start: var(--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);
    }
  }

  /* Facets - Actions */
  .facets__drawer-actions {
    --to-top-gradient-background: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / var(--opacity-90)),
      rgb(var(--color-background-rgb) / var(--opacity-80)),
      rgb(var(--color-background-rgb) / var(--opacity-40)),
      transparent
    );

    position: sticky;
    bottom: 0;
    z-index: var(--facets-sticky-z-index);
    order: 1;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
    background-image: var(--to-top-gradient-background);
    background-color: var(--color-background);
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
    color: var(--button-color, inherit);
  }

  .facets__clear-all--active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: transform var(--animation-values), opacity var(--animation-values);
  }

  @starting-style {
    .facets__clear-all--active {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
  }

  .facets-horizontal-remove {
    display: flex;
    align-items: center;
  }

  .facets-horizontal-remove--active::before {
    content: '';
    border-inline-start: var(--style-border-width) solid var(--color-border);
    height: var(--font-paragraph--size);
    position: absolute;
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-policy-list (INDEX:201) */
.policy-list-trigger {
    anchor-name: --terms-policies-trigger;
    cursor: pointer;
    font-size: var(--font-size, 0.75rem);
    text-transform: var(--text-transform, none);
  }

  .policy_list {
    li {
      border-radius: calc(var(--style-border-radius-popover) - 8px);

      a {
        color: var(--color-foreground);
        display: inline-block;
        padding: 8px;
        text-align: start;
        width: 100%;
        outline-color: #0000;
        font-size: var(--font-size, 0.75rem);
        text-transform: var(--text-transform, none);
      }

      &:is(:hover, :focus-within) {
        background: rgb(var(--color-foreground-rgb) / 0.15);
      }
    }
  }

  .terms-policies-popover {
    position-anchor: --terms-policies-trigger;
    inset: unset;
    bottom: calc(anchor(top) + 1rem);
    left: anchor(left);
    border-radius: var(--style-border-radius-popover);
    background: linear-gradient(var(--color-background) 0 100%),
      linear-gradient(rgb(var(--color-background-rgb) / 0.15) 0 100%);
    background-clip: padding-box, border-box;
    border: 1px solid #0000;
    box-shadow: var(--shadow-popover);
    padding: 8px;
    margin: 0;
    opacity: 0;
    scale: 0.94;
    translate: 0 6px;
    transform-origin: 3.9em 100%;
  }

  .terms-policies-popover.\:popover-open,
  .terms-policies-popover:popover-open {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  @media screen and (max-width: 749px) {
    .terms-policies-popover {
      left: anchor(center);
      transform: translate(-50%, 0);
      transform-origin: 0% 100%;
    }
  }

  @supports not (position-anchor: --account-button-trigger) {
    .terms-policies-popover {
      bottom: unset;
      top: calc(var(--anchor-top) * 1px);
      left: calc(var(--anchor-left) * 1px);
      transform: translate(0, calc(-100% - 1.25rem));
    }

    @media screen and (max-width: 749px) {
      .terms-policies-popover {
        left: calc((var(--anchor-left) + (var(--anchor-width) / 2)) * 1px);
        transform: translate(-50%, calc(-100% - 1.25rem));
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .terms-policies-popover {
      transition-property: display, overlay, opacity, scale, translate;
      transition-behavior: allow-discrete;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
    }

    @starting-style {
      .terms-policies-popover.\:popover-open,
      .terms-policies-popover:popover-open {
        opacity: 0.7;
        translate: 0 6px;
        scale: 0.94;
      }
    }
  }
/* END_BLOCK:footer-policy-list */

/* START_BLOCK:hw-account-link (INDEX:205) */
.hw-account-link {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    text-decoration: none;
  }
/* END_BLOCK:hw-account-link */

/* START_BLOCK:hw-add-area (INDEX:206) */
.hw-add-area,
  .hw-add-area__body,
  .hw-add-area form {
    display: block;
    width: 100%;
  }
/* END_BLOCK:hw-add-area */

/* START_BLOCK:hw-add-button (INDEX:207) */
.hw-add-button-root {
    display: block;
    min-width: 0;
  }

  /* The control fills the root, so the width setting on the root is what decides. */
  .hw-add-button-root .hw-add-to-cart-wrapper,
  .hw-add-button-root add-to-cart-component {
    width: 100%;
  }

  .hw-add-button-root .hw-add-button {
    gap: var(--hw-add-btn-gap, 8px);
  }

  .hw-add-button-root .hw-add-button .add-to-cart-text {
    gap: var(--hw-add-btn-gap, 8px);
  }

  .hw-add-button-root .hw-add-button :is(.add-to-cart-icon, .add-to-cart-icon-svg) svg,
  .hw-add-button-root .hw-add-button :is(.add-to-cart-icon, .add-to-cart-icon-svg) img {
    width: var(--hw-add-btn-icon-size, 20px);
    height: var(--hw-add-btn-icon-size, 20px);
  }

  /* Custom padding is opt-in, so the size preset keeps its own padding by default. */
  .hw-add-button-root--custom-padding .hw-add-button {
    padding-block: var(--hw-add-btn-pad-block-start, 0px) var(--hw-add-btn-pad-block-end, 0px);
    padding-inline: var(--hw-add-btn-pad-inline-start, 0px) var(--hw-add-btn-pad-inline-end, 0px);
  }

  /*
   * Icon only. The label stays in the DOM and stays announced — product-form.js morphs it
   * to "Sold out" on variant change, and a button with no accessible name is a defect, not
   * a style.
   */
  .hw-add-button--icon-only .add-to-cart-text__content {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .hw-add-button--icon-only .add-to-cart-text {
    gap: 0;
  }
/* END_BLOCK:hw-add-button */

/* START_BLOCK:hw-add-price (INDEX:208) */
/* Layout only — every colour and font comes from the `--hw-price-*` properties that
     `.hw-price` already reads in assets/hw-price.css. */
  .hw-add-price {
    display: block;
    width: var(--width, 100%);
  }

  .hw-add-price .compare-at-price.hidden {
    display: none;
  }
/* END_BLOCK:hw-add-price */

/* START_BLOCK:hw-button-modal (INDEX:216) */
/* Block-level host so fill/custom trigger widths resolve against the section parent. */
  .hw-button-dialog-component {
    display: block;
    max-width: 100%;
  }

  /* Custom trigger width: min(100%, Npx) collapses when the host is intrinsic; use raw px. */
  .hw-button-dialog-component > .hw-button-block-root {
    width: var(
      --size-style-width-mobile-raw,
      var(--size-style-width-mobile, fit-content)
    );
  }

  @media screen and (min-width: 750px) {
    .hw-button-dialog-component > .hw-button-block-root {
      width: var(--size-style-width-raw, var(--size-style-width, fit-content));
    }
  }

  .hw-button-dialog.dialog-modal {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    overflow: hidden;
  }

  .hw-button-dialog.dialog-modal::backdrop {
    background: rgb(0 0 0 / var(--hw-button-dialog-overlay-opacity, 0.48));
    backdrop-filter: blur(var(--hw-button-dialog-backdrop-blur, 2px));
  }

  .hw-button-dialog.dialog-modal[open] {
    animation: hw-button-dialog-fade-in 0.25s var(--animation-easing, ease-out) forwards;
  }

  .hw-button-dialog.dialog-modal.dialog-closing {
    animation: hw-button-dialog-fade-out 0.2s var(--animation-easing, ease-in) forwards;
  }

  @keyframes hw-button-dialog-fade-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes hw-button-dialog-fade-out {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  .hw-button-dialog__viewport {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
    max-height: 100dvh;
    padding: var(--hw-button-dialog-inset-mobile, 20px);
  }

  .hw-button-dialog__stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--hw-button-dialog-close-gap-mobile, 10px);
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
  }

  /* Reset global .button min-height / padding so close stays 1:1 (theme button tokens differ per store). */
  .hw-button-dialog__close.button.button-unstyled {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--hw-button-dialog-close-size-mobile, 32px);
    height: var(--hw-button-dialog-close-size-mobile, 32px);
    min-width: var(--hw-button-dialog-close-size-mobile, 32px);
    min-height: var(--hw-button-dialog-close-size-mobile, 32px);
    max-width: var(--hw-button-dialog-close-size-mobile, 32px);
    max-height: var(--hw-button-dialog-close-size-mobile, 32px);
    padding: 0;
    margin: 0;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--color-background, #fff);
    color: var(--color-foreground, #000);
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
    position: relative;
    inset: auto;
    opacity: 1;
    animation: none;
  }

  .hw-button-dialog__close .svg-wrapper {
    width: 10px;
    height: 10px;
  }

  .hw-button-dialog__panel {
    width: 100%;
    max-height: var(--hw-button-dialog-max-height-mobile, 90dvh);
    overflow: auto;
    border-radius: var(--hw-button-dialog-radius-mobile, 14px);
    background: var(--color-background);
    color: var(--color-foreground);
    box-shadow: 0 8px 40px rgb(0 0 0 / 0.18);
  }

  .hw-button-dialog__inner {
    display: flex;
    flex-direction: column;
    gap: var(--hw-button-dialog-gap-mobile, 22px);
    padding-block: var(--hw-button-dialog-padding-block-start-mobile, 20px)
      var(--hw-button-dialog-padding-block-end-mobile, 20px);
    padding-inline: var(--hw-button-dialog-padding-inline-start-mobile, 20px)
      var(--hw-button-dialog-padding-inline-end-mobile, 20px);
  }

  .hw-button-dialog__inner > .hw-group {
    width: 100%;
    max-width: 100%;
  }

  .hw-button-dialog__inner > .hw-image,
  .hw-button-dialog__inner .layout-panel-flex--column > .hw-image {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    --hw-image-width-mobile: 100%;
    --hw-image-width-desktop: 100%;
  }

  .hw-button-dialog__inner .hw-image__media {
    inline-size: 100%;
    max-inline-size: 100%;
  }

  @media screen and (max-width: 989px) {
    .hw-button-dialog--mobile-bottom .hw-button-dialog__viewport {
      justify-content: flex-end;
    }

    .hw-button-dialog--mobile-bottom.hw-button-dialog--mobile-panel-flush-bottom
      .hw-button-dialog__panel {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    .hw-button-dialog--mobile-center .hw-button-dialog__viewport {
      justify-content: center;
    }
  }

  @media screen and (min-width: 990px) {
    .hw-button-dialog__viewport {
      padding: var(--hw-button-dialog-inset-desktop, 20px);
    }

    .hw-button-dialog__stack {
      max-width: var(--hw-button-dialog-max-width, 540px);
      gap: var(--hw-button-dialog-close-gap-desktop, 10px);
    }

    .hw-button-dialog__close.button.button-unstyled {
      width: var(--hw-button-dialog-close-size-desktop, 32px);
      height: var(--hw-button-dialog-close-size-desktop, 32px);
      min-width: var(--hw-button-dialog-close-size-desktop, 32px);
      min-height: var(--hw-button-dialog-close-size-desktop, 32px);
      max-width: var(--hw-button-dialog-close-size-desktop, 32px);
      max-height: var(--hw-button-dialog-close-size-desktop, 32px);
    }

    .hw-button-dialog__panel {
      max-height: var(--hw-button-dialog-max-height-desktop, 90dvh);
      border-radius: var(--hw-button-dialog-radius-desktop, 14px);
    }

    .hw-button-dialog__inner {
      gap: var(--hw-button-dialog-gap-desktop, 22px);
      padding-block: var(--hw-button-dialog-padding-block-start-desktop, 20px)
        var(--hw-button-dialog-padding-block-end-desktop, 20px);
      padding-inline: var(--hw-button-dialog-padding-inline-start-desktop, 20px)
        var(--hw-button-dialog-padding-inline-end-desktop, 20px);
    }

    .hw-button-dialog--desktop-center .hw-button-dialog__viewport {
      justify-content: center;
    }

    .hw-button-dialog--desktop-bottom .hw-button-dialog__viewport {
      justify-content: flex-end;
    }
  }
/* END_BLOCK:hw-button-modal */

/* START_BLOCK:hw-button (INDEX:217) */
.hw-button__form {
    margin: 0;
  }

  .hw-button__form .hw-button__submit {
    cursor: pointer;
  }

  .hw-button__form.hw-button--full-width,
  .hw-button__form.hw-button--full-width .hw-button__submit,
  a.hw-button--full-width {
    width: 100%;
    box-sizing: border-box;
  }

  /* Root wrapper owns the width via .size-style; inner elements always fill available content area. */
  a.hw-button,
  button.hw-button,
  form.hw-button__form {
    width: 100%;
    box-sizing: border-box;
  }

  .hw-button__form .hw-button__submit {
    width: 100%;
    box-sizing: border-box;
  }

  .hw-button--split {
    display: flex;
    align-items: stretch;
    padding: 0;
    text-decoration: none;
  }

  .hw-button--split.hw-button--align-left {
    justify-content: flex-start;
  }

  .hw-button--split.hw-button--align-right {
    justify-content: flex-end;
  }

  .hw-button--split.hw-button--align-space-between {
    justify-content: space-between;
  }

  .hw-button--split.hw-button--align-center {
    justify-content: center;
  }

  button.hw-button.hw-button--split,
  button.hw-button__modal-trigger {
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
  }

  button.hw-button__modal-trigger.button,
  button.hw-button__modal-trigger.button-secondary,
  button.hw-button__modal-trigger.button-tertiary {
    text-align: var(--text-align, center);
  }

  .hw-button__icon-media .svg-wrapper > svg[stroke]:not([stroke='none']),
  .hw-button__icon-media .svg-wrapper > svg [stroke]:not([stroke='none']) {
    stroke: var(--color-icon-svg-fill, currentColor);
    stroke-width: var(--icon-stroke-width);
    vector-effect: non-scaling-stroke;
  }

  /*
   * Padding resolution for every shape this block renders.
   *
   * `--hw-button-pad-*` is set (per breakpoint, scoped to the block id) only when the
   * block turns on "Override theme button padding". Left unset, each side falls back to
   * the size preset's `--button-padding-*` from Theme settings → Buttons. Resolving it
   * through variables instead of per-element rules is what makes the plain `<a>`, the
   * checkout submit `<button>` and the modal-trigger `<button>` all inset identically —
   * the old per-element selector list missed the modal trigger entirely, so its sliders
   * did nothing.
   *
   * Split buttons keep `padding: 0` on the control (below) and inset the label and icon
   * cells instead, so they read the same variables one level down.
   */
  .hw-button--custom-padding:not(.hw-button--split) {
    padding-block: var(--hw-button-pad-block-start, var(--button-padding-block))
      var(--hw-button-pad-block-end, var(--button-padding-block));
    padding-inline: var(--hw-button-pad-inline-start, var(--button-padding-inline))
      var(--hw-button-pad-inline-end, var(--button-padding-inline));
  }

  .hw-button--split .hw-button__text {
    padding-block: var(--hw-button-pad-block-start, var(--button-padding-block))
      var(--hw-button-pad-block-end, var(--button-padding-block));
    padding-inline: var(--hw-button-pad-inline-start, var(--button-padding-inline))
      var(--hw-button-pad-inline-end, var(--button-padding-inline));
    display: flex;
    align-items: center;
  }

  .hw-button--split .hw-button__divider {
    width: 1px;
    background-color: currentcolor;
    opacity: 0.35;
    flex-shrink: 0;
  }

  .hw-button__icon-group {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
  }

  /*
   * Square icon cell. The gutter is the label's own vertical inset counted twice, so the
   * cell tracks whichever padding won above — theme size preset or block override — with
   * no second copy of the numbers. `--hw-button-icon-size` is the block's icon-width
   * setting (per breakpoint); unset, it falls back to the theme icon size.
   */
  .hw-button--split .hw-button__icon {
    --hw-button-icon-gutter: calc(
      var(--hw-button-pad-block-start, var(--button-padding-block)) +
        var(--hw-button-pad-block-end, var(--button-padding-block))
    );

    width: calc(var(--hw-button-icon-gutter) + var(--hw-button-icon-size, var(--icon-size-sm)));
    min-width: calc(var(--hw-button-icon-gutter) + var(--hw-button-icon-size, var(--icon-size-sm)));
    min-height: calc(var(--hw-button-icon-gutter) + var(--hw-button-icon-size, var(--icon-size-sm)));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .hw-button--split .hw-button__icon .svg-wrapper {
    width: var(--hw-button-icon-size, var(--icon-size-sm));
    height: var(--hw-button-icon-size, var(--icon-size-sm));
  }

  .hw-button--split .hw-button__icon .svg-wrapper > svg {
    width: var(--hw-button-icon-size, var(--icon-size-sm));
    height: var(--hw-button-icon-size, var(--icon-size-sm));
  }

  .hw-button__icon-media img {
    width: var(--hw-button-icon-size, var(--icon-size-sm));
    height: var(--hw-button-icon-size, var(--icon-size-sm));
    object-fit: contain;
    display: block;
  }

  .hw-button__icon-media .hw-icon-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-icon-svg-fill, currentColor);
  }

  .hw-button__icon-media .hw-icon-svg svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .hw-button__icon-media .hw-icon-svg svg[stroke]:not([stroke='none']),
  .hw-button__icon-media .hw-icon-svg svg [stroke]:not([stroke='none']) {
    stroke: var(--color-icon-svg-fill, currentColor);
    stroke-width: var(--icon-stroke-width);
    vector-effect: non-scaling-stroke;
  }

  .hw-button__icon-media .hw-icon-svg svg[fill]:not([fill='none']),
  .hw-button__icon-media .hw-icon-svg svg [fill]:not([fill='none']) {
    fill: var(--color-icon-svg-fill, currentColor);
  }

  /* Root uses .size-style (base.css) + inline --size-style-width* from hw-size-style */
  .hw-button-block-root {
    display: block;
    max-width: 100%;
  }

  .hw-button-block-root--full-width {
    width: 100%;
  }
/* END_BLOCK:hw-button */

/* START_BLOCK:hw-buy-buttons (INDEX:218) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;

    width: 100%;
  }

  .product-form-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  .product-form-buttons:not(:has(.quantity-rules)) {
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .product-form-buttons > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing) {
    flex: 1 1 var(--buy-button-preferred-width, 0);
    min-width: fit-content;
  }

  .product-form-buttons--stacked
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing) {
    flex-basis: 51%;
  }

  .product-form-buttons button {
    width: 100%;
    padding-block: var(--padding-lg);
  }

  .quantity-selector {
    flex-grow: 0;
    flex-shrink: 0;
    height: var(--height-buy-buttons);
  }

  .quantity-label {
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--sm);
    margin-block-end: var(--gap-xs);
  }

  .quantity-label__cart-count {
    color: var(--color-foreground-secondary);
  }

  .quantity-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    row-gap: calc(var(--gap-xs) / 2);
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--xs);
    color: var(--color-foreground-secondary);
    margin-block-start: var(--gap-xs);
    margin-block-end: var(--gap);
  }

  .product-form-buttons:has(~ .volume-pricing .volume-pricing__title) .quantity-rules {
    margin-block-end: var(--gap-md);
  }

  .quantity-rules__item {
    position: relative;
    display: inline-block;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .quantity-rules__item:not(:last-child) {
    padding-right: var(--padding-xl);
    margin-right: var(--margin-2xs);
  }

  .quantity-rules__item:not(:last-child)::after {
    content: '•';
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5em;
    line-height: 0;
  }

  .add-to-cart-button {
    height: var(--height-buy-buttons);
    text-transform: var(--button-text-case);
  }

  .add-to-cart-button.button-secondary {
    text-transform: var(--button-text-case);
  }

  .product-form-text__error {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-xs);
    margin-block-end: var(--gap-xs);
  }

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

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

  .volume-pricing {
    display: block;
    width: 100%;
    margin-bottom: var(--gap);
  }

  .volume-pricing:not(:has(.volume-pricing__title)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .volume-pricing__title {
    display: block;
    margin-block-end: var(--gap-sm);
    font-size: var(--font-size--sm);
    font-weight: var(--font-body--weight);
    color: var(--color-foreground);
  }

  .volume-pricing__table {
    width: 100%;
  }

  .volume-pricing__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-md);
    font-size: var(--font-size--sm);
  }

  .volume-pricing__row--even {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing__row--odd {
    background: var(--color-background);
  }

  .volume-pricing__collapsible-wrapper {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition: opacity var(--animation-speed-slow) var(--animation-easing),
      block-size var(--animation-speed-slow) var(--animation-easing);
  }

  .volume-pricing__toggle {
    width: 100%;
    padding-bottom: 0;
    padding-inline: 0;
    text-align: left;
    color: var(--color-foreground-secondary);
    font-size: var(--font-size--xs);
    cursor: default;
    margin-block-start: 0;
    pointer-events: none;
  }

  button.volume-pricing__toggle {
    /* Need the extra specificity to override .product-form-buttons button */
    padding-block: var(--padding-sm);
  }

  .volume-pricing__toggle-text {
    cursor: pointer;
    display: inline-block;
    pointer-events: auto;
  }

  .volume-pricing__show-less {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__collapsible-wrapper {
    opacity: 1;
    block-size: auto;

    @starting-style {
      block-size: 0;
      opacity: 0;
      overflow-y: clip;
    }
  }

  .volume-pricing--expanded .volume-pricing__show-more {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__show-less {
    display: inline;
  }
/* END_BLOCK:hw-buy-buttons */

/* START_BLOCK:hw-card (INDEX:221) */
/*
   * hw-card scopes ALL inner styles under `.hw-card__*` so the base
   * `_card` stylesheet (which targets `.card__content`, etc.) cannot
   * leak in — including its default `aspect-ratio: var(--card-ratio, 1)`
   * that forced a square fallback.
   *
   * The outer wrapper keeps the `.card` class because the parent
   * `_hw-carousel-grid-content` stylesheet sizes slides via
   * `slideshow-slides > .card { ... }`.
   */

  .hw-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    /* Do NOT set height: 100%. Each hw-card must size to its own
     * ratio/content so different cards in the same grid/carousel can
     * render at different heights. align-self opts out of parent
     * flex/grid stretch (carousel slides default align-items: stretch). */
    align-self: start;
    border-width: var(--border-width, 0);
    border-style: var(--border-style, none);
    border-color: var(--border-color);
    container-type: inline-size;
  }

  .hw-card__content {
    width: 100%;
    /*
     * No height: 100%. With --has-ratio, ::before sets height; inner
     * fills via absolute inset. Without ratio, content height is natural.
     */
    position: relative;
    /*
     * Content sits ABOVE the block link so nested interactive elements
     * (buttons, links, inputs) can receive clicks. The `.hw-card__link ~`
     * rule below sets `pointer-events: none` on content so non-interactive
     * areas fall through to the link, while interactive children opt back
     * in via `pointer-events: auto`.
     */
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
  }

  /*
   * Padding-top ratio: full-width ::before sets in-flow height (% of
   * .hw-card__content width — keep block padding off this layer).
   * .hw-card__inner is position:absolute; inset:0 so flex content does
   * not stack under the pseudo (flex + float ratio hacks do not mix).
   */
  .hw-card__content--has-ratio {
    display: block;
  }

  .hw-card__content--has-ratio::before {
    content: '';
    display: block;
    width: 100%;
    padding-top: var(--card-ratio-padding, 0);
  }

  @media screen and (min-width: 990px) {
    .hw-card__content--has-ratio::before {
      padding-top: var(--card-ratio-padding-desktop, var(--card-ratio-padding, 0));
    }
  }

  .hw-card__content--has-ratio .hw-card__inner {
    position: absolute;
    inset: 0;
  }

  .hw-card__content:not(.hw-card__content--has-ratio) .hw-card__inner {
    flex: 1;
  }

  .hw-card__content.background-transparent {
    background-color: transparent;
  }

  .hw-card__media-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }

  .hw-card__bg-image {
    position: absolute;
    z-index: var(--layer-flat);
    width: var(--hw-card-bg-image-width, 50%);
    opacity: var(--hw-card-bg-image-opacity, 1);
    pointer-events: none;
    line-height: 0;
  }

  @media screen and (min-width: 750px) {
    .hw-card__bg-image {
      width: var(--hw-card-bg-image-width-desktop, var(--hw-card-bg-image-width, 50%));
    }
  }

  .hw-card__bg-image-el {
    width: 100%;
    height: auto;
    object-fit: contain;
    transform: rotate(var(--hw-card-bg-image-rotation, 0deg));
    transform-origin: center;
  }

  .hw-card__bg-image--top-left {
    top: 0;
    left: 0;
  }

  .hw-card__bg-image--top-right {
    top: 0;
    right: 0;
  }

  .hw-card__bg-image--top-center {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .hw-card__bg-image--bottom-left {
    bottom: 0;
    left: 0;
  }

  .hw-card__bg-image--bottom-right {
    bottom: 0;
    right: 0;
  }

  .hw-card__bg-image--center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  @media screen and (max-width: 749px) {
    .hw-card__bg-image-mobile--top-left {
      top: 0;
      right: auto;
      bottom: auto;
      left: 0;
      transform: none;
    }

    .hw-card__bg-image-mobile--top-right {
      top: 0;
      right: 0;
      bottom: auto;
      left: auto;
      transform: none;
    }

    .hw-card__bg-image-mobile--top-center {
      top: 0;
      right: auto;
      bottom: auto;
      left: 50%;
      transform: translateX(-50%);
    }

    .hw-card__bg-image-mobile--bottom-left {
      top: auto;
      right: auto;
      bottom: 0;
      left: 0;
      transform: none;
    }

    .hw-card__bg-image-mobile--bottom-right {
      top: auto;
      right: 0;
      bottom: 0;
      left: auto;
      transform: none;
    }

    .hw-card__bg-image-mobile--center {
      top: 50%;
      right: auto;
      bottom: auto;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  @media screen and (min-width: 750px) {
    .hw-card__bg-image-desktop--top-left {
      top: 0;
      right: auto;
      bottom: auto;
      left: 0;
      transform: none;
    }

    .hw-card__bg-image-desktop--top-right {
      top: 0;
      right: 0;
      bottom: auto;
      left: auto;
      transform: none;
    }

    .hw-card__bg-image-desktop--top-center {
      top: 0;
      right: auto;
      bottom: auto;
      left: 50%;
      transform: translateX(-50%);
    }

    .hw-card__bg-image-desktop--bottom-left {
      top: auto;
      right: auto;
      bottom: 0;
      left: 0;
      transform: none;
    }

    .hw-card__bg-image-desktop--bottom-right {
      top: auto;
      right: 0;
      bottom: 0;
      left: auto;
      transform: none;
    }

    .hw-card__bg-image-desktop--center {
      top: 50%;
      right: auto;
      bottom: auto;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .hw-card__media-wrapper video {
    z-index: var(--layer-raised);
  }

  .hw-card__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
  }

  .hw-card__link ~ :is(.hw-card__content, .hw-card__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  /* Needs the .hw-card__link ~ to be specific enough to take effect. */
  .hw-card__link ~ .hw-card__content--design-mode {
    pointer-events: auto;
  }

  /*
   * Click-to-play background video (hw-video deferred-media):
   * The card link uses --layer-raised and covers the card; the content
   * layer also uses --layer-raised and sits above the media wrapper by
   * default. Both would intercept clicks before the deferred-media
   * poster button could receive them. Flip the stack so media sits
   * above the link, let clicks fall through transparent regions, and
   * keep interactive children receiving clicks.
   */
  .hw-card--bg-video-click .hw-card__link {
    z-index: var(--layer-flat);
  }

  .hw-card--bg-video-click .hw-card__media-wrapper {
    z-index: var(--layer-raised);
    pointer-events: none;
  }

  .hw-card--bg-video-click
    .hw-card__media-wrapper
    .deferred-media__poster-button,
  .hw-card--bg-video-click .hw-card__media-wrapper :is(button, a, video) {
    pointer-events: auto;
  }

  /*
   * hw-card-bg-video wraps the hw-video render so it can listen for
   * clicks on the inner <video> (swapped in after the poster click) and
   * toggle play/pause. The wrapper must fill the media wrapper so the
   * deferred-media inside can still cover the card.
   */
  .hw-card__bg-video-wrapper {
    position: absolute;
    inset: 0;
    display: block;
  }

  .hw-card__bg-video-wrapper video {
    cursor: pointer;
  }

  .hw-card--bg-video-click .hw-card__content.background-transparent,
  .hw-card--bg-video-click
    .hw-card__content.background-transparent
    .hw-card__inner {
    pointer-events: none;
  }

  .hw-card--bg-video-click
    .hw-card__content.background-transparent
    .hw-card__inner
    :is(a, button, input, textarea, select) {
    pointer-events: auto;
  }

  .hw-card--bg-video-click .hw-card__content--design-mode,
  .hw-card--bg-video-click
    .hw-card__content--design-mode
    .hw-card__inner {
    pointer-events: auto;
  }
/* END_BLOCK:hw-card */

/* START_BLOCK:hw-cart-drawer-header (INDEX:223) */
.hw-cart-drawer-header__close.cart-drawer__close-button[data-hw-custom-close] {
    padding: var(--hw-drawer-close-padding);
    min-inline-size: var(--hw-drawer-close-min-touch);
    min-block-size: var(--hw-drawer-close-min-touch);
    inline-size: fit-content;
    block-size: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .hw-cart-drawer-header__close .hw-custom-close-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    pointer-events: none;
    flex: 0 0 auto;
  }

  .hw-cart-drawer-header__close .hw-custom-close-icon-wrap svg {
    display: block;
    inline-size: auto;
    block-size: auto;
    max-inline-size: 100%;
    max-block-size: 100%;
  }
/* END_BLOCK:hw-cart-drawer-header */

/* START_BLOCK:hw-collection-tab-card (INDEX:230) */
.collection-tab-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .collection-tab-card__image-wrap {
    display: block;
    width: 140px;
    height: 220px;
    overflow: hidden;
    background: var(--color-background-secondary, #f2f2f2);
  }

  @media screen and (min-width: 990px) {
    .collection-tab-card__image-wrap {
      width: 260px;
      height: 420px;
    }
  }

  .collection-tab-card__image,
  .collection-tab-card__image--placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .collection-tab-card__title {
    display: block;
    margin-top: 8px;
    text-align: center;
  }

  .collection-tab-card[aria-selected='true'] .collection-tab-card__image-wrap {
    /* outline, not box-shadow: the image is a child that fills the wrap
       completely (width/height: 100%), and a child's content always
       paints on top of its parent's own box-shadow - an inset box-shadow
       here would be fully hidden under the image. outline paints last,
       above all descendants, so it stays visible regardless.
       A negative outline-offset pulls it inside the box instead of the
       default (which extends outward from the border edge) - that
       outward bleed was both the "gap" (offset: 2px pushed it out
       further still) and the "cut off at the top" (this carousel's
       track clips vertical overflow to allow horizontal scroll; a
       negative offset keeps the whole ring inside the box's own edge,
       so there's nothing left to clip). */
    outline: 2px solid var(--color-foreground, #000);
    outline-offset: -2px;
  }
/* END_BLOCK:hw-collection-tab-card */

/* START_BLOCK:hw-compare-avatar-group (INDEX:232) */
.hw-compare-avatars {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .hw-compare-avatars__stack {
    display: flex;
    align-items: center;
  }

  .hw-compare-avatars__avatar {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 47px;
    border: 2px solid #ffffff;
    overflow: hidden;
    margin-inline-end: -4px;
    background: #ffffff;
  }

  .hw-compare-avatars__avatar:last-child {
    margin-inline-end: 0;
  }

  .hw-compare-avatars__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hw-compare-avatars__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
  }
/* END_BLOCK:hw-compare-avatar-group */

/* START_BLOCK:hw-div (INDEX:244) */
/* display is deliberately not declared: hw-block-display.css toggles it for the
     mobile-only / desktop-only classes, and a div is display: block already. */
  .hw-div {
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: var(--hw-div-align, flex-start);
    justify-self: var(--hw-div-align, flex-start);
    width: var(--hw-div-width, 100%);
    max-width: 100%;
    height: var(--hw-div-height, 8px);
    border: var(--hw-div-border-width, 0) solid var(--hw-div-border-color, transparent);
    border-radius: var(--hw-div-radius, 0);
    background: var(--hw-div-background, var(--color-primary));
    opacity: var(--hw-div-opacity, 1);
    transform: rotate(var(--hw-div-rotation, 0deg));
  }

  @media screen and (min-width: 750px) {
    .hw-div {
      width: var(--hw-div-width-desktop, var(--hw-div-width, 100%));
      height: var(--hw-div-height-desktop, var(--hw-div-height, 8px));
    }
  }
/* END_BLOCK:hw-div */

/* START_BLOCK:hw-email-signup (INDEX:246) */
.email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 42px;
    --arrow-button-size-small: 20px;
    --arrow-icon-size: 32px;
    --arrow-icon-size-small: 24px;

    min-width: fit-content;

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

  .email-signup__heading {
    padding-block-start: var(--hw-email-h-bs, 0px);
    padding-block-end: var(--hw-email-h-be, 0px);
  }

  @media screen and (min-width: 750px) {
    .email-signup__heading {
      padding-block-start: var(
        --hw-email-h-bs-d,
        var(--hw-email-h-bs, 0px)
      );
      padding-block-end: var(
        --hw-email-h-be-d,
        var(--hw-email-h-be, 0px)
      );
    }
  }

  .email-signup__form {
    display: flex;
    flex-direction: column;
  }

  .email-signup__input-group {
    display: flex;
    align-items: stretch;
    flex-direction: var(--hw-email-ig-fd, row);
    gap: 0;
    background-color: transparent;
  }

  @media screen and (min-width: 750px) {
    .email-signup__input-group {
      flex-direction: var(
        --hw-email-ig-fd-d,
        var(--hw-email-ig-fd, row)
      );
    }
  }

  .email-signup__input-group:not(.email-signup__input-group--integrated):not(
      .email-signup__input-group--underline
    ) {
    gap: var(--hw-email-ib-gap, var(--gap-xs));
    align-items: var(--hw-email-ig-ai, center);
  }

  @media screen and (min-width: 750px) {
    .email-signup__input-group:not(.email-signup__input-group--integrated):not(
        .email-signup__input-group--underline
      ) {
      gap: var(
        --hw-email-ib-gap-d,
        var(--hw-email-ib-gap, var(--gap-xs))
      );
      align-items: var(
        --hw-email-ig-ai-d,
        var(--hw-email-ig-ai, center)
      );
    }
  }

  .email-signup__input-group--integrated {
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
    overflow: hidden;
  }

  .email-signup__input-group--integrated.email-signup__input-group--no-border {
    border: none;
  }

  .email-signup__input {
    flex: 1;
    min-width: 0;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
  }

  @media screen and (max-width: 749px) {
    .email-signup__input-group--layout-m-column .email-signup__input {
      width: 100%;
    }
  }

  @media screen and (min-width: 750px) {
    .email-signup__input-group--layout-d-column .email-signup__input {
      width: 100%;
    }
  }

  .email-signup__input-group--integrated .email-signup__input {
    background-color: transparent;
    border: none;
    border-radius: 0;
  }

  .email-signup__input:is(
      .paragraph,
      .paragraph_2,
      .paragraph_3,
      .paragraph_4,
      .paragraph_5,
      .paragraph_6,
      .label
    ) {
    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) {
    .email-signup__input-group--layout-m-column .email-signup__button {
      width: 100%;
    }
  }

  @media screen and (min-width: 750px) {
    .email-signup__input-group--layout-d-column .email-signup__button {
      width: 100%;
    }
  }

  .email-signup__input,
  .email-signup__button--text {
    padding: var(--padding-lg) var(--padding-3xl);
  }

  .email-signup__input-group--underline {
    --box-shadow-color: var(--color-input-border);
    --box-shadow-multiplier: 1;
    --box-shadow-focused-multiplier: 1.75;

    box-shadow: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color);
    transition: box-shadow var(--animation-values);
    margin-block-end: calc(var(--border-width) * var(--box-shadow-focused-multiplier));

    &:focus-within {
      --box-shadow-multiplier: var(--box-shadow-focused-multiplier);
      --box-shadow-color: var(--color-input-text);
    }
  }

  .email-signup__input-group .email-signup__input--underline {
    color: var(--color-input-text);
    background-color: transparent;
    padding: 12px 0;
    border: none;
    border-radius: 0;

    &:focus-visible {
      outline: none;
    }
  }

  .email-signup__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
  }

  .email-signup__input-group .email-signup__input--none {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: none;
  }

  .email-signup__button-icon {
    color: currentcolor;
    padding: 5px;

    @media screen and (max-width: 749px) {
      padding: 0;
      align-self: center;
      justify-self: center;
      width: var(--icon-size-lg);
      height: var(--icon-size-lg);
    }
  }

  .email-signup__button--arrow {
    width: var(--arrow-button-size-small);
    height: var(--arrow-button-size-small);
    padding: 0;

    &:not(.email-signup__button--integrated) {
      width: var(--arrow-button-size);
      height: var(--arrow-button-size);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size);
        height: var(--arrow-icon-size);
        padding: 0;
      }
    }
  }

  .email-signup__button--integrated {
    --button-offset: var(--margin-xs);
    align-self: stretch;
    margin: var(--button-offset);
    flex-shrink: 0;

    @media screen and (max-width: 749px) {
      width: fit-content;
    }

    &.email-signup__button--text {
      padding: 0 var(--padding-3xl);
    }

    &.email-signup__button--text.button-unstyled {
      padding: 0 var(--padding-xl);
    }

    &.button-unstyled {
      border-radius: var(--border-radius);
    }

    > .email-signup__button-icon {
      padding: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      align-self: center;
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__input--underline + .email-signup__button--integrated {
    margin: 0;
    align-self: center;

    &.email-signup__button--text {
      padding-block: 9px;
    }

    &.email-signup__button--text.button-unstyled {
      padding-inline: 0;
    }

    &.button-unstyled {
      border-radius: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__button.button:not(
      .button-secondary,
      .button-tertiary,
      .button-unstyled
    ) {
    background-color: var(--button-background-color);
    color: var(--button-color);
    text-transform: var(--button-text-case-primary);
  }

  .email-signup__button.email-signup__button--product-colors.button:not(
      .button-secondary,
      .button-tertiary,
      .button-unstyled
    ) {
    background-color: var(--hw-email-btn-bg, var(--button-background-color));
    color: var(--hw-email-btn-color, var(--button-color));
  }

  .email-signup__button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .email-signup__button.button-tertiary {
    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:hw-email-signup */

/* START_BLOCK:hw-footer-copyright (INDEX:254) */
.footer-utilities__that-works-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.12em;
  }

  .footer-utilities__that-works-link:hover {
    opacity: 0.85;
  }
/* END_BLOCK:hw-footer-copyright */

/* START_BLOCK:hw-footer-menu-group (INDEX:255) */
/*
    Full width when the footer stacks (mobile). In split row (750px+),
    width: 100% would force this column to span the whole row and ignore
    “Content width” (flex: 0 1 auto) + max-width in the editor.
  */
  .hw-footer-menu-group {
    width: 100%;
    margin-block-start: var(--hw-fmg-mbs, 0px);
    margin-block-end: var(--hw-fmg-mbe, 0px);
  }

  @media screen and (min-width: 750px) {
    .hw-footer-menu-group {
      margin-block-start: var(
        --hw-fmg-mbs-d,
        var(--hw-fmg-mbs, 0px)
      );
      margin-block-end: var(
        --hw-fmg-mbe-d,
        var(--hw-fmg-mbe, 0px)
      );
    }

    .hw-footer__content--layout-row > .hw-footer-menu-group {
      width: auto;
      align-self: flex-start;
      flex: var(--hw-fg-flex, 1 1 auto);
      min-width: var(--hw-fg-min, 0);
      max-width: var(--hw-fg-max, none);
    }
  }

  .hw-footer-menu-group__inner--flex {
    display: flex;
    flex-direction: var(--fmg-fd, column);
    flex-wrap: var(--fmg-fw, nowrap);
    justify-content: var(--fmg-jc, flex-start);
    align-items: var(--fmg-ai, flex-start);
    gap: var(--fmg-gg, 12px);
    min-width: 0;
  }

  @media screen and (min-width: 750px) {
    .hw-footer-menu-group__inner--flex {
      flex-direction: var(--fmg-fd-d, var(--fmg-fd, column));
      flex-wrap: var(--fmg-fw-d, var(--fmg-fw, nowrap));
      justify-content: var(--fmg-jc-d, var(--fmg-jc, flex-start));
      align-items: var(--fmg-ai-d, var(--fmg-ai, flex-start));
      gap: var(--fmg-gg-d, var(--fmg-gg, 12px));
    }
  }

  .hw-footer-menu-group__inner--grid {
    display: grid;
    grid-template-columns: repeat(
      var(--fmg-gc, 1),
      minmax(0, 1fr)
    );
    gap: var(--fmg-gg, 12px);
    min-width: 0;
  }

  @media screen and (min-width: 750px) {
    .hw-footer-menu-group__inner--grid {
      grid-template-columns: repeat(
        var(--fmg-gc-d, var(--fmg-gc, 1)),
        minmax(0, 1fr)
      );
      gap: var(
        --fmg-gg-d,
        var(--fmg-gg, 12px)
      );
    }
  }

  /* ── Heading pill ── */
  /*
   * hw-menu keeps two heading nodes (default + accordion). Only one is visible
   * per breakpoint — do not style both with display:inline-flex or mobile shows
   * duplicate pills (default was overriding display:none).
   */
  @media screen and (max-width: 749px) {
    .hw-footer-menu-group[data-fmg-h-pill]
      .menu.menu--accordion
      .menu__heading__accordion__label,
    .hw-footer-menu-group[data-fmg-h-pill]
      .menu:not(.menu--accordion)
      .menu__heading__default {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background-color: var(
        --fmg-h-pill-bg,
        var(--fmg-h-pill-bg-fallback, transparent)
      );
      color: var(--fmg-h-pill-color, inherit);
      border-radius: var(--fmg-h-pill-radius, 0px);
      padding-block: var(--fmg-h-pill-pad-y-m, 0px);
      padding-inline: var(--fmg-h-pill-pad-x-m, 0px);
      min-inline-size: var(--fmg-h-pill-min-width, 0px);
      min-block-size: var(--fmg-h-pill-min-height, 0px);
    }
  }

  @media screen and (min-width: 750px) {
    .hw-footer-menu-group[data-fmg-h-pill] .menu .menu__heading__default {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background-color: var(
        --fmg-h-pill-bg,
        var(--fmg-h-pill-bg-fallback, transparent)
      );
      color: var(--fmg-h-pill-color, inherit);
      border-radius: var(--fmg-h-pill-radius, 0px);
      padding-block: var(
        --fmg-h-pill-pad-y-d,
        var(--fmg-h-pill-pad-y-m, 0px)
      );
      padding-inline: var(
        --fmg-h-pill-pad-x-d,
        var(--fmg-h-pill-pad-x-m, 0px)
      );
      min-inline-size: var(--fmg-h-pill-min-width, 0px);
      min-block-size: var(--fmg-h-pill-min-height, 0px);
    }
  }
/* END_BLOCK:hw-footer-menu-group */

/* START_BLOCK:hw-footer-policy-list (INDEX:257) */
.hw-policy-list-root {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: var(--hw-policy-fd, row);
    align-items: var(--hw-policy-ai, center);
    gap: var(--hw-policy-gap-m, var(--gap-sm));
  }

  .hw-policy-list__blocks {
    display: flex;
    flex-wrap: wrap;
    flex-direction: var(--hw-policy-fd, row);
    align-items: var(--hw-policy-ai, center);
    gap: var(--hw-policy-gap-m, var(--gap-sm));
    min-width: 0;
  }

  @media screen and (min-width: 750px) {
    .hw-policy-list-root {
      flex-direction: var(
        --hw-policy-fd-d,
        var(--hw-policy-fd, row)
      );
      align-items: var(
        --hw-policy-ai-d,
        var(--hw-policy-ai, center)
      );
      gap: var(
        --hw-policy-gap-d,
        var(--hw-policy-gap-m, var(--gap-sm))
      );
    }

    .hw-policy-list__blocks {
      flex-direction: var(
        --hw-policy-fd-d,
        var(--hw-policy-fd, row)
      );
      align-items: var(
        --hw-policy-ai-d,
        var(--hw-policy-ai, center)
      );
      gap: var(
        --hw-policy-gap-d,
        var(--hw-policy-gap-m, var(--gap-sm))
      );
    }
  }

  .policy-list-trigger,
  .hw-policy-list__link {
    font: inherit;
    text-align: inherit;
    text-decoration: none;
    cursor: pointer;
    width: fit-content;
    max-width: 100%;
    --button-color: var(--color, var(--color-foreground));
    color: var(--color, var(--color-foreground));
  }

  .hw-policy-list-root a.hw-policy-list__link:visited {
    --button-color: var(--color, var(--color-foreground));
    color: var(--color, var(--color-foreground));
  }

  .hw-policy-list__link:hover,
  .hw-policy-list__link:focus-visible {
    text-decoration: none;
    opacity: 0.85;
  }

  .policy-list-trigger {
    /* anchor-name set inline per block instance to avoid collisions */
  }

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

      &:is(:hover, :focus-within) {
        background: rgb(var(--color-foreground-rgb) / 0.15);
      }
    }
  }

  .terms-policies-popover {
    position-anchor: --terms-policies-trigger;
    inset: unset;
    bottom: calc(anchor(top) + 1rem);
    left: anchor(left);
    border-radius: var(--style-border-radius-popover);
    background: linear-gradient(var(--color-background) 0 100%),
      linear-gradient(rgb(var(--color-background-rgb) / 0.15) 0 100%);
    background-clip: padding-box, border-box;
    border: 1px solid #0000;
    box-shadow: var(--shadow-popover);
    padding: 8px;
    margin: 0;
    opacity: 0;
    scale: 0.94;
    translate: 0 6px;
    transform-origin: 3.9em 100%;
  }

  .terms-policies-popover.\:popover-open,
  .terms-policies-popover:popover-open {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  @media screen and (max-width: 749px) {
    .terms-policies-popover {
      left: anchor(center);
      transform: translate(-50%, 0);
      transform-origin: 0% 100%;
    }
  }

  @supports not (position-anchor: --terms-policies-trigger) {
    .terms-policies-popover {
      bottom: unset;
      top: calc(var(--anchor-top) * 1px);
      left: calc(var(--anchor-left) * 1px);
      transform: translate(0, calc(-100% - 1.25rem));
    }

    @media screen and (max-width: 749px) {
      .terms-policies-popover {
        left: calc((var(--anchor-left) + (var(--anchor-width) / 2)) * 1px);
        transform: translate(-50%, calc(-100% - 1.25rem));
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .terms-policies-popover {
      transition-property: display, overlay, opacity, scale, translate;
      transition-behavior: allow-discrete;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
    }

    @starting-style {
      .terms-policies-popover.\:popover-open,
      .terms-policies-popover:popover-open {
        opacity: 0.7;
        translate: 0 6px;
        scale: 0.94;
      }
    }
  }
/* END_BLOCK:hw-footer-policy-list */

/* START_BLOCK:hw-grid (INDEX:259) */
/* Overflow / horizontal scroll (mobile) */
  .hw-grid[data-hw-overflow-x-mobile="auto"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .hw-grid[data-hw-overflow-x-mobile="auto"] .hw-grid-block {
    grid-template-columns: repeat(var(--hw-grid-cols-mobile, 1), var(--hw-grid-scroll-col-width-mobile, 200px));
  }
  .hw-grid[data-hw-overflow-x-mobile="hidden"] {
    overflow-x: hidden;
  }

  /* Overflow / horizontal scroll (desktop 750px+) */
  @media screen and (min-width: 750px) {
    .hw-grid[data-hw-overflow-x-desktop="auto"] {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .hw-grid[data-hw-overflow-x-desktop="auto"] .hw-grid-block {
      grid-template-columns: repeat(var(--hw-grid-cols-desktop, 1), var(--hw-grid-scroll-col-width-desktop, 300px));
    }
    .hw-grid[data-hw-overflow-x-desktop="hidden"] {
      overflow-x: hidden;
    }
  }

  .group-block.hw-grid .group-block__media-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
  }

  .group-block.hw-grid .group-block-content {
    z-index: 1;
  }

  /*
   * Carousel/loop carousels apply `display: flex; flex-direction: column` to direct
   * children of slides. HW Grid's main content must stay `display: grid` so inner
   * blocks flow across columns instead of stacking in one column.
   */
  .group-block.hw-grid[data-carousel-card] .group-block-content.hw-grid-block {
    flex: 1 1 auto;
    min-height: 0;
    align-self: stretch;
  }

  .section-carousel-grid .group-block.hw-grid[data-carousel-card] > .group-block-content.hw-grid-block,
  .hw-carousel-grid-content .group-block.hw-grid[data-carousel-card] > .group-block-content.hw-grid-block,
  [data-hw-loop-slideshow-id] .group-block.hw-grid[data-carousel-card] > .group-block-content.hw-grid-block {
    display: grid;
  }

  @media screen and (min-width: 750px) {
    .group-block.hw-grid[data-hw-override-border-radius-desktop] {
      --border-radius: var(--border-radius-desktop);
    }
  }
/* END_BLOCK:hw-grid */

/* START_BLOCK:hw-group-card-object (INDEX:261) */
/* Layout-transparent: the looped HW Group blocks become direct children of
     the parent, so no wrapper box is introduced. */
  .hw-group-card-object {
    display: contents;
  }

  .hw-group-card-object__placeholder {
    margin: 0;
    padding: 12px;
    border: 1px dashed var(--color-border, #ccc);
    border-radius: 8px;
    font-size: var(--font-size--sm, 0.875rem);
    opacity: 0.85;
  }
/* END_BLOCK:hw-group-card-object */

/* START_BLOCK:hw-group-max (INDEX:265) */
/* Group (HW, max) only. Markup and classes come from snippets/hw-group.liquid,
     the custom properties from snippets/hw-group-max-style.liquid. Two classes
     beat base.css's single-class .border-style, so the per-side widths below
     win the cascade without !important. */
  .hw-group.hw-group-max {
    margin-block: var(--hw-gm-margin-block-start, 0px) var(--hw-gm-margin-block-end, 0px);
    border-block-width: var(--hw-gm-border-width-top, 0px) var(--hw-gm-border-width-bottom, 0px);
    border-inline-width: var(--hw-gm-border-width-left, 0px) var(--hw-gm-border-width-right, 0px);
  }

  /* Both filters are attribute-gated rather than defaulted to 0, because any
     value other than `none` makes this element a containing block for
     absolutely-positioned descendants - a nested HW Absolute would silently
     re-anchor to the group. blur(0px) is not a safe no-op here. */
  .hw-group.hw-group-max[data-hw-gm-blur] {
    filter: blur(var(--hw-gm-blur, 0px));
  }

  .hw-group.hw-group-max[data-hw-gm-backdrop-blur] {
    backdrop-filter: blur(var(--hw-gm-backdrop-blur, 0px));
    -webkit-backdrop-filter: blur(var(--hw-gm-backdrop-blur, 0px));
  }

  @media screen and (min-width: 750px) {
    .hw-group.hw-group-max {
      margin-block: var(--hw-gm-margin-block-start-desktop, 0px)
        var(--hw-gm-margin-block-end-desktop, 0px);
    }
  }
/* END_BLOCK:hw-group-max */

/* START_BLOCK:hw-image (INDEX:276) */
.hw-image {
    display: flex;
    justify-content: var(--horizontal-alignment, flex-start);
    max-inline-size: 100%;
    flex: 0 1 auto;
  }

  .hw-image__media {
    display: block;
    inline-size: var(--hw-image-width-mobile, 100%);
    max-inline-size: min(100%, var(--hw-image-max-width-mobile, 100%));
    max-block-size: var(--hw-image-max-height-mobile, none);
    position: relative;
    overflow: hidden;
    border-radius: var(--hw-image-border-radius, 0);
  }

  .hw-image--has-ratio {
    inline-size: 100%;
  }

  .hw-image__media--has-ratio::before {
    content: '';
    display: block;
    inline-size: 100%;
    padding-top: var(--hw-image-ratio, 0);
  }

  .hw-image__img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    object-fit: var(--hw-image-position, cover);
  }

  .hw-image--position-default .hw-image__img:not(.hw-image__img--ratio) {
    object-fit: initial;
  }

  .hw-image--position-default .hw-image__img--ratio,
  .hw-image--position-default .hw-image__placeholder--ratio .placeholder-svg {
    object-fit: contain;
  }

  .hw-image__img--ratio {
    position: absolute;
    inset: 0;
    block-size: 100%;
  }

  .hw-image__placeholder {
    inline-size: 100%;
    background: rgba(var(--color-foreground), 0.05);
  }

  .hw-image__placeholder--ratio {
    position: absolute;
    inset: 0;
    block-size: 100%;
  }

  .hw-image__placeholder .placeholder-svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  .hw-image__placeholder--ratio .placeholder-svg {
    block-size: 100%;
    object-fit: var(--hw-image-position, cover);
  }

  .hw-image__link {
    display: block;
    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
  }

  @media (width >= 750px) {
    .hw-image__media {
      inline-size: var(--hw-image-width-desktop, var(--hw-image-width-mobile, 100%));
      max-inline-size: min(100%, var(--hw-image-max-width-desktop, var(--hw-image-max-width-mobile, 100%)));
      max-block-size: var(--hw-image-max-height-desktop, var(--hw-image-max-height-mobile, none));
    }

    .hw-image__media--has-ratio::before {
      padding-top: var(--hw-image-ratio-desktop, var(--hw-image-ratio, 0));
    }
  }
/* END_BLOCK:hw-image */

/* START_BLOCK:hw-logo (INDEX:279) */
.logo-block {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

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

  .logo-block__image {
    object-fit: contain;
    width: 100%;
  }
/* END_BLOCK:hw-logo */

/* START_BLOCK:hw-loop-ingredient-tabbed (INDEX:281) */
/*
   * Carousel sits inside tab panels (not a direct .section child). Match the
   * page-width gutter breakout used by .section > .force-full-width.
   */
  .hw-loop-ingredient--tabbed
    .hw-loop-ingredient-tabbed
    .hw-tab__panel
    > .force-full-width {
    width: calc(100% + (var(--util-page-margin-offset) * 2));
    max-width: 100vw;
    margin-inline-start: calc(-1 * var(--util-page-margin-offset));
    margin-inline-end: calc(-1 * var(--util-page-margin-offset));
  }
/* END_BLOCK:hw-loop-ingredient-tabbed */

/* START_BLOCK:hw-menu (INDEX:295) */
.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);
  }

  @media screen and (min-width: 750px) {
    .menu:not(:has(.menu__heading--empty)) .details-content {
      margin-block-start: var(--spacing--size-desktop);
    }

    .menu__item + .menu__item {
      margin-block-start: var(--spacing--size-desktop);
    }
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

    .menu--accordion .details-content {
      margin-block-start: var(--spacing--size);
    }

    .menu--accordion .menu__details {
      padding-inline: 0;
    }

    .menu--dividers .menu__details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }
  }

  .menu--caret .icon-plus,
  .menu--plus .icon-caret {
    display: none;
  }

  .menu.menu--accordion .menu__heading {
    padding-block-start: var(
      --menu-summary-pbs,
      var(--hw-fmg-ssbs, var(--padding-sm))
    );
    padding-block-end: var(
      --menu-summary-pbe,
      var(--hw-fmg-ssbe, var(--padding-sm))
    );
    padding-inline-start: var(
      --menu-summary-pis,
      var(--hw-fmg-ssis, 0px)
    );
    padding-inline-end: var(
      --menu-summary-pie,
      var(--hw-fmg-ssie, 0px)
    );
  }

  @media screen and (min-width: 750px) {
    .menu.menu--accordion .menu__heading {
      padding-block-start: var(
        --menu-summary-pbs-d,
        var(
          --menu-summary-pbs,
          var(
            --hw-fmg-ssbs-d,
            var(--hw-fmg-ssbs, var(--padding-sm))
          )
        )
      );
      padding-block-end: var(
        --menu-summary-pbe-d,
        var(
          --menu-summary-pbe,
          var(
            --hw-fmg-ssbe-d,
            var(--hw-fmg-ssbe, var(--padding-sm))
          )
        )
      );
      padding-inline-start: var(
        --menu-summary-pis-d,
        var(
          --menu-summary-pis,
          var(
            --hw-fmg-ssis-d,
            var(--hw-fmg-ssis, 0px)
          )
        )
      );
      padding-inline-end: var(
        --menu-summary-pie-d,
        var(
          --menu-summary-pie,
          var(
            --hw-fmg-ssie-d,
            var(--hw-fmg-ssie, 0px)
          )
        )
      );
    }
  }
/* END_BLOCK:hw-menu */

/* START_BLOCK:hw-mobile-drawer-nav-item (INDEX:301) */
/*
   * Structural parity with a linklist row. The theme's own versions of these are
   * scoped to `.menu-drawer__menu` (`> .menu-drawer__list-item { display: flex }`,
   * and `width: 100%` on details / accordion-custom), and a block row never sits
   * inside that <ul> — it is a direct child of the drawer's content stack. Restated
   * here against .hw-drawer-nav-block so a block row and a linklist row lay out the
   * same. `.menu-drawer__menu-item` already applies unscoped, so it is not repeated.
   */
  .hw-drawer-nav-block {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .hw-drawer-nav-block accordion-custom,
  .hw-drawer-nav-block details {
    width: 100%;
  }

  /*
   * Typography comes from the four --hw-drawer-nav-* properties that Mobile menu
   * drawer content (HW) sets on its own root, so one place sizes and colours every
   * row rather than each block carrying its own copy. Each falls back to the drawer's
   * existing --menu-*-font pair, which is what an unset value must keep resolving to
   * for a block row to match a linklist row exactly.
   */
  .hw-drawer-nav-block .menu-drawer__menu-item--mainlist .menu-drawer__menu-item-text {
    font-size: var(--hw-drawer-nav-link-size, var(--menu-top-level-font-size));
    color: var(--hw-drawer-nav-link-color, var(--menu-top-level-font-color));
  }

  .hw-drawer-nav-block .menu-drawer__menu-item--child .menu-drawer__menu-item-text {
    font-size: var(--hw-drawer-nav-child-size, var(--menu-child-font-size));
    color: var(--hw-drawer-nav-child-color, var(--menu-child-font-color));
  }

  /*
   * Width and colour of the reused divider. Both properties are restated together so a
   * blank colour still resolves to the theme's --color-border, exactly as the plain
   * .menu-drawer__list-item--divider rule does. Carrying both classes makes this
   * (0,2,0), so it beats that rule on specificity rather than on source order.
   */
  .hw-drawer-nav-block.menu-drawer__list-item--divider {
    border-block-end: var(--hw-drawer-nav-divider-width, 1px) solid
      var(--hw-drawer-nav-divider-color, var(--color-border));
  }

  /*
   * The row is a space-between flex (label | chevron), so the badge has to share one
   * inline-flex cell with the label or it gets pushed into the middle of the row.
   * Same reasoning as the linklist rows in hw-mobile-drawer-nav-link-text.liquid.
   */
  .hw-drawer-nav-block .hw-drawer-nav__label {
    display: inline-flex;
    align-items: center;
    gap: var(--hw-nav-badge-gap, 6px);
    min-width: 0;
  }
/* END_BLOCK:hw-mobile-drawer-nav-item */

/* START_BLOCK:hw-mobile-menu-drawer-header (INDEX:304) */
.hw-mobile-menu-drawer__header {
    inline-size: 100%;
  }

  .hw-mobile-menu-drawer__header-inner.layout-panel-flex {
    flex-direction: var(--flex-direction);
  }

  .hw-mobile-menu-drawer__header-inner.layout-panel-flex--row {
    flex-wrap: nowrap;
  }

  .hw-mobile-menu-drawer__header-inner > *:not(.hw-mobile-menu-drawer__header-close) {
    flex: 0 1 auto;
    min-inline-size: 0;
  }

  .hw-mobile-menu-drawer__header-close.menu-drawer__close-button {
    flex: 0 0 auto;
  }

  /* Custom close: padding + min touch target (WCAG); default drawer still uses --padding-lg */
  .hw-mobile-menu-drawer__header-close.menu-drawer__close-button[data-hw-custom-close] {
    padding: var(--hw-drawer-close-padding);
    min-inline-size: var(--hw-drawer-close-min-touch);
    min-block-size: var(--hw-drawer-close-min-touch);
    inline-size: fit-content;
    block-size: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  /*
    Custom SVG wrapper — not .svg-wrapper, so intrinsic SVG width/height (e.g. 32px)
    are not forced to --icon-size-sm from base.css.
  */
  .hw-mobile-menu-drawer__header-close .hw-custom-close-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    pointer-events: none;
    flex: 0 0 auto;
  }

  .hw-mobile-menu-drawer__header-close .hw-custom-close-icon-wrap svg {
    display: block;
    inline-size: auto;
    block-size: auto;
    max-inline-size: 100%;
    max-block-size: 100%;
  }
/* END_BLOCK:hw-mobile-menu-drawer-header */

/* START_BLOCK:hw-nav-item (INDEX:306) */
.menu-list__list-item--hw-dropdown {
    z-index: var(--layer-header-menu);
    align-items: center;
    height: 100%;
  }

  .hw-nav-item__anchor {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    width: max-content;
    max-width: 100%;
  }

  .hw-nav-item__anchor > .menu-list__link {
    height: auto;
  }

  .hw-nav-item__anchor .hw-dropdown-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    width: max-content;
    max-width: 100vw;
    height: auto;
    margin: 0;
    clip-path: none;
    z-index: var(--layer-header-menu);
    content-visibility: visible;
    contain-intrinsic-size: auto;
    visibility: hidden;
    pointer-events: none;
  }

  .hw-nav-item__anchor .hw-dropdown-submenu[data-active] {
    visibility: visible;
    pointer-events: auto;
  }

  .hw-dropdown-submenu .menu-list__submenu-inner {
    display: block !important;
    width: max-content !important;
    height: auto !important;
    min-height: 0 !important;
    padding-inline: 0 !important;
    padding-block: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
    /*
     * Keep the inner wrapper clear so the visible card
     * (`.hw-dropdown-menu__wrapper`) can own the section-level menu-open
     * border/shadow. !important matches the rest of this reset.
     */
    box-shadow: none !important;
    border-bottom: none !important;
    transform: none !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .hw-dropdown-submenu .hw-dropdown-menu {
    display: block;
    width: max-content;
  }

  /*
   * Grid dropdowns need the opposite of the two rules above: the base
   * "width: max-content !important" on .menu-list__submenu-inner makes it
   * (and everything inside, including our width:100% grid wrapper) size to
   * its own CONTENT rather than the fixed [data-mega-target] submenu's
   * viewport-driven width — so the panel silently expands past the edge of
   * the screen instead of going edge-to-edge. Same fix pattern as the
   * position:fixed carve-out in hw-header.liquid: match the base rule's
   * !important and add the [data-mega-target] attribute for higher
   * specificity, scoped to grid dropdowns only.
   */
  .hw-dropdown-submenu[data-mega-target] .menu-list__submenu-inner {
    width: 100% !important;
  }

  .hw-dropdown-submenu[data-mega-target] .hw-dropdown-menu__wrapper--grid {
    width: 100% !important;
  }

  /*
   * Same story one level deeper: the base ".hw-dropdown-menu { width:
   * max-content }" rule above sizes the actual grid-template-columns list to
   * its own content width, not the ".hw-dropdown-menu__grid-links" column it
   * sits in. Every ancestor up to here is correctly filling the fixed
   * submenu's width, but the grid list itself was still shrinking to fit its
   * columns — leaving a dead gap between the last category column and the
   * promo rail instead of the columns stretching to close it.
   */
  .hw-dropdown-submenu[data-mega-target] .hw-dropdown-menu {
    width: 100%;
  }

  .hw-dropdown-menu__wrapper,
  .hw-dropdown-menu,
  .hw-dropdown-menu__list {
    overflow: visible;
  }

  .hw-dropdown-menu__wrapper {
    position: relative;
    top: auto;
    left: auto;
    width: max-content;
    max-width: min(var(--hw-dropdown-max-width, 320px), 100vw);
    background-color: var(--color-background);
    /*
     * Radius / padding / row gap / link colours come from Menu (HW) -> Dropdown
     * so a plain dropdown can be matched to a design without editing CSS. The
     * fallbacks are the values these rules hard-coded before the settings existed.
     */
    border-radius: var(--hw-dropdown-radius, 14px);
    padding: var(--hw-dropdown-pad-block, 22px) var(--hw-dropdown-pad-inline, 22px);
    z-index: var(--layer-header-menu);
  }

  /*
   * Compact keeps its own tighter inset on purpose — the Dropdown padding
   * settings shape the default card, and a "compact" dropdown that grew to the
   * same padding as the default one would stop being compact.
   */
  .hw-dropdown-menu--compact .hw-dropdown-menu__wrapper {
    max-width: min(var(--hw-dropdown-max-width, 240px), 100vw);
    padding: 16px;
  }

  .hw-dropdown-menu--compact .hw-dropdown-menu__item .mega-menu__link--parent {
    padding-block: var(--hw-submenu-link-padding-block, 8px);
    padding-inline-start: var(--hw-submenu-link-padding-inline-start, 14px);
    padding-inline-end: var(--hw-submenu-link-padding-inline-end, 10px);
  }

  .hw-dropdown-menu__list {
    display: flex;
    flex-direction: column;
    gap: var(--hw-dropdown-item-gap, 14px);
  }

  .hw-dropdown-menu__item {
    position: relative;
  }

  .hw-dropdown-menu__item .mega-menu__link--parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hw-submenu-chevron-gap, 8px);
    width: 100%;
    padding-block: var(--hw-submenu-link-padding-block, 8px);
    padding-inline-start: var(--hw-submenu-link-padding-inline-start, 14px);
    padding-inline-end: var(--hw-submenu-link-padding-inline-end, 10px);
    border-radius: 0;
    white-space: nowrap;
    color: var(--hw-dropdown-link-color, #999999);
    font-weight: 600;
    line-height: 1.2;
    transition: color var(--animation-speed, 0.15s) ease;
  }

  .hw-dropdown-menu__link-label {
    flex: 1 1 auto;
    min-width: 0;
  }

  /*
   * Two gates, deliberately. The nav-chevron one is pre-existing behaviour — turning
   * the top-level chevron off has always taken the submenu link icons with it — and is
   * left alone so existing headers render unchanged. The second is the dedicated
   * switch, which hides the submenu icons on their own and leaves the top-level
   * chevron in place.
   */
  .header-menu[data-hw-show-nav-chevron='false'] .hw-dropdown-menu__link-icon-wrap,
  .header-menu[data-hw-show-submenu-link-icon='false'] .hw-dropdown-menu__link-icon-wrap {
    display: none;
  }

  .hw-dropdown-menu__link-icon-wrap,
  .hw-submenu-chevron-icon-wrap.hw-dropdown-menu__link-icon-wrap {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
  }

  .hw-dropdown-menu__link-icon-wrap .svg-wrapper,
  .hw-dropdown-menu__link-icon-wrap .hw-custom-inline-svg-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--hw-submenu-chevron-size, 18px);
    height: var(--hw-submenu-chevron-size, 18px);
  }

  .hw-dropdown-menu__link-icon-wrap svg,
  .hw-dropdown-menu__link-icon-wrap .hw-custom-inline-svg-wrap svg {
    width: var(--hw-submenu-chevron-size, 18px);
    height: var(--hw-submenu-chevron-size, 18px);
    display: block;
  }

  .hw-dropdown-menu__item .mega-menu__link--parent:hover,
  .hw-dropdown-menu__item .mega-menu__link--parent:focus-visible,
  .hw-dropdown-menu__item:focus-within > .mega-menu__link--parent {
    background-color: transparent;
    color: var(--hw-dropdown-link-hover-color, #000000);
    font-weight: 600;
  }

  .hw-dropdown-menu__item--has-children .mega-menu__link--parent::after {
    content: none;
  }

  .hw-dropdown-menu__sublist {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc(100% + var(--gap-2xs));
    z-index: calc(var(--layer-header-menu) + 1);
    display: flex;
    flex-direction: column;
    gap: var(--hw-dropdown-item-gap, 14px);
    min-width: 12rem;
    max-width: min(280px, 90vw);
    width: max-content;
    margin: 0;
    padding: var(--hw-dropdown-pad-block, 22px) var(--hw-dropdown-pad-inline, 22px);
    list-style: none;
    background-color: var(--color-background);
    border-radius: var(--hw-dropdown-radius, 14px);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
      opacity var(--animation-speed, 150ms) var(--animation-easing, ease),
      visibility var(--animation-speed, 150ms) var(--animation-easing, ease);
  }

  .hw-dropdown-menu__item--has-children:hover > .hw-dropdown-menu__sublist,
  .hw-dropdown-menu__item--has-children:focus-within > .hw-dropdown-menu__sublist {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .hw-dropdown-menu__item--has-children::after {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 100%;
    width: var(--gap-md);
    z-index: calc(var(--layer-header-menu) + 1);
    pointer-events: auto;
  }

  .hw-dropdown-menu__grandchild-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hw-submenu-chevron-gap, 8px);
    width: 100%;
    padding-block: var(--hw-submenu-link-padding-block, 8px);
    padding-inline-start: var(--hw-submenu-link-padding-inline-start, 14px);
    padding-inline-end: var(--hw-submenu-link-padding-inline-end, 10px);
    border-radius: 0;
    white-space: nowrap;
    color: var(--hw-dropdown-link-color, #999999);
    font-weight: 600;
    line-height: 1.2;
    transition: color var(--animation-speed, 0.15s) ease;
  }

  .hw-dropdown-menu__grandchild-link:hover,
  .hw-dropdown-menu__grandchild-link:focus-visible {
    background-color: transparent;
    color: var(--hw-dropdown-link-hover-color, #000000);
    font-weight: 600;
  }

  .menu-list__submenu[data-mega-target]:hover .menu-list__submenu-inner {
    opacity: 1 !important;
    transform: none !important;
  }

  .menu-list__submenu[data-submenu-type='mega_menu'][data-active] .hw-mega-menu-panel-output {
    display: grid;
    width: 100%;
  }

  .menu-list__submenu[data-submenu-type='mega_menu'][data-active] .hw-mega-menu--product-showcase {
    display: flex;
  }

  /*
   * Dropdown "grid" style (prototype, 17 Aug 2026) — auto-populated mega-menu-style
   * columns for a dropdown that already walks the full 3-tier Navigation menu
   * (see snippets/hw-dropdown-menu.liquid). Reuses the fixed full-width positioning
   * that 'mega_menu' type gets via [data-mega-target] (header-menu.js sets
   * --hw-submenu-top/-left/-width on #header-component for any element carrying
   * that attribute) instead of the narrow per-item absolute anchor that plain
   * dropdowns use. The extra attribute selector below out-specifies the base
   * ".hw-nav-item__anchor .hw-dropdown-submenu" absolute rule, so no !important
   * is needed.
   */
  /*
   * The panel is position: fixed with no intrinsic height limit, so a tall
   * column set (or a short/laptop viewport) used to run past the fold with no
   * way to reach the rest of it — not clipped-but-scrollable, simply
   * unreachable. Cap it at the fold and let it scroll internally.
   *
   * The cap uses --hw-submenu-viewport-top, NOT --hw-submenu-top: the latter is
   * host-relative (see #updateAnchorVars in header-menu.js — #header-component's
   * `contain: layout style` makes it the containing block for this fixed panel),
   * so subtracting it from the viewport height would over-measure by the host's
   * own offset and let the panel hang below the fold again whenever the header
   * isn't flush to the top (announcement bar, unscrolled page). Both vars are
   * derived from the same header-row rect in the same function, so the cap
   * always tracks the edge it's capping.
   *
   * Scoped to a scrollport *inside* this fixed element, not this element
   * itself: `overflow-y: auto` on the same box clips `--hw-menu-shadow`
   * (an element's overflow clips its own box-shadow in Chromium). The
   * inner takes the cap and scrolls so the promo rail still stretches
   * to the link column's height and its `flex: 1 1 0` tiles still split
   * that height — the two halves scroll together as one panel.
   */
  .hw-nav-item__anchor .hw-dropdown-submenu[data-mega-target] {
    position: fixed;
    top: var(--hw-submenu-top, 100%);
    left: var(--hw-submenu-left, 0);
    width: var(--hw-submenu-width, 100vw);
    max-width: 100vw;
    max-height: calc(100dvh - var(--hw-submenu-viewport-top, var(--hw-submenu-top, 0px)));
    overflow: visible;
  }

  .hw-dropdown-submenu[data-mega-target] > .menu-list__submenu-inner {
    /* !important beats the dropdown inner reset above (overflow/max-height). */
    width: 100% !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /*
   * Full-bleed, square, flat panel (edge-to-edge width of the fixed
   * [data-mega-target] submenu, no rounded corners — the base
   * ".hw-dropdown-menu__wrapper" rule above sets radius/padding for the narrow
   * per-item flyout, which grid mode overrides here). Open-menu shadow/border
   * consume --hw-menu-* on this wrapper (see hw-header.liquid). Padding moves
   * onto ".hw-dropdown-menu__grid-links" so the promo rail sits flush.
   * Drop shadow is on the fixed submenu (see hw-header.liquid), not here —
   * this wrapper's overflow:hidden would clip it.
   *
   * This box (and its background/border/shadow) always stays full width —
   * "Contained" (Menu HW2 → Mega menu → Width) only caps and centers the
   * CONTENT below, on ".hw-dropdown-menu__grid-layout". Capping this box
   * instead would shrink the white background with it, leaving the page
   * behind visible on the sides, which reads as a bug rather than a layout.
   */
  .hw-dropdown-menu__wrapper--grid {
    width: 100%;
    max-width: none;
    border-radius: var(--hw-grid-corner-radius, 0px);
    padding: 0;
    overflow: hidden;
  }

  /*
   * "Hug" width (Menu HW -> Mega menu -> Width): the panel is a card sized to its
   * own content instead of a slab. Unlike "Contained" — which caps only the inner
   * row and deliberately keeps this box full width so no page shows through the
   * background — hug is the one case where the background box itself must shrink,
   * because the card edge IS the design. The fixed [data-mega-target] submenu is
   * still the full nav-row width, so the card needs an explicit inline-start
   * alignment inside it rather than the `margin-inline: auto` the layout row uses.
   */
  [data-hw-grid-width='hug'] .hw-dropdown-menu__wrapper--grid {
    width: max-content;
    max-width: 100%;
    margin-inline-end: auto;
  }

  /*
   * ...but the [data-mega-target] carve-out above pins this same wrapper to
   * "width: 100% !important" so full/contained panels fill the fixed submenu.
   * That rule is (0,3,0) + !important and the hug rule above is only (0,2,0),
   * so hug lost every time and the card always rendered full width. Re-state it
   * here at (0,4,0) + !important — matching the carve-out's shape and adding the
   * ancestor attribute — so "Hug" actually wins. Only the wrapper needs this:
   * .menu-list__submenu-inner must stay 100% (it is the fixed submenu's own box,
   * and the hugged card aligns to its inline start inside it).
   */
  [data-hw-grid-width='hug'] .hw-dropdown-submenu[data-mega-target] .hw-dropdown-menu__wrapper--grid {
    width: max-content !important;
    max-width: 100%;
    margin-inline-end: auto;
  }

  [data-hw-grid-width='hug'] .hw-dropdown-menu__grid-layout {
    width: auto;
    margin-inline: 0;
  }

  /* A hugged card sizes to its links, so the column grid must size to them too. */
  [data-hw-grid-width='hug'] .hw-dropdown-menu--grid .hw-dropdown-menu__list {
    grid-template-columns: repeat(var(--hw-dropdown-grid-columns, 4), max-content);
  }

  /*
   * Hug + promo rail: the links half must not be sized from a percentage of the
   * container (the container is sized by the links — circular). Links hug their
   * own content and the rail takes its basis verbatim, which is always a px length
   * now that the basis is derived from the tile count below.
   */
  [data-hw-grid-width='hug'] .hw-dropdown-menu__grid-layout--with-promo .hw-dropdown-menu__grid-links {
    flex: 0 0 auto;
  }

  [data-hw-grid-width='hug'] .hw-dropdown-menu__grid-promo {
    flex: 0 0 var(--hw-grid-promo-basis, var(--hw-grid-promo-width, 33%));
  }

  /*
   * "Contained" width sets --hw-grid-max-width to --page-width instead of
   * none, so the columns + promo rail stop at the theme's normal page-width
   * and center, with --hw-grid-contained-pad-inline (0 when full-bleed)
   * keeping them off the contained edge the same way page-width sections do.
   * The wrapper above stays 100% wide either way — only this row is capped.
   */
  .hw-dropdown-menu__grid-layout {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: var(--hw-grid-max-width, none);
    margin-inline: auto;
    padding-inline: var(--hw-grid-contained-pad-inline, 0px);
  }

  .hw-dropdown-menu__grid-links {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--hw-grid-links-pad-block, 44px) var(--hw-grid-links-pad-inline, 80px);
  }

  /*
   * Promo rail only exists in the DOM when at least one promo image is set
   * (gated server-side by "has_grid_promo" in the .liquid — never rendered
   * empty), so there is no placeholder/blank-space state to hide here.
   * Rail width comes from the shared Menu (HW 2) setting (~33% per Figma), flush
   * against the panel edge (no padding). The links half takes whatever is left, so
   * the two always sum to 100% however the merchant sets the rail.
   */
  .hw-dropdown-menu__grid-layout--with-promo .hw-dropdown-menu__grid-links {
    flex: 1 1 calc(100% - var(--hw-grid-promo-basis, var(--hw-grid-promo-width, 33%)));
  }

  .hw-dropdown-menu__grid-promo {
    flex: 1 1 var(--hw-grid-promo-basis, var(--hw-grid-promo-width, 33%));
    max-width: var(--hw-grid-promo-basis, var(--hw-grid-promo-width, 33%));
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Visual left/right only. DOM order stays links then promo so tab order is unchanged. */
    order: var(--hw-grid-promo-order, 0);
  }

  /*
   * "Side by side" rail (Menu (HW) -> Mega menu -> Promo layout): the two tiles
   * sit next to each other instead of stacking (Figma mega menu variation). The
   * rail width then has to cover both tiles, so set Promo width to the pair's
   * total rather than one tile's.
   */
  [data-hw-grid-promo-layout='row'] .hw-dropdown-menu__grid-promo {
    flex-direction: row;
  }

  /*
   * Rail width is derived from how many tiles the nav item actually has, not from
   * a setting. One tile is --hw-grid-promo-tile-width; two side-by-side tiles are
   * twice that. Stacked tiles sit on top of each other, so two of them are still
   * only one tile wide — which is why this cannot be a single number in Liquid.
   *
   * Set on the submenu rather than on .header-menu so each nav item sizes to its
   * own promo count; the parent only carries the layout attribute these read.
   */
  .hw-dropdown-submenu[data-hw-grid-promo-count] {
    --hw-grid-promo-tile-width: 265px;
    --hw-grid-promo-basis: var(--hw-grid-promo-tile-width);
  }

  [data-hw-grid-promo-layout='row'] .hw-dropdown-submenu[data-hw-grid-promo-count='2'] {
    --hw-grid-promo-basis: calc(2 * var(--hw-grid-promo-tile-width));
  }

  /*
   * Each tile grows to fill the rail's height — with two images they split
   * it evenly (flex: 1 1 0 on both); with only one, that single tile has
   * nothing to share the flex space with and stretches to the full rail
   * height on its own. No fixed heights anywhere, so there's never a gap.
   */
  .hw-dropdown-menu__promo-tile {
    position: relative;
    display: block;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
  }

  /*
   * The image is taken OUT OF FLOW on purpose, so the panel's height is set by
   * the link column alone (Figma: the promo crops to the links' height).
   *
   * In flow, this img was the tile's only in-flow child, and "height: 100%"
   * against an auto-height rail resolves to auto — i.e. the asset's intrinsic
   * height (~1300px for a 900px-wide portrait crop). The rail therefore drove
   * the whole mega menu's height instead of the links, which is why the panel
   * came out far taller than the design. Absolute + inset:0 makes the tile
   * contribute zero intrinsic height, so `flex: 1 1 0` tiles simply stretch to
   * whatever the links column measures. Every other tile child (fade, bar,
   * badge) is already absolute, so the tile is now genuinely height-less.
   */
  .hw-dropdown-menu__promo-tile img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Bottom-up darkening so the label bar reads on any photo, even ones without a baked-in fade. */
  .hw-dropdown-menu__promo-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / 0) 55%, rgb(0 0 0 / 0.55) 100%);
    pointer-events: none;
  }

  .hw-dropdown-menu__promo-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    background-color: var(--hw-grid-promo-bar-bg, rgb(0 0 0 / 0.36));
    backdrop-filter: blur(var(--hw-grid-promo-bar-blur, 2px));
    -webkit-backdrop-filter: blur(var(--hw-grid-promo-bar-blur, 2px));
  }

  /*
   * Typography here is the resting default only: the shared "Grid promo labels"
   * typography group on Menu (HW 2) overrides it from a [data-hw-menu-2-id]-scoped
   * rule, which outranks this selector.
   */
  /*
   * Label + optional description stack in one cell so the promo bar stays a
   * two-column flex (text | arrow) whether or not a description is set. The
   * bar's padding lives here rather than on the label, so adding a description
   * does not change the label's own inset.
   */
  .hw-dropdown-menu__promo-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--hw-grid-promo-text-gap, 8px);
    padding: var(--hw-grid-promo-label-pad, 12px);
  }

  .hw-dropdown-menu__promo-label {
    display: block;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.1;
  }

  /*
   * Resting default only — the shared "Grid promo descriptions" typography group
   * on Menu (HW) overrides it from a [data-hw-menu-2-id]-scoped rule.
   */
  .hw-dropdown-menu__promo-description {
    display: block;
    color: #fff;
    font-size: 12px;
    line-height: 1.2;
    text-wrap: pretty;
  }

  .hw-dropdown-menu__promo-arrow {
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hw-grid-promo-arrow-color, #fff);
    border-left: 1px solid var(--hw-grid-promo-divider-color, rgb(255 255 255 / 0.11));
  }

  /*
   * Chip arrow: set a background colour on Menu (HW) -> Mega menu -> "Arrow
   * background" and the arrow stops being a full-height divider cell and becomes
   * a fixed, rounded, optionally blurred chip pinned to the bottom of the tile
   * (Figma). Bar fill stays whatever the merchant set — set it to transparent for
   * a chip-only treatment; the tile's own gradient fade still carries the text.
   */
  [data-hw-grid-promo-arrow-chip='true'] .hw-dropdown-menu__promo-bar {
    align-items: flex-end;
  }

  [data-hw-grid-promo-arrow-chip='true'] .hw-dropdown-menu__promo-arrow {
    flex: 0 0 var(--hw-grid-promo-arrow-size, 36px);
    width: var(--hw-grid-promo-arrow-size, 36px);
    height: var(--hw-grid-promo-arrow-size, 36px);
    margin: var(--hw-grid-promo-label-pad, 12px);
    border-left: 0;
    border-radius: var(--hw-grid-promo-arrow-radius, 0px);
    background-color: var(--hw-grid-promo-arrow-bg, transparent);
    backdrop-filter: blur(var(--hw-grid-promo-arrow-blur, 0px));
    -webkit-backdrop-filter: blur(var(--hw-grid-promo-arrow-blur, 0px));
  }

  /*
   * Hover swaps the arrow to its "clickable" treatment (Figma annotation: the
   * default arrow turns white on hover). Both vars fall back to the resting
   * values in the Liquid, so a menu with no hover colours set is unchanged.
   */
  .hw-dropdown-menu__promo-tile:hover .hw-dropdown-menu__promo-arrow,
  .hw-dropdown-menu__promo-tile:focus-visible .hw-dropdown-menu__promo-arrow {
    background-color: var(--hw-grid-promo-arrow-bg-hover, var(--hw-grid-promo-arrow-bg, transparent));
    color: var(--hw-grid-promo-arrow-color-hover, var(--hw-grid-promo-arrow-color, #fff));
  }

  /*
   * Promo tile badge. Pinned to the tile's top inline-end corner, using the same
   * inset as the label bar's padding so badge and label line up with the tile
   * edge. Text and per-tile background come from Nav item (HW); everything else
   * is shared on Menu (HW) so both tiles match.
   */
  .hw-dropdown-menu__promo-badge {
    position: absolute;
    inset-block-start: var(--hw-grid-promo-label-pad, 12px);
    inset-inline-end: var(--hw-grid-promo-label-pad, 12px);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: calc(100% - (var(--hw-grid-promo-label-pad, 12px) * 2));
    padding: var(--hw-grid-promo-badge-pad-block, 2px) var(--hw-grid-promo-badge-pad-inline, 8px);
    border-radius: var(--hw-grid-promo-badge-radius, 36px);
    background-color: var(--hw-grid-promo-badge-bg, rgb(0 0 0 / 0.5));
    color: var(--hw-grid-promo-badge-color, #fff);
    font-size: var(--hw-grid-promo-badge-font-size, 12px);
    line-height: 1.4;
    text-align: center;
    text-transform: var(--hw-grid-promo-badge-case, none);
    backdrop-filter: blur(var(--hw-grid-promo-badge-blur, 0px));
    -webkit-backdrop-filter: blur(var(--hw-grid-promo-badge-blur, 0px));
  }

  /*
   * Nav label badge. Filled uses the shared background; outline drops the fill and
   * keeps the border, so one shared colour set covers both treatments (desktop nav
   * uses filled, the same pill reads as outline on a light surface). Typography is
   * overridden by the shared "Nav badge" group on Menu (HW); the values here are
   * the resting default.
   */
  .hw-nav-item__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-inline-start: var(--hw-nav-badge-gap, 6px);
    padding: var(--hw-nav-badge-pad-block, 2px) var(--hw-nav-badge-pad-inline, 8px);
    border: var(--hw-nav-badge-border-width, 1px) solid transparent;
    border-radius: var(--hw-nav-badge-radius, 36px);
    background-color: var(--hw-nav-badge-bg, transparent);
    color: var(--hw-nav-badge-color, currentColor);
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    backdrop-filter: blur(var(--hw-nav-badge-blur, 0px));
    -webkit-backdrop-filter: blur(var(--hw-nav-badge-blur, 0px));
  }

  .hw-nav-item__badge[data-hw-nav-badge-style='outline'] {
    background-color: transparent;
    border-color: var(--hw-nav-badge-border-color, currentColor);
  }

  /*
   * ".menu-list__link" is flex-direction: column by default (base _header-menu);
   * only links WITH a submenu get flipped to a row for the chevron. A badge on a
   * plain link (Figma: "Outlet" + pill, no chevron) needs the same flip, so match
   * on the badge instead of on aria-haspopup. :has() carries its argument's
   * specificity, so this outranks the bare .menu-list__link rule without
   * depending on source order across two block stylesheets.
   */
  .menu-list__link:has(.hw-nav-item__badge) {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: max-content;
    max-width: 100%;
    height: auto;
  }

  /*
   * The title's own padding-inline (gap-xl / 2) would sit between the label and
   * the badge and read as a second, uncontrollable gap — the submenu-link rule in
   * _hw-header-menu zeroes it for the same reason. "Nav badge gap" is the only
   * spacing between them.
   */
  .menu-list__link:has(.hw-nav-item__badge) .menu-list__link-title {
    flex: 0 1 auto;
    padding-inline: 0;
  }

  .hw-dropdown-menu__promo-arrow .hw-dropdown-menu__promo-arrow-icon,
  .hw-dropdown-menu__promo-arrow .hw-dropdown-menu__promo-arrow-icon svg {
    display: block;
    width: 14px;
    height: 14px;
  }

  /*
   * Columns reflow on available space rather than a fixed count. The merchant's
   * --hw-dropdown-grid-columns setting is treated as a MAX column count, not a
   * hard one: the track min is max(a floor width, ~1/(N+1) of the container), so
   * auto-fit can never lay out more than N columns, but as the panel narrows the
   * tracks drop below the floor and columns wrap down to fit — no fixed
   * breakpoint step-downs, and (paired with white-space: normal on the links
   * below) no labels bleeding into the neighbouring track. The +0.1% cushion in
   * the 1/(N+1) term absorbs the column gap the formula otherwise ignores.
   */
  .hw-dropdown-menu--grid .hw-dropdown-menu__list {
    display: grid;
    grid-template-columns: repeat(
      auto-fit,
      minmax(
        max(
          var(--hw-dropdown-grid-min, 160px),
          calc(100% / (var(--hw-dropdown-grid-columns, 4) + 1) + 0.1%)
        ),
        1fr
      )
    );
    gap: var(--hw-grid-row-gap, 32px) var(--hw-grid-col-gap, 24px);
  }

  /* Column heading (was a hover-flyout trigger; now a plain always-open heading) */
  .hw-dropdown-menu--grid .hw-dropdown-menu__item {
    position: static;
  }

  .hw-dropdown-menu--grid .hw-dropdown-menu__item--has-children::after {
    content: none;
  }

  /*
   * Colour: the base rules (".mega-menu__link--parent", ".hw-dropdown-menu__grandchild-link")
   * hardcode #999999 at rest, flipping to #000000 only on :hover/:focus-visible — a
   * "muted until you interact with it" treatment that made sense for a single-item
   * flyout. A grid column isn't something you interact with one at a time; it's
   * fully open and should read correctly at rest. Override the resting colours only
   * (hover states are left alone, so hovering still darkens further as an affordance).
   *
   * Weight and colour here are the resting defaults: the shared "Grid column
   * headings" / "Grid column links" typography groups on Menu (HW 2) override them
   * from [data-hw-menu-2-id]-scoped rules, which outrank these selectors.
   */
  .hw-dropdown-menu--grid .hw-dropdown-menu__item .mega-menu__link--parent {
    font-weight: 600;
    color: #767676;
    padding-inline-start: 0;
    padding-block: 0 10px;
    pointer-events: auto;
    /*
     * Base flyout rule sets white-space: nowrap (correct for the content-sized
     * single flyout, wrong for a fixed-width grid track) — long headings must
     * wrap within their column instead of overflowing into the next one.
     */
    white-space: normal;
    overflow-wrap: break-word;
  }

  .hw-dropdown-menu--grid .hw-dropdown-menu__link-icon-wrap {
    display: none;
  }

  /*
   * Column links — static list, not a hover flyout.
   *
   * The base ".hw-dropdown-menu__sublist" rule hardcodes visibility: hidden /
   * opacity: 0, only flipped by ":hover"/":focus-within" on that ONE column's
   * <li> (the single-flyout interaction). Grid mode has no per-column hover, so
   * without an override the links stay invisible even while the whole panel is
   * open.
   *
   * First attempt set "visibility: visible" unconditionally on this rule — wrong,
   * because "visibility" is a property a descendant can override, and doing it
   * unconditionally also escaped the OUTER panel's closed state (".hw-dropdown-
   * submenu" without "[data-active]"), rendering the whole grid open on every
   * page load. Fixed below by scoping the override to only apply when the outer
   * submenu actually carries "[data-active]" — see the next rule.
   */
  .hw-dropdown-menu--grid .hw-dropdown-menu__sublist {
    position: static;
    inset: auto;
    z-index: auto;
    min-width: 0;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: none;
    background-color: transparent;
    /* Restates the base rule's 14px so the spacing is merchant-controllable here
       rather than inherited from the single-flyout rule it has nothing to do with. */
    gap: var(--hw-grid-link-gap, 14px);
  }

  .hw-dropdown-submenu[data-active] .hw-dropdown-menu--grid .hw-dropdown-menu__sublist {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .hw-dropdown-menu--grid .hw-dropdown-menu__grandchild-link {
    color: #1a1a1a;
    font-weight: 400;
    padding-inline-start: 0;
    padding-block: 6px;
    /* Same nowrap override as the parent heading — wrap within the grid track. */
    white-space: normal;
    overflow-wrap: break-word;
  }
/* END_BLOCK:hw-nav-item */

/* START_BLOCK:hw-overflow (INDEX:307) */
.hw-overflow {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--hw-overflow-gap, 0);
  }

  /* Overflow / horizontal scroll (mobile) */
  .hw-overflow[data-hw-overflow-x-mobile="auto"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .hw-overflow[data-hw-overflow-x-mobile="auto"] > * {
    flex-shrink: 0;
  }
  .hw-overflow[data-hw-overflow-x-mobile="hidden"] {
    overflow-x: hidden;
  }

  /* Overflow / horizontal scroll (desktop 750px+) */
  @media screen and (min-width: 750px) {
    .hw-overflow[data-hw-overflow-x-desktop="auto"] {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .hw-overflow[data-hw-overflow-x-desktop="auto"] > * {
      flex-shrink: 0;
    }
    .hw-overflow[data-hw-overflow-x-desktop="hidden"] {
      overflow-x: hidden;
    }
  }

  /*
   * Edge bleed: extends past the parent's horizontal padding to reach the
   * viewport edges. Vars default to 0 when no bleed is set, making the rule
   * a no-op (margin/padding 0, width 100%).
   */
  .hw-overflow {
    margin-inline: var(--hw-overflow-edge-bleed-mobile-neg, 0px);
    padding-inline: var(--hw-overflow-edge-bleed-mobile, 0px);
    width: calc(100% + var(--hw-overflow-edge-bleed-mobile-double, 0px));
    box-sizing: border-box;
  }

  @media screen and (min-width: 750px) {
    .hw-overflow {
      margin-inline: var(--hw-overflow-edge-bleed-desktop-neg, 0px);
      padding-inline: var(--hw-overflow-edge-bleed-desktop, 0px);
      width: calc(100% + var(--hw-overflow-edge-bleed-desktop-double, 0px));
    }
  }
/* END_BLOCK:hw-overflow */

/* START_BLOCK:hw-product-linked-cards (INDEX:323) */
/* Product linked cards — self-contained (do not extend hw-cart-upsells.css) */

  .hw-product-linked-cards.hw-cart-upsells {
    width: 100%;
    margin-inline: 0;
    padding-block: var(--hw-cu-pt, 16px) var(--hw-cu-pb, 16px);
    margin-block-start: var(--hw-cu-mt, 0px);
    margin-block-end: var(--hw-cu-mb, 0px);
    box-sizing: border-box;
    background: transparent;
  }

  @media (min-width: 750px) {
    .hw-product-linked-cards.hw-cart-upsells {
      margin-block-start: var(--hw-cu-mt-d, var(--hw-cu-mt, 0px));
      margin-block-end: var(--hw-cu-mb-d, var(--hw-cu-mb, 0px));
    }
  }

  .hw-product-linked-cards__title {
    margin-block-end: 0;
    box-sizing: border-box;
  }

  .hw-product-linked-cards__title .spacing-style {
    margin-block: 0;
    padding-block: 0;
  }

  .hw-product-linked-cards .hw-cart-upsells__header {
    display: flex;
    align-items: center;
    margin-block-end: var(--hw-plc-heading-mb, 12px);
    background: transparent;
  }

  .hw-product-linked-cards .hw-cart-upsells__header .hw-product-linked-cards__title {
    margin-block-end: 0;
  }

  .hw-product-linked-cards > .hw-product-linked-cards__title {
    margin-block-end: var(--hw-plc-heading-mb, 12px);
  }

  .hw-product-linked-cards .hw-cart-upsells__header--with-heading {
    justify-content: space-between;
    padding-inline-end: 0;
  }

  .hw-product-linked-cards .hw-cart-upsells__header .hw-cart-upsells__heading {
    margin-block-end: 0;
  }

  .hw-product-linked-cards .hw-product-linked-cards__nav.hw-carousel-navigation,
  .hw-product-linked-cards
    .hw-product-linked-cards__nav.hw-carousel-navigation.hw-carousel-navigation--fill-on-controls {
    display: none;
    flex-direction: column;
    gap: 0;
    background: transparent;
    background-color: transparent;
  }

  @media (max-width: 749px) {
    .hw-product-linked-cards[data-hw-plc-layout-mobile='slider']
      .hw-product-linked-cards__nav.hw-carousel-navigation,
    .hw-product-linked-cards[data-hw-plc-layout-mobile='slider']
      .hw-product-linked-cards__nav.hw-carousel-navigation.hw-carousel-navigation--fill-on-controls {
      display: flex;
    }
  }

  @media (min-width: 750px) {
    .hw-product-linked-cards[data-hw-plc-layout-desktop='slider']
      .hw-product-linked-cards__nav.hw-carousel-navigation,
    .hw-product-linked-cards[data-hw-plc-layout-desktop='slider']
      .hw-product-linked-cards__nav.hw-carousel-navigation.hw-carousel-navigation--fill-on-controls {
      display: flex;
    }
  }

  .hw-product-linked-cards
    .hw-product-linked-cards__nav.hw-carousel-navigation--fill-on-controls
    .hw-carousel-navigation__arrows {
    background: transparent;
    background-color: transparent;
  }

  .hw-product-linked-cards .hw-product-linked-cards__nav .hw-carousel-navigation__arrows {
    display: flex;
    align-items: center;
    gap: var(--arrow-gap, 16px);
  }

  .hw-product-linked-cards
    .hw-product-linked-cards__nav
    .hw-carousel-navigation__arrows
    button.hw-carousel-navigation__control,
  .hw-product-linked-cards
    .hw-product-linked-cards__nav
    .hw-carousel-navigation__arrows
    button.slideshow-control,
  .hw-product-linked-cards
    .hw-product-linked-cards__nav
    .hw-carousel-navigation__arrows
    button.button-unstyled.button-unstyled--transparent.hw-carousel-navigation__control,
  .hw-product-linked-cards
    .hw-product-linked-cards__nav
    .hw-carousel-navigation__arrows
    button.button-unstyled.button-unstyled--transparent.slideshow-control {
    --button-min-height-mobile: 0px;
    --button-min-height-desktop: 0px;
    opacity: 1;
    pointer-events: auto;
    box-sizing: border-box;
    padding: 0;
    width: var(--arrow-button-width, 36px);
    min-width: var(--arrow-button-width, 36px);
    height: var(--arrow-button-height, 36px);
    min-height: var(--arrow-button-height, 36px);
    flex-shrink: 0;
    color: var(--color-primary-button-text, currentColor);
    border-radius: var(--arrow-border-radius, 0);
    background-color: var(--color-primary-button-background, transparent);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hw-product-linked-cards
    .hw-product-linked-cards__nav
    .hw-carousel-navigation__arrows
    button.hw-carousel-navigation__control:hover,
  .hw-product-linked-cards
    .hw-product-linked-cards__nav
    .hw-carousel-navigation__arrows
    button.slideshow-control:hover {
    color: var(--color-primary-button-hover-text, var(--color-primary-button-text, currentColor));
    background-color: var(
      --color-primary-button-hover-background,
      var(--color-primary-button-background, transparent)
    );
  }

  .hw-product-linked-cards
    .hw-product-linked-cards__nav
    .hw-carousel-navigation__arrows
    button.hw-carousel-navigation__control:disabled,
  .hw-product-linked-cards
    .hw-product-linked-cards__nav
    .hw-carousel-navigation__arrows
    button.slideshow-control:disabled,
  .hw-product-linked-cards
    .hw-product-linked-cards__nav
    .hw-carousel-navigation__arrows
    button.hw-carousel-navigation__control.button:disabled,
  .hw-product-linked-cards
    .hw-product-linked-cards__nav
    .hw-carousel-navigation__arrows
    button.hw-carousel-navigation__control.button-secondary:disabled,
  .hw-product-linked-cards
    .hw-product-linked-cards__nav
    .hw-carousel-navigation__arrows
    button.hw-carousel-navigation__control.button-tertiary:disabled,
  .hw-product-linked-cards
    .hw-product-linked-cards__nav
    .hw-carousel-navigation__arrows
    button.slideshow-control.button:disabled,
  .hw-product-linked-cards
    .hw-product-linked-cards__nav
    .hw-carousel-navigation__arrows
    button.slideshow-control.button-secondary:disabled,
  .hw-product-linked-cards
    .hw-product-linked-cards__nav
    .hw-carousel-navigation__arrows
    button.slideshow-control.button-tertiary:disabled {
    opacity: var(--hw-carousel-nav-disabled-opacity, 0.6);
    cursor: not-allowed;
  }

  .hw-product-linked-cards
    .hw-product-linked-cards__nav
    .slideshow-control
    .icon-caret,
  .hw-product-linked-cards
    .hw-product-linked-cards__nav
    .hw-carousel-navigation__control
    .icon-caret {
    rotate: -90deg;
  }

  .hw-product-linked-cards
    .hw-product-linked-cards__nav-arrows
    .slideshow-control
    .svg-wrapper:is(.icon-caret, .icon-arrow)
    svg,
  .hw-product-linked-cards
    .hw-product-linked-cards__nav-arrows
    .hw-carousel-navigation__control
    .svg-wrapper:is(.icon-caret, .icon-arrow)
    svg,
  .hw-product-linked-cards
    .hw-product-linked-cards__nav-arrows
    .slideshow-control
    .svg-wrapper:is(.icon-caret, .icon-arrow)
    svg
    path,
  .hw-product-linked-cards
    .hw-product-linked-cards__nav-arrows
    .hw-carousel-navigation__control
    .svg-wrapper:is(.icon-caret, .icon-arrow)
    svg
    path {
    width: var(--icon-width, 20px);
    height: var(--icon-height, 20px);
    fill: none;
    stroke: currentColor;
    color: var(--color-primary-button-text, currentColor);
    vector-effect: non-scaling-stroke;
    stroke-width: 1.5px;
  }

  .hw-product-linked-cards
    .hw-product-linked-cards__nav-arrows
    .slideshow-control
    .svg-wrapper
    svg {
    fill: currentColor;
  }

  .hw-product-linked-cards .hw-cart-upsells__cards {
    width: 100%;
  }

  .hw-product-linked-cards .hw-product-linked-cards__track {
    display: flex;
    gap: var(--hw-cu-gap, 16px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    padding-inline: 0;
    scroll-padding-inline-start: 0;
  }

  .hw-product-linked-cards .hw-product-linked-cards__track::-webkit-scrollbar {
    display: none;
  }

  .hw-product-linked-cards .hw-plc-dragging {
    cursor: grabbing;
    user-select: none;
    scroll-snap-type: none;
  }

  .hw-product-linked-cards .hw-cart-upsells__rec-card {
    flex: 0 0 var(--hw-cu-card-w, 280px);
    scroll-snap-align: start;
    background-color: var(--hw-cu-card-bg, var(--color-background));
    border-radius: var(--hw-cu-corner-radius, 8px);
    padding-block: var(--hw-cu-card-py, 14px);
    padding-inline: var(--hw-cu-card-px, 14px);
    display: grid;
    grid-template-columns: var(--hw-cu-style2-image-w, 67px) 1fr auto;
    align-items: center;
    gap: var(--gap-md, 0.75rem);
    box-sizing: border-box;
  }

  @media (min-width: 750px) {
    .hw-product-linked-cards .hw-cart-upsells__rec-card {
      grid-template-columns: var(--hw-cu-style2-image-w-d, var(--hw-cu-style2-image-w, 67px)) 1fr auto;
    }
  }

  .hw-product-linked-cards .hw-cart-upsells__rec-link {
    display: block;
    text-decoration: none;
    transition: opacity 0.2s ease;
  }

  .hw-product-linked-cards .hw-cart-upsells__rec-link:hover {
    opacity: 0.8;
  }

  .hw-product-linked-cards .hw-cart-upsells__rec-link picture {
    display: block;
  }

  .hw-product-linked-cards .hw-cart-upsells__rec-img {
    width: var(--hw-cu-style2-image-w, 67px);
    height: var(--hw-cu-style2-image-w, 67px);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: var(--hw-cu-corner-radius, 4px);
  }

  @media (min-width: 750px) {
    .hw-product-linked-cards .hw-cart-upsells__rec-img {
      width: var(--hw-cu-style2-image-w-d, var(--hw-cu-style2-image-w, 67px));
      height: var(--hw-cu-style2-image-w-d, var(--hw-cu-style2-image-w, 67px));
    }
  }

  .hw-product-linked-cards .hw-cart-upsells__rec-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
  }

  /* Card text layout only — do not set font-* here; theme presets (.paragraph_3, .h5, etc.) and .custom-font-size win */
  .hw-product-linked-cards .hw-cart-upsells__rec-title,
  .hw-product-linked-cards .hw-cart-upsells__rec-desc {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1;
  }

  .hw-product-linked-cards .hw-cart-upsells__rec-price {
    margin: 0;
    opacity: 1;
  }

  .hw-product-linked-cards .hw-product-linked-cards__view-wrap {
    display: inline-block;
    background: transparent;
    background-color: transparent;
  }

  /*
    View link: beat the body page background and keep the Horizon button
    border via the inset box-shadow tokens.
  */
  .hw-product-linked-cards
    .hw-product-linked-cards__view-wrap
    .hw-cart-upsells__options-link {
    color: var(--button-color);
    background-color: var(--button-background-color);
    box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color);
  }

  .hw-product-linked-cards
    .hw-product-linked-cards__view-wrap
    .hw-cart-upsells__options-link:hover {
    color: var(--button-color);
    background-color: var(--button-background-color);
    box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color);
  }

  .hw-product-linked-cards .hw-cart-upsells__rec-price {
    margin: 0;
    color: var(--color-foreground);
  }

  .hw-product-linked-cards .hw-cart-upsells__rec-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .hw-product-linked-cards .hw-cart-upsells__options-link {
    width: auto;
    min-width: 52px;
    padding-inline: 0.875rem;
    padding-block: 0.5rem;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    display: block;
    box-sizing: border-box;
  }

  @media (max-width: 749px) {
    .hw-product-linked-cards.hw-cart-upsells--mobile-slider
      .hw-cart-upsells__cards.hw-product-linked-cards__track {
      margin-inline: calc(-1 * var(--util-page-margin-offset, var(--page-margin, 16px)));
      width: calc(100% + (2 * var(--util-page-margin-offset, var(--page-margin, 16px))));
      box-sizing: border-box;
      padding-inline-start: var(--util-page-margin-offset, var(--page-margin, 16px));
      padding-inline-end: var(--util-page-margin-offset, var(--page-margin, 16px));
      scroll-padding-inline-start: var(--util-page-margin-offset, var(--page-margin, 16px));
    }

    .hw-product-linked-cards.hw-cart-upsells--mobile-stack .hw-cart-upsells__cards {
      display: flex;
      flex-direction: column;
      gap: var(--hw-cu-gap, 16px);
      overflow-x: visible;
      scroll-snap-type: none;
      padding-inline: 0;
    }

    .hw-product-linked-cards.hw-cart-upsells--mobile-stack .hw-cart-upsells__rec-card {
      flex: 1 1 auto;
      width: 100%;
      max-width: 100%;
      scroll-snap-align: none;
    }
  }

  @media (min-width: 750px) {
    .hw-product-linked-cards.hw-cart-upsells--desktop-slider
      .hw-cart-upsells__cards.hw-product-linked-cards__track {
      display: flex;
      flex-direction: row;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      cursor: grab;
      padding-inline: 0;
      scroll-padding-inline-start: 0;
    }

    .hw-product-linked-cards.hw-cart-upsells--desktop-stack .hw-cart-upsells__cards,
    .hw-product-linked-cards.hw-cart-upsells--desktop-stack
      .hw-cart-upsells__cards.hw-product-linked-cards__track {
      display: flex;
      flex-direction: column;
      overflow-x: visible;
      scroll-snap-type: none;
      cursor: default;
      padding-inline: 0;
    }

    .hw-product-linked-cards.hw-cart-upsells--desktop-stack .hw-cart-upsells__rec-card {
      flex: 1 1 auto;
      width: 100%;
      max-width: 100%;
      scroll-snap-align: none;
      padding-block: var(--hw-plc-card-py-d, var(--hw-cu-card-py, 14px));
      padding-inline: var(--hw-plc-card-px-d, var(--hw-cu-card-px, 14px));
      min-height: 102px;
    }

    .hw-product-linked-cards.hw-cart-upsells--mobile-slider.hw-cart-upsells--desktop-stack
      .hw-cart-upsells__cards.hw-product-linked-cards__track {
      margin-inline: 0;
      width: 100%;
      padding-inline: 0;
      scroll-padding-inline-start: 0;
    }
  }
/* END_BLOCK:hw-product-linked-cards */

/* START_BLOCK:hw-product-usp-chips (INDEX:327) */
.hw-product-usp-chips {
    --hw-product-usp-chips-gap: 10px;
    --hw-product-usp-chips-gap-desktop: 10px;
    --hw-product-usp-chips-justify: flex-start;
    --hw-product-usp-chips-align: center;

    display: flex;
    flex-wrap: wrap;
    align-items: var(--hw-product-usp-chips-align);
    justify-content: var(--hw-product-usp-chips-justify);
    gap: var(--hw-product-usp-chips-gap);
    min-width: 0;
  }

  @media screen and (min-width: 990px) {
    .hw-product-usp-chips {
      gap: var(--hw-product-usp-chips-gap-desktop);
    }
  }

  .hw-product-usp-chips__empty {
    margin: 0;
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.4;
    color: rgb(var(--color-foreground-rgb) / 0.72);
  }
/* END_BLOCK:hw-product-usp-chips */

/* START_BLOCK:hw-progress (INDEX:328) */
.hw-progress {
    box-sizing: border-box;
    width: var(--hw-progress-width-mobile, 100%);
    max-width: 100%;
    padding-block: var(--padding-block-start, 0) var(--padding-block-end, 0);
    padding-inline: var(--padding-inline-start, 0) var(--padding-inline-end, 0);
    color: var(--color-foreground);
  }

  .hw-progress__track {
    position: relative;
    width: 100%;
    height: var(--hw-progress-height-mobile, 24px);
    border-radius: var(--hw-progress-radius, 8px);
    background: var(--hw-progress-track-bg, var(--color-background, #eeeeee));
    overflow: hidden;
  }

  .hw-progress__fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--hw-progress-percent, 0%);
    max-width: 100%;
    border-radius: inherit;
    background: var(--hw-progress-fill-bg, var(--color-primary, #4db4cc));
  }

  .hw-progress__label {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-inline: 0.75em;
    margin: 0;
    pointer-events: none;
    color: inherit;
    white-space: nowrap;
  }

  .hw-progress__label--left {
    justify-content: flex-start;
    text-align: left;
  }

  .hw-progress__label--center {
    justify-content: center;
    text-align: center;
  }

  .hw-progress__label--right {
    justify-content: flex-end;
    text-align: right;
  }

  /* Label fit: constrain the label box to the filled width so it rides the fill edge. */
  .hw-progress--label-fit .hw-progress__label {
    inset-inline-end: auto;
    width: var(--hw-progress-percent, 0%);
    max-width: 100%;
  }

  /* Animate: fill starts at 0 and grows to target once in view (JS adds --in-view). */
  .hw-progress--animate .hw-progress__fill {
    width: 0;
    transition: width var(--hw-progress-duration, 1200ms) cubic-bezier(0.22, 1, 0.36, 1);
  }

  .hw-progress--animate.hw-progress--label-fit .hw-progress__label {
    width: 0;
    transition: width var(--hw-progress-duration, 1200ms) cubic-bezier(0.22, 1, 0.36, 1);
  }

  .hw-progress--animate.hw-progress--in-view .hw-progress__fill {
    width: var(--hw-progress-percent, 0%);
  }

  .hw-progress--animate.hw-progress--in-view.hw-progress--label-fit .hw-progress__label {
    width: var(--hw-progress-percent, 0%);
  }

  @media screen and (min-width: 750px) {
    .hw-progress {
      width: var(--hw-progress-width-desktop, 100%);
      padding-block: var(--padding-block-start-desktop, 0) var(--padding-block-end-desktop, 0);
      padding-inline: var(--padding-inline-start-desktop, 0) var(--padding-inline-end-desktop, 0);
    }

    .hw-progress__track {
      height: var(--hw-progress-height-desktop, var(--hw-progress-height-mobile, 24px));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hw-progress--animate .hw-progress__fill,
    .hw-progress--animate.hw-progress--label-fit .hw-progress__label {
      width: var(--hw-progress-percent, 0%);
      transition: none;
    }
  }
/* END_BLOCK:hw-progress */

/* START_BLOCK:hw-quantity (INDEX:329) */
.hw-quantity {
    display: flex;
    min-width: 0;
  }

  .hw-quantity--fill {
    width: 100%;
  }

  .hw-quantity--fit {
    width: fit-content;
  }

  .hw-quantity .quantity-selector-wrapper {
    width: 100%;
  }

  .hw-quantity .quantity-selector {
    --quantity-selector-width: var(--hw-qty-width, 124px);

    flex: 0 0 auto;
    align-self: auto;
    width: var(--hw-qty-width, 124px);
    min-height: var(--hw-qty-height, auto);
    border-width: var(--hw-qty-border-width, var(--style-border-width-inputs));
    border-color: var(--hw-qty-border-color, var(--color-input-border));
    border-radius: var(--hw-qty-radius, var(--style-border-radius-inputs));
    background-color: var(--hw-qty-background, var(--color-input-background));
    color: var(--hw-qty-text, var(--color-input-text));
  }

  .hw-quantity--fill .quantity-selector {
    flex: 1 1 auto;
    width: 100%;
  }

  /* Hover on the base rule repaints the background; hold the picked colour instead. */
  .hw-quantity .quantity-selector:hover {
    background-color: var(--hw-qty-background, var(--color-input-hover-background));
  }

  .hw-quantity .quantity-selector :is(.quantity-minus, .quantity-plus) {
    width: var(--hw-qty-button-size, var(--minimum-touch-target));
    height: var(--hw-qty-button-size, var(--minimum-touch-target));
    border-radius: 0;
    color: var(--hw-qty-icon-color, var(--hw-qty-text, var(--color-input-text)));
  }

  .hw-quantity .quantity-selector svg {
    width: var(--hw-qty-icon-size, var(--icon-size-xs));
    height: var(--hw-qty-icon-size, var(--icon-size-xs));
  }

  .hw-quantity .quantity-selector input[type='number'] {
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--hw-qty-font-size, inherit);
    color: var(--hw-qty-text, var(--color-input-text));
  }
/* END_BLOCK:hw-quantity */

/* START_BLOCK:hw-quick-add-button (INDEX:330) */
/* Root uses .size-style (base.css) + inline --size-style-width* from hw-size-style */
  .hw-quick-add-button-root {
    display: block;
    max-width: 100%;
  }

  button.hw-quick-add-button {
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
  }

  /*
   * Padding resolution for both shapes this block renders.
   *
   * `--hw-qab-pad-*` is set (per breakpoint, scoped to the block id) only when the block
   * turns on "Override theme button padding". Left unset, each side falls back to the size
   * preset's `--button-padding-*` from Theme settings → Buttons. Resolving it through
   * variables rather than per-element rules is what keeps the plain control and the split
   * control inset identically.
   */
  .hw-quick-add-button--custom-padding:not(.hw-quick-add-button--split) {
    padding-block: var(--hw-qab-pad-block-start, var(--button-padding-block))
      var(--hw-qab-pad-block-end, var(--button-padding-block));
    padding-inline: var(--hw-qab-pad-inline-start, var(--button-padding-inline))
      var(--hw-qab-pad-inline-end, var(--button-padding-inline));
  }

  /*
   * Icon-only: no label to size the control, so the icon is centred and the button keeps
   * whichever padding won above. `aspect-ratio` is deliberately not set — an uneven
   * padding pair is a legitimate configuration here, same as on the split control.
   */
  .hw-quick-add-button--icon-only {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }

  .hw-quick-add-button--icon-only .hw-quick-add-button__icon,
  .hw-quick-add-button--icon-only .hw-quick-add-button__icon .svg-wrapper,
  .hw-quick-add-button--icon-only .hw-quick-add-button__icon .svg-wrapper > svg {
    width: var(--hw-qab-icon-size, var(--icon-size-sm));
    height: var(--hw-qab-icon-size, var(--icon-size-sm));
  }

  .hw-quick-add-button--icon-only .hw-quick-add-button__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  /* Split controls keep padding: 0 and inset their inner cells instead. */
  .hw-quick-add-button--split {
    display: flex;
    align-items: stretch;
    padding: 0;
    text-decoration: none;
  }

  .hw-quick-add-button--split.hw-quick-add-button--align-left {
    justify-content: flex-start;
  }

  .hw-quick-add-button--split.hw-quick-add-button--align-right {
    justify-content: flex-end;
  }

  .hw-quick-add-button--split.hw-quick-add-button--align-space-between {
    justify-content: space-between;
  }

  .hw-quick-add-button--split.hw-quick-add-button--align-center {
    justify-content: center;
  }

  .hw-quick-add-button--split .hw-quick-add-button__text {
    padding-block: var(--hw-qab-pad-block-start, var(--button-padding-block))
      var(--hw-qab-pad-block-end, var(--button-padding-block));
    padding-inline: var(--hw-qab-pad-inline-start, var(--button-padding-inline))
      var(--hw-qab-pad-inline-end, var(--button-padding-inline));
    display: flex;
    align-items: center;
  }

  .hw-quick-add-button--split .hw-quick-add-button__divider {
    width: 1px;
    background-color: currentcolor;
    opacity: 0.35;
    flex-shrink: 0;
  }

  .hw-quick-add-button__icon-group {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
  }

  /*
   * Square icon cell. The gutter is the label's own vertical inset counted twice, so the
   * cell tracks whichever padding won above — theme size preset or block override — with
   * no second copy of the numbers.
   */
  .hw-quick-add-button--split .hw-quick-add-button__icon {
    --hw-qab-icon-gutter: calc(
      var(--hw-qab-pad-block-start, var(--button-padding-block)) +
        var(--hw-qab-pad-block-end, var(--button-padding-block))
    );

    width: calc(var(--hw-qab-icon-gutter) + var(--hw-qab-icon-size, var(--icon-size-sm)));
    min-width: calc(var(--hw-qab-icon-gutter) + var(--hw-qab-icon-size, var(--icon-size-sm)));
    min-height: calc(var(--hw-qab-icon-gutter) + var(--hw-qab-icon-size, var(--icon-size-sm)));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .hw-quick-add-button--split .hw-quick-add-button__icon .svg-wrapper,
  .hw-quick-add-button--split .hw-quick-add-button__icon .svg-wrapper > svg {
    width: var(--hw-qab-icon-size, var(--icon-size-sm));
    height: var(--hw-qab-icon-size, var(--icon-size-sm));
  }

  .hw-quick-add-button__icon-media img {
    width: var(--hw-qab-icon-size, var(--icon-size-sm));
    height: var(--hw-qab-icon-size, var(--icon-size-sm));
    object-fit: contain;
    display: block;
  }

  .hw-quick-add-button__icon-media .hw-icon-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-icon-svg-fill, currentcolor);
  }

  .hw-quick-add-button__icon-media .hw-icon-svg svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .hw-quick-add-button__icon-media .svg-wrapper > svg[stroke]:not([stroke='none']),
  .hw-quick-add-button__icon-media .svg-wrapper > svg [stroke]:not([stroke='none']),
  .hw-quick-add-button__icon-media .hw-icon-svg svg[stroke]:not([stroke='none']),
  .hw-quick-add-button__icon-media .hw-icon-svg svg [stroke]:not([stroke='none']) {
    stroke: var(--color-icon-svg-fill, currentcolor);
    stroke-width: var(--icon-stroke-width);
    vector-effect: non-scaling-stroke;
  }

  .hw-quick-add-button__icon-media .hw-icon-svg svg[fill]:not([fill='none']),
  .hw-quick-add-button__icon-media .hw-icon-svg svg [fill]:not([fill='none']) {
    fill: var(--color-icon-svg-fill, currentcolor);
  }

  /*
   * Hover reveal, for card overlays that want it. `stay-visible` is set by
   * hw-quick-add-button.js while the dialog this button opened is still open, so the
   * trigger does not vanish under the shopper's pointer.
   */
  @media (hover: hover) {
    .hw-quick-add-button-root--hover {
      opacity: 0;
      transition: opacity var(--animation-speed, 200ms) var(--animation-easing, ease);
    }

    product-card:hover .hw-quick-add-button-root--hover,
    product-card:focus-within .hw-quick-add-button-root--hover,
    .hw-quick-add-button-root--hover:focus-within,
    .hw-quick-add-button-root--hover[stay-visible] {
      opacity: 1;
    }
  }
/* END_BLOCK:hw-quick-add-button */

/* START_BLOCK:hw-search-field (INDEX:331) */
.hw-search-field {
    display: flex;
    align-items: center;
    min-width: 0;
    /* Cap at the column so a wide field cannot push the logo off centre. */
    max-width: 100%;
    flex: 0 1 var(--hw-search-field-width-mobile, 240px);
  }

  /*
   * Full width: for the mobile menu drawer, where the field is one item in a
   * column stack. A flex-basis is a *height* in a column container, so the header
   * row's width basis has to be dropped entirely rather than raised.
   */
  .hw-search-field[data-hw-search-field-full='true'] {
    flex: 0 0 auto;
    width: 100%;
  }

  @media screen and (min-width: 750px) {
    .hw-search-field {
      flex: 0 1 var(--hw-search-field-width, 366px);
    }
  }

  .hw-search-field[data-hw-search-field-hide-mobile='true'] {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .hw-search-field[data-hw-search-field-hide-mobile='true'] {
      display: flex;
    }
  }

  /*
   * Colour falls back to `inherit` rather than a palette token so the field tracks
   * the header row it sits in — including a transparent header over a hero, where
   * the row's foreground is swapped wholesale (see TRANSPARENT_HEADER.md).
   */
  .hw-search-field__control {
    display: flex;
    align-items: center;
    gap: var(--hw-search-field-gap, 6px);
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: var(--hw-search-field-pad-block, 10px) var(--hw-search-field-pad-inline, 12px);
    border: var(--hw-search-field-border-width, 0px) solid
      var(--hw-search-field-border-color, transparent);
    border-radius: var(--hw-search-field-radius, 6px);
    background-color: var(--hw-search-field-bg, rgb(var(--color-foreground-rgb) / 0.06));
    color: var(--hw-search-field-color, inherit);
    text-align: start;
    cursor: pointer;
    backdrop-filter: blur(var(--hw-search-field-blur, 0px));
    -webkit-backdrop-filter: blur(var(--hw-search-field-blur, 0px));
  }

  .hw-search-field__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--hw-search-field-icon-size, 18px);
    width: var(--hw-search-field-icon-size, 18px);
    height: var(--hw-search-field-icon-size, 18px);
    color: inherit;
  }

  .hw-search-field__icon .svg-wrapper,
  .hw-search-field__icon .hw-search-field__graphic,
  .hw-search-field__icon svg,
  .hw-search-field__icon img {
    display: block;
    width: var(--hw-search-field-icon-size, 18px);
    height: var(--hw-search-field-icon-size, 18px);
  }

  /*
   * One line, clipped rather than wrapped: the field is a fixed-height pill in a
   * single-row header, so a second line of placeholder copy would grow the row.
   */
  .hw-search-field__placeholder {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: inherit;
  }
/* END_BLOCK:hw-search-field */

/* START_BLOCK:hw-star-rating (INDEX:334) */
.hw-star-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
  .hw-star-rating__stars { display: flex; align-items: center; gap: 4px; }
  .hw-star-rating__star { width: var(--star-size, 17px); height: var(--star-size, 17px); flex-shrink: 0; }

  /* Custom icon styles */
  .hw-star-rating__star--custom { object-fit: contain; display: block; }
  .hw-star-rating__star--empty-custom { opacity: var(--star-empty-opacity, 0.3); }

  /* Partial star wrapper (custom icons) */
  .hw-star-rating__star--partial-wrapper {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
  }
  .hw-star-rating__partial-bg,
  .hw-star-rating__partial-fill {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .hw-star-rating__partial-bg--fallback { opacity: var(--star-empty-opacity, 0.3); }
  .hw-star-rating__partial-fill {
    clip-path: inset(0 calc(100% - var(--hw-star-partial, 50%)) 0 0);
  }

  .hw-star-rating__text { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--color-foreground); }
  .hw-star-rating__text--underline { text-decoration: underline; text-underline-offset: 3px; }

  @media screen and (min-width: 990px) {
    .hw-star-rating {
      --padding-block-start: var(--padding-block-start-desktop, var(--padding-block-start));
      --padding-block-end: var(--padding-block-end-desktop, var(--padding-block-end));
    }
  }
/* END_BLOCK:hw-star-rating */

/* START_BLOCK:hw-sticky-buy-cta (INDEX:337) */
/* Host uses display:contents when nested; section-level render (hw-product-information)
     is a direct child of .shopify-section — same pattern as sticky-add-to-cart. */
  .hw-sticky-buy-cta {
    display: contents;
  }

  .hw-sticky-buy-cta__shell {
    display: contents;
  }

  .hw-sticky-buy-cta__bar {
    position: fixed;
    z-index: calc(var(--layer-menu-drawer) - 1);
    isolation: isolate;
    left: 50%;
    bottom: var(--hw-sticky-buy-cta-bottom-mobile, 0px);
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--color-background);
    padding-inline: var(--hw-sticky-buy-cta-padding-inline-mobile, 20px);
    padding-block: var(--hw-sticky-buy-cta-padding-block-mobile, 12px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-block-start: 1px solid rgb(0 0 0 / 0.05);
    border-start-start-radius: var(--hw-sticky-buy-cta-bar-radius, 0px);
    border-start-end-radius: var(--hw-sticky-buy-cta-bar-radius, 0px);
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 24px));
    pointer-events: none;
    transition:
      transform 0.3s var(--ease-out-quad),
      opacity 0.3s var(--ease-out-quad);
  }

  .hw-sticky-buy-cta__bar[data-stuck='true'] {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }

  .hw-sticky-buy-cta[data-enabled='false'] .hw-sticky-buy-cta__bar {
    display: none;
  }

  .hw-sticky-buy-cta__summary {
    display: none;
  }

  .hw-sticky-buy-cta__cta {
    display: block;
    min-width: 0;
    max-width: 100%;
    background: transparent;
  }

  .hw-sticky-buy-cta__button {
    width: 100%;
    min-height: var(--hw-sticky-buy-cta-button-height, 48px);
    color: var(--button-color);
    background-color: var(--button-background-color);
    border-color: var(--button-border-color);
    box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color);
    text-transform: capitalize;
  }

  .hw-sticky-buy-cta__button.custom-typography {
    text-transform: var(--text-transform, capitalize);
  }

  .hw-sticky-buy-cta__button-label {
    color: inherit;
  }

  .hw-sticky-buy-cta__bar--title-uppercase .hw-sticky-buy-cta__title {
    text-transform: uppercase;
  }

  .hw-sticky-buy-cta__badge-wrap {
    display: inline-flex;
    flex-shrink: 0;
    background: transparent;
  }

  .hw-sticky-buy-cta__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--hw-sticky-buy-cta-badge-height, 28px);
    padding-inline: 8px;
    padding-block: 0;
    border-radius: 39px;
    white-space: nowrap;
    line-height: 1.2;
  }

  /*
   * The pill reads its button token family directly. The old [class*='color-']
   * guard existed to beat `body, .color-*`'s page background fill, which only
   * matched because the pill itself carried a scheme class — with the class gone
   * there is nothing left to out-specify.
   */
  .hw-sticky-buy-cta__badge--button {
    background-color: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
  }

  .hw-sticky-buy-cta__badge--button-secondary {
    background-color: var(--color-secondary-button-background);
    color: var(--color-secondary-button-text);
  }

  .hw-sticky-buy-cta__badge--button-tertiary {
    background-color: var(--color-tertiary-button-background);
    color: var(--color-tertiary-button-text);
  }

  .hw-sticky-buy-cta__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
  }

  .hw-sticky-buy-cta__title {
    margin: 0;
    color: var(--color-foreground);
  }

  .hw-sticky-buy-cta__title.custom.custom-typography {
    color: var(--color, var(--color-foreground));
  }

  .hw-sticky-buy-cta__copy {
    display: flex;
    flex-direction: column;
    gap: var(--hw-sticky-buy-cta-copy-gap, 4px);
    min-width: 0;
  }

  .hw-sticky-buy-cta__description {
    margin: 0;
    color: var(--color-foreground);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    max-width: 100%;
  }

  .hw-sticky-buy-cta__description.custom.custom-typography {
    color: var(--color, var(--color-foreground));
  }

  .hw-sticky-buy-cta__price {
    margin: 0;
    color: var(--color-foreground);
  }

  .hw-sticky-buy-cta__price.custom.custom-typography {
    color: var(--color, var(--color-foreground));
  }

  .hw-sticky-buy-cta__image {
    flex-shrink: 0;
    width: var(--hw-sticky-buy-cta-image-size-desktop, 78px);
    height: var(--hw-sticky-buy-cta-image-size-desktop, 78px);
    border-radius: var(--hw-sticky-buy-cta-image-radius, 14px);
    overflow: hidden;
    background: var(--color-background-secondary);
  }

  .hw-sticky-buy-cta__image-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Full-width shell background; inner bar stays max-width */
  .hw-sticky-buy-cta--full-width-bg .hw-sticky-buy-cta__shell {
    display: block;
    position: fixed;
    z-index: calc(var(--layer-menu-drawer) - 1);
    isolation: isolate;
    left: 0;
    right: 0;
    bottom: var(--hw-sticky-buy-cta-bottom-mobile, 0px);
    width: 100%;
    box-sizing: border-box;
    background-color: var(--color-background);
    border-block-start: 1px solid rgb(0 0 0 / 0.05);
    opacity: 0;
    transform: translateY(calc(100% + 24px));
    pointer-events: none;
    transition:
      transform 0.3s var(--ease-out-quad),
      opacity 0.3s var(--ease-out-quad);
  }

  .hw-sticky-buy-cta--full-width-bg:has(.hw-sticky-buy-cta__bar[data-stuck='true']) .hw-sticky-buy-cta__shell {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .hw-sticky-buy-cta--full-width-bg .hw-sticky-buy-cta__bar {
    position: relative;
    left: auto;
    bottom: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    border-block-start: 0;
    background: transparent;
  }

  .hw-sticky-buy-cta--full-width-bg .hw-sticky-buy-cta__bar[data-stuck='false'] {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .hw-sticky-buy-cta__bar,
    .hw-sticky-buy-cta--full-width-bg .hw-sticky-buy-cta__shell {
      transition: none;
    }
  }

  @media screen and (min-width: 750px) {
    .hw-sticky-buy-cta__bar {
      bottom: var(--hw-sticky-buy-cta-bottom-desktop, var(--hw-sticky-buy-cta-bottom-mobile, 0px));
      width: min(
        calc(100% - (var(--hw-sticky-buy-cta-side-inset-desktop, 20px) * 2)),
        var(--hw-sticky-buy-cta-max-width-desktop, 731px)
      );
      max-width: var(--hw-sticky-buy-cta-max-width-desktop, 731px);
      padding-inline: var(--hw-sticky-buy-cta-padding-inline-desktop, 20px);
      padding-block: var(--hw-sticky-buy-cta-padding-block-desktop, 14px);
      flex-direction: row;
      align-items: center;
      gap: var(--hw-sticky-buy-cta-gap-desktop, 32px);
      border-inline: 1px solid rgb(0 0 0 / 0.05);
      border-start-start-radius: var(--hw-sticky-buy-cta-bar-radius, 12px);
      border-start-end-radius: var(--hw-sticky-buy-cta-bar-radius, 12px);
      box-shadow: 0 -2px 8.75px rgb(0 0 0 / 0.08);
    }

    .hw-sticky-buy-cta--full-width-bg .hw-sticky-buy-cta__shell {
      bottom: var(--hw-sticky-buy-cta-bottom-desktop, var(--hw-sticky-buy-cta-bottom-mobile, 0px));
      border-inline: none;
      border-start-start-radius: 0;
      border-start-end-radius: 0;
      box-shadow: 0 -2px 8.75px rgb(0 0 0 / 0.08);
    }

    .hw-sticky-buy-cta--full-width-bg .hw-sticky-buy-cta__bar {
      width: min(
        calc(100% - (var(--hw-sticky-buy-cta-side-inset-desktop, 20px) * 2)),
        var(--hw-sticky-buy-cta-max-width-desktop, 731px)
      );
      max-width: var(--hw-sticky-buy-cta-max-width-desktop, 731px);
      margin-inline: auto;
      padding-inline: var(--hw-sticky-buy-cta-padding-inline-desktop, 20px);
      padding-block: var(--hw-sticky-buy-cta-padding-block-desktop, 14px);
      border-inline: 0;
      border-start-start-radius: 0;
      border-start-end-radius: 0;
      box-shadow: none;
    }

    .hw-sticky-buy-cta__summary {
      display: flex;
      align-items: flex-start;
      gap: var(--hw-sticky-buy-cta-summary-image-gap, 12px);
      flex: 1 1 0;
      min-width: 0;
      overflow: hidden;
    }

    .hw-sticky-buy-cta__copy {
      flex: 1 1 auto;
      overflow: hidden;
    }

    /* Desktop + summary: CTA column targets ideal width, shrinks if the bar is tight. */
    .hw-sticky-buy-cta__bar:not(.hw-sticky-buy-cta__bar--cta-only) .hw-sticky-buy-cta__cta {
      display: flex;
      flex: 0 1 var(--hw-sticky-buy-cta-cta-ideal-width, 260px);
      align-items: center;
      justify-content: flex-end;
      min-width: 0;
      max-width: var(--hw-sticky-buy-cta-cta-ideal-width, 260px);
    }

    .hw-sticky-buy-cta__bar:not(.hw-sticky-buy-cta__bar--cta-only) .hw-sticky-buy-cta__button {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      white-space: nowrap;
    }

    .hw-sticky-buy-cta__cta {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      min-width: 0;
    }

    .hw-sticky-buy-cta__button {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      white-space: nowrap;
    }

    .hw-sticky-buy-cta__bar--cta-only {
      justify-content: stretch;
    }

    .hw-sticky-buy-cta__bar--cta-only .hw-sticky-buy-cta__cta {
      flex: 1 1 auto;
      max-width: none;
      width: 100%;
      justify-content: stretch;
    }
  }
/* END_BLOCK:hw-sticky-buy-cta */

/* START_BLOCK:hw-supply-picker-loop (INDEX:338) */
.hw-supply-picker-loop {
    width: 100%;
  }
  .hw-supply-picker-loop__list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--hw-supply-picker-gap, 10px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .hw-supply-picker-loop__item {
    position: relative;
    flex: 1 1 0;
    min-width: min(100%, 100px);
    display: flex;
  }

  .hw-supply-picker-loop__card {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 190px;
    width: 100%;
    overflow: hidden;
    border: 2px solid var(--hw-supply-border-default, #f0d1df);
    border-radius: var(--hw-supply-card-radius, 12px);
    background: transparent;
  }

  .hw-supply-picker-loop__item--current .hw-supply-picker-loop__card {
    border-color: var(--hw-supply-border-selected, #000000);
    background: #ffffff;
  }

  .hw-supply-picker-loop__card-inner {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    pointer-events: none;
  }

  .hw-supply-picker-loop__card-inner a,
  .hw-supply-picker-loop__card-inner button {
    pointer-events: auto;
  }

  .hw-supply-picker-loop__card-inner > .hw-group {
    flex: 1 1 auto;
    min-height: 0;
  }

  .hw-supply-picker-loop__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    border-radius: inherit;
    background: var(--hw-supply-overlay-bg, rgba(0, 0, 0, 0.8));
    backdrop-filter: blur(1px);
    color: #ffffff;
    text-align: center;
    pointer-events: none;
  }

  .hw-supply-picker-loop__overlay-title,
  .hw-supply-picker-loop__overlay-status,
  .hw-supply-picker-loop__overlay-cta {
    margin: 0;
  }

  .hw-supply-picker-loop__overlay-title,
  .hw-supply-picker-loop__overlay-status {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
  }

  .hw-supply-picker-loop__overlay-cta {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
  }

  .hw-supply-picker-loop__stretch {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: var(--hw-supply-card-radius, 12px);
    text-decoration: none;
  }

  .hw-supply-picker-loop__stretch:focus-visible {
    outline: 2px solid rgb(var(--color-foreground-rgb));
    outline-offset: 2px;
  }

  .hw-supply-picker-loop__item--sold-out .hw-supply-picker-loop__stretch {
    display: none;
  }

  .hw-supply-picker-loop__placeholder {
    margin: 0;
    font-size: 0.875rem;
    opacity: 0.85;
  }
/* END_BLOCK:hw-supply-picker-loop */

/* START_BLOCK:hw-video (INDEX:351) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:hw-video */

/* START_BLOCK:icon (INDEX:353) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:354) */
.placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }

  .image-block--height-fill .image-block__image {
    height: 100%;
  }

  .image-block__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }
/* END_BLOCK:image */

/* START_BLOCK:logo (INDEX:356) */
.logo-block {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

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

  .logo-block__image {
    object-fit: contain;
    width: 100%;
  }
/* END_BLOCK:logo */

/* START_BLOCK:menu (INDEX:357) */
.menu {
    width: 100%;
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: var(--spacing--size);
  }

  .menu__item + .menu__item {
    margin-block-start: var(--spacing--size);
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

    .menu--accordion .details-content {
      margin-block-start: var(--spacing--size);
    }

    .menu--accordion .menu__details {
      padding-inline: 0;
    }

    .menu--dividers .menu__details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .menu--dividers .details-content {
      padding-block-end: var(--padding-sm);
    }
  }

  .menu--caret .icon-plus,
  .menu--plus .icon-caret {
    display: none;
  }
/* END_BLOCK:menu */

/* START_BLOCK:page (INDEX:359) */
.page-block {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    align-items: flex-start;
  }

  .page-title {
    margin-bottom: var(--margin-xl);
  }
/* END_BLOCK:page */

/* START_BLOCK:payment-icons (INDEX:360) */
.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:361) */
.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:362) */
.tax-note:empty {
    display: none;
  }

  form.payment-terms {
    padding-top: 0.5em;
    font-size: min(0.85em, var(--font-paragraph--size));
    font-weight: var(--font-paragraph--weight);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .installments:not(:has(shopify-payment-terms)) {
    display: none;
  }

  /* Volume pricing note should match unit-price styling (small, grey text) */
  product-price .volume-pricing-note,
  product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) .volume-pricing-note {
    display: block;
    font-family: var(--font-body--family);
    font-weight: normal;
    font-size: var(--font-size--xs);
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }
/* END_BLOCK:price */

/* START_BLOCK:product-custom-property (INDEX:364) */
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%;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* Add padding for inputs with counter inside */
  product-custom-property-component .__input-wrapper input {
    padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component .__input-wrapper textarea {
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component textarea {
    min-height: 80px;
  }

  @supports (resize: vertical) {
    @media (hover: hover) and (pointer: fine) {
      product-custom-property-component textarea {
        resize: vertical; /* stylelint-disable-line */
      }
    }
  }

  product-custom-property-component .__character-label {
    position: absolute;
    left: var(--input-padding-x);
    bottom: var(--padding-sm);
    pointer-events: none;
  }

  product-custom-property-component .__character-count {
    font-style: italic;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* We should consolidate input styles that share the same behavior */
  .custom-property__input {
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    /* this is needed to override the styles from field__input */
    box-shadow: none;

    &:is(:hover, :focus) {
      /* this is needed to override the styles from field__input */
      box-shadow: none;
    }

    &:focus {
      /* this is needed to override the styles from field__input */
      outline: var(--focus-outline-width) solid var(--color-input-background);
    }
  }
/* END_BLOCK:product-custom-property */

/* START_BLOCK:product-inventory (INDEX:366) */
.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:367) */
.block-resource-list {
    display: flex;
    flex-direction: column;
    row-gap: var(--gap);
    min-width: 0;
    min-height: 0;
    container-type: inline-size;
    container-name: resource-list;
    border-radius: var(--border-radius, 0);
  }

  .product-recommendations-wrapper {
    width: 100%;
  }

  .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) {
    width: 100vw;
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:review (INDEX:370) */
.rating-wrapper {
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .rating-color--primary {
    --star-fill-color: var(--color-primary);
    --star-fill-color-rgb: var(--color-primary-rgb);
    --color: var(--color-primary);
  }

  .rating-color--foreground {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
    --color: var(--color-foreground);
  }

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:social-links (INDEX:372) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }

  .social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:social-links */

/* START_BLOCK:spacer (INDEX:373) */
/* Fill opposite direction */
  .layout-panel-flex--column > .spacer-block {
    width: 100%;
  }

  .layout-panel-flex--row > .spacer-block {
    height: 100%;
  }

  /* Flex - Percent */
  :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent {
    flex: var(--spacer-size);
  }

  /* Flex - Pixel */
  .layout-panel-flex--row > .spacer-block--size-pixel {
    width: var(--spacer-size);
  }

  .layout-panel-flex--column > .spacer-block--size-pixel {
    height: var(--spacer-size);
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    /* Percent */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent {
      flex: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-percent,
    .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) {
      width: 100%;
      flex: var(--spacer-size-mobile);
    }

    /* Pixel */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel {
      width: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-pixel,
    .mobile-column > .spacer-block--size-mobile-pixel {
      width: 100%;
      flex: 0;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:374) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:video (INDEX:377) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:background-media (INDEX:379) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:380) */
.bento-box {
    display: grid;
    column-gap: var(--bento-gap);
    row-gap: calc(var(--bento-gap) * 1.5);
    width: 100%;
  }

  .bento-box:has(.collection-card--image-bg) {
    row-gap: var(--bento-gap);
  }

  .bento-box ~ .bento-box {
    padding-block-start: var(--bento-gap);
  }

  @media screen and (max-width: 900px) {
    .bento-box {
      grid-template-columns: repeat(2, 1fr);
    }

    .bento-box__item {
      /* Prevent grid items from overflowing their cells when children have aspect-ratio */
      min-width: 0;
      overflow: hidden;
    }

    .bento-box__item:nth-child(3n + 1) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 2) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 3) {
      grid-column: span 2;
    }

    /* Ensure last items create a full row */
    .bento-box__item:last-child:nth-child(3n + 5) {
      grid-column: span 1;
    }

    .bento-box__item:last-child:nth-child(3n + 4) {
      grid-column: span 2;
    }
  }

  @media screen and (min-width: 901px) {
    .bento-box {
      grid-template-columns: repeat(12, 1fr);
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K L L L L';
    }

    .bento-box__item:nth-child(1) {
      grid-area: A;
    }

    .bento-box__item:nth-child(2) {
      grid-area: B;
    }

    .bento-box__item:nth-child(3) {
      grid-area: C;
    }

    .bento-box__item:nth-child(4) {
      grid-area: D;
    }

    .bento-box__item:nth-child(5) {
      grid-area: E;
    }

    .bento-box__item:nth-child(6) {
      grid-area: F;
    }

    .bento-box__item:nth-child(7) {
      grid-area: G;
    }

    .bento-box__item:nth-child(8) {
      grid-area: H;
    }

    .bento-box__item:nth-child(9) {
      grid-area: I;
    }

    .bento-box__item:nth-child(10) {
      grid-area: J;
    }

    .bento-box__item:nth-child(11) {
      grid-area: K;
    }

    .bento-box__item:nth-child(12) {
      grid-area: L;
    }

    /* === Overrides for specific item counts === */

    /* Exactly 1 item */
    .bento-box--items-1 {
      grid-template-areas: 'A A A A A A A A A A A A';
    }

    /* Exactly 2 items */
    .bento-box--items-2 {
      grid-template-areas: 'A A A A A A B B B B B B';
    }

    /* Exactly 4 items */
    .bento-box--items-4 {
      grid-template-areas:
        'A A A A B B B B B B B B'
        'C C C C C C C C D D D D';
    }

    /* Exactly 5 items */
    .bento-box--items-5 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E E E E';
    }

    /* Exactly 7 items */
    .bento-box--items-7 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D D D D E E E'
        'F F F F F F G G G G G G';
    }

    /* Exactly 8 items */
    .bento-box--items-8 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H H H H H H H';
    }

    /* Exactly 10 items */
    .bento-box--items-10 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G G G G G G G H H H'
        'I I I J J J J J J J J J';
    }

    /* Exactly 11 items */
    .bento-box--items-11 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K K K K K';
    }
  }
/* END_SNIPPET:bento-grid */

/* START_SNIPPET:blog-comment-form (INDEX:381) */
.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:button (INDEX:384) */
.link {
    &:hover {
      color: var(--color-primary-hover);
      text-decoration-color: transparent;
    }
  }
/* END_SNIPPET:button */

/* START_SNIPPET:card-gallery (INDEX:385) */
.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.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:cart-products (INDEX:387) */
.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-page--empty .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: 0;
    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;
  }

  .cart-items__table {
    width: 100%;
    border-spacing: 0;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    --cart-item-price-width: 6rem;

    display: grid;
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
    grid-template-areas:
      'media details price'
      'media quantity price'
      'media error error';
    column-gap: var(--gap-md);
    align-items: start;
    padding-bottom: var(--cart-items-gap);
    margin-bottom: var(--margin-lg);
  }

  /* Cart drawer: separate grid areas for variants and unit price */
  .cart-drawer .cart-items__table-row--full-width-variants {
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) auto;
    grid-template-rows: repeat(4, min-content) 1fr;
    grid-template-areas:
      'media details price'
      'media variants variants'
      'media unit_price unit_price'
      'media quantity quantity'
      'media error error';

    .cart-items__details {
      display: contents;
    }

    .cart-items__product-info {
      grid-area: details;
    }

    .cart-items__variants-wrapper {
      grid-area: variants;

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

    .cart-items__unit-price-wrapper {
      grid-area: unit_price;
      font-size: var(--font-size--sm);
    }

    .cart-items__price {
      min-width: auto;
      width: max-content;
    }
  }

  .cart-items__table-row.cart-items__nested-line td:first-child {
    width: 60%;
    justify-self: right;
  }

  html:active-view-transition-type(page-navigation) .cart-items__table-row {
    /* stylelint-disable-next-line declaration-no-important */
    view-transition-name: none !important;
  }

  .cart-items__table-row.removing {
    overflow: hidden;
    animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
    animation-delay: var(--animation-speed);
  }

  @keyframes removeRow {
    0% {
      height: var(--row-height);
    }

    100% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }
  }

  .cart-items__table-row: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-of-type {
    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-3xs);
  }

  .cart-items__details * {
    font-size: var(--font-size--sm);
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__title {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: calc((var(--font-size--md) - 1lh) / 2);
  }

  .cart-items__variants {
    display: block;
  }


  .cart-items__variant {
    display: inline;
  }

  .cart-items__variant dt,
  .cart-items__variant dd {
    display: inline;
    margin: 0;
  }

  .cart-items__quantity {
    grid-area: quantity;
    margin-block-start: var(--margin-xs);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls > .volume-pricing-info {
    margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs));
  }

  .cart-items__quantity .quantity-selector {
    display: inline-flex;
    font-size: var(--font-size--sm);
    height: auto;
  }

  .cart-items__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

  .cart-items__media {
    grid-area: media;
    padding: 0;
  }

  .cart-items__price {
    grid-area: price;
    min-height: unset;
    min-width: var(--cart-item-price-width);
    text-align: end;
    display: block;
    font-size: var(--font-size--sm);
    line-height: var(--line-height);
  }


  .cart-items__price-unit {
    font-size: var(--font-size--xs);
    padding-block-start: var(--padding-2xs);
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

  /* Error message */
  .cart-items__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    grid-area: error;
    margin-block-start: var(--margin-xs);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: opacity var(--drawer-animation-speed) var(--animation-easing),
      transform var(--drawer-animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .cart-item__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    font-size: var(--font-size--sm);
    padding-block: var(--padding-2xs);
  }

  .cart-item__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
    margin-block-start: var(--margin-3xs);
  }

  @container cart-items (min-width: 720px) {
    /* Cart page: original layout */
    .cart-items__table-row {
      --cart-item-price-width: 6rem;

      grid-template-columns: 7.5rem 1fr 1fr minmax(var(--cart-item-price-width), auto);
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media details error error';
    }

    .cart-items__quantity,
    .cart-items__price {
      grid-area: initial;
    }

    .cart-items__quantity {
      margin-top: 0;
    }

    .cart-items__price {
      min-height: var(--minimum-touch-target);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    /* Cart drawer: separate areas for variants and unit price */
    .cart-drawer .cart-items__table-row--full-width-variants {
      grid-template-rows: min-content min-content min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media variants variants variants'
        'media unit_price unit_price unit_price'
        'media error error error';

      .cart-items__quantity,
      .cart-items__price {
        grid-area: initial;
      }
    }
  }

  .cart__subtotal-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &.cart__total-container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart__subtotal-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

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

  .cart__subtotal-container,
  .cart__subtotal-container * {
    font-size: var(--font-size--sm);
  }

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

  .cart__total-label {
    font-size: var(--font-size--sm);
  }

  .cart__total-value {
    font-size: var(--font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

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

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

  /* Remove animation */
  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .cart-items__remove:hover .remove-icon-top {
    transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
  }

  .cart-items__remove:is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  .cart-items__table-row.removing .remove-icon-bottom {
    transform: translateY(0);
  }

  .cart-items__table-row.removing .remove-icon-top {
    animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes removeButtonClickedIconTop {
    50% {
      transform: translate(0, calc(-1 * var(--icon-stroke-width)));
    }

    100% {
      transform: translate(0, 0);
    }
  }

  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__property {
    display: block;
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
    margin: 0;
    overflow-wrap: break-word;
  }

  @media screen and (min-width: 750px) {
    .cart-items .quantity-selector {
      --quantity-selector-width: 105px;
      height: var(--button-size-md);
      width: var(--quantity-selector-width);
    }

    .cart-items .quantity-selector button {
      width: var(--button-size-md);
      height: var(--button-size-md);
    }

    .cart-items .quantity-selector input {
      max-width: calc(var(--quantity-selector-width) - var(--button-size-md) * 2);
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items__empty-button,
      .cart__checkout-button {
        view-transition-name: cart-drawer-primary-action;

        & > .button-text {
          view-transition-name: cart-drawer-primary-action-text;
        }
      }
    }
  }

  ::view-transition-old(cart-drawer-primary-action-text),
  ::view-transition-new(cart-drawer-primary-action-text) {
    height: 100%;
    object-fit: none;
    overflow: clip;
    overflow-clip-margin: 1em;
  }

  ::view-transition-old(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) reverse forwards;
  }
  ::view-transition-new(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) forwards;
  }

  ::view-transition-old(cart-drawer-primary-action),
  ::view-transition-new(cart-drawer-primary-action) {
    height: 100%;
  }

  ::view-transition-group(cart-drawer-primary-action-text),
  ::view-transition-group(cart-drawer-primary-action) {
    animation-duration: var(--spring-d300-b0-duration);
    animation-timing-function: var(--spring-d300-b0-easing);
  }

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:388) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid var(--color-border);
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid var(--color-border);
  }

  .cart-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-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

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

  .cart-totals__tax-note small {
    font-size: var(--font-size--2xs);
  }

  .cart-discounts {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .cart-discounts__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

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

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

  .cart-totals__original-container,
  .cart-totals__container {
    display: flex;
    flex-direction: column;
  }

  .cart-totals__container {
    row-gap: var(--gap-2xs);

    &.cart-totals__container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart-totals__original-container:empty {
    display: none;
  }

  .cart-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart-totals__original-container, .cart-totals__container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

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

  .cart-totals__original-container,
  .cart-totals__original-container * {
    font-size: var(--cart-font-size--sm);
  }

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

  .cart-totals__total-label {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total-value {
    font-size: var(--cart-font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-totals__installments {
    color: var(--color-foreground);
    font-size: var(--font-size--2xs);
  }

  .cart-note {
    width: 100%;
  }

  @starting-style {
    .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content {
      block-size: auto;
      opacity: 1;
      overflow-y: visible;
    }
  }

  .cart-note__inner {
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-totals__icon {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    margin: 0;
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

  .cart-drawer__summary .cart-totals:not(:has(.cart-totals__original-container:empty)) {
    border-block-start: var(--style-border-width) solid 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-discount__input {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    border-style: solid;
    border-radius: var(--style-border-radius-inputs);
    padding: var(--padding-sm) var(--padding-md);
    height: 100%;
    flex-grow: 1;
    min-width: 0;
    font-size: var(--font-size--sm);
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--color-foreground);
    gap: var(--padding-xs);
    align-items: center;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    background-color: var(--color-input-background);
    text-transform: uppercase;
  }

  .cart-discount__form {
    display: flex;
    gap: var(--padding-md);
    align-items: center;
    height: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.4;

    color: var(--color-foreground);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-discount__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
  }

  .cart-discount__error-text {
    margin-block-start: var(--margin-3xs);
  }

  .cart-discount__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discount__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  @media screen and (min-width: 750px) {
    .cart-summary--extend {
      height: 100%;
    }
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:collection-card (INDEX:390) */
.collection-card {
    --fixed-card-height: var(--height-small);

    flex: 1 1 var(--card-width-small);
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__inner {
    gap: var(--gap);

    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 {
    max-width: 100%;
    --flex-wrap: wrap;
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  .collection-card--image-height-fixed {
    height: 100%;
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .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;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:divider (INDEX:393) */
.divider {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: var(--divider-justify-content);
  }

  .divider__line {
    border-bottom: var(--divider-border-thickness) solid var(--color-border);
    border-right: var(--divider-border-thickness) solid var(--color-border);
    border-radius: var(--divider-border-radius, 0);
    flex-basis: var(--divider-flex-basis);
    min-height: var(--divider-flex-basis);
  }
/* END_SNIPPET:divider */

/* START_SNIPPET:editorial-blog-grid (INDEX:394) */
.editorial-blog__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .shopify-block {
      height: 100%;
    }
  }

  .editorial-blog__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-blog__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-blog__spacer {
      display: none;
    }

    /* Mobile layout - also horizontally mirrored from collection grid */
    .editorial-blog__item-0 {
      width: 66%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-1 {
      width: 83%;
      align-self: flex-start; /* Originally flex-end, now flex-start */
    }

    .editorial-blog__item-2 {
      width: 83%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-3 {
      width: 100%;
      align-self: center; /* Stays centered */
    }
  }
/* END_SNIPPET:editorial-blog-grid */

/* START_SNIPPET:editorial-collection-grid (INDEX:395) */
.editorial-collection__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .resource-list__item,
    .collection-card {
      height: 100%;
    }
  }

  .editorial-collection__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-collection__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-collection__spacer {
      display: none;
    }

    .editorial-collection__item-0 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 4 / 5;
    }

    .editorial-collection__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 5 / 5;
    }

    .editorial-collection__item-2 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 8 / 6;
    }

    .editorial-collection__item-3 {
      width: 100%;
      align-self: center;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-collection-grid */

/* START_SNIPPET:editorial-product-grid (INDEX:396) */
.editorial-product__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    /* Make the aspect ratio super high on width, then increase the height of
     * slideshow containers until they fill all the available space */
    .card-gallery {
      /* stylelint-disable-next-line declaration-no-important */
      --gallery-aspect-ratio: 99 !important;
    }

    .card-gallery,
    slideshow-component,
    slideshow-container,
    slideshow-slides {
      height: 100%;
    }
  }

  .editorial-product__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-product__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-product__spacer {
      display: none;
    }

    .editorial-product__item-0 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 7 / 6;
    }

    .editorial-product__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 4 / 5;
    }

    .editorial-product__item-2 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 5 / 5;
    }

    .editorial-product__item-3 {
      width: 100%;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-product-grid */

/* START_SNIPPET:filter-remove-buttons (INDEX:397) */
/* Facets - Remove buttons */
  .facets-remove {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;

    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    padding: 0 var(--drawer-padding);
    margin: 0;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 16px;
      --variant-picker-swatch-height: 16px;

      gap: var(--gap-2xs);
    }
  }

  .facets-remove:has(facet-remove-component) {
    display: flex;
    margin-block-start: var(--margin-2xs);
    margin-block-end: var(--margin-md);
  }

  .facets:not(.facets--drawer) .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-remove__pill {
    .svg-wrapper,
    .swatch {
      flex-shrink: 0;
    }
  }

  .facets--horizontal .facets-remove {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:filter-remove-buttons */

/* START_SNIPPET:gift-card-recipient-form (INDEX:401) */
.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;
    color: var(--color-input-text);
  }

  .recipient-fields__textarea {
    min-height: 5.5rem;
    overflow-y: auto;

    /* Space for the character count */
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  .recipient-fields__input {
    flex-grow: 1;
    transition: background-color var(--animation-speed) ease, border-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, :hover) {
      background-color: var(--color-input-hover-background);
    }

    &: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:402) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

    @media screen and (min-width: 750px) {
      gap: var(--gap-2xs);
    }
  }

  .column-options__option {
    display: none;
    position: relative;
  }

  .column-options__option:has(.column-picker-mobile--single),
  .column-options__option:has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--default),
  .column-options__option:has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Override base rule for grid density controls - only when visible */
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker-mobile--single),
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker--default),
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .column-picker {
    color: rgb(var(--color-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));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:403) */
.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:404) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

    &[data-sticky-state='active'] {
      --account-offset-top: calc(var(--header-height) - 1px);
    }
  }

  .account-button {
    /* Drop the component’s own background so the button inherits the header colours */
    background: transparent;
  }

  .account-button__icon,
  .account-button__text {
    color: var(--color-account-icon);
    transition: color var(--header-content-transition-timing);
    -webkit-font-smoothing: antialiased;
  }

  shopify-account {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-input: var(--style-border-radius-buttons-primary);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent: var(--color-primary-button-background);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

    &:not(:defined) {
      min-width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Match the line height of the other buttons */
      line-height: normal;
    }
  }

  .account-button__fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shopify-account-color-accent, #0a142f);
  }

  .account-button--text shopify-account {
    color: inherit;
  }

  .cart-drawer {
    --cart-drawer-padding: 24px 20px;
    --cart-drawer-padding-desktop: 24px 20px;

    @media screen and (min-width: 750px) {
      margin-inline-end: calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .cart-drawer--text {
      display: flex;
      align-items: center;
    }
  }

  .cart-drawer__dialog {
    position: fixed;
    overflow: hidden;
    border-radius: 0;
    width: 100%;
    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);

    @media screen and (min-width: 750px) {
      width: var(--sidebar-width);
      max-width: 95vw;
    }
  }

  /* Needed to ensure the drawer is full height */
  .cart-drawer__dialog:modal {
    max-height: 100dvh;
    overflow-y: hidden;
  }

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

  .cart-drawer__content {
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    overflow-y: auto;
  }

  .cart-drawer__heading {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin-bottom: 0;
  }

  .cart-drawer__close-button {
    margin-right: calc(var(--padding-sm) * -1);
    top: var(--margin-sm);

    @media screen and (max-width: 749px) {
      top: var(--margin-2xs);
    }
  }

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

    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl);
    padding: var(--cart-drawer-summary-padding);
    margin-top: auto;
    background-color: var(--color-background);
    /* stylelint-disable-next-line color-named */
    mask-image: linear-gradient(to bottom, transparent, black var(--cart-drawer-summary-padding));

    @media screen and (min-width: 750px) {
      --cart-drawer-summary-padding: var(--padding-2xl);
    }
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow: unset;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
    border-block-start: var(--style-border-width) solid 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__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-inline: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer--empty .cart-drawer__header {
    justify-content: right;
    border-bottom: none;
    padding-bottom: 0;
  }

  .cart-drawer--empty .cart-drawer__heading {
    text-align: center;
  }

  header-actions {
    display: flex;

    @media screen and (max-width: 749px) {
      justify-self: flex-end;
    }
  }

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }

    .header-actions__text-style {
      font-size: var(--header-actions-font-size);
      font-family: var(--header-actions-font-family);
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-actions__cart-icon {
    --cart-bubble-size: 20px;
    --cart-bubble-top: 4.5px;
    --cart-bubble-right: 2.5px;

    position: relative;
  }

  .header-actions__cart-icon .cart-bubble {
    position: absolute;
    width: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }
  }

  .cart-drawer__heading .cart-bubble {
    width: fit-content;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-drawer__heading .cart-bubble[data-maintain-ratio] {
    width: min(1lh, 22px);
    height: min(1lh, 22px);
  }

  .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%,
      #fff 45.45%,
      #fff 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: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }

  .cart-bubble--animating .cart-bubble__background {
    animation: grow var(--animation-speed) var(--animation-easing);
  }

  .cart-bubble--animating .cart-bubble__text {
    --start-y: -1em;
    --start-opacity: 1;
    /* Set initial transform state before animation starts */
    transform: translate(0, var(--start-y, -1em));
    opacity: var(--start-opacity, 1);
    animation: move-and-fade var(--animation-speed) var(--animation-easing);
  }

  cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
      --cart-bubble-top: 4px;
      --cart-bubble-right: 4px;
    }
  }

  @media screen and (min-width: 750px) {
    cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
      --cart-bubble-right: 2.5px;
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }

      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:405) */
.header__icon--menu {
    position: initial;
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details.menu-open .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }
  }

  /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow  */
  .menu-drawer.menu-drawer--has-submenu-opened {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-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;
  }

  .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;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

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

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

    &:hover {
      color: var(--menu-top-level-font-color);
    }
  }

  .menu-drawer__menu-item--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-font-color);
    }
  }

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

    &:hover {
      color: var(--menu-child-font-color);
    }
  }

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

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

  /* Drawer Localization Styles */
  .drawer-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .drawer-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

    &:hover {
      color: var(--color-foreground);
    }
  }

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:hw-absolute (INDEX:407) */
.hw-absolute {
    position: absolute;
    z-index: var(--hw-abs-z, 2);
    box-sizing: border-box;
    transform: rotate(var(--hw-abs-rotate, 0deg));
    filter: var(--hw-abs-filter, none);
    backdrop-filter: blur(var(--hw-abs-backdrop-blur, 0px));
    -webkit-backdrop-filter: blur(var(--hw-abs-backdrop-blur, 0px));
    display: flex;
    flex-direction: column;
    padding-block: var(--padding-block-start, 0) var(--padding-block-end, 0);
    padding-inline: var(--padding-inline-start, 0) var(--padding-inline-end, 0);
    top: var(--hw-abs-top, auto);
    right: var(--hw-abs-right, auto);
    bottom: var(--hw-abs-bottom, auto);
    left: var(--hw-abs-left, auto);
  }

  @media screen and (min-width: 750px) {
    .hw-absolute {
      padding-block: var(--padding-block-start-desktop, 0) var(--padding-block-end-desktop, 0);
      padding-inline: var(--padding-inline-start-desktop, 0) var(--padding-inline-end-desktop, 0);
      top: var(--hw-abs-top-desktop, auto);
      right: var(--hw-abs-right-desktop, auto);
      bottom: var(--hw-abs-bottom-desktop, auto);
      left: var(--hw-abs-left-desktop, auto);
    }
  }
/* END_SNIPPET:hw-absolute */

/* START_SNIPPET:hw-carousel-navigation (INDEX:422) */
/* Visibility controls for navigation wrapper */
  .hw-carousel-navigation-wrapper--hide-mobile {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .hw-carousel-navigation-wrapper--hide-mobile {
      display: block;
    }

    .hw-carousel-navigation-wrapper--hide-tablet {
      display: none;
    }
  }

  @media screen and (min-width: 990px) {
    .hw-carousel-navigation-wrapper--hide-tablet {
      display: block;
    }

    .hw-carousel-navigation-wrapper--hide-desktop {
      display: none;
    }
  }

  .hw-carousel-navigation {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md, 16px);
  }

  /* Scheme on controls only (e.g. PDP gallery overlay): no full-area background. */
  .hw-carousel-navigation.hw-carousel-navigation--fill-on-controls,
  .hw-carousel-navigation.hw-carousel-navigation--pdp-gallery.hw-carousel-navigation--fill-on-controls {
    background-color: transparent;
    background: none;
  }

  .hw-carousel-navigation.hw-carousel-navigation--fill-on-controls
    .hw-carousel-navigation__arrows {
    background-color: transparent;
    background: none;
  }

  /* Arrow container - simple flex layout */
  .hw-carousel-navigation__arrows {
    display: flex;
    align-items: center;
    gap: var(--arrow-gap, 16px);
    padding-inline: var(--hw-carousel-arrows-padding-inline, 0);
  }

  /* PDP gallery: inset comes from per-instance scoped <style> (theme editor px). */
  .hw-carousel-navigation.hw-carousel-navigation--pdp-gallery .hw-carousel-navigation__arrows {
    padding-inline: unset;
  }

  @media screen and (min-width: 750px) {
    .hw-carousel-navigation:not(.hw-carousel-navigation--pdp-gallery) .hw-carousel-navigation__arrows {
      padding-inline: var(
        --hw-carousel-arrows-padding-inline-desktop,
        var(--hw-carousel-arrows-padding-inline, 0)
      );
    }
  }

  /* Static arrows - always visible, no hover effects */
  .hw-carousel-navigation__arrows
    .hw-carousel-navigation__control,
  .hw-carousel-navigation__arrows
    .slideshow-control {
    --button-min-height-mobile: 0px;
    --button-min-height-desktop: 0px;
    opacity: 1;
    pointer-events: auto;
    animation: none !important;
    box-sizing: border-box;
    padding: 0;
    width: var(--arrow-button-width, 36px);
    min-width: var(--arrow-button-width, 36px);
    height: var(--arrow-button-height, 36px);
    min-height: var(--arrow-button-height, 36px);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /*
   * Higher specificity than base `.button-unstyled { border-radius: 0 }` so
   * theme/block corner radius actually rounds the control.
   */
  .hw-carousel-navigation__arrows
    button.button-unstyled.button-unstyled--transparent.hw-carousel-navigation__control,
  .hw-carousel-navigation__arrows
    button.button-unstyled.button-unstyled--transparent.slideshow-control,
  .hw-carousel-navigation__arrows
    button.hw-carousel-navigation__control,
  .hw-carousel-navigation__arrows
    button.slideshow-control {
    border-radius: var(--arrow-border-radius, 0px);
  }

  @media screen and (min-width: 750px) {
    .hw-carousel-navigation__arrows .hw-carousel-navigation__control,
    .hw-carousel-navigation__arrows .slideshow-control {
      width: var(--arrow-button-width-desktop, var(--arrow-button-width, 36px));
      min-width: var(--arrow-button-width-desktop, var(--arrow-button-width, 36px));
      height: var(--arrow-button-height-desktop, var(--arrow-button-height, 36px));
      min-height: var(--arrow-button-height-desktop, var(--arrow-button-height, 36px));
    }

    .hw-carousel-navigation__arrows .hw-carousel-navigation__control .svg-wrapper,
    .hw-carousel-navigation__arrows .slideshow-control .svg-wrapper,
    .hw-carousel-navigation__arrows .hw-carousel-navigation__control .svg-wrapper > svg,
    .hw-carousel-navigation__arrows .slideshow-control .svg-wrapper > svg {
      width: var(--icon-width-desktop, var(--icon-width, 20px));
      height: var(--icon-height-desktop, var(--icon-height, 20px));
    }

    .hw-carousel-navigation__arrows .slideshow-control .svg-wrapper:is(.icon-caret, .icon-arrow) svg,
    .hw-carousel-navigation__arrows .hw-carousel-navigation__control .svg-wrapper:is(.icon-caret, .icon-arrow) svg {
      width: var(--icon-width-desktop, var(--icon-width, 20px));
      height: var(--icon-height-desktop, var(--icon-height, 20px));
    }
  }

  /*
   * Arrow colours. Every one is `var(picker, token)`: the merchant's arrow
   * colour when set, otherwise exactly what these rules resolved to before the
   * pickers existed. Hover falls back to the *base picker* before the hover token, so
   * setting only a base colour makes it hold under the cursor instead of snapping
   * back to the global palette — which is what a single-colour arrow should do.
   */
  .hw-carousel-navigation__arrows
    .hw-carousel-navigation__control:not(:disabled),
  .hw-carousel-navigation__arrows
    .slideshow-control:not(:disabled) {
    color: var(--hw-nav-arrow-icon, var(--color-primary-button-text, currentColor));
    background-color: var(--hw-nav-arrow-bg, var(--color-primary-button-background, transparent));
  }

  /* Higher specificity than .button-unstyled--transparent so the fills apply */
  .hw-carousel-navigation__arrows
    button.button-unstyled.button-unstyled--transparent.hw-carousel-navigation__control:not(:disabled),
  .hw-carousel-navigation__arrows
    button.button-unstyled.button-unstyled--transparent.slideshow-control:not(:disabled) {
    color: var(--hw-nav-arrow-icon, var(--color-primary-button-text, currentColor));
    background-color: var(--hw-nav-arrow-bg, var(--color-primary-button-background, transparent));
    box-shadow: inset 0 0 0 var(--hw-carousel-nav-arrow-border-width, 0px)
      var(--hw-nav-arrow-border, var(--color-primary-button-border));
  }

  .hw-carousel-navigation__arrows
    button.button-unstyled.button-unstyled--transparent.hw-carousel-navigation__control:not(:disabled):hover,
  .hw-carousel-navigation__arrows
    button.button-unstyled.button-unstyled--transparent.slideshow-control:not(:disabled):hover {
    color: var(
      --hw-nav-arrow-hover-icon,
      var(--hw-nav-arrow-icon, var(--color-primary-button-hover-text, var(--color-primary-button-text, currentColor)))
    );
    background-color: var(
      --hw-nav-arrow-hover-bg,
      var(--hw-nav-arrow-bg, var(--color-primary-button-hover-background, var(--color-primary-button-background, transparent)))
    );
    box-shadow: inset 0 0 0 var(--hw-carousel-nav-arrow-border-width, 0px)
      var(
        --hw-nav-arrow-hover-border,
        var(--hw-nav-arrow-border, var(--color-primary-button-hover-border, var(--color-primary-button-border)))
      );
  }

  .hw-carousel-navigation__arrows button.hw-carousel-navigation__control:disabled,
  .hw-carousel-navigation__arrows button.slideshow-control:disabled {
    opacity: var(--hw-carousel-nav-disabled-opacity, 0.6);
    cursor: not-allowed;
  }

  /*
   * Disabled colours. The old model added a second scheme class to the button from
   * JS; all that class did was redefine these tokens, so a `:disabled` rule does the
   * same thing declaratively — no JS, and no flash before it runs, which is why the
   * server-side first-paint disabled guess could go too.
   *
   * These are the same `var(picker, …)` chains as the enabled rules, one step longer:
   * disabled picker, then the base picker, then the token. The data-attribute gating
   * this used to need is gone — it existed only because the disabled value was written
   * onto the very property it fell back to, which is cyclic; a separate namespace has
   * no such problem. The selectors carry `:disabled`, so they out-specify their
   * enabled counterparts above.
   *
   * There is deliberately no disabled *hover* trio: a disabled arrow cannot be
   * activated and shows `cursor: not-allowed`, so a hover colour on it would either
   * repeat the disabled colour or imply the control is pressable.
   */
  .hw-carousel-navigation__arrows
    button.hw-carousel-navigation__control:disabled,
  .hw-carousel-navigation__arrows
    button.slideshow-control:disabled,
  .hw-carousel-navigation__arrows
    button.hw-carousel-navigation__control:disabled.button-unstyled,
  .hw-carousel-navigation__arrows
    button.slideshow-control:disabled.button-unstyled {
    color: var(
      --hw-nav-arrow-disabled-icon,
      var(--hw-nav-arrow-icon, var(--color-primary-button-text, currentColor))
    );
    background-color: var(
      --hw-nav-arrow-disabled-bg,
      var(--hw-nav-arrow-bg, var(--color-primary-button-background, transparent))
    );
    box-shadow: inset 0 0 0 var(--hw-carousel-nav-arrow-border-width, 0px)
      var(
        --hw-nav-arrow-disabled-border,
        var(--hw-nav-arrow-border, var(--color-primary-button-border))
      );
  }

  /* Icon box — separate width/height for non-square glyphs (beat base .svg-wrapper > svg). */
  .hw-carousel-navigation__arrows .hw-carousel-navigation__control .svg-wrapper,
  .hw-carousel-navigation__arrows .slideshow-control .svg-wrapper,
  .hw-carousel-navigation__arrows .hw-carousel-navigation__control .svg-wrapper > svg,
  .hw-carousel-navigation__arrows .slideshow-control .svg-wrapper > svg {
    width: var(--icon-width, 20px);
    height: var(--icon-height, 20px);
  }

  /* Caret/chevron + arrow SVGs are stroke-based; do not fill or stroke scales with icon size */
  .hw-carousel-navigation__arrows .slideshow-control .icon-caret,
  .hw-carousel-navigation__arrows .hw-carousel-navigation__control .icon-caret {
    rotate: -90deg;
  }

  .hw-carousel-navigation__arrows
    .slideshow-control
    .svg-wrapper:is(.icon-caret, .icon-arrow)
    svg,
  .hw-carousel-navigation__arrows
    .hw-carousel-navigation__control
    .svg-wrapper:is(.icon-caret, .icon-arrow)
    svg,
  .hw-carousel-navigation__arrows
    .slideshow-control
    .svg-wrapper:is(.icon-caret, .icon-arrow)
    svg
    path,
  .hw-carousel-navigation__arrows
    .hw-carousel-navigation__control
    .svg-wrapper:is(.icon-caret, .icon-arrow)
    svg
    path {
    width: var(--icon-width, 20px);
    height: var(--icon-height, 20px);
    fill: none;
    stroke: currentColor;
    vector-effect: non-scaling-stroke;
    stroke-width: var(--icon-stroke-width, 1.5px);
  }

  .hw-carousel-navigation__arrows
    button.hw-carousel-navigation__control:disabled
    .svg-wrapper:is(.icon-caret, .icon-arrow)
    svg,
  .hw-carousel-navigation__arrows
    button.slideshow-control:disabled
    .svg-wrapper:is(.icon-caret, .icon-arrow)
    svg,
  .hw-carousel-navigation__arrows
    button.hw-carousel-navigation__control:disabled
    .svg-wrapper:is(.icon-caret, .icon-arrow)
    svg
    path,
  .hw-carousel-navigation__arrows
    button.slideshow-control:disabled
    .svg-wrapper:is(.icon-caret, .icon-arrow)
    svg
    path {
    fill: none;
    stroke: currentColor;
    color: var(
      --hw-nav-arrow-disabled-icon,
      var(--hw-nav-arrow-icon, var(--color-primary-button-text, currentColor))
    );
  }

  /* Custom icon styling - respects icon size and colors */
  .hw-carousel-navigation__arrows .hw-carousel-navigation__control .svg-wrapper.icon-custom,
  .hw-carousel-navigation__arrows .slideshow-control .svg-wrapper.icon-custom {
    position: relative;
    width: var(--icon-width, 20px);
    height: var(--icon-height, 20px);
  }

  .hw-carousel-navigation__arrows .hw-carousel-navigation__control .hw-carousel-navigation__custom-icon,
  .hw-carousel-navigation__arrows .slideshow-control .hw-carousel-navigation__custom-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  /* Use CSS mask to apply the arrow text color to custom SVG icons - ONLY when tinting is enabled */
  .hw-carousel-navigation__arrows .hw-carousel-navigation__control.hw-carousel-navigation__control--style-custom:not(.hw-carousel-navigation__custom-icon--untinted) .svg-wrapper.icon-custom::after,
  .hw-carousel-navigation__arrows .slideshow-control.slideshow-control--style-custom:not(.hw-carousel-navigation__custom-icon--untinted) .svg-wrapper.icon-custom::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--hw-nav-arrow-icon, var(--color-primary-button-text, currentColor));
    mask-image: var(--custom-icon-url);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: var(--custom-icon-url);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
  }
  
  /* Explicitly prevent mask from appearing when tinting is disabled */
  .hw-carousel-navigation__arrows .hw-carousel-navigation__control.hw-carousel-navigation__custom-icon--untinted .svg-wrapper.icon-custom::after,
  .hw-carousel-navigation__arrows .slideshow-control.hw-carousel-navigation__custom-icon--untinted .svg-wrapper.icon-custom::after {
    content: none;
    display: none;
  }

  /* When tinting is enabled: hide image, show mask */
  @supports (mask-image: url('')) {
    .hw-carousel-navigation__arrows .hw-carousel-navigation__control:not(.hw-carousel-navigation__custom-icon--untinted) .hw-carousel-navigation__custom-icon,
    .hw-carousel-navigation__arrows .slideshow-control:not(.hw-carousel-navigation__custom-icon--untinted) .hw-carousel-navigation__custom-icon {
      opacity: 0;
    }
    
    .hw-carousel-navigation__arrows .hw-carousel-navigation__control:not(.hw-carousel-navigation__custom-icon--untinted) .svg-wrapper.icon-custom::after,
    .hw-carousel-navigation__arrows .slideshow-control:not(.hw-carousel-navigation__custom-icon--untinted) .svg-wrapper.icon-custom::after {
      display: block;
    }
  }

  /* When tinting is off: show original image, hide mask completely */
  .hw-carousel-navigation__arrows .hw-carousel-navigation__control.hw-carousel-navigation__custom-icon--untinted,
  .hw-carousel-navigation__arrows .slideshow-control.hw-carousel-navigation__custom-icon--untinted {
    color: initial;
  }
  
  .hw-carousel-navigation__arrows .hw-carousel-navigation__control.hw-carousel-navigation__custom-icon--untinted .hw-carousel-navigation__custom-icon,
  .hw-carousel-navigation__arrows .slideshow-control.hw-carousel-navigation__custom-icon--untinted .hw-carousel-navigation__custom-icon {
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  .hw-carousel-navigation__arrows .hw-carousel-navigation__control.hw-carousel-navigation__custom-icon--untinted .svg-wrapper.icon-custom::after,
  .hw-carousel-navigation__arrows .slideshow-control.hw-carousel-navigation__custom-icon--untinted .svg-wrapper.icon-custom::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
  }

  /* Fallback: if mask doesn't work, show image with filter to approximate color */
  @supports not (mask-image: url('')) {
    .hw-carousel-navigation__arrows .hw-carousel-navigation__control:not(.hw-carousel-navigation__custom-icon--untinted) .hw-carousel-navigation__custom-icon,
    .hw-carousel-navigation__arrows .slideshow-control:not(.hw-carousel-navigation__custom-icon--untinted) .hw-carousel-navigation__custom-icon {
      opacity: 1;
      filter: brightness(0) saturate(100%);
    }
    
    .hw-carousel-navigation__arrows .hw-carousel-navigation__control.hw-carousel-navigation__custom-icon--untinted .hw-carousel-navigation__custom-icon,
    .hw-carousel-navigation__arrows .slideshow-control.hw-carousel-navigation__custom-icon--untinted .hw-carousel-navigation__custom-icon {
      opacity: 1 !important;
      filter: none !important;
    }
  }

  /* Fallback: if mask doesn't work, use filter to approximate color */
  @supports not (mask-image: url()) {
    .hw-carousel-navigation__arrows .hw-carousel-navigation__control .hw-carousel-navigation__custom-icon,
    .hw-carousel-navigation__arrows .slideshow-control .hw-carousel-navigation__custom-icon {
      filter: brightness(0) saturate(100%) invert(1);
    }
    
    .hw-carousel-navigation[class*="color-"] .hw-carousel-navigation__arrows .hw-carousel-navigation__control .hw-carousel-navigation__custom-icon,
    .hw-carousel-navigation[class*="color-"] .hw-carousel-navigation__arrows .slideshow-control .hw-carousel-navigation__custom-icon {
      /* Try to match primary button text color - this is approximate */
      opacity: 1;
    }
  }
/* END_SNIPPET:hw-carousel-navigation */

/* START_SNIPPET:hw-divider (INDEX:453) */
.divider {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: var(--divider-justify-content);
  }

  .divider__line {
    border-bottom: var(--divider-border-thickness) solid var(--color-border);
    border-radius: var(--divider-border-radius, 0);
    flex-basis: var(--divider-flex-basis);
  }
/* END_SNIPPET:hw-divider */

/* START_SNIPPET:hw-feature-row-item (INDEX:461) */
.hw-feature-row-item {
    display: flex;
    flex-direction: column;
  }

  .hw-feature-row-item__icon {
    display: inline-flex;
  }

  .hw-feature-row-item__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
/* END_SNIPPET:hw-feature-row-item */

/* START_SNIPPET:hw-group-hover (INDEX:468) */
@media screen and (min-width: 750px) {
    .hw-group[data-hw-override-border-radius-desktop] {
      --border-radius: var(--border-radius-desktop);
    }
  }
/* END_SNIPPET:hw-group-hover */

/* START_SNIPPET:hw-group-overlay (INDEX:470) */
.hw-group-overlay {
    position: absolute;
    inset-inline: 0;
    z-index: var(--layer-raised);
    display: flex;
    justify-content: center;
    background: var(--hw-group-overlay-bg, transparent);
    pointer-events: none;
  }

  /* Children stay interactive even though the strip itself lets clicks through to
     any card link sitting behind it. */
  .hw-group-overlay__inner > * {
    pointer-events: auto;
  }

  .hw-group-overlay--top {
    top: 0;
  }

  .hw-group-overlay--bottom {
    bottom: 0;
  }

  .hw-group-overlay--blurred {
    backdrop-filter: blur(var(--hw-group-overlay-blur));
    -webkit-backdrop-filter: blur(var(--hw-group-overlay-blur));
  }

  .hw-group-overlay__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: var(--hw-group-overlay-justify, center);
    gap: var(--hw-group-overlay-gap, 0);
    width: 100%;
  }

  .hw-group-overlay--full-width .hw-group-overlay__inner {
    max-width: none;
  }

  .hw-group-overlay--page-width .hw-group-overlay__inner {
    max-width: var(--page-width);
  }

  .hw-group-overlay--custom .hw-group-overlay__inner {
    max-width: var(--hw-group-overlay-max-width, 1200px);
  }

  .hw-group-overlay--distribute .hw-group-overlay__inner {
    flex-wrap: nowrap;
  }

  .hw-group-overlay--distribute .hw-group-overlay__inner > * {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
  }

  .hw-group-overlay--dividers .hw-group-overlay__inner > * + * {
    border-inline-start: 1px solid
      var(--hw-group-overlay-divider, rgb(var(--color-foreground-rgb) / 0.35));
  }

  @media screen and (min-width: 750px) {
    .hw-group-overlay__inner {
      gap: var(--hw-group-overlay-gap-desktop, 0);
    }
  }
/* END_SNIPPET:hw-group-overlay */

/* START_SNIPPET:hw-group (INDEX:473) */
@media screen and (min-width: 750px) {
    .hw-group[data-hw-override-border-radius-desktop] {
      --border-radius: var(--border-radius-desktop);
    }
  }
/* END_SNIPPET:hw-group */

/* START_SNIPPET:hw-header-drawer (INDEX:478) */
.header__icon--menu {
    position: initial;
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details.menu-open .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    width: var(--hw-mobile-drawer-width, var(--drawer-width));
    max-width: var(--hw-mobile-drawer-max-width, var(--drawer-max-width));
    height: calc(var(--drawer-height) - 2 * var(--hw-mobile-drawer-inset, 0px));
    z-index: var(--layer-menu-drawer);
    left: var(--hw-mobile-drawer-inset, 0);
    top: var(--hw-mobile-drawer-inset, 0);
    padding: 0;
    /*
     * Both halves come from the inline colour pair on this element (see
     * hw_menu_drawer_color_style above), which also redefines the tokens for
     * everything inside — nav links, footer links, the close icon and every
     * chevron inherit or read var(--color-foreground) from here.
     */
    background-color: var(--color-background);
    color: var(--color-foreground);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    flex-direction: column;
    border-radius: var(--hw-mobile-drawer-radius, 0);

    @media screen and (min-width: 750px) {
      width: var(--hw-mobile-drawer-width, 25rem);
      max-width: var(--hw-mobile-drawer-max-width, 25rem);
    }
  }

  /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow  */
  .menu-drawer.menu-drawer--has-submenu-opened {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-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;
  }

  .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;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

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

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline: 0;
  }

  /*
   * Drawer stacked sub-panels should keep horizontal inset.
   * Scope to submenu panel so accordion childlists are unaffected.
   */
  .menu-drawer__submenu.has-submenu .menu-drawer__menu--childlist {
    padding-inline: var(--drawer-padding);
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

    &:hover {
      color: var(--menu-top-level-font-color);
    }
  }

  .menu-drawer__menu-item--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-font-color);
    }
  }

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

    &:hover {
      color: var(--menu-child-font-color);
    }
  }

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

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

  /*
   * Sliding submenu panels cover the drawer completely, so they have to read the
   * same background — left on --color-background a coloured drawer would flash
   * back to white the moment a submenu opened. The var is set on .menu-drawer and
   * inherits down, so one setting covers both surfaces.
   */
  .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);
  }

  /*
   * Localization moved below the footer (Figma: flag row sits under Sign In/Register).
   * The default rule pins the block to the bottom of the drawer column with an auto top
   * margin and indents it on its own; once it follows the footer the auto margin would
   * shove it away from the links it now belongs with, and the indent would not line up
   * with them either — the footer pads with --drawer-padding, not --padding-xl.
   */
  .menu-drawer__utility-links--after-footer {
    margin-block: 0 var(--padding-sm);
    margin-inline-start: 0;
    padding-inline: var(--drawer-padding);
  }

  /* Follows the footer out of view when a sliding submenu covers the drawer. */
  .menu-drawer.menu-drawer--has-submenu-opened .menu-drawer__utility-links--after-footer {
    display: none;
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }

  /* Drawer Localization Styles */
  .drawer-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .drawer-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

    &:hover {
      color: var(--color-foreground);
    }
  }

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:hw-header-drawer */

/* START_SNIPPET:hw-header-utilities (INDEX:483) */
.hw-header__utilities {
    display: block;
    flex-shrink: 0;
    --hw-header-utilities-gap: var(--hw-header-utilities-gap-mobile, 12px);
    /* --hw-header-action-icon-size: set inline on .hw-header__utilities (mobile/base) */
  }

  @media screen and (min-width: 750px) {
    .hw-header__utilities[data-hw-override-utilities-gap-desktop] {
      --hw-header-utilities-gap: var(
        --hw-header-utilities-gap-desktop,
        var(--hw-header-utilities-gap-mobile, 12px)
      );
    }

    .hw-header__utilities[data-hw-override-utilities-icon-size-desktop] {
      --hw-header-action-icon-size: var(
        --hw-header-action-icon-size-desktop,
        var(--hw-header-action-icon-size-mobile, 22px)
      );
    }
  }

  .hw-header__utilities-list,
  .hw-header-utility-group__list {
    display: flex;
    align-items: center;
    gap: var(--hw-header-utilities-gap, 12px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .hw-header-utility-group {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .hw-header-utility {
    display: flex;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
  }

  .hw-header-utility__control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-foreground);
    cursor: pointer;
    text-decoration: none;
    font: inherit;
    line-height: 1;
    position: relative;
    min-width: var(--hw-header-action-icon-size, 22px);
    min-height: var(--hw-header-action-icon-size, 22px);
  }

  .hw-header-utility__control--link {
    color: inherit;
  }

  .hw-header-utility__control--account {
    padding: 0;
  }

  .hw-header-utility__account-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hw-header-action-icon-size, 22px);
    height: var(--hw-header-action-icon-size, 22px);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
  }

  .hw-header-utility__account-shell shopify-account {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hw-header-action-icon-size, 22px);
    height: var(--hw-header-action-icon-size, 22px);
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
  }

  .hw-header-utility__account-shell shopify-account:not(:defined) {
    min-width: 0;
  }

  .hw-header-utility__account-shell .account-button__fallback {
    width: var(--hw-header-action-icon-size, 22px);
    height: var(--hw-header-action-icon-size, 22px);
  }

  .hw-header-utility__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hw-header-action-icon-size, 22px);
    height: var(--hw-header-action-icon-size, 22px);
    flex-shrink: 0;
    color: currentcolor;
    pointer-events: none;
  }

  .hw-header-utility__icon .hw-header-utility__graphic,
  .hw-header-utility__icon .hw-header-action-icon--svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
  }

  /*
   * Merchant SVG uploads often include width/height attributes (e.g. 18×21 on the cart icon).
   * Those fix intrinsic size and ignore --hw-header-action-icon-size unless overridden.
   */
  .hw-header-utility__icon svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
    flex-shrink: 0;
  }

  .hw-header-utility__icon img.hw-header-utility__graphic {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .hw-header-utility__icon svg {
    --icon-stroke-width: var(--hw-header-action-icon-stroke, 1px);
    stroke-width: var(--hw-header-action-icon-stroke, 1px);
  }

  /* Prevent global header cart-icon empty-state rules from resizing HW utilities badge */
  .hw-header__utilities cart-icon.hw-header-utility__cart-icon {
    --cart-bubble-size: var(--hw-header-cart-bubble-size, 18px);
    --cart-bubble-top: var(--hw-header-cart-bubble-top, 0px);
    --cart-bubble-right: var(--hw-header-cart-bubble-end, 0px);
  }

  .hw-header-utility--cart .hw-header-utility__control {
    overflow: visible;
  }

  .hw-header-utility__cart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: var(--hw-header-action-icon-size, 22px);
    height: var(--hw-header-action-icon-size, 22px);
    flex-shrink: 0;
    overflow: visible;
  }

  /* Anchor badge on the icon corner; 50%/-50% shifts it outward so it does not cover the bag */
  .hw-header-utility__badge {
    position: absolute;
    top: var(--hw-header-cart-bubble-top, 0);
    inset-inline-end: var(--hw-header-cart-bubble-end, 0);
    width: var(--hw-header-cart-bubble-size, 18px);
    height: var(--hw-header-cart-bubble-size, 18px);
    pointer-events: none;
    line-height: 1;
    z-index: 1;
    transform: translate(50%, -50%);
    background-color: transparent;
  }

  /*
   * Theme .color-* sets background-color on the element; only .cart-bubble__background
   * should show the pill. display:contents keeps scheme tokens without painting the wrapper.
   */
  .hw-header-utility__badge-scheme {
    display: contents;
  }

  .hw-header__utilities .hw-header-utility__badge .cart-bubble {
    position: relative;
    top: auto;
    right: auto;
    inset: auto;
    width: 100%;
    height: 100%;
    min-inline-size: 0;
    min-block-size: 0;
    aspect-ratio: 1;
    padding: 0;
    padding-inline: 0;
    margin: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .hw-header__utilities .hw-header-utility__badge .cart-bubble__background {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: var(--hw-cart-bubble-bg, var(--color-primary-button-background));
    border: var(--hw-cart-bubble-border-width, 0px) solid var(--hw-cart-bubble-border-color, transparent);
    box-sizing: border-box;
  }

  .hw-header__utilities .hw-header-utility__badge .cart-bubble__text {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    background-color: transparent;
  }

  .hw-header__utilities .hw-header-utility__badge .cart-bubble__text-count {
    color: var(--hw-cart-bubble-text, var(--color-primary-button-text));
    line-height: 1;
    background-color: transparent;
  }

  .hw-header-utility__cart-icon.hw-header-utility__cart-icon--custom-count .cart-bubble__text-count {
    font-family: var(--font-family, inherit);
    font-weight: var(--font-weight, inherit);
    line-height: var(--line-height, inherit);
    letter-spacing: var(--letter-spacing, inherit);
    color: var(--color, var(--hw-cart-bubble-text, var(--color-primary-button-text)));
  }

  .hw-header-utility__cart-icon.hw-header-utility__cart-icon--custom-visual svg {
    mask: none;
  }

  .hw-header-utility__cart-icon.hw-header-utility__cart-icon--has-cart svg {
    mask: radial-gradient(
      calc(var(--hw-header-cart-bubble-size, 18px) * 0.55 + 2px) at
        calc(100% + var(--hw-header-cart-bubble-end, 0px))
        var(--hw-header-cart-bubble-top, 0px),
      transparent 45.45%,
      #fff 45.45%,
      #fff 100%
    );
  }

  .hw-header__utilities cart-icon.hw-header-utility__cart-icon:has(.cart-bubble__text-count:empty) {
    --hw-header-cart-bubble-size: var(--hw-header-cart-bubble-size, 18px);
  }

  @media screen and (max-width: 749px) {
    .hw-header-utility.hw-header-utility--hidden-mobile {
      display: none;
    }

    .hw-header-utility.search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    .hw-header-utility.hw-header-utility--hidden-desktop {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    [data-menu-style='drawer'] .hw-header-utility.search-action--hidden-on-drawer {
      display: none;
    }
  }

  /* HW Header 2 mobile: keep search, account, and cart in one utilities cluster per grid slot */
  @media screen and (max-width: 749px) {
    #header-component:has([data-hw-menu-layout='block-nav']):is(
        [data-hw-actions-mobile='leftA'],
        [data-hw-actions-mobile='leftB'],
        [data-hw-actions-mobile='center'],
        [data-hw-actions-mobile='rightA'],
        [data-hw-actions-mobile='rightB']
      )
      .hw-header__utilities {
      display: flex;
      align-items: center;
      grid-area: var(--hw-header-actions-mobile-area, rightB);
    }

    #header-component:has([data-hw-menu-layout='block-nav'])[data-hw-actions-mobile='leftA']
      .hw-header__utilities {
      grid-area: leftA;
    }

    #header-component:has([data-hw-menu-layout='block-nav'])[data-hw-actions-mobile='leftB']
      .hw-header__utilities {
      grid-area: leftB;
    }

    #header-component:has([data-hw-menu-layout='block-nav'])[data-hw-actions-mobile='rightB']
      .hw-header__utilities {
      grid-area: rightB;
    }

    #header-component:has([data-hw-menu-layout='block-nav']):is(
        [data-hw-actions-mobile='leftA'],
        [data-hw-actions-mobile='leftB'],
        [data-hw-actions-mobile='center'],
        [data-hw-actions-mobile='rightA'],
        [data-hw-actions-mobile='rightB']
      )
      .hw-header__utilities-list,
    #header-component:has([data-hw-menu-layout='block-nav']):is(
        [data-hw-actions-mobile='leftA'],
        [data-hw-actions-mobile='leftB'],
        [data-hw-actions-mobile='center'],
        [data-hw-actions-mobile='rightA'],
        [data-hw-actions-mobile='rightB']
      )
      .hw-header-utility--search,
    #header-component:has([data-hw-menu-layout='block-nav']):is(
        [data-hw-actions-mobile='leftA'],
        [data-hw-actions-mobile='leftB'],
        [data-hw-actions-mobile='center'],
        [data-hw-actions-mobile='rightA'],
        [data-hw-actions-mobile='rightB']
      )
      .hw-header-utility-group__list {
      grid-area: unset;
    }

    #header-component:has([data-hw-menu-layout='block-nav']):is(
        [data-hw-actions-mobile='leftA'],
        [data-hw-actions-mobile='leftB']
      )
      .hw-header__utilities {
      justify-content: flex-start;
      justify-self: start;
    }

    #header-component:has([data-hw-menu-layout='block-nav'])[data-hw-actions-mobile='center']
      .hw-header__utilities {
      justify-content: center;
      justify-self: center;
    }

    #header-component:has([data-hw-menu-layout='block-nav'])[data-hw-actions-mobile='rightB']:not(
        [data-hw-menu-mobile='rightB']
      )
      .hw-header__utilities {
      grid-column: rightA / -1;
      justify-self: stretch;
    }

    #header-component:has([data-hw-menu-layout='block-nav']):is(
        [data-hw-actions-mobile='rightA'],
        [data-hw-actions-mobile='rightB']
      )
      .hw-header__utilities {
      justify-content: flex-end;
      justify-self: end;
    }

    #header-component:has([data-hw-menu-layout='block-nav'])[data-hw-actions-mobile='rightB']:not(
        [data-hw-menu-mobile='rightB']
      )
      .hw-header__utilities-list {
      margin-inline-start: auto;
    }

    #header-component:has([data-hw-menu-layout='block-nav']):is(
        [data-hw-actions-mobile='leftA'],
        [data-hw-actions-mobile='leftB'],
        [data-hw-actions-mobile='center'],
        [data-hw-actions-mobile='rightA'],
        [data-hw-actions-mobile='rightB']
      )
      .hw-header__utilities-list,
    #header-component:has([data-hw-menu-layout='block-nav']):is(
        [data-hw-actions-mobile='leftA'],
        [data-hw-actions-mobile='leftB'],
        [data-hw-actions-mobile='center'],
        [data-hw-actions-mobile='rightA'],
        [data-hw-actions-mobile='rightB']
      )
      .hw-header-utility-group {
      display: flex;
      align-items: center;
    }
  }

  /* Hide empty cart count bubble (avoids solid circle at the edge) */
  .hw-header__utilities .hw-header-utility__badge:has(.cart-bubble.visually-hidden),
  .hw-header__utilities
    .hw-header-utility__badge:has(.cart-bubble__text-count.hidden),
  .hw-header__utilities
    .hw-header-utility__badge:has(.cart-bubble__text-count:empty) {
    display: none;
  }

  @media (hover: hover) {
    .header__column:has(.hw-header-utility__control:hover) .hw-header-utility__control:not(:hover) {
      opacity: var(--opacity-subdued-text);
      transition: opacity var(--animation-speed) var(--animation-easing);
    }
  }

  .hw-header-utility__control {
    transition: opacity var(--animation-speed) var(--animation-easing);
  }
/* END_SNIPPET:hw-header-utilities */

/* START_SNIPPET:hw-hero-card (INDEX:484) */
.hw-hero-card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
  }

  .hw-hero-card__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: var(--hw-hero-card-valign, center);
    align-items: var(--hw-hero-card-halign, center);
    min-height: var(--hw-hero-card-frame, 560px);
    height: 100%;
    overflow: hidden;
    border-radius: var(--border-radius, 0);
  }

  /* Whole-card click target. Sits above the media and the scrim but below content so
     nested buttons/links stay clickable. */
  .hw-hero-card__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-base);
  }

  /* --- Overlay layout: image becomes a fill layer, everything else floats over it --- */
  .hw-hero-card--overlay .hw-hero-card__stage > .hw-image {
    position: absolute;
    inset: 0;
    z-index: var(--layer-lowest);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    max-width: none;
  }

  .hw-hero-card--overlay .hw-hero-card__stage > .hw-image .hw-image__media,
  .hw-hero-card--overlay .hw-hero-card__stage > .hw-image picture,
  .hw-hero-card--overlay .hw-hero-card__stage > .hw-image img,
  .hw-hero-card--overlay .hw-hero-card__stage > .hw-image svg {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }

  /* Content children. Excludes the media layer, the scrim, the card link, and any
     nested hw-group-overlay (which pins itself to this card).
     The cap is min()'d with 100% because this selector outranks a child's own
     max-width: 100% (6 classes vs 2-3): a bare pixel cap wider than the card lets
     content / custom-width / max-content children overflow and get clipped by the
     stage's overflow: hidden. */
  .hw-hero-card--overlay
    .hw-hero-card__stage
    > *:not(.hw-image):not(.overlay):not(.hw-hero-card__link):not(.hw-group-overlay) {
    position: relative;
    z-index: var(--layer-flat);
    max-width: min(var(--hw-hero-card-content-max-width, 880px), 100%);
  }

  /* --- Below layout: image and content both stay in normal column flow --- */
  .hw-hero-card--below .hw-hero-card__stage > .hw-image {
    position: relative;
    width: 100%;
  }

  /* Content children only. The media layer keeps its own width so a card set to
     "content below" still runs its background image the full width of the column
     instead of being capped at the content max width. The cap is min()'d with 100%
     for the same reason as the overlay rule above. */
  .hw-hero-card--below
    .hw-hero-card__stage
    > *:not(.hw-image):not(.overlay):not(.hw-hero-card__link):not(.hw-group-overlay) {
    max-width: min(var(--hw-hero-card-content-max-width, 880px), 100%);
  }

  @media screen and (min-width: 750px) {
    .hw-hero-card__stage {
      min-height: var(--hw-hero-card-frame-desktop, var(--hw-hero-card-frame, 760px));
      justify-content: var(
        --hw-hero-card-valign-desktop,
        var(--hw-hero-card-valign, center)
      );
      align-items: var(
        --hw-hero-card-halign-desktop,
        var(--hw-hero-card-halign, center)
      );
    }
  }
/* END_SNIPPET:hw-hero-card */

/* START_SNIPPET:hw-hotspot (INDEX:486) */
.hw-hotspot {
    display: block;
    position: absolute;
    z-index: var(--hw-hotspot-z, 3);
    box-sizing: border-box;
    /* Hover zoom/move and the panel both paint outside this box. Never clip. */
    overflow: visible;
    width: var(--hw-hotspot-img-width, auto);
    height: var(--hw-hotspot-img-height, auto);
    top: var(--hw-hotspot-top, auto);
    right: var(--hw-hotspot-right, auto);
    bottom: var(--hw-hotspot-bottom, auto);
    left: var(--hw-hotspot-left, auto);
  }

  /* An open hotspot lifts above its siblings so the panel is never covered. */
  .hw-hotspot[data-open='true'] {
    z-index: calc(var(--hw-hotspot-z, 3) + 20);
  }

  /*
   * Full local reset — no `.button` / `.button-unstyled`. `overflow: visible`
   * is the point: the hover zoom/move must be allowed to paint outside the
   * trigger box, otherwise it is cropped to the configured hotspot size.
   */
  .hw-hotspot__trigger {
    display: block;
    position: relative;
    overflow: visible;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    font: inherit;
    line-height: 0;
    appearance: none;
    cursor: pointer;
  }

  .hw-hotspot__media {
    display: block;
    overflow: visible;
    width: 100%;
    height: 100%;
  }

  .hw-hotspot__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .hw-hotspot__pin {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--hw-hotspot-pin-color, var(--color-primary));
  }

  .hw-hotspot__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--hw-hotspot-pulse-color, var(--color-primary));
    opacity: 0;
    pointer-events: none;
  }

  .hw-hotspot__panel {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: var(--hw-hotspot-panel-width, max-content);
    max-width: 90vw;
    visibility: hidden;
    pointer-events: none;
    transform: translate(
      calc(var(--hw-hotspot-panel-tx, -50%) + var(--hw-hotspot-panel-ox, 0px)),
      calc(var(--hw-hotspot-panel-ty, 0%) + var(--hw-hotspot-panel-oy, 0px))
    );
    transition: visibility var(--hw-hotspot-panel-duration, 220ms);
  }

  .hw-hotspot[data-open='true'] .hw-hotspot__panel {
    visibility: visible;
    pointer-events: auto;
  }

  /*
   * Exists only to own the enter animation, so it never collides with the
   * placement transform on `.hw-hotspot__panel`. Background, padding and
   * radius belong to the nested blocks (use a Group), not to this wrapper.
   */
  .hw-hotspot__panel-inner {
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translate(
        var(--hw-hotspot-panel-slide-x, 0px),
        var(--hw-hotspot-panel-slide-y, 0px)
      )
      scale(var(--hw-hotspot-panel-scale-from, 1));
    transition:
      opacity var(--hw-hotspot-panel-duration, 220ms) ease,
      transform var(--hw-hotspot-panel-duration, 220ms)
        cubic-bezier(0.2, 0.7, 0.3, 1);
  }

  .hw-hotspot[data-open='true'] .hw-hotspot__panel-inner {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .hw-hotspot__image,
    .hw-hotspot__pin {
      transition:
        transform var(--hw-hotspot-hover-duration, 260ms)
          cubic-bezier(0.2, 0.7, 0.3, 1),
        opacity var(--hw-hotspot-hover-duration, 260ms) ease;
    }

    .hw-hotspot__trigger:is(:hover, :focus-visible)
      :is(.hw-hotspot__image, .hw-hotspot__pin) {
      transform: var(--hw-hotspot-hover-transform, none);
      opacity: var(--hw-hotspot-hover-opacity, 1);
    }

    .hw-hotspot[data-idle-animation='float'] .hw-hotspot__media {
      animation: hw-hotspot-float var(--hw-hotspot-idle-duration, 2000ms)
        ease-in-out infinite;
    }

    .hw-hotspot[data-idle-animation='breathe'] .hw-hotspot__media {
      animation: hw-hotspot-breathe var(--hw-hotspot-idle-duration, 2000ms)
        ease-in-out infinite;
    }

    .hw-hotspot[data-idle-animation='pulse'] .hw-hotspot__ring {
      animation: hw-hotspot-pulse var(--hw-hotspot-idle-duration, 2000ms)
        ease-out infinite;
    }
  }

  /* No transitions on the panel for reduced motion — it just appears. */
  @media (prefers-reduced-motion: reduce) {
    .hw-hotspot__panel,
    .hw-hotspot__panel-inner {
      transition: none;
    }

    .hw-hotspot__panel-inner {
      transform: none;
    }
  }

  @keyframes hw-hotspot-float {
    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-6px);
    }
  }

  @keyframes hw-hotspot-breathe {
    0%,
    100% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.08);
    }
  }

  @keyframes hw-hotspot-pulse {
    0% {
      opacity: 0.7;
      transform: scale(1);
    }

    100% {
      opacity: 0;
      transform: scale(2.2);
    }
  }

  @media screen and (min-width: 750px) {
    .hw-hotspot {
      width: var(--hw-hotspot-img-width-desktop, auto);
      height: var(--hw-hotspot-img-height-desktop, auto);
      top: var(--hw-hotspot-top-desktop, auto);
      right: var(--hw-hotspot-right-desktop, auto);
      bottom: var(--hw-hotspot-bottom-desktop, auto);
      left: var(--hw-hotspot-left-desktop, auto);
    }

    .hw-hotspot__panel {
      width: var(--hw-hotspot-panel-width-desktop, max-content);
      transform: translate(
        calc(
          var(--hw-hotspot-panel-tx-desktop, -50%) +
            var(--hw-hotspot-panel-ox-desktop, 0px)
        ),
        calc(
          var(--hw-hotspot-panel-ty-desktop, 0%) +
            var(--hw-hotspot-panel-oy-desktop, 0px)
        )
      );
    }

    .hw-hotspot__panel-inner {
      transform: translate(
          var(--hw-hotspot-panel-slide-x-desktop, 0px),
          var(--hw-hotspot-panel-slide-y-desktop, 0px)
        )
        scale(var(--hw-hotspot-panel-scale-from, 1));
    }

    .hw-hotspot[data-open='true'] .hw-hotspot__panel-inner {
      transform: none;
    }
  }
/* END_SNIPPET:hw-hotspot */

/* START_SNIPPET:hw-image-fixed (INDEX:491) */
.hw-image-fixed {
    display: flex;
    justify-content: var(--horizontal-alignment, flex-start);
    max-inline-size: 100%;
    flex: 0 0 auto;
  }

  .hw-image-fixed__media {
    position: relative;
    display: block;
    inline-size: var(--hw-image-fixed-width-mobile, auto);
    block-size: var(--hw-image-fixed-height-mobile, auto);
    max-inline-size: 100%;
    overflow: hidden;
    border-radius: var(--hw-image-fixed-border-radius, 0);
  }

  .hw-image-fixed--auto-height .hw-image-fixed__media {
    block-size: auto;
  }

  .hw-image-fixed__link {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  .hw-image-fixed--auto-height .hw-image-fixed__link {
    block-size: auto;
  }

  .hw-image-fixed__img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: var(--hw-image-fixed-position, contain);
  }

  .hw-image-fixed--auto-height .hw-image-fixed__img {
    block-size: auto;
  }

  .hw-image-fixed__placeholder {
    inline-size: 100%;
    block-size: 100%;
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .hw-image-fixed--auto-height .hw-image-fixed__placeholder {
    block-size: auto;
  }

  .hw-image-fixed__placeholder .placeholder-svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: var(--hw-image-fixed-position, contain);
  }

  .hw-image-fixed--auto-height .hw-image-fixed__placeholder .placeholder-svg {
    block-size: auto;
  }

  @media (width >= 750px) {
    .hw-image-fixed__media {
      inline-size: var(--hw-image-fixed-width-desktop, var(--hw-image-fixed-width-mobile, auto));
      block-size: var(--hw-image-fixed-height-desktop, var(--hw-image-fixed-height-mobile, auto));
    }

    .hw-image-fixed--auto-height .hw-image-fixed__media {
      block-size: auto;
    }
  }
/* END_SNIPPET:hw-image-fixed */

/* START_SNIPPET:hw-loop-carousel-grid-styles (INDEX:497) */
.hw-carousel-grid-content {
    --slideshow-gap: var(--gap-mobile);
  }

  .hw-carousel-grid-content > slideshow-container > slideshow-slides,
  .hw-carousel-grid-content:not(slideshow-component) {
    display: grid;
    grid-template-columns: repeat(var(--columns-mobile), 1fr);
    column-gap: var(--gap-mobile);
    row-gap: var(--rows-gap-mobile);
    align-items: stretch;
  }

  .hw-carousel-grid-content > slideshow-container > slideshow-slides > .card,
  .hw-carousel-grid-content > slideshow-container > slideshow-slides > [data-carousel-card],
  .hw-carousel-grid-content:not(slideshow-component) > .card,
  .hw-carousel-grid-content:not(slideshow-component) > [data-carousel-card] {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .hw-carousel-grid-content .card > div,
  .hw-carousel-grid-content [data-carousel-card] > div {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .hw-carousel-grid-content.layout-mobile-carousel > slideshow-container > slideshow-slides {
    display: flex;
    grid-template-columns: none;
    column-gap: var(--gap-mobile);
    row-gap: 0;
  }

  .hw-carousel-grid-content.layout-mobile-carousel > slideshow-container > slideshow-slides > .card,
  .hw-carousel-grid-content.layout-mobile-carousel > slideshow-container > slideshow-slides > [data-carousel-card] {
    flex: 0 0 auto;
    width: var(
      --fixed-card-width-mobile,
      calc(
        (100% - (var(--gap-mobile) * max(0, var(--slide-peek-mobile) - 1)) - var(--peek-override-mobile, 0px)) /
          var(--slide-peek-mobile)
      )
    );
  }

  .hw-carousel-grid-content.swipe-mobile-snap.layout-mobile-carousel > slideshow-container > slideshow-slides,
  .hw-carousel-grid-content[data-swipe-mobile="snap"] > slideshow-container > slideshow-slides {
    scroll-snap-type: x mandatory;
  }

  .hw-carousel-grid-content.swipe-mobile-fluid.layout-mobile-carousel > slideshow-container > slideshow-slides,
  .hw-carousel-grid-content[data-swipe-mobile="fluid"] > slideshow-container > slideshow-slides {
    scroll-snap-type: none;
  }

  .hw-carousel-grid-content.swipe-mobile-snap.layout-mobile-carousel > slideshow-container > slideshow-slides > .card,
  .hw-carousel-grid-content.swipe-mobile-snap.layout-mobile-carousel > slideshow-container > slideshow-slides > [data-carousel-card],
  .hw-carousel-grid-content[data-swipe-mobile="snap"] > slideshow-container > slideshow-slides > .card,
  .hw-carousel-grid-content[data-swipe-mobile="snap"] > slideshow-container > slideshow-slides > [data-carousel-card] {
    scroll-snap-align: start;
  }

  .hw-carousel-grid-content.swipe-mobile-fluid.layout-mobile-carousel > slideshow-container > slideshow-slides > .card,
  .hw-carousel-grid-content.swipe-mobile-fluid.layout-mobile-carousel > slideshow-container > slideshow-slides > [data-carousel-card],
  .hw-carousel-grid-content[data-swipe-mobile="fluid"] > slideshow-container > slideshow-slides > .card,
  .hw-carousel-grid-content[data-swipe-mobile="fluid"] > slideshow-container > slideshow-slides > [data-carousel-card] {
    scroll-snap-align: none;
  }

  /* Tablet: 750-989px */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .hw-carousel-grid-content {
      --slideshow-gap: var(--gap-tablet);
    }

    .hw-carousel-grid-content.layout-tablet-grid > slideshow-container > slideshow-slides,
    .hw-carousel-grid-content.layout-tablet-grid:not(slideshow-component) {
      display: grid;
      grid-template-columns: repeat(var(--columns-tablet), 1fr);
      column-gap: var(--gap-tablet);
      row-gap: var(--rows-gap-tablet);
    }

    .hw-carousel-grid-content.layout-tablet-grid > slideshow-container > slideshow-slides > .card,
    .hw-carousel-grid-content.layout-tablet-grid > slideshow-container > slideshow-slides > [data-carousel-card],
    .hw-carousel-grid-content.layout-tablet-grid:not(slideshow-component) > .card,
    .hw-carousel-grid-content.layout-tablet-grid:not(slideshow-component) > [data-carousel-card] {
      width: 100%;
      flex: none;
    }

    .hw-carousel-grid-content.layout-tablet-carousel > slideshow-container > slideshow-slides {
      display: flex;
      grid-template-columns: none;
      column-gap: var(--gap-tablet);
      row-gap: 0;
    }

    .hw-carousel-grid-content.layout-tablet-carousel > slideshow-container > slideshow-slides > .card,
    .hw-carousel-grid-content.layout-tablet-carousel > slideshow-container > slideshow-slides > [data-carousel-card] {
      flex: 0 0 auto;
      width: var(
        --fixed-card-width-tablet,
        calc(
          (100% - (var(--gap-tablet) * max(0, var(--slide-peek-tablet) - 1)) - var(--peek-override-tablet, 0px)) /
            var(--slide-peek-tablet)
        )
      );
    }

    .hw-carousel-grid-content.swipe-tablet-snap.layout-tablet-carousel > slideshow-container > slideshow-slides,
    .hw-carousel-grid-content[data-swipe-tablet="snap"] > slideshow-container > slideshow-slides {
      scroll-snap-type: x mandatory;
    }

    .hw-carousel-grid-content.swipe-tablet-fluid.layout-tablet-carousel > slideshow-container > slideshow-slides,
    .hw-carousel-grid-content[data-swipe-tablet="fluid"] > slideshow-container > slideshow-slides {
      scroll-snap-type: none;
    }

    .hw-carousel-grid-content.swipe-tablet-snap.layout-tablet-carousel > slideshow-container > slideshow-slides > .card,
    .hw-carousel-grid-content.swipe-tablet-snap.layout-tablet-carousel > slideshow-container > slideshow-slides > [data-carousel-card],
    .hw-carousel-grid-content[data-swipe-tablet="snap"] > slideshow-container > slideshow-slides > .card,
    .hw-carousel-grid-content[data-swipe-tablet="snap"] > slideshow-container > slideshow-slides > [data-carousel-card] {
      scroll-snap-align: start;
    }

    .hw-carousel-grid-content.swipe-tablet-fluid.layout-tablet-carousel > slideshow-container > slideshow-slides > .card,
    .hw-carousel-grid-content.swipe-tablet-fluid.layout-tablet-carousel > slideshow-container > slideshow-slides > [data-carousel-card],
    .hw-carousel-grid-content[data-swipe-tablet="fluid"] > slideshow-container > slideshow-slides > .card,
    .hw-carousel-grid-content[data-swipe-tablet="fluid"] > slideshow-container > slideshow-slides > [data-carousel-card] {
      scroll-snap-align: none;
    }
  }

  /* Laptop: 990-1439px */
  @media screen and (min-width: 990px) and (max-width: 1439px) {
    .hw-carousel-grid-content {
      --slideshow-gap: var(--gap-laptop);
    }

    .hw-carousel-grid-content.layout-laptop-grid > slideshow-container > slideshow-slides,
    .hw-carousel-grid-content.layout-laptop-grid:not(slideshow-component) {
      display: grid;
      grid-template-columns: repeat(var(--columns-laptop), 1fr);
      column-gap: var(--gap-laptop);
      row-gap: var(--rows-gap-laptop);
    }

    .hw-carousel-grid-content.layout-laptop-grid > slideshow-container > slideshow-slides > .card,
    .hw-carousel-grid-content.layout-laptop-grid > slideshow-container > slideshow-slides > [data-carousel-card],
    .hw-carousel-grid-content.layout-laptop-grid:not(slideshow-component) > .card,
    .hw-carousel-grid-content.layout-laptop-grid:not(slideshow-component) > [data-carousel-card] {
      width: 100%;
      flex: none;
    }

    .hw-carousel-grid-content.layout-laptop-carousel > slideshow-container > slideshow-slides {
      display: flex;
      grid-template-columns: none;
      column-gap: var(--gap-laptop);
      row-gap: 0;
    }

    .hw-carousel-grid-content.layout-laptop-carousel > slideshow-container > slideshow-slides > .card,
    .hw-carousel-grid-content.layout-laptop-carousel > slideshow-container > slideshow-slides > [data-carousel-card] {
      flex: 0 0 auto;
      width: var(
        --fixed-card-width-laptop,
        calc(
          (100% - (var(--gap-laptop) * max(0, var(--slide-peek-laptop) - 1)) - var(--peek-override-laptop, 0px)) /
            var(--slide-peek-laptop)
        )
      );
    }

    .hw-carousel-grid-content.swipe-laptop-snap.layout-laptop-carousel > slideshow-container > slideshow-slides,
    .hw-carousel-grid-content[data-swipe-laptop="snap"] > slideshow-container > slideshow-slides {
      scroll-snap-type: x mandatory;
    }

    .hw-carousel-grid-content.swipe-laptop-fluid.layout-laptop-carousel > slideshow-container > slideshow-slides,
    .hw-carousel-grid-content[data-swipe-laptop="fluid"] > slideshow-container > slideshow-slides {
      scroll-snap-type: none;
    }

    .hw-carousel-grid-content.swipe-laptop-snap.layout-laptop-carousel > slideshow-container > slideshow-slides > .card,
    .hw-carousel-grid-content.swipe-laptop-snap.layout-laptop-carousel > slideshow-container > slideshow-slides > [data-carousel-card],
    .hw-carousel-grid-content[data-swipe-laptop="snap"] > slideshow-container > slideshow-slides > .card,
    .hw-carousel-grid-content[data-swipe-laptop="snap"] > slideshow-container > slideshow-slides > [data-carousel-card] {
      scroll-snap-align: start;
    }

    .hw-carousel-grid-content.swipe-laptop-fluid.layout-laptop-carousel > slideshow-container > slideshow-slides > .card,
    .hw-carousel-grid-content.swipe-laptop-fluid.layout-laptop-carousel > slideshow-container > slideshow-slides > [data-carousel-card],
    .hw-carousel-grid-content[data-swipe-laptop="fluid"] > slideshow-container > slideshow-slides > .card,
    .hw-carousel-grid-content[data-swipe-laptop="fluid"] > slideshow-container > slideshow-slides > [data-carousel-card] {
      scroll-snap-align: none;
    }
  }

  /* Desktop: 1440px+ */
  @media screen and (min-width: 1440px) {
    .hw-carousel-grid-content {
      --slideshow-gap: var(--gap-desktop);
    }

    .hw-carousel-grid-content.layout-desktop-grid > slideshow-container > slideshow-slides,
    .hw-carousel-grid-content.layout-desktop-grid:not(slideshow-component) {
      display: grid;
      grid-template-columns: repeat(var(--columns-desktop), 1fr);
      column-gap: var(--gap-desktop);
      row-gap: var(--rows-gap-desktop);
    }

    .hw-carousel-grid-content.layout-desktop-grid > slideshow-container > slideshow-slides > .card,
    .hw-carousel-grid-content.layout-desktop-grid > slideshow-container > slideshow-slides > [data-carousel-card],
    .hw-carousel-grid-content.layout-desktop-grid:not(slideshow-component) > .card,
    .hw-carousel-grid-content.layout-desktop-grid:not(slideshow-component) > [data-carousel-card] {
      width: 100%;
      flex: none;
    }

    .hw-carousel-grid-content.layout-desktop-carousel > slideshow-container > slideshow-slides {
      display: flex;
      grid-template-columns: none;
      column-gap: var(--gap-desktop);
      row-gap: 0;
    }

    .hw-carousel-grid-content.swipe-desktop-snap.layout-desktop-carousel > slideshow-container > slideshow-slides,
    .hw-carousel-grid-content[data-swipe-desktop="snap"] > slideshow-container > slideshow-slides {
      scroll-snap-type: x mandatory;
    }

    .hw-carousel-grid-content.swipe-desktop-fluid.layout-desktop-carousel > slideshow-container > slideshow-slides,
    .hw-carousel-grid-content[data-swipe-desktop="fluid"] > slideshow-container > slideshow-slides {
      scroll-snap-type: none;
    }

    .hw-carousel-grid-content.swipe-desktop-snap.layout-desktop-carousel > slideshow-container > slideshow-slides > .card,
    .hw-carousel-grid-content.swipe-desktop-snap.layout-desktop-carousel > slideshow-container > slideshow-slides > [data-carousel-card],
    .hw-carousel-grid-content[data-swipe-desktop="snap"] > slideshow-container > slideshow-slides > .card,
    .hw-carousel-grid-content[data-swipe-desktop="snap"] > slideshow-container > slideshow-slides > [data-carousel-card] {
      scroll-snap-align: start;
    }

    .hw-carousel-grid-content.swipe-desktop-fluid.layout-desktop-carousel > slideshow-container > slideshow-slides > .card,
    .hw-carousel-grid-content.swipe-desktop-fluid.layout-desktop-carousel > slideshow-container > slideshow-slides > [data-carousel-card],
    .hw-carousel-grid-content[data-swipe-desktop="fluid"] > slideshow-container > slideshow-slides > .card,
    .hw-carousel-grid-content[data-swipe-desktop="fluid"] > slideshow-container > slideshow-slides > [data-carousel-card] {
      scroll-snap-align: none;
    }

    .hw-carousel-grid-content.layout-desktop-carousel > slideshow-container > slideshow-slides > .card,
    .hw-carousel-grid-content.layout-desktop-carousel > slideshow-container > slideshow-slides > [data-carousel-card] {
      flex: 0 0 auto;
      width: var(
        --fixed-card-width-desktop,
        calc(
          (100% - (var(--gap-desktop) * max(0, var(--slide-peek-desktop) - 1)) - var(--peek-override-desktop, 0px)) /
            var(--slide-peek-desktop)
        )
      );
    }
  }

  .hw-carousel-grid-content .slideshow-control[disabled] {
    display: none;
  }

  .hw-carousel-grid-content slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .section-carousel-grid:has(.hw-carousel-navigation) .hw-carousel-grid-content slideshow-arrows,
  .section-carousel-grid:has(.hw-carousel-navigation) .hw-carousel-grid-content slideshow-arrows .slideshow-control,
  .section-carousel-grid:has(.hw-carousel-navigation) .hw-carousel-grid-content:hover slideshow-arrows,
  .section-carousel-grid:has(.hw-carousel-navigation) .hw-carousel-grid-content:hover slideshow-arrows .slideshow-control,
  .section-carousel-grid:has(.hw-carousel-navigation) .hw-carousel-grid-content:focus-within slideshow-arrows,
  .section-carousel-grid:has(.hw-carousel-navigation) .hw-carousel-grid-content:focus-within slideshow-arrows .slideshow-control,
  .section-carousel-grid:has(.hw-carousel-navigation) slideshow-component slideshow-arrows,
  .section-carousel-grid:has(.hw-carousel-navigation) slideshow-component slideshow-arrows .slideshow-control {
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    animation: none;
  }

  .hw-carousel-grid-content .slideshow-control--next {
    margin-inline-start: auto;
  }

  .hw-carousel-grid-content.layout-mobile-grid slideshow-arrows {
    display: none;
  }

  @media screen and (min-width: 750px) and (max-width: 989px) {
    .hw-carousel-grid-content.layout-tablet-grid slideshow-arrows {
      display: none;
    }
  }

  @media screen and (min-width: 990px) and (max-width: 1439px) {
    .hw-carousel-grid-content.layout-laptop-grid slideshow-arrows {
      display: none;
    }
  }

  @media screen and (min-width: 1440px) {
    .hw-carousel-grid-content.layout-desktop-grid slideshow-arrows {
      display: none;
    }
  }
/* END_SNIPPET:hw-loop-carousel-grid-styles */

/* START_SNIPPET:hw-marquee (INDEX:501) */
.hw-marquee__inner {
    width: 100%;
  }

  .hw-marquee__row {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-width: 0;
  }

  .hw-marquee__row--with-label .hw-marquee__label {
    flex: 0 0 auto;
    max-width: 30%;
  }

  /* Leading label on the right: track stays first (order 0), label moves after it. */
  .hw-marquee__row--label-right .hw-marquee__label {
    order: 2;
  }

  .hw-marquee__label-text {
    margin: 0;
    white-space: nowrap;
  }

  .hw-marquee__track {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    /* No overflow:hidden here — the scrolling content is already clipped by the
       inner .hw-marquee__viewport. Clipping here too would crop the pause button
       (which sits in the track, not the viewport) when it's taller than the row. */
    /* Derived from the inline mobile/desktop gap vars. Set via stylesheet (not
       inline) so the desktop media query can override it — an inline custom
       property can't be beaten by a media query re-declaring the same name. */
    --marquee-gap: var(--marquee-gap-mobile, 24px);
  }

  @media (min-width: 750px) {
    .hw-marquee__track {
      --marquee-gap: var(--marquee-gap-desktop, var(--marquee-gap-mobile, 24px));
    }
  }

  .hw-marquee__track--edge-fade .hw-marquee__viewport {
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--marquee-scroll-fade-width, 48px),
      #000 calc(100% - var(--marquee-scroll-fade-width, 48px)),
      transparent 100%
    );
  }

  .hw-marquee__viewport {
    overflow: hidden;
    width: 100%;
  }

  .hw-marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .hw-marquee__content {
    display: flex;
    gap: var(--marquee-gap);
    min-width: max-content;
  }

  .hw-marquee__items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--marquee-gap);
    min-width: max-content;
  }

  .hw-marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .hw-marquee__items > * {
    flex: 0 0 auto;
    max-width: none;
  }

  /* Static (non-scrolling) mode: fill the track and align the items instead of
     looping. No animation runs (JS skips loop build; no [data-ready]). */
  .hw-marquee__track--static .hw-marquee__wrapper,
  .hw-marquee__track--static .hw-marquee__content,
  .hw-marquee__track--static .hw-marquee__items {
    width: 100%;
    min-width: 0;
  }

  .hw-marquee__track--static .hw-marquee__items {
    justify-content: var(--marquee-justify, flex-start);
  }

  .hw-marquee__pause {
    position: absolute;
    inset-block-start: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--hw-marquee-pause-size, 32px);
    height: var(--hw-marquee-pause-size, 32px);
    padding: 0;
    border-radius: 999px;
    background: var(--color-background);
    color: var(--color-foreground);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.2);
    box-shadow: 0 1px 4px rgb(var(--color-foreground-rgb) / 0.12);
    transform: translateY(-50%);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  }

  .hw-marquee__pause--right {
    inset-inline-end: 0.5rem;
  }

  .hw-marquee__pause--left {
    inset-inline-start: 0.5rem;
  }

  /* Two classes + :hover so this beats base.css's
     `.button-unstyled:hover { background-color: inherit }`, which otherwise makes
     the button inherit the (transparent) section background and disappear on hover.
     Invert on hover for a clear, always-visible state. */
  .hw-marquee__pause.button-unstyled:hover {
    background-color: var(--color-foreground);
    color: var(--color-background);
    transform: translateY(-50%) scale(1.06);
    box-shadow: 0 2px 6px rgb(var(--color-foreground-rgb) / 0.18);
  }

  .hw-marquee__pause:focus-visible {
    outline: 0.2rem solid rgb(var(--color-foreground-rgb) / 0.5);
    outline-offset: 0.2rem;
  }

  .hw-marquee__pause-icon {
    display: inline-flex;
    width: 58%;
    height: 58%;
  }

  /* The JS toggles the [hidden] attribute to swap pause/play, but the class rule
     above (display: inline-flex) beats the UA [hidden] rule, so both showed at
     once. This makes hidden actually hide: pause icon while playing, play icon
     while paused. */
  .hw-marquee__pause-icon[hidden] {
    display: none;
  }

  .hw-marquee__pause-icon svg {
    width: 100%;
    height: 100%;
  }

  @media (prefers-reduced-motion: no-preference) {
    hw-marquee-track[data-ready] .hw-marquee__wrapper {
      animation: hw-marquee-motion var(--marquee-speed, 30s) linear infinite
        var(--marquee-direction, normal);
    }

    /* Pause by freezing the play-state, NOT by removing the animation.
       Removing it snaps the wrapper back to translateX(0) — that's the
       "jump then pause" seen on hover. play-state: paused holds position. */
    hw-marquee-track[data-ready][data-paused] .hw-marquee__wrapper {
      animation-play-state: paused;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    hw-marquee-track .hw-marquee__wrapper {
      animation: none;
    }

    .hw-marquee__track--edge-fade .hw-marquee__viewport {
      mask-image: none;
    }
  }

  @keyframes hw-marquee-motion {
    to {
      transform: translate3d(
        calc(-50% - (var(--marquee-gap, 0px) / 2)),
        0,
        0
      );
    }
  }
/* END_SNIPPET:hw-marquee */

/* START_SNIPPET:hw-mega-menu (INDEX:507) */
.hw-mega-menu--product-showcase {
    display: flex;
    width: 100%;
  }

  .hw-mega-showcase {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hw-mega-showcase-cta-gap, 22px);
    width: 100%;
    max-width: var(--hw-mega-showcase-max-width, 1440px);
    margin-inline: auto;
    padding-block: var(--hw-mega-showcase-padding-block, 32px);
    padding-inline: 0;
    background-color: transparent;
    container-type: inline-size;
    container-name: hw-mega-showcase;
  }

  .hw-mega-showcase__row {
    display: flex;
    align-items: stretch;
    gap: var(--hw-mega-showcase-row-gap, 24px);
    width: 100%;
  }

  .hw-mega-showcase__row--highlight-start .hw-mega-showcase-highlight {
    order: 1;
  }

  .hw-mega-showcase__row--highlight-start .hw-mega-showcase__grid {
    order: 2;
  }

  .hw-mega-menu--product-showcase:not(.hw-mega-menu--product-showcase--highlighted)
    .hw-mega-showcase__row {
    display: block;
  }

  .hw-mega-showcase__grid {
    display: grid;
    gap: var(--hw-mega-showcase-grid-gap, 14px);
    grid-template-columns: repeat(var(--hw-mega-showcase-cols, 5), minmax(0, 1fr));
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }

  .hw-mega-showcase-card {
    display: flex;
    flex-direction: column;
    gap: var(--hw-mega-showcase-card-gap, 12px);
    min-width: 0;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    white-space: normal;
  }

  .hw-mega-showcase-card__image-wrap {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 8px;
    background-color: rgb(var(--color-foreground-rgb) / 0.04);
  }

  .hw-mega-showcase-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .hw-mega-showcase-card__award {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: 8px;
    width: 52px;
    height: 52px;
    pointer-events: none;
  }

  .hw-mega-showcase-card__award-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .hw-mega-showcase-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--hw-mega-showcase-card-body-gap, 4px);
    min-width: 0;
  }

  .hw-mega-showcase-card__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hw-mega-showcase-card-title-badge-gap, 4px);
  }

  .hw-mega-showcase-card__title-row .hw-mega-showcase-card__title {
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    max-width: 100%;
  }

  .hw-mega-showcase-card__title,
  .hw-mega-showcase-card__description,
  .hw-mega-showcase-highlight__title {
    margin: 0;
    overflow-wrap: anywhere;
  }

  /*
   * Leaf presets on span/p (base .h3.h3 etc. do not target showcase copy).
   * Mirrors hw-cart-products.css / hw-cart-drawer.css.
   */
  .hw-mega-showcase-card__title.paragraph.paragraph,
  .hw-mega-showcase-card__description.paragraph.paragraph,
  .hw-mega-showcase-highlight__title.paragraph.paragraph {
    font-family: var(--font-paragraph--family);
    font-size: var(--font-paragraph--size);
    font-weight: var(--font-paragraph--weight);
    line-height: var(--font-paragraph--line-height);
    letter-spacing: var(--font-paragraph--letter-spacing);
    text-transform: var(--font-paragraph--case);
  }

  .hw-mega-showcase-card__title.paragraph_2.paragraph_2,
  .hw-mega-showcase-card__description.paragraph_2.paragraph_2,
  .hw-mega-showcase-highlight__title.paragraph_2.paragraph_2 {
    font-family: var(--font-paragraph_2--family);
    font-size: var(--font-paragraph_2--size);
    font-weight: var(--font-paragraph_2--weight);
    line-height: var(--font-paragraph_2--line-height);
  }

  .hw-mega-showcase-card__title.paragraph_3.paragraph_3,
  .hw-mega-showcase-card__description.paragraph_3.paragraph_3,
  .hw-mega-showcase-highlight__title.paragraph_3.paragraph_3 {
    font-family: var(--font-paragraph_3--family);
    font-size: var(--font-paragraph_3--size);
    font-weight: var(--font-paragraph_3--weight);
    line-height: var(--font-paragraph_3--line-height);
  }

  .hw-mega-showcase-card__title.paragraph_4.paragraph_4,
  .hw-mega-showcase-card__description.paragraph_4.paragraph_4,
  .hw-mega-showcase-highlight__title.paragraph_4.paragraph_4 {
    font-family: var(--font-paragraph_4--family);
    font-size: var(--font-paragraph_4--size);
    font-weight: var(--font-paragraph_4--weight);
    line-height: var(--font-paragraph_4--line-height);
  }

  .hw-mega-showcase-card__title.paragraph_5.paragraph_5,
  .hw-mega-showcase-card__description.paragraph_5.paragraph_5,
  .hw-mega-showcase-highlight__title.paragraph_5.paragraph_5 {
    font-family: var(--font-paragraph_5--family);
    font-size: var(--font-paragraph_5--size);
    font-weight: var(--font-paragraph_5--weight);
    line-height: var(--font-paragraph_5--line-height);
  }

  .hw-mega-showcase-card__title.paragraph_6.paragraph_6,
  .hw-mega-showcase-card__description.paragraph_6.paragraph_6,
  .hw-mega-showcase-highlight__title.paragraph_6.paragraph_6 {
    font-family: var(--font-paragraph_6--family);
    font-size: var(--font-paragraph_6--size);
    font-weight: var(--font-paragraph_6--weight);
    line-height: var(--font-paragraph_6--line-height);
  }

  .hw-mega-showcase-card__title.label.label,
  .hw-mega-showcase-card__description.label.label,
  .hw-mega-showcase-highlight__title.label.label {
    font-family: var(--font-label--family);
    font-size: var(--font-label--size);
    font-weight: var(--font-label--weight);
    line-height: var(--font-label--line-height);
  }

  .hw-mega-showcase-card__title.h1.h1,
  .hw-mega-showcase-card__description.h1.h1,
  .hw-mega-showcase-highlight__title.h1.h1 {
    font-family: var(--font-h1--family);
    font-size: var(--font-h1--size);
    font-weight: var(--font-h1--weight);
    line-height: var(--font-h1--line-height);
    letter-spacing: var(--font-h1--letter-spacing);
    text-transform: var(--font-h1--case);
  }

  .hw-mega-showcase-card__title.h2.h2,
  .hw-mega-showcase-card__description.h2.h2,
  .hw-mega-showcase-highlight__title.h2.h2 {
    font-family: var(--font-h2--family);
    font-size: var(--font-h2--size);
    font-weight: var(--font-h2--weight);
    line-height: var(--font-h2--line-height);
    letter-spacing: var(--font-h2--letter-spacing);
    text-transform: var(--font-h2--case);
  }

  .hw-mega-showcase-card__title.h3.h3,
  .hw-mega-showcase-card__description.h3.h3,
  .hw-mega-showcase-highlight__title.h3.h3 {
    font-family: var(--font-h3--family);
    font-size: var(--font-h3--size);
    font-weight: var(--font-h3--weight);
    line-height: var(--font-h3--line-height);
    letter-spacing: var(--font-h3--letter-spacing);
    text-transform: var(--font-h3--case);
  }

  .hw-mega-showcase-card__title.h4.h4,
  .hw-mega-showcase-card__description.h4.h4,
  .hw-mega-showcase-highlight__title.h4.h4 {
    font-family: var(--font-h4--family);
    font-size: var(--font-h4--size);
    font-weight: var(--font-h4--weight);
    line-height: var(--font-h4--line-height);
    letter-spacing: var(--font-h4--letter-spacing);
    text-transform: var(--font-h4--case);
  }

  .hw-mega-showcase-card__title.h5.h5,
  .hw-mega-showcase-card__description.h5.h5,
  .hw-mega-showcase-highlight__title.h5.h5 {
    font-family: var(--font-h5--family);
    font-size: var(--font-h5--size);
    font-weight: var(--font-h5--weight);
    line-height: var(--font-h5--line-height);
    letter-spacing: var(--font-h5--letter-spacing);
    text-transform: var(--font-h5--case);
  }

  .hw-mega-showcase-card__title.h6.h6,
  .hw-mega-showcase-card__description.h6.h6,
  .hw-mega-showcase-highlight__title.h6.h6 {
    font-family: var(--font-h6--family);
    font-size: var(--font-h6--size);
    font-weight: var(--font-h6--weight);
    line-height: var(--font-h6--line-height);
    letter-spacing: var(--font-h6--letter-spacing);
    text-transform: var(--font-h6--case);
  }

  .hw-mega-showcase-card__title.custom-typography,
  .hw-mega-showcase-card__description.custom-typography,
  .hw-mega-showcase-highlight__title.custom-typography {
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    text-transform: var(--text-transform, none);
    text-wrap: var(--text-wrap, pretty);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    font-size: var(--font-size);
    color: var(--color, var(--color-foreground));
  }

  @media screen and (min-width: 750px) {
    .hw-mega-showcase-card__title.custom-typography,
    .hw-mega-showcase-card__description.custom-typography,
    .hw-mega-showcase-highlight__title.custom-typography {
      font-size: var(--font-size-desktop, var(--font-size));
    }
  }

  .hw-mega-showcase-card__variant,
  .hw-mega-showcase-highlight__badge {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-wrap: wrap;
    text-align: center;
  }

  .hw-mega-showcase-card__title-row .hw-mega-showcase-card__variant {
    flex: 0 1 auto;
    min-width: 0;
  }

  .hw-mega-showcase-card__variant.button,
  .hw-mega-showcase-highlight__badge.button {
    background-color: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
    box-shadow: inset 0 0 0 var(--button-border-width) var(--color-primary-button-border);
  }

  .hw-mega-showcase-card__variant.button-secondary,
  .hw-mega-showcase-highlight__badge.button-secondary {
    background-color: var(--color-secondary-button-background);
    color: var(--color-secondary-button-text);
    box-shadow: inset 0 0 0 var(--button-border-width) var(--color-secondary-button-border);
  }

  .hw-mega-showcase-card__variant.button-tertiary,
  .hw-mega-showcase-highlight__badge.button-tertiary {
    background-color: var(--color-tertiary-button-background);
    color: var(--color-tertiary-button-text);
    box-shadow: inset 0 0 0 var(--button-border-width) var(--color-tertiary-button-border);
  }

  .hw-mega-showcase-card__variant.custom-typography,
  .hw-mega-showcase-highlight__badge.custom-typography {
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    text-transform: var(--text-transform, none);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    font-size: var(--font-size);
  }

  @media screen and (min-width: 750px) {
    .hw-mega-showcase-card__variant.custom-typography,
    .hw-mega-showcase-highlight__badge.custom-typography {
      font-size: var(--font-size-desktop, var(--font-size));
    }
  }

  .hw-mega-showcase--variant-badge-min-height .hw-mega-showcase-card__variant[class*='button'] {
    padding-block: 0;
    --button-padding-block: 0px;
    --button-min-height-mobile: var(--hw-mega-showcase-variant-badge-min-height, 0px);
    --button-min-height-desktop: var(--hw-mega-showcase-variant-badge-min-height, 0px);
    min-height: var(--hw-mega-showcase-variant-badge-min-height, 0px);
    --button-padding-inline: 0.5rem;
  }

  .hw-mega-showcase--highlight-badge-min-height .hw-mega-showcase-highlight__badge[class*='button'] {
    padding-block: 0;
    --button-padding-block: 0px;
    --button-min-height-mobile: var(--hw-mega-showcase-highlight-badge-min-height, 0px);
    --button-min-height-desktop: var(--hw-mega-showcase-highlight-badge-min-height, 0px);
    min-height: var(--hw-mega-showcase-highlight-badge-min-height, 0px);
    --button-padding-inline: 0.5rem;
  }

  .hw-mega-showcase-card__description {
    margin: 0;
    overflow-wrap: anywhere;
  }

  .hw-mega-showcase-card__description.hw-mega-showcase-card__description--line-clamp {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--hw-mega-showcase-desc-max-lines, 2);
    line-clamp: var(--hw-mega-showcase-desc-max-lines, 2);
    text-wrap: wrap;
  }

  .hw-mega-showcase-highlight {
    position: relative;
    display: flex;
    flex: 0 0 min(100%, var(--hw-mega-showcase-highlight-max-width, 537px));
    max-width: var(--hw-mega-showcase-highlight-max-width, 537px);
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100%;
    overflow: hidden;
    border: 1px solid #f2f2f2;
    border-radius: 14px;
    padding: 18px;
    text-decoration: none;
    color: inherit;
  }

  .hw-mega-showcase-highlight__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
  }

  .hw-mega-showcase-highlight__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hw-mega-showcase-highlight__award {
    position: absolute;
    inset-block-start: 7px;
    inset-inline-end: 8px;
    width: 54px;
    height: 54px;
    z-index: 1;
  }

  .hw-mega-showcase-highlight__award-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .hw-mega-showcase-highlight__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hw-mega-showcase-highlight-title-badge-gap, 4px);
  }

  .hw-mega-showcase-highlight__title {
    max-width: 12rem;
    overflow-wrap: anywhere;
  }

  .hw-mega-showcase__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--hw-mega-showcase-cta-min-width, 200px);
    border-radius: var(--hw-mega-showcase-cta-radius, 61px);
    text-decoration: none;
  }

  .hw-mega-showcase__cta:focus-visible {
    outline: 2px solid rgb(var(--color-foreground-rgb));
    outline-offset: 3px;
  }

  .hw-mega-showcase__empty {
    margin: 0;
    padding: var(--padding-md);
    opacity: 0.7;
  }

  /*
   * Responsive layout uses container width, not viewport — the mega menu only
   * opens at 990px+ so viewport media queries cannot fix cramped tablet widths.
   */
  @container hw-mega-showcase (max-width: 1199px) {
    .hw-mega-menu--product-showcase--highlighted .hw-mega-showcase__row {
      flex-direction: column;
    }

    .hw-mega-menu--product-showcase--highlighted .hw-mega-showcase-highlight {
      flex: none;
      width: 100%;
      max-width: none;
      min-height: 280px;
    }

    .hw-mega-menu--product-showcase--highlighted .hw-mega-showcase-highlight__title {
      max-width: none;
    }

    .hw-mega-menu--product-showcase--highlighted .hw-mega-showcase__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hw-mega-menu--product-showcase:not(.hw-mega-menu--product-showcase--highlighted)
      .hw-mega-showcase__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hw-mega-showcase-card__title-row {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  @container hw-mega-showcase (max-width: 899px) {
    .hw-mega-showcase__row {
      flex-direction: column;
    }

    .hw-mega-showcase-highlight {
      flex: none;
      width: 100%;
      max-width: none;
      min-height: 240px;
    }

    .hw-mega-showcase-highlight__title {
      max-width: none;
    }

    .hw-mega-showcase__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @container hw-mega-showcase (max-width: 549px) {
    .hw-mega-showcase__grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
/* END_SNIPPET:hw-mega-menu */

/* START_SNIPPET:hw-mobile-drawer-showcase (INDEX:514) */
.hw-mobile-drawer-showcase__highlight-row,
  .hw-mobile-drawer-showcase__row {
    list-style: none;
  }

  .hw-mobile-drawer-showcase__highlight-row .hw-mega-showcase-highlight {
    flex: none;
    max-width: none;
    width: 100%;
    min-height: 150px;
  }

  .hw-mobile-drawer-showcase__highlight-row .hw-mega-showcase-highlight__title {
    max-width: none;
  }

  .hw-mobile-drawer-showcase__row .hw-mega-showcase-card--drawer-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    width: 100%;
  }

  .hw-mobile-drawer-showcase__row .hw-mega-showcase-card--drawer-row .hw-mega-showcase-card__image-wrap {
    flex: 0 0 90px;
    width: 90px;
    aspect-ratio: 1;
    border-radius: 8px;
  }

  .hw-mobile-drawer-showcase__row .hw-mega-showcase-card--drawer-row .hw-mega-showcase-card__body {
    flex: 1 1 auto;
    min-width: 0;
  }

  .menu-drawer .hw-mega-showcase-card__title-row {
    justify-content: flex-start;
  }

  .menu-drawer .hw-mega-showcase-card__title-row .hw-mega-showcase-card__title.text-block {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
  }

  .menu-drawer .hw-mega-showcase-card__title-row .hw-mega-showcase-card__variant {
    flex: 0 0 auto;
  }

  .hw-mobile-drawer-showcase__row
    .hw-mega-showcase-card__description.hw-mega-showcase-card__description--line-clamp {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--hw-mega-showcase-desc-max-lines, 2);
    line-clamp: var(--hw-mega-showcase-desc-max-lines, 2);
    text-wrap: wrap;
  }

  .hw-mobile-drawer-showcase__row .hw-mega-showcase-card--drawer-row .hw-mega-showcase-card__award {
    width: 40px;
    height: 40px;
    inset-block-start: 4px;
    inset-inline-end: 4px;
  }

  .hw-mobile-drawer-rich-branch__cta .hw-mobile-drawer-showcase__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    border-radius: var(--hw-mega-showcase-cta-radius, 61px);
    text-decoration: none;
  }

  .hw-mobile-drawer-rich-branch__cta .hw-mobile-drawer-showcase__cta:focus-visible {
    outline: 2px solid rgb(var(--color-foreground-rgb));
    outline-offset: 3px;
  }

  @media (forced-colors: active) {
    .hw-mobile-drawer-rich-branch__cta .hw-mobile-drawer-showcase__cta:focus-visible {
      outline: 2px solid transparent;
    }
  }

  .menu-drawer .hw-mega-showcase-card__title.custom-typography,
  .menu-drawer .hw-mega-showcase-card__description.custom-typography,
  .menu-drawer .hw-mega-showcase-highlight__title.custom-typography {
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    text-transform: var(--text-transform, none);
    text-wrap: var(--text-wrap, pretty);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    font-size: var(--font-size);
    color: var(--color, var(--color-foreground));
  }

  .menu-drawer .hw-mega-showcase-card__variant.custom-typography,
  .menu-drawer .hw-mega-showcase-highlight__badge.custom-typography {
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    text-transform: var(--text-transform, none);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    font-size: var(--font-size);
  }

  .menu-drawer .hw-mega-showcase-card__variant.button,
  .menu-drawer .hw-mega-showcase-highlight__badge.button {
    background-color: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
    box-shadow: inset 0 0 0 var(--button-border-width) var(--color-primary-button-border);
  }

  .menu-drawer .hw-mega-showcase-card__variant.button-secondary,
  .menu-drawer .hw-mega-showcase-highlight__badge.button-secondary {
    background-color: var(--color-secondary-button-background);
    color: var(--color-secondary-button-text);
    box-shadow: inset 0 0 0 var(--button-border-width) var(--color-secondary-button-border);
  }

  .menu-drawer .hw-mega-showcase-card__variant.button-tertiary,
  .menu-drawer .hw-mega-showcase-highlight__badge.button-tertiary {
    background-color: var(--color-tertiary-button-background);
    color: var(--color-tertiary-button-text);
    box-shadow: inset 0 0 0 var(--button-border-width) var(--color-tertiary-button-border);
  }

  .menu-drawer .hw-mega-showcase--variant-badge-min-height .hw-mega-showcase-card__variant[class*='button'] {
    padding-block: 0;
    --button-padding-block: 0px;
    --button-min-height-mobile: var(--hw-mega-showcase-variant-badge-min-height, 0px);
    --button-min-height-desktop: var(--hw-mega-showcase-variant-badge-min-height, 0px);
    min-height: var(--hw-mega-showcase-variant-badge-min-height, 0px);
  }

  .menu-drawer .hw-mega-showcase--highlight-badge-min-height .hw-mega-showcase-highlight__badge[class*='button'] {
    padding-block: 0;
    --button-padding-block: 0px;
    --button-min-height-mobile: var(--hw-mega-showcase-highlight-badge-min-height, 0px);
    --button-min-height-desktop: var(--hw-mega-showcase-highlight-badge-min-height, 0px);
    min-height: var(--hw-mega-showcase-highlight-badge-min-height, 0px);
  }
/* END_SNIPPET:hw-mobile-drawer-showcase */

/* START_SNIPPET:hw-overlay (INDEX:515) */
.overlay {
    position: absolute;
    inset: 0;
    z-index: var(--overlay-layer);
    pointer-events: none;
    border-radius: var(--overlay-border-radius, 0);
  }

  @media screen and (min-width: 750px) {
    .overlay {
      border-radius: var(
        --overlay-border-radius-desktop,
        var(--overlay-border-radius, 0)
      );
    }
  }
/* END_SNIPPET:hw-overlay */

/* START_SNIPPET:hw-quick-add (INDEX:547) */
/* product-price is a custom element (inline by default); make it block so price
     and compare-at-price stack correctly inside the modal details column */
  .quick-add-modal__content .product-details product-price {
    display: block;
  }

  /* .buy-buttons-block is a direct child of .product-details (not inside
     .group-block-content), so it doesn't get padding-inline from the native
     :where(.group-block-content > *) rule — add it explicitly to match */
  .quick-add-modal__content .product-details > .buy-buttons-block {
    padding-inline: var(--padding-3xl);
  }

  /* .add-to-cart__added (the post-add checkmark) is position:absolute; top:50%; left:50%.
     It needs a position:relative ancestor to center within the button. Without it the
     nearest positioned ancestor in the modal is .buy-buttons-block (position:sticky),
     so the checkmark centers relative to the whole sticky bar instead of the button.
     overflow:hidden clips the burst animation to the button boundary. */
  .quick-add-modal__content .buy-buttons-block .add-to-cart-button {
    position: relative;
    overflow: hidden;
  }

  /* Hide the cart icon when the add-to-cart button is disabled (sold out /
     unavailable). The icon is only meaningful when the button is actionable. */
  .quick-add-modal__content .buy-buttons-block button:disabled .add-to-cart-icon {
    display: none;
  }

  /* ── Simple gallery inside quick-add modal ── */

  /* Ensure the close button sits above the HW gallery which starts at
     the very top of the modal (no header row to create natural spacing). */
  .quick-add-modal:has(.hw-quick-add-media) .quick-add-modal__close {
    z-index: 1;
  }

  /* ── Mobile-first: HW quick-add modal layout (overridden at 750px+) ── */

  /* Flex column bypasses the native 4-col grid that locks
     .product-information__media to col 1 and .product-details to cols 2-3.
     Only scoped to HW gallery; native modals unaffected. */
  .quick-add-modal__content:has(.hw-quick-add-media) {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md, 12px);
    padding-top: var(--padding-xl, 16px);
  }

  /* ── Gallery: compact horizontal swipe strip ── */
  .quick-add-modal__content .hw-quick-add-media {
    width: 100%;
  }

  .quick-add-modal__content .hw-quick-add-media__inner {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--gap-2xs, 4px);
  }

  .quick-add-modal__content .hw-quick-add-media__inner::-webkit-scrollbar {
    display: none;
  }

  /* ~3 cards visible — keeps gallery compact */
  .quick-add-modal__content .hw-quick-add-media__slide {
    flex: 0 0 32%;
    scroll-snap-align: start;
  }

  /* ── Product details: full width, natural flow ── */
  .quick-add-modal__content:has(.hw-quick-add-media) .product-details {
    width: 100%;
    height: auto;
    max-height: none;
    overflow-y: visible;
  }

  /* Buy button: disable sticky so it never covers swatches.
     The whole modal sheet scrolls via .quick-add-modal__content,
     so sticky inside .product-details is unnecessary on mobile. */
  .quick-add-modal__content:has(.hw-quick-add-media) .product-details :is(.buy-buttons-block) {
    position: static;
    padding-bottom: 0;
    margin-top: 20px;
  }

  /* Remove the gradient mask pseudo-element that only makes sense with sticky */
  .quick-add-modal__content:has(.hw-quick-add-media) .buy-buttons-block::before {
    display: none;
  }

  /* Remove content padding on mobile — the modal sheet's own edge spacing
     is sufficient; the extra padding-inline creates too much inset. */
  .quick-add-modal__content:has(.hw-quick-add-media) :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: 0;
  }
  .quick-add-modal__content:has(.hw-quick-add-media) .product-details > .buy-buttons-block {
    padding-inline: 0;
  }

  /* ── Desktop: restore grid layout + vertical gallery ── */
  @media screen and (min-width: 750px) {
    .quick-add-modal__content:has(.hw-quick-add-media) {
      display: grid;
      padding-top: 0;
    }

    .quick-add-modal__content .hw-quick-add-media__inner {
      position: absolute;
      inset: 0;
      flex-direction: column;
      overflow-x: hidden;
      overflow-y: auto;
      scroll-snap-type: none;
    }

    .quick-add-modal__content .hw-quick-add-media__slide {
      flex: none;
    }

    .quick-add-modal__content:has(.hw-quick-add-media) .product-details {
      width: auto;
      height: 100%;
      overflow-y: auto;
    }

    .quick-add-modal__content:has(.hw-quick-add-media) .product-details :is(.buy-buttons-block) {
      position: sticky;
      bottom: 0;
      padding-bottom: var(--padding-3xl);
      margin-top: auto;
    }

    .quick-add-modal__content:has(.hw-quick-add-media) .buy-buttons-block::before {
      display: block;
    }

    .quick-add-modal__content:has(.hw-quick-add-media) :where(.product-details > .group-block > .group-block-content > *) {
      padding-inline: var(--padding-3xl);
    }
    .quick-add-modal__content:has(.hw-quick-add-media) .product-details > .buy-buttons-block {
      padding-inline: var(--padding-3xl);
    }
  }

  .hw-quick-add-media__slide {
    aspect-ratio: var(--hw-qam-ratio, 4 / 5);
    overflow: hidden;
  }

  .hw-quick-add-media__slide.hidden {
    display: none;
  }

  .hw-quick-add-media__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Prevent zoom cursor on simple gallery (no zoom component) */
  .quick-add-modal__content .hw-quick-add-media__img {
    cursor: default;
  }
/* END_SNIPPET:hw-quick-add */

/* START_SNIPPET:hw-tab-filter-drawer (INDEX:565) */
/*
    Positioning/animation fix, kept at the very TOP of this stylesheet
    block on purpose - appending equivalent rules at the END (after the
    verbatim filters.liquid copy below) silently failed to reach the
    browser's CSSOM even though the server compiled and served it
    correctly (confirmed via a raw fetch() of the compiled asset).
    Scoped to .hw-tab-filter-drawer (set on the outer dialog-component)
    so this never touches the real filters.liquid drawer elsewhere on
    the site - see the doc comment on the dialog element above for what
    each rule fixes and why.
  */
  .hw-tab-filter-drawer .facets.dialog-drawer--right {
    margin-inline-start: auto;
    margin-inline-end: 0;
  }

  .hw-tab-filter-drawer .facets.dialog-drawer--right[open] {
    --start-x: 100%;
  }

  .hw-tab-filter-drawer .facets.dialog-drawer--right[open].dialog-closing {
    --end-x: 100%;
  }

  /* Figma specs this drawer's own page overlay as rgba(0,0,0,0.65) -
     the theme's shared .dialog-modal::backdrop default
     (--backdrop-color-rgb/--backdrop-opacity, currently a much lighter
     0.15) is used by every other dialog sitewide (menu, search, cart,
     etc.), so overridden here rather than changed globally - scoped the
     same way as the positioning fix above. */
  .hw-tab-filter-drawer .facets.dialog-drawer--right::backdrop {
    background: rgba(0, 0, 0, 0.65);
  }

  /*
    Visual pass against Figma (node 1290-13241 / 704-6364), all scoped to
    .hw-tab-filter-drawer so none of it touches the real filters.liquid
    drawer elsewhere on the site. Ryan's punch list, in order:
    1. Header row: font, symmetric padding, real border-bottom (the
       divider under the header was actually coming from the first
       accordion item's own inset ::before pseudo-element, not this row -
       see item 8 below for that).
    2. Close icon and every accordion caret icon get a 32px bordered box
       (border on closed, light-grey fill with no border when its details
       is open) instead of a bare icon - markup unchanged, this is purely
       sizing/framing the existing icon-caret/close-button spans.
    3. Accordions closed by default except the first - handled in JS
       (openTabFilterDrawer in hw-collection-tabs-cards.liquid), not CSS.
    4. Checkboxes: real drawer's are 22px, 7px-rounded, foreground-tinted
       border (theme-wide default, var(--checkbox-size) etc.) - Figma
       wants 21px, 4px-rounded, #efefef border. Overridden as local custom
       property values so nothing outside this drawer is affected. Label
       text (.checkbox__label-text) is set to Figma's "P7" type style -
       applied via the theme's own --font-paragraph_7--* variables (the
       same ones driving the .paragraph_7 utility class), not hardcoded
       px/weight values, so it stays in sync with the Type settings in
       the theme editor. Color is set to black since base.css leaves
       .checkbox__label-text's color to inherit from the muted
       --facets-input-label-color.
    5/6. Accordion header label and item label text sizes, to match
       Figma's 14px medium / 12px regular rather than the real drawer's
       --font-h5--size.
    8. Item dividers (.facets__item::before) are inset by
       `calc(100% - var(--drawer-padding) * 2)` in the real drawer
       (deliberate there); Figma wants them full-width here. Also added
       breathing room inside each accordion's own open content, between
       its fields and the dividers above/below - "not enough padding"
       around things like the Price row.
  */
  .hw-tab-filter-drawer {
    --checkbox-size: 21px;
    --checkbox-border-radius: 4px;
    --checkbox-border: 1px solid #efefef;
  }

  .hw-tab-filter-drawer .checkbox__label-text {
    color: #000;
    font-family: var(--font-paragraph_7--family);
    font-style: var(--font-paragraph_7--style);
    font-weight: var(--font-paragraph_7--weight);
    font-size: var(--font-paragraph_7--size);
    line-height: var(--font-paragraph_7--line-height);
    text-transform: var(--font-paragraph_7--case);
  }

  /*
    Color filter (Figma node 1290-13923): show_swatch_label: true above
    switches list-filter.liquid into its existing "swatches-grid" mode
    (2-column grid, label text next to each swatch - previously this
    drawer left show_swatch_label unset, so Color rendered as a bare
    wrapping row of swatches with NO labels at all, unlike every other
    filter here). That mode's own layout (2 columns, label-beside-swatch)
    already matches Figma; only the swatch's own look and the gap needed
    fixing:
    - Figma's swatch is a 28px outer ring with a 20px color fill inside
      it (per Ryan's exact numbers) - not the real theme's
      `.swatch--filter` (color fill flush against its own border, no
      gap, and an outline drawn further OUTSIDE the swatch on :checked
      rather than the ring itself turning black). Rebuilt as a plain
      20px color-filled circle plus two concentric box-shadows instead
      of touching swatch.liquid's shared width/height calc (used by the
      real PDP/pill swatches too): the first shadow (3px,
      background-color) is the gap, the second (4px, i.e. 3px gap + 1px
      ring) is the ring itself - 20 + 2*4 = 28px overall. The theme's
      own :checked outline is turned off so it doesn't double up with
      this ring.
    - Grid gap set to a flat 12px (was var(--gap-sm), ~11.2px).
    - Label text set to the same P7/black spec as every other label in
      this drawer.
  */
  .hw-tab-filter-drawer .facets__inputs-list--swatches-grid {
    gap: 12px;
  }

  .hw-tab-filter-drawer .variant-option__swatch-wrapper {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hw-tab-filter-drawer .swatch.swatch--filter {
    --swatch-width: 20px;
    --swatch-height: 20px;
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--color-background), 0 0 0 4px #efefef;
  }

  .hw-tab-filter-drawer .variant-option__button-label--has-swatch:has(:checked) .swatch.swatch--filter {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-background), 0 0 0 4px #000;
  }

  .hw-tab-filter-drawer .facets__swatch-label {
    font-family: var(--font-paragraph_7--family);
    font-style: var(--font-paragraph_7--style);
    font-weight: var(--font-paragraph_7--weight);
    font-size: var(--font-paragraph_7--size);
    line-height: var(--font-paragraph_7--line-height);
    text-transform: var(--font-paragraph_7--case);
    color: #000;
  }

  .hw-tab-filter-drawer .variant-option__button-label--has-swatch:has(:checked) .facets__swatch-label {
    font-weight: var(--font-paragraph_7--weight);
  }

  .hw-tab-filter-drawer .facets__title-wrapper {
    padding: 18px 12px;
    border-bottom: 1px solid #efefef;
  }

  .hw-tab-filter-drawer .facets-drawer__title {
    font-family: var(--font-heading--family, var(--font-h3--family));
    font-weight: 300;
    font-size: 18px;
    line-height: 1.1;
    text-transform: none;
  }

  .hw-tab-filter-drawer .facets-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #efefef;
    border-radius: 4px;
    margin: 0;
  }

  .hw-tab-filter-drawer .facets-drawer__close .svg-wrapper svg {
    width: 14px;
    height: 14px;
  }

  /*
    Caret icon: Ryan sent the exact closed-state icon as a ready-made 32x32
    SVG (border box + chevron baked into one asset), because the theme's own
    icon-caret.svg (a 14x14-viewBox chevron) was being non-uniformly
    stretched down to a 10x5 box here, which squashed and shrank the visible
    mark - that's the "tiny arrow" he flagged. Using his SVG directly as a
    background-image sidesteps the theme asset entirely, so it's pixel-exact.
    No separate "open" asset was provided, so the open state is the same
    SVG's chevron path mirrored vertically (pointing up instead of down) with
    the border swapped for the light-grey fill, matching the fill/no-border
    open treatment used elsewhere in this drawer (checkboxes, etc).
    Original inline <svg> from icon-caret.svg is hidden rather than removed,
    so the shared list-filter.liquid/price-filter.liquid/sorting.liquid
    markup itself stays untouched.
  */
  .hw-tab-filter-drawer .facets__summary .icon-caret {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Crect%20x='0.5'%20y='0.5'%20width='31'%20height='31'%20rx='3.5'%20stroke='%23EFEFEF'/%3E%3Cpath%20d='M11.0493%2013.5247L16.0002%2018.4753L20.9509%2013.5247'%20stroke='black'/%3E%3C/svg%3E");
  }

  .hw-tab-filter-drawer .facets__panel[open] .facets__summary .icon-caret {
    background-image: url("data:image/svg+xml,%3Csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Crect%20x='0.5'%20y='0.5'%20width='31'%20height='31'%20rx='3.5'%20fill='%23F5F5F5'/%3E%3Cpath%20d='M11.0493%2018.4753L16.0002%2013.5247L20.9509%2018.4753'%20stroke='black'/%3E%3C/svg%3E");
  }

  .hw-tab-filter-drawer .facets__summary .icon-caret svg {
    display: none;
  }

  /*
    Figma's "14px medium" accordion header text is the theme's "P2" type
    style (config/settings_data.json: type_size_paragraph_2_desktop: 14,
    type_weight_paragraph_2: "500") - applied via --font-paragraph_2--*
    (the same variables backing .paragraph_2) rather than hardcoded
    values, same reasoning as the P7 labels below.
  */
  .hw-tab-filter-drawer .facets__summary {
    font-family: var(--font-paragraph_2--family);
    font-style: var(--font-paragraph_2--style);
    font-weight: var(--font-paragraph_2--weight);
    font-size: var(--font-paragraph_2--size);
    line-height: var(--font-paragraph_2--line-height);
    text-transform: none;
    padding-block: 16px;
  }

  .hw-tab-filter-drawer .facets__inputs-list label,
  .hw-tab-filter-drawer .facets__filters-wrapper label {
    font-family: var(--font-paragraph_7--family);
    font-style: var(--font-paragraph_7--style);
    font-weight: var(--font-paragraph_7--weight);
    font-size: var(--font-paragraph_7--size);
    line-height: var(--font-paragraph_7--line-height);
    text-transform: var(--font-paragraph_7--case);
  }

  .hw-tab-filter-drawer .facets__item::before,
  .hw-tab-filter-drawer .sorting-filter::before {
    width: 100%;
    margin: 0;
  }

  .hw-tab-filter-drawer sorting-filter-component {
    display: block !important;
  }

  /*
    sorting.liquid's own stylesheet renders .sorting-filter__options as a
    floating popover (position:absolute, top:100%, right:0, box-shadow,
    border, its own rounded-corner background) - that's the theme's
    normal Sort UX everywhere else, a dropdown that overlays whatever is
    beneath it. Inside this drawer, styled to look like a set of plain
    accordions, that reads as broken: opening Sort floats a bordered card
    on TOP of Color/Availability/etc instead of pushing them down the way
    every other accordion here does. Overridden to lay out inline like
    the rest (position:static, full width, no popover chrome) so opening
    Sort behaves exactly like opening any other section.
  */
  .hw-tab-filter-drawer .sorting-filter__options {
    position: static;
    width: 100%;
    min-width: 0;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background-color: transparent;
  }

  /*
    Sort's option rows (.sorting-filter__option) are built as their own
    radio-button popover-menu-item component in sorting.liquid, with a
    hover treatment (row background tint + border-radius + row padding)
    borrowed from that floating-popover context, and a checkmark
    (.sorting-filter__checkmark) that's just the inline icon-checkmark.svg
    hidden via visibility:hidden until checked - so unselected rows show
    no box at all. None of that matches how every other filter here
    (Color, Product Type, etc) behaves via .checkbox: no row-level hover
    background/padding, just the checkmark box's own border/background
    tinting on hover (list-filter.liquid's ".facets .checkbox:hover
    .icon-checkmark" rules), and a checkmark that's a persistent bordered
    square (var(--checkbox-size)/--checkbox-border/--checkbox-border-radius)
    with the checkmark path only appearing inside once checked. Per design
    feedback ("match the others"), rebuilt Sort's option row and checkmark
    from scratch against that same treatment - not reused/patched from
    sorting.liquid's own popover-menu-item styling - so it reads as the
    exact same control type as the rest of the drawer's filters, hover
    animation included.
  */
  /*
    .sorting-filter__options-inner (sorting.liquid) is the Sort
    equivalent of .facets__panel-content/.facets__inputs for every other
    filter, but isn't in that selector list so it never picked up this
    drawer's own padding-block: 16px / padding-inline: 0 override below -
    it kept sorting.liquid's own popover padding
    (calc(var(--drawer-padding) / 2), i.e. both axes) and its own
    var(--gap-sm) row gap (~11px) instead of Figma's flat 12px. Matched
    both directly here.
  */
  .hw-tab-filter-drawer .sorting-filter__options-inner {
    padding-block: 16px;
    padding-inline: 0;
    gap: 12px;
  }

  .hw-tab-filter-drawer .sorting-filter__option {
    grid-template-columns: var(--checkbox-size) 1fr;
    gap: var(--checkbox-label-padding);
    padding: 0;
    min-width: 0;
    max-width: none;
  }

  .hw-tab-filter-drawer .sorting-filter__option:hover,
  .hw-tab-filter-drawer .sorting-filter__option:focus {
    border-radius: 0;
    background-color: transparent;
  }

  .hw-tab-filter-drawer .sorting-filter__checkmark {
    visibility: visible;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    flex-shrink: 0;
    border: var(--checkbox-border);
    border-radius: var(--checkbox-border-radius);
    background-color: var(--color-background);
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .hw-tab-filter-drawer .sorting-filter__checkmark path {
    opacity: 0;
    stroke: var(--color-background);
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  .hw-tab-filter-drawer .sorting-filter__input:checked + .sorting-filter__checkmark {
    background-color: var(--color-foreground);
    border-color: var(--color-foreground);
  }

  .hw-tab-filter-drawer .sorting-filter__input:checked + .sorting-filter__checkmark path {
    opacity: 1;
  }

  /* Hover state, mirroring .facets .checkbox:not(.checkbox--disabled):hover
     in list-filter.liquid exactly: tint the checkmark box, not the row. */
  .hw-tab-filter-drawer .sorting-filter__option:hover .sorting-filter__checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .hw-tab-filter-drawer .sorting-filter__option:has(.sorting-filter__input:checked):hover .sorting-filter__checkmark {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
  }

  .hw-tab-filter-drawer .sorting-filter__label {
    font-family: var(--font-paragraph_7--family);
    font-style: var(--font-paragraph_7--style);
    font-weight: var(--font-paragraph_7--weight);
    font-size: var(--font-paragraph_7--size);
    line-height: var(--font-paragraph_7--line-height);
    text-transform: var(--font-paragraph_7--case);
    color: #000;
    transition: color 0.2s ease;
  }

  .hw-tab-filter-drawer .sorting-filter__option:hover .sorting-filter__label {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-90));
  }

  /* sorting.liquid bolds the label on selection (:checked + checkmark +
     label { font-weight: 500 }) - .checkbox never does that on check, so
     neutralize it back to the P7 weight to match. */
  .hw-tab-filter-drawer .sorting-filter__input:checked + .sorting-filter__checkmark + .sorting-filter__label {
    font-weight: var(--font-paragraph_7--weight);
  }

  .hw-tab-filter-drawer .facets__panel-content,
  .hw-tab-filter-drawer .facets__inputs {
    padding-block: 16px;
  }

  /*
    Clear all button: the real drawer only shows this once a filter is
    actually active (facets__clear-all--active, toggled by an is_active
    check this drawer's own markup doesn't replicate - see the doc
    comment on the buttons further down for why). Figma always shows
    both Apply and Clear, so force it visible here regardless of state.
    Both buttons also get Figma's pill shape/colors explicitly, since the
    theme's own .button/.button-secondary don't match it.
  */
  .hw-tab-filter-drawer .facets__clear-all {
    display: flex !important;
  }

  /*
    Width: the real drawer's own unscoped `.facets` rule above uses
    --drawer-width (95vw) with a 500px cap on desktop. Figma caps this
    drawer at 390px on EVERY width, not just mobile - full-bleed 100vw
    below 750px (edge-to-edge, no side gutter, per the mobile frame node
    704-6364), and just capped at 390px above that (95vw is already far
    wider than 390px at desktop sizes, so max-width alone is enough
    there - no need to also override width). Scoped to
    .hw-tab-filter-drawer (not added to the shared `.facets` rule itself)
    so none of this affects the real drawer elsewhere.
  */
  .hw-tab-filter-drawer .facets {
    max-width: 390px;

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

  .hw-tab-filter-drawer .facets__drawer-actions {
    gap: 10px;
    padding-inline: 12px;
    padding-block: 0 12px;
  }

  /*
    Clear's actual flex-item-in-.facets__drawer-actions is
    <facet-remove-component> (the Clear <button> is nested inside it), not
    the button itself - so flex:1 on .facets__clear-all alone did nothing
    for the overall Apply/Clear width split, it only sized within its own
    already content-shrunk wrapper. display:contents removes the wrapper
    from layout so the button underneath becomes the real flex item.
  */
  .hw-tab-filter-drawer facet-remove-component {
    display: contents;
  }

  .hw-tab-filter-drawer .facets__clear-all,
  .hw-tab-filter-drawer .facets__see-results {
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    border-radius: 53px;
    padding-block: 12px;
    padding-inline: 10px;
    font-family: var(--font-paragraph--family);
    font-weight: 500;
    font-size: 14px;
    text-transform: none;
  }

  .hw-tab-filter-drawer .facets__see-results {
    background-color: #000;
    color: #fff;
    border: none;
  }

  .hw-tab-filter-drawer .facets__clear-all {
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
  }

  .facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: var(--facets-margin);
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-toggle {
    --icon-offset: -3px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    margin: var(--facets-margin);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-toggle__wrapper {
    margin-left: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      /* stylelint-disable-next-line declaration-no-important */
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    dialog-component.facets-block-wrapper {
      position: absolute;
      width: 0;
      height: 0;
    }
  }

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

  .facets--vertical {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: 0 var(--padding-block-end);
      display: block;
      position: static;
      top: auto;
      bottom: auto;
      height: auto;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--drawer {
    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;
    height: 100%;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper .facets__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__filters {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .facets-drawer__filters .facets__filters-wrapper,
  .facets-drawer__filters .filter-remove-buttons,
  .facets-drawer__filters .sorting-filter-component {
    overflow: visible;
  }

  .facets.facets-controls-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: column-1 / column-12;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
      gap: 0 var(--facets-form-horizontal-gap);
      padding-bottom: var(--padding-xs);
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-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-h5--size);
    display: flex;
    justify-content: space-between;

    &:hover {
      --icon-opacity: 1;
    }
  }

  .facets__filters-wrapper:hover .facets__summary,
  .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
    opacity: var(--facets-hover-opacity);
  }

  .facets__filters-wrapper .facets__summary:hover,
  .facets__filters-wrapper .facets__panel[open] .facets__summary {
    opacity: 1;
  }

  .facets--horizontal .facets__summary {
    @media screen and (min-width: 750px) {
      font-size: var(--font-paragraph--size);
      justify-content: flex-start;
      height: var(--minimum-touch-target);
    }
  }

  .facets__summary .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
    margin-block: var(--margin-2xs);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  /* Facets - 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 {
    @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-link,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link {
    display: none;
    cursor: pointer;
    padding: var(--padding-xs);
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: var(--color-primary-hover);

    text-decoration: underline;
    text-decoration-color: var(--button-color);
  }

  .facets__clear-all-link--horizontal {
    height: var(--minimum-touch-target);
    padding-inline: var(--facets-form-horizontal-gap);
    min-width: var(--facets-clear-all-min-width);
  }

  .facets__clear-all-link--active {
    display: block;
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  .clear-filter:hover {
    text-decoration: underline;
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 750px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

  .facets__clear--active {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;
    white-space: nowrap;

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  .facets--horizontal .products-count-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: var(--color-foreground);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-xs);
    padding-inline-start: var(--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);
    }
  }

  /* Facets - Actions */
  .facets__drawer-actions {
    --to-top-gradient-background: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / var(--opacity-90)),
      rgb(var(--color-background-rgb) / var(--opacity-80)),
      rgb(var(--color-background-rgb) / var(--opacity-40)),
      transparent
    );

    position: sticky;
    bottom: 0;
    z-index: var(--facets-sticky-z-index);
    order: 1;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
    background-image: var(--to-top-gradient-background);
    background-color: var(--color-background);
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
    color: var(--button-color, inherit);
  }

  .facets__clear-all--active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: transform var(--animation-values), opacity var(--animation-values);
  }

  @starting-style {
    .facets__clear-all--active {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
  }

  .facets-horizontal-remove {
    display: flex;
    align-items: center;
  }

  .facets-horizontal-remove--active::before {
    content: '';
    border-inline-start: var(--style-border-width) solid var(--color-border);
    height: var(--font-paragraph--size);
    position: absolute;
  }

  /* Price filter: draggable dual-handle slider (Figma node 1290-14412),
     scoped to just this drawer per Ryan - price-filter.liquid's shared
     price-facet-component still renders its original typed min/max
     inputs everywhere else; this drawer's own script
     (sliderifyPriceFilters/buildPriceSlider in
     sections/hw-collection-tabs-cards.liquid) hides those inputs here
     and builds this UI on top of them instead, whether the
     price-facet-component came from this drawer's own server render or
     was fetched wholesale from a real collection page.
  */
  .hw-price-slider {
    padding: 20px 12px 4px;
  }

  .hw-price-slider__track {
    position: relative;
    height: 1px;
    background: #000;
    margin-inline: 5px;
  }

  /* Same "visual box smaller than the real interactive box" pattern as
     this file's own .variant-option__swatch-wrapper fix above - a 10px
     drag handle is too small a target on its own, so the actual
     pointer/keyboard target is a larger centered wrapper and only
     .hw-price-slider__handle-fill draws the 10px square Figma specs. */
  .hw-price-slider__handle {
    position: absolute;
    top: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    cursor: grab;
    touch-action: none;
  }

  .hw-price-slider__handle:active {
    cursor: grabbing;
  }

  .hw-price-slider__handle-fill {
    width: 10px;
    height: 10px;
    background: #000;
    border: 1px solid #000;
    pointer-events: none;
  }

  .hw-price-slider__labels {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 6px;
  }

  .hw-price-slider__label {
    font-family: var(--font-paragraph_7--family);
    font-style: var(--font-paragraph_7--style);
    font-weight: var(--font-paragraph_7--weight);
    font-size: var(--font-paragraph_7--size);
    line-height: var(--font-paragraph_7--line-height);
    text-transform: var(--font-paragraph_7--case);
    color: #000;
  }
/* END_SNIPPET:hw-tab-filter-drawer */

/* START_SNIPPET:hw-tab-sorting (INDEX:566) */
.sorting-filter__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--drawer-padding) 0;
    padding-block: var(--padding-sm);
    margin-inline-end: var(--margin-md);
    position: relative;
  }

  .sorting-filter__container .facets__label {
    font-size: var(--font-h4--size);
  }

  .sorting-filter__select-wrapper {
    display: flex;
    position: relative;
    border-radius: var(--variant-picker-button-radius);
    align-items: center;
    overflow: clip;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
    outline: none;
  }

  .sorting-filter__container .sorting-filter__select {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding-inline-end: var(--icon-size-2xs);
    text-align: right;

    /* Needed for Safari */
    text-align-last: right;
  }

  .sorting-filter__select .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .sorting-filter {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    color: var(--color-foreground);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-popover);
    width: max-content;
    min-width: var(--facets-panel-min-width);
    min-height: 0;

    transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    grid-template-rows: 1fr;
  }

  .sorting-filter__options-inner {
    display: flex;
    flex-direction: column;
    grid-row: 1 / span 2;
    gap: var(--gap-sm);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }

    @media screen and (min-width: 750px) {
      gap: 0;
    }
  }

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    align-items: center;
    min-width: 180px;
    max-width: 16em;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &:focus {
      border-radius: calc(var(--style-border-radius-popover) / 2);
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: 500;
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper .sorting-filter .facets__panel {
    padding-inline: 0;
    position: relative;
  }

  .facets-mobile-wrapper .sorting-filter .facets__status {
    display: none;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
    left: 0;
    right: unset;
  }

  .facets-mobile-wrapper .sorting-filter .facets__label {
    margin-inline-end: var(--margin-2xs);
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 749px) {
      padding: 0;
    }
  }

  .facets-toggle .sorting-filter__container .facets__label {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets-toggle .sorting-filter::before {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--drawer .sorting-filter {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:hw-tab-sorting */

/* START_SNIPPET:hw-text (INDEX:571) */
: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:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph,
  .text-block:not(.text-block--full-width).paragraph_2,
  .text-block:not(.text-block--full-width).paragraph_3,
  .text-block:not(.text-block--full-width).paragraph_4,
  .text-block:not(.text-block--full-width).paragraph_5,
  .text-block:not(.text-block--full-width).paragraph_6,
  .text-block:not(.text-block--full-width).label {
    /* 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.paragraph_2 > * {
    margin-block: var(--font-paragraph_2--spacing);
  }

  .text-block.paragraph_3 > * {
    margin-block: var(--font-paragraph_3--spacing);
  }

  .text-block.paragraph_4 > * {
    margin-block: var(--font-paragraph_4--spacing);
  }

  .text-block.paragraph_5 > * {
    margin-block: var(--font-paragraph_5--spacing);
  }

  .text-block.paragraph_6 > * {
    margin-block: var(--font-paragraph_6--spacing);
  }

  .text-block.label > * {
    margin-block: var(--font-label--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;
  }

  /* Background look only. Padding always comes from block settings via
     `hw-spacing-style` + assets/hw-spacing-style.css (same for every hw-text). */
  .text-block.hw-text-block.text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);
  }

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

  /* Clip to N lines (--hw-text-max-lines) without changing HTML structure. */
  .text-block.hw-text-block.hw-text--line-clamp {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--hw-text-max-lines, 3);
    line-clamp: var(--hw-text-max-lines, 3);
  }

  /* Override theme typography preset (--font-*--case) for non-custom presets. */
  .text-block.hw-text-block.hw-text--preset-case-overridden.case-none,
  .text-block.hw-text-block.hw-text--preset-case-overridden.case-none * {
    text-transform: none;
  }

  .text-block.hw-text-block.hw-text--preset-case-overridden.case-uppercase,
  .text-block.hw-text-block.hw-text--preset-case-overridden.case-uppercase * {
    text-transform: uppercase;
  }
/* END_SNIPPET:hw-text */

/* START_SNIPPET:hw-video (INDEX:577) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:hw-video */

/* START_SNIPPET:jumbo-text (INDEX:582) */
.jumbo-text__container {
    width: 100%;
  }

  footer .jumbo-text__container {
    pointer-events: none;
  }

  jumbo-text {
    display: block;
    font-family: var(--font-family, inherit);
    font-style: var(--font-style, normal);
    color: var(--color, inherit);
    font-weight: var(--font-weight, inherit);
    letter-spacing: var(--letter-spacing, -0.02em);
    line-height: var(--line-height, 1);
    opacity: 0;
    visibility: hidden;
    text-align: var(--text-align);
    text-box: var(--text-trim, trim-end cap text);
    text-transform: var(--text-transform, none);
    transition: opacity 0.3s ease;
    width: 100%;
    margin-left: var(--margin-left-nudge, 0);
    margin-right: var(--margin-right-nudge, 0);
    overflow: visible;
  }

  jumbo-text.ready {
    opacity: 1;
    visibility: visible;
  }

  jumbo-text[data-cap-text='true'] {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    text-box-edge: cap text;
  }

  .jumbo-text-line {
    display: inline-flex;
    white-space: pre;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Blur effect */
    .ready[data-text-effect='blur'] {
      filter: blur(20px);
      opacity: 0.5;
      scale: 1.05;
      transition: filter 1.6s var(--animation-timing-fade-in), opacity 1.3s var(--animation-timing-fade-in),
        scale 1.6s var(--animation-timing-fade-in);
    }

    .jumbo-text-visible[data-text-effect='blur'] {
      filter: blur(0);
      opacity: 1;
      scale: 1;
    }

    /* Reveal effect */
    .ready[data-text-effect='reveal'] {
      overflow: hidden;
    }

    .ready[data-text-effect='reveal'] .jumbo-text-line {
      transform: translateY(100%);
    }

    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line {
      transition: transform 0.5s var(--animation-timing-fade-in) calc(var(--line-index) * 0.05s);
      transform: translateY(0);
    }

    .jumbo-text-visible[data-text-effect='reveal'] {
      overflow: visible;
      transition: overflow 0s linear 0.75s;
    }
  }
/* END_SNIPPET:jumbo-text */

/* START_SNIPPET:list-filter (INDEX:585) */
.facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Hover state for checked checkboxes - targeting via adjacent sibling */
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
  }

  .facets .checkbox:not(.checkbox--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;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .facets--horizontal .sorting-filter .facets__status {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

    @media screen and (min-width: 750px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .facets__image-label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .facets__image-label:hover {
    font-weight: 500;
  }

  /* Filter-specific variant-option styles */
  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
    --focus-outline: var(--focus-outline-width) solid currentcolor;

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;
  }

  .facets__inputs-list-item--disabled .variant-option--swatches {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
  }

  .facets__inputs-list--swatches-grid .facets__inputs-list-item--disabled label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item--disabled .variant-option__button-label {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper
    .facets__inputs-list--swatches-grid
    .variant-option__button-label--has-swatch:has(input[type='checkbox']) {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

  .facets .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: auto;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .variant-option__button-label:hover {
    font-weight: 500;
  }

  /* Variant option images (filters) */
  .variant-option--images {
    --image-facet-border-width: var(--variant-picker-button-border-width);
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    position: relative;
    border-radius: var(--image-facet-border-radius);
    box-shadow: inset 0 0 0 var(--image-facet-border-width)
      rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));

    &:hover {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:checked):hover {
      --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

  .variant-option--images input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .variant-option--images {
    --image-facet-border-opacity: 0;

    opacity: var(--disabled-opacity);
    cursor: not-allowed;

    &:hover {
      --image-facet-border-opacity: 0;
    }

    img {
      opacity: var(--disabled-opacity);
    }

    input,
    label,
    .facets__image-label {
      cursor: not-allowed;
    }

    .facets__image-wrapper {
      border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
      border-radius: var(--image-facet-border-radius);
    }
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
  }

  /* Safari < 16.4 outline border-radius workaround - filter-specific */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:586) */
/* 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%;
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 8px;
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &[aria-current='true'] {
      .country {
        font-weight: 500;
      }
    }
  }

  .localization-form__list-item#no-results-message {
    grid-template-columns: 1fr;
    text-align: center;
    color: 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);
  }

  .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;
    field-sizing: content;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

    @media screen and (min-width: 750px) {
      height: 36px;
    }
  }

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:587) */
.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 .deferred-media__poster-image,
      .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:592) */
.overlay {
    position: absolute;
    inset: 0;
    z-index: var(--overlay-layer);
    pointer-events: none;
    border-radius: var(--overlay-border-radius, 0);
  }

  .overlay--solid {
    background: var(--overlay-color);
  }

  .overlay--gradient {
    background: linear-gradient(var(--overlay-direction), var(--overlay-color), var(--overlay-color--end));
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:pagination-controls (INDEX:593) */
.pagination {
    --pagination-size: 36px;
    --pagination-inset: 2px;
    --pagination-radius: 6;

    display: flex;
    justify-content: center;
    padding: var(--padding-xl) var(--padding-sm);
    margin-top: var(--padding-xl);
    position: relative;
  }

  .pagination__list {
    display: flex;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .pagination__item {
    width: var(--pagination-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }

  .pagination__link {
    display: grid;
    place-items: center;
    color: var(--color-foreground);
    text-decoration: none;
    width: 100%;
    height: 100%;
    user-select: none;
    position: relative;
    outline-color: var(--color-foreground);
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-normal);
    border-radius: calc(var(--pagination-radius) * 1px);
    transition: color var(--hover-transition-duration) var(--hover-transition-timing),
      opacity var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .pagination__link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .pagination__link--current {
    color: var(--color-background);
    font-weight: var(--font-weight-medium);
    cursor: default;
  }

  .pagination__link--gap {
    cursor: default;
    pointer-events: none;
  }

  .pagination__link--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination__link--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__link svg {
    width: 0.5rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  .pagination__item--mobile-only {
    display: none;
  }

  /* Fallback for browsers without anchor positioning support */
  @supports not (anchor-name: --pagination-active) {
    .pagination__link:not(.pagination__link--gap)::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      z-index: -1;
      opacity: 0;
      transition: background var(--hover-transition-duration) var(--hover-transition-timing),
        opacity var(--hover-transition-duration) var(--hover-transition-timing);
    }

    .pagination__link[aria-current='page']::before {
      background: var(--color-foreground);
      opacity: 1;
    }

    .pagination__link:hover:not([aria-current='page'], .pagination__link--gap, .pagination__link--disabled)::before {
      opacity: 1;
    }
  }

  /* Modern approach with anchor positioning */
  @supports (anchor-name: --pagination-active) {
    .pagination__list::before {
      content: '';
      z-index: -1;
      position: absolute;
      width: calc(var(--pagination-size) - (2 * var(--pagination-inset)));
      aspect-ratio: 1;
      pointer-events: none;
      opacity: 0;
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      transition: left var(--hover-transition-duration) var(--hover-transition-timing),
        top var(--hover-transition-duration) var(--hover-transition-timing);
    }

    /* Hide hover indicator on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .pagination__list::before {
        content: unset;
      }
    }

    .pagination__list:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled))::before {
      opacity: 1;
    }

    /* Style current page directly */
    .pagination__link[aria-current='page']::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: var(--color-foreground);
      z-index: -1;
    }

    .pagination__list
      .pagination__item:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)) {
      anchor-name: --pagination-hover;
    }

    /* Position hover indicator using anchor */
    .pagination__list::before {
      position-anchor: --pagination-hover;
      left: calc(anchor(left) + var(--pagination-inset));
      top: calc(anchor(top) + var(--pagination-inset));
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after,
    .pagination__item--gap + .pagination__item .pagination__link::after {
      position: absolute;
      content: '';
      pointer-events: auto;
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after {
      inset: 0 -50% 0 100%;
    }

    .pagination__item--gap + .pagination__item .pagination__link::after {
      inset: 0 100% 0 -50%;
    }
  }

  @media screen and (max-width: 749px) {
    .pagination {
      --pagination-size: 44px;
      --pagination-inset: 5px;

      padding: var(--padding-lg) var(--padding-sm);
    }

    .pagination__link {
      font-size: var(--font-size--sm);
    }

    .pagination__item--mobile-hide {
      display: none;
    }

    .pagination__item--mobile-only {
      display: grid;
    }

    .pagination__item:has(.pagination__link--gap) {
      width: calc(var(--pagination-size) * 0.5);
    }
  }
/* END_SNIPPET:pagination-controls */

/* START_SNIPPET:password-layout-styles (INDEX:594) */
.password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .password-dialog {
    max-width: 100vw;
    max-height: 100svh;
    width: 100vw;
    height: 100svh;
    border: none;
    transition: opacity var(--animation-values), display var(--animation-speed) allow-discrete,
      overlay var(--animation-speed) allow-discrete;

    &::backdrop {
      display: none;
    }
  }

  .password-dialog[open] {
    opacity: 1;
    top: 0;
    left: 0;
  }

  @starting-style {
    .password-dialog[open] {
      opacity: 0;
    }
  }

  .password-dialog:not([open]) {
    opacity: 0;
  }

  @starting-style {
    .password-dialog:not([open]) {
      opacity: 1;
    }
  }

  .password-dialog__close-button {
    cursor: pointer;
  }

  .password-dialog__header {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--padding-lg);
    z-index: var(--layer-raised);
  }

  .password-dialog__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
    height: 100%;
    transition: transform var(--animation-values);
  }

  .password-dialog__content .email-signup__message {
    padding-block-start: var(--padding-xl);
  }

  .password-dialog[open] .password-dialog__content {
    transform: translateY(0);
  }

  @starting-style {
    .password-dialog[open] .password-dialog__content {
      transform: translateY(1em);
    }
  }

  .password-dialog:not([open]) .password-dialog__content {
    transform: translateY(1em);
  }

  @starting-style {
    .password-dialog:not([open]) .password-dialog__content {
      transform: translateY(0);
    }
  }

  .storefront-password-form {
    max-width: 400px;
    width: 100%;
  }

  .email-signup__input-group,
  .password-dialog__submit-button {
    width: 100%;

    @media screen and (min-width: 750px) {
      width: auto;
    }
  }
/* END_SNIPPET:password-layout-styles */

/* START_SNIPPET:predictive-search-products-list (INDEX:596) */
.predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }
/* END_SNIPPET:predictive-search-products-list */

/* START_SNIPPET:predictive-search-resource-carousel (INDEX:597) */
.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:price-filter (INDEX:598) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }
  .price-facet--horizontal {
    min-width: 360px;
  }

  .price-facet__inputs-wrapper {
    display: flex;
    flex-direction: row;
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  @container (max-width: 199px) {
    .price-facet__inputs-wrapper {
      flex-wrap: wrap;
    }
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
  }

  .price-facet__input::placeholder {
    color: var(--facets-input-label-color);
  }

  .price-facet__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-paragraph--size);
  }

  .price-facet__highest-price {
    padding: var(--padding-xs) 0 var(--padding-sm);
  }

  .price-facet__highest-price--horizontal {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .price-facet__label {
    top: 0;
    left: 0;
    color: var(--facets-input-label-color);
    padding: var(--input-padding-y) var(--input-padding-x);
    transform: none;
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:product-card (INDEX:600) */
.product-card__placeholder-image svg {
    height: 100%;
  }

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-grid (INDEX:601) */
.product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    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;
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-information-content (INDEX:602) */
.product-information {
    gap: var(--gap) 0;
  }

  /* Base grid layout */
  .product-information__grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }

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

  .product-information__media {
    order: 0;
    width: 0;
    min-width: 100%;
  }

  .product-information__media .product-media-gallery__placeholder-image {
    width: 100%;
    height: 100%;
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .product-information__media {
      grid-column: 1 / -1;
    }

    .product-details {
      grid-column: 2 / 3;
    }
  }

  /* Desktop styles */
  @media screen and (min-width: 750px) {
    .product-information__grid {
      grid-column: 2;
    }

    /* Position when there is no media */
    .product-information__grid.product-information--media-none {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

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

        .product-information__media {
          padding-right: calc(var(--gap, 0) / 2);
        }

        .product-details {
          padding-left: calc(var(--gap, 0) / 2);
        }

        &:has(.media-gallery--extend) {
          grid-column: 1 / 3;
        }
      }

      /* Media on the right side */
      &.product-information--media-right {
        grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;

        .product-information__media {
          padding-left: calc(var(--gap, 0) / 2);
          order: 1;
        }

        .product-details {
          padding-right: calc(var(--gap, 0) / 2);
          order: 0;
        }

        &:has(.media-gallery--extend) {
          grid-column: 2 / -1;
        }
      }

      /* Equal width columns */
      &.product-information__grid--half,
      &.product-information__grid--half:has(.media-gallery--extend) {
        grid-column: 1 / -1;
        grid-template-columns:
          var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc(
            var(--full-page-grid-central-column-width) / 2
          )
          var(--full-page-grid-margin);

        &.product-information--media-left {
          .product-information__media {
            grid-column: 2 / 3;

            &:has(.media-gallery--extend) {
              grid-column: 1 / 3;
            }
          }

          .product-details {
            grid-column: 3 / 4;
          }
        }

        &.product-information--media-right {
          .product-information__media {
            grid-column: 3 / 4;

            &:has(.media-gallery--extend) {
              grid-column: 3 / -1;
            }
          }

          .product-details {
            grid-column: 2 / 3;
          }
        }
      }
    }

    /* Handle full width section */
    .section--full-width {
      .product-information__grid:not(.product-information--media-none) {
        &.product-information--media-left,
        &.product-information--media-right {
          grid-column: 1 / -1;
        }

        &.product-information--media-left .product-details {
          padding-inline-end: var(--padding-lg);
        }

        &.product-information--media-right .product-details {
          padding-inline-start: var(--padding-lg);
        }

        &.product-information__grid--half.product-information--media-left {
          .product-information__media {
            grid-column: 1 / 3;
          }

          .product-details {
            grid-column: 3 / -1;
          }
        }

        &.product-information__grid--half.product-information--media-right {
          .product-information__media {
            grid-column: 3 / -1;
          }

          .product-details {
            grid-column: 1 / 3;
          }
        }
      }
    }
  }

  /* Wider sidebar for large screens */
  @media screen and (min-width: 1200px) {
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-template-columns: 2fr 1fr;
    }

    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      grid-template-columns: 1fr 2fr;
    }
  }

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

  @media screen and (min-width: 1600px) {
    .product-information__grid--limit-details .product-details > .group-block {
      --details-max-width: 32rem;
    }
  }

  /* If the header is sticky, make product details content stick underneath the header */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-media-gallery-content (INDEX:603) */
.dialog-zoomed-gallery__dialog {
    background-color: var(--color-background);
  }

  .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: 90%;

        .product-media img {
          object-fit: cover;
        }
      }
    }
  }

  .dialog-zoomed-gallery__close-button {
    color: #fff;
    mix-blend-mode: difference;
    z-index: var(--layer-raised);
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  /* Mobile thumbnails styling */
  @media screen and (max-width: 749px) {
    .media-gallery__mobile-controls[thumbnails] {
      --thumbnail-width: 44px;
    }

    .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail {
      width: var(--thumbnail-width);
      height: auto;
    }
  }

  .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-out;
  }

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

  .dialog-zoomed-gallery__dialog {
    view-transition-name: zoom-dialog-ui;
  }

  :root:active-view-transition .dialog-zoomed-gallery__dialog {
    background-color: transparent;
  }

  ::view-transition-group(zoom-dialog-ui) {
    z-index: calc(var(--layer-overlay) + 1);
  }

  ::view-transition-old(gallery-item-open),
  ::view-transition-new(gallery-item-open) {
    animation-timing-function: step-start;
  }

  ::view-transition-old(gallery-item-close),
  ::view-transition-new(gallery-item-close) {
    animation-timing-function: step-end;
  }

  @media screen and (min-width: 750px) {
    :root:active-view-transition .product-media__image {
      background-color: transparent;
    }
  }

  ::view-transition-group(gallery-item-open),
  ::view-transition-group(gallery-item-close) {
    z-index: var(--layer-overlay);
    border-radius: var(--gallery-media-border-radius);
    overflow: clip;
  }

  ::view-transition-group(gallery-item-open) {
    animation-timing-function: var(--spring-d300-b0-easing);
    animation-duration: var(--spring-d300-b0-duration);
  }

  ::view-transition-group(gallery-item-close) {
    animation-timing-function: var(--spring-d220-b0-easing);
    animation-duration: var(--spring-d220-b0-duration);
  }

  @media screen and (max-width: 749px) {
    ::view-transition-group(gallery-item-open),
    ::view-transition-group(gallery-item-close) {
      animation-timing-function: step-start;
      animation-duration: 0.1s;
    }

    ::view-transition-new(gallery-item-open) {
      animation: fade-in var(--spring-d180-b0-duration) var(--spring-d180-b0-easing) forwards;
      animation-timing-function: var(--spring-d180-b0-easing);
      animation-duration: var(--spring-d180-b0-duration);
    }

    ::view-transition-old(gallery-item-close) {
      animation: fade-out 0.08s linear forwards;
    }
  }

  @keyframes fade-in {
    from {
      scale: 0.98;
      opacity: 0.8;
    }
  }

  @keyframes fade-out {
    to {
      opacity: 0;
    }
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-media (INDEX:604) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

  .product-media__image {
    object-position: var(--focal-point, center center);
  }

  /*** Media border-radius feature ****/
  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-container,
    .media-gallery--grid .product-media > * {
      border-radius: var(--media-radius, 0);
      overflow: hidden;
    }

    /* When the CAROUSEL is on the LEFT side */
    .product-information:not(.product-information--media-right)
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    /* When the CAROUSEL is on the RIGHT side */
    .product-information.product-information--media-right
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* When the GRID is on the LEFT side */
    .product-information:not(.product-information--media-right) {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(odd)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media
        > * {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    /* When the GRID is on the RIGHT side */
    .product-information.product-information--media-right {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(even)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(odd))
        .product-media
        > * {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
/* END_SNIPPET:product-media */

/* START_SNIPPET:quantity-selector (INDEX:605) */
.quantity-selector-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .price-per-item {
    display: block;
    color: var(--color-foreground);
    font-size: var(--font-size--sm);
    font-weight: normal;
  }
/* END_SNIPPET:quantity-selector */

/* START_SNIPPET:quick-add-modal (INDEX:606) */
#quick-add-dialog {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--quick-add-modal-width);
      height: var(--quick-add-modal-height);
      max-width: none;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      .hw-variant-picker,
      .hw-variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          .hw-variant-picker,
          .hw-variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal */

/* START_SNIPPET:quick-add (INDEX:607) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));

    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;
  }

  .quick-add__button {
    display: var(--quick-add-mobile-display, none);
    align-items: center;
    background: linear-gradient(var(--color-background) 0 100%) padding-box;
    padding: 0;
    border-radius: 50px;
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--color-foreground);
    pointer-events: all;
    position: absolute;
    right: max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))));
    bottom: max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))));
    backdrop-filter: blur(20px) saturate(180%);

    &:hover {
      scale: 1.03;

      /* Hover stabilizer: extends hit area to maintain hover state */
      &::before {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: -1;
      }
    }

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: grid;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;
    }
  }

  .quick-add__button .add-to-cart-text {
    background: var(--color-background);
    overflow: hidden;
    border-radius: 50px;
    height: 100%;
    gap: 0;
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button .add-to-cart-icon {
    /* account for border width */
    height: 100%;
    width: calc(var(--button-size-md) - 4px);
  }

  .quick-add__button .add-to-cart-text__content {
    display: grid;
    grid-template-columns: 0fr;

    & > span {
      min-width: 0;

      span {
        padding-right: var(--padding-sm);
        opacity: 0;
        display: inline-block;
        filter: blur(2px);
        translate: 0.5ch 0;
      }
    }
  }

  .quick-add__button[data-added='true'] .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button[data-added='true'] .add-to-cart-text--added {
    translate: 0 0;
    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%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  .quick-add__button:is(:hover, :focus-visible) {
    .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-add__button .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .quick-add__button {
      transition-property: scale, translate, opacity;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }

    .quick-add__button:is(:hover, :focus-visible) {
      .add-to-cart-text__content,
      .add-to-cart-text__content span span {
        transition-delay: var(--animation-speed);
      }
    }

    .quick-add__button .add-to-cart-text__content {
      transition-property: grid-template-columns;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      span span {
        transition-property: opacity, filter, translate;
        transition-duration: var(--animation-speed-slow);
        transition-timing-function: var(--ease-out-quad);
      }
    }
  }
/* END_SNIPPET:quick-add */

/* START_SNIPPET:resource-card (INDEX:608) */
.resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-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:609) */
.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:613) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    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;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  .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;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

    &:hover {
      color: var(--color-foreground);
    }

    &:active {
      transform: scale(0.9);
      transition: transform 100ms var(--animation-timing-active);
    }

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-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);
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:614) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  @media screen and (max-width: 749px) {
    .search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    [data-menu-style='drawer'] .search-action--hidden-on-drawer {
      display: none;
    }

    [data-menu-style='menu'] .search-action--hidden-on-menu {
      display: none;
    }
  }

  [data-menu-style='menu'] .header__column--left .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .header__column--right .search-action--text {
      margin-inline: 0;
    }

    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:search */

/* START_SNIPPET:section (INDEX:615) */
.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[data-hw-transparent-header]):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:skip-to-content-link (INDEX:617) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    left: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */

/* START_SNIPPET:slideshow-arrow (INDEX:619) */
.slideshow-control--large {
    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .svg-wrapper,
    svg {
      width: var(--slideshow-controls-icon);
      height: var(--slideshow-controls-icon);
    }
  }

  /* Slideshow control shape styles */
  .slideshow-control.slideshow-control--shape-square,
  .slideshow-control.slideshow-control--shape-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
  }

  .slideshow-control.slideshow-control--shape-circle {
    border-radius: 50%;
  }

  .slideshow-control.slideshow-control--shape-square {
    border-radius: 0;
  }

  .slideshow-control .icon-caret {
    rotate: -90deg;
  }
/* END_SNIPPET:slideshow-arrow */

/* START_SNIPPET:slideshow-controls (INDEX:621) */
slideshow-controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    scrollbar-width: none;
    min-height: var(--minimum-touch-target);
    grid-area: controls;

    &[controls-on-media] {
      position: absolute;
      bottom: 0;
    }
  }

  slideshow-controls::-webkit-scrollbar {
    display: none;
  }

  slideshow-controls button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

    display: inline-block;
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
    cursor: pointer;
  }

  slideshow-controls .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-xs);
  }

  slideshow-controls[pagination-position='center'] {
    align-items: center;
    justify-content: center;
  }

  slideshow-controls[pagination-position='center'][thumbnails] {
    width: 100%;
  }

  slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
      display: flex;
      flex-direction: column;
      height: 0;
      min-height: 100%;

      .slideshow-controls__thumbnails-container {
        overflow: hidden auto;
      }

      &:not([controls-on-media]) {
        .slideshow-controls__thumbnails-container {
          position: sticky;
          top: var(--sticky-header-offset, 0);
        }

        .slideshow-controls__thumbnails {
          padding-block-start: var(--focus-outline-offset);
        }
      }
    }

    slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails {
      flex-direction: column;
    }

    slideshow-controls:not([controls-on-media]) {
      &:is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails {
        padding-block: var(--padding-2xs);
      }

      &[pagination-position='right'] .slideshow-controls__thumbnails {
        padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }

      &[pagination-position='left'] .slideshow-controls__thumbnails {
        padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }
    }
  }

  slideshow-controls:not([controls-on-media])[icons-on-media] {
    &[pagination-position='right'] {
      justify-content: flex-end;
    }

    &[pagination-position='left'] {
      justify-content: flex-start;
    }
  }

  slideshow-controls[controls-on-media] {
    z-index: var(--layer-raised);

    &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
      --color-foreground: #fff;
      --color-foreground-rgb: var(--color-white-rgb);
    }

    &[pagination-position='right'] {
      right: 0;
    }

    &[pagination-position='left'] {
      left: 0;
    }

    &[pagination-position='center'] {
      width: 100%;
    }

    &:not([thumbnails])[pagination-position='left'] {
      width: fit-content;
      align-self: flex-start;
    }

    &:not([thumbnails])[pagination-position='right'] {
      width: fit-content;
      align-self: flex-end;
    }
  }

  .slideshow-controls__arrows {
    display: flex;
    justify-content: space-between;
    height: var(--minimum-touch-target);
    grid-area: arrows;

    button {
      padding: 0 var(--padding-xs);
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    list-style: none;

    button {
      --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
      --color-active: var(--color-foreground);
      --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    }
  }

  slideshow-controls:has(.slideshow-controls__dots),
  slideshow-component[autoplay] slideshow-controls {
    mix-blend-mode: difference;
  }

  .slideshow-controls__dots {
    gap: 0.6rem;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: 3rem;
    overflow: hidden;

    button {
      --size: 0.56rem;

      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      margin: calc(var(--size) / -2);
      font-size: 0;
      border-radius: calc(var(--size));

      &::after {
        content: '';
        display: block;
        background-color: var(--color);
        height: var(--size);
        width: var(--size);
        border-radius: calc(var(--size) / 2);
        box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15);

        @supports not (view-timeline-axis: inline) {
          &[aria-selected='true'] {
            --color: var(--color-active);
          }
        }

        &:hover {
          --color: var(--color-hover);
        }
      }

      &[aria-selected='true'] {
        --color: var(--color-active);

        &::after {
          box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4);
        }
      }
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    &:only-child {
      margin-inline: auto;
    }
  }

  .slideshow-controls__counter {
    color: var(--color-foreground);
    background-color: rgb(0 0 0 / 40%);
    width: auto;
    border-radius: 2rem;
    padding: 0.3rem var(--padding-sm);
    margin-inline: var(--margin-sm);
    backdrop-filter: blur(10px);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--xs);

    .slash {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
      padding-inline: var(--padding-2xs);
      margin-block-start: -0.1rem;
    }
  }

  .slideshow-control[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Slideshow Thumbnails */
  .slideshow-controls__thumbnails-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-x: scroll;
    scrollbar-width: none;
  }



  .slideshow-controls__thumbnails {
    display: inline-flex;
    padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
    padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
    gap: var(--gap-xs);
    margin-inline: auto;
    height: fit-content;

    .slideshow-control {
      border-radius: var(--thumbnail-radius, var(--media-radius));
      width: clamp(44px, 7vw, var(--thumbnail-width));
      height: auto;
      aspect-ratio: var(--aspect-ratio);

      img {
        height: 100%;
        object-fit: cover;
        border-radius: var(--thumbnail-radius, var(--media-radius));
      }

      &:is([aria-selected='true']) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: calc(var(--focus-outline-offset) / 2);
        border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
      }
    }
  }
  @media screen and (max-width: 749px) {
    .hw-product-media-gallery--extend-mobile .slideshow-controls__thumbnails {
      padding-inline: 0;
    }
  }

  .slideshow-controls__thumbnail {
    position: relative;
  }

  .slideshow-controls__thumbnail-badge {
    position: absolute;
    top: var(--padding-2xs);
    right: var(--padding-2xs);
    width: clamp(16px, 10%, 20px);
    height: clamp(16px, 10%, 20px);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .slideshow-controls__thumbnail-badge svg {
    width: 60%;
    height: 60%;
    fill: var(--color-foreground);
    opacity: 0.6;
  }
/* END_SNIPPET:slideshow-controls */

/* START_SNIPPET:slideshow (INDEX:623) */
slideshow-slides {
    align-items: var(--slideshow-align-items, normal);
  }

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }
/* END_SNIPPET:slideshow */

/* START_SNIPPET:sorting (INDEX:624) */
.sorting-filter__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--drawer-padding) 0;
    padding-block: var(--padding-sm);
    margin-inline-end: var(--margin-md);
    position: relative;
  }

  .sorting-filter__container .facets__label {
    font-size: var(--font-h4--size);
  }

  .sorting-filter__select-wrapper {
    display: flex;
    position: relative;
    border-radius: var(--variant-picker-button-radius);
    align-items: center;
    overflow: clip;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
    outline: none;
  }

  .sorting-filter__container .sorting-filter__select {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding-inline-end: var(--icon-size-2xs);
    text-align: right;

    /* Needed for Safari */
    text-align-last: right;
  }

  .sorting-filter__select .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .sorting-filter {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    color: var(--color-foreground);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-popover);
    width: max-content;
    min-width: var(--facets-panel-min-width);
    min-height: 0;

    transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    grid-template-rows: 1fr;
  }

  .sorting-filter__options-inner {
    display: flex;
    flex-direction: column;
    grid-row: 1 / span 2;
    gap: var(--gap-sm);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }

    @media screen and (min-width: 750px) {
      gap: 0;
    }
  }

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    align-items: center;
    min-width: 180px;
    max-width: 16em;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &:focus {
      border-radius: calc(var(--style-border-radius-popover) / 2);
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: 500;
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper .sorting-filter .facets__panel {
    padding-inline: 0;
    position: relative;
  }

  .facets-mobile-wrapper .sorting-filter .facets__status {
    display: none;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
    left: 0;
    right: unset;
  }

  .facets-mobile-wrapper .sorting-filter .facets__label {
    margin-inline-end: var(--margin-2xs);
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 749px) {
      padding: 0;
    }
  }

  .facets-toggle .sorting-filter__container .facets__label {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets-toggle .sorting-filter::before {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--drawer .sorting-filter {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:text (INDEX:632) */
: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-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

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

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:variant-main-picker (INDEX:648) */
/* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  /* Dropdown variant option styles */
  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
  }

  .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 alignment modifiers */
  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }
/* END_SNIPPET:variant-main-picker */

/* START_SNIPPET:variant-swatches (INDEX:649) */
swatches-variant-picker-component {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: var(--product-swatches-alignment-mobile);

    @media screen and (min-width: 750px) {
      justify-content: var(--product-swatches-alignment);
    }

    --overflow-list-padding-block: calc(
        var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
      )
      calc(var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width));
    --overflow-list-padding-inline: calc(
        var(--product-swatches-padding-inline-start) + var(--focus-outline-offset) + (1.5 * var(--focus-outline-width))
      )
      calc(var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width));

    overflow-list::part(list) {
      gap: var(--gap-sm);
    }
  }

  .hidden-swatches__count {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;

    &::before {
      /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */
      counter-reset: overflow-count var(--overflow-count);
      content: '+' counter(overflow-count);
      line-height: 1;
      cursor: pointer;
    }
  }

  .hidden-swatches__count:hover {
    color: var(--color-foreground-rgb);
  }
/* END_SNIPPET:variant-swatches */

/* START_SNIPPET:video (INDEX:650) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:video */

/* START_SNIPPET:volume-pricing-info (INDEX:651) */
.volume-pricing-info {
    display: inline-flex;
  }

  .volume-pricing-info__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground-secondary);
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
  }

  .volume-pricing-info__button:hover {
    color: var(--color-foreground);
  }

  .volume-pricing-info__button .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .volume-pricing-info__button--with-label {
    width: auto;
    gap: var(--gap-sm);
  }

  .volume-pricing-info__popover {
    --volume-pricing-popover-max-width: 320px;
    --volume-pricing-popover-spacing: 8px;
    --volume-pricing-popover-viewport-margin: 16px;

    min-inline-size: 280px;
    max-inline-size: var(--volume-pricing-popover-max-width);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  /* Native anchor positioning for supported browsers */
  .volume-pricing-info__popover {
    inset: unset;
    top: calc(anchor(bottom) + var(--volume-pricing-popover-spacing));
    left: anchor(left);
  }

  @supports (position-try-fallbacks: --top-left) {
    .volume-pricing-info__popover {
      position-try-fallbacks: --top-left;
    }

    @position-try --top-left {
      top: calc(anchor(top) - var(--volume-pricing-popover-spacing));
      bottom: auto;
      transform: translateY(-100%);
    }
  }

  /* Fallback positioning using custom properties */
  @supports not (position-anchor: --volume-pricing-trigger) {
    .volume-pricing-info__popover {
      position: fixed;
      top: calc(var(--anchor-bottom) * 1px + var(--volume-pricing-popover-spacing));
      left: max(
        var(--volume-pricing-popover-viewport-margin),
        min(
          var(--anchor-left) * 1px,
          100vw - var(--volume-pricing-popover-max-width) - var(--volume-pricing-popover-viewport-margin)
        )
      );
    }
  }

  .volume-pricing-info__popover:popover-open {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .volume-pricing-info__popover:popover-open {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .volume-pricing-info__rules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    padding: var(--padding-md);
    font-size: var(--font-size--xs);
  }

  .volume-pricing-info__rules,
  .volume-pricing-info__rules > span {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .volume-pricing-info__table {
    display: flex;
    flex-direction: column;
  }

  .volume-pricing-info__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size--sm);
    background: var(--color-background);
    border-inline-start: 3px solid transparent;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .volume-pricing-info__row:nth-child(odd) {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing-info__row--active {
    border-inline-start-color: var(--color-foreground);
    font-weight: var(--font-weight-medium);
  }

  .volume-pricing-info__quantity {
    color: var(--color-foreground);
  }

  .volume-pricing-info__price {
    display: flex;
    align-items: center;
    color: var(--color-foreground);
  }

  .volume-pricing-info__checkmark {
    display: none;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-primary);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */