/** Shopify CDN: Minification failed

Line 6844:15 Expected identifier but found whitespace
Line 6844:17 Unexpected "{"
Line 6844:27 Expected ":"

**/
/* START_SECTION:header-announcements (INDEX:12) */
.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:13) */
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;
    /* TD CHANGE START: style-only contain — layout contain traps fixed drawer kids */
    contain: style;
    /* TD CHANGE END: style-only contain — layout contain traps fixed drawer kids */
    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 transparent text color 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: var(--color-transparent-text);
      --color-foreground-rgb: var(--color-transparent-text-rgb);
      --color-border: var(--color-transparent-text);
      --color-border-rgb: var(--color-transparent-text-rgb);
      --color-primary-button-background: var(--color-transparent-text);
      --color-primary-button-text: var(--color-transparent-text-contrast);
    }

    /* Swap the cart bubble in transparent state only when using the default
       style. Custom bubble colors apply unchanged across header states. */
    &[data-bubble-style='default']:not([data-sticky-state='active']):not(
        :has(.menu-list__link:is(:hover, [aria-expanded='true']))
      )
      .header__row {
      --cart-bubble-background: var(--color-transparent-text, var(--cart-bubble-background-fallback));
      --cart-bubble-text: var(--color-transparent-text-contrast, var(--cart-bubble-text-fallback));
    }

    /* Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link: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-background='top']:hover .header__row--top,
  [data-transparent-background='top']:focus-within .header__row--top,
  [data-transparent-background='both']:hover .header__row--top,
  [data-transparent-background='both']:focus-within .header__row--top {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

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

  .header-section {
    position: relative;
    /* TD CHANGE START: keep header/drawer above page content */
    z-index: var(--layer-menu-drawer);
    /* TD CHANGE END: keep header/drawer above page content */
  }

  /* 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;
    /* TD CHANGE START: keep sticky header above page content while the drawer is open */
    z-index: var(--layer-menu-drawer);
    /* TD CHANGE END: keep sticky header above page content while the drawer is open */
  }

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

  /* TD CHANGE START: skip sticky-header view transition so fixed drawer kids stay
   * viewport-positioned. */
  .header[data-sticky-state='active'] {
    view-transition-name: none;
  }
  /* TD CHANGE END: skip sticky-header view transition so fixed drawer kids stay
   * viewport-positioned. */

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

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

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

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

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

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

  /* When top row has transparent background, swap underlay to merchant's chosen color at full opacity */
  [data-transparent-background='top']:hover,
  [data-transparent-background='top']:focus-within,
  [data-transparent-background='both']:hover,
  [data-transparent-background='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-background-top-row: var(--color-background);
    }
  }

  /* When bottom row has transparent background, swap underlay to merchant's chosen color at full opacity */
  [data-transparent-background='bottom']:hover,
  [data-transparent-background='bottom']:focus-within,
  [data-transparent-background='both']:hover,
  [data-transparent-background='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-background-bottom-row: var(--color-background);
    }
  }

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

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

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

  .header__row {
    /* The account component uses a different background color, but we need to override it to inherit the color of the header row */
    --color-account-icon: var(--color-foreground);

    position: relative;

    /* Overwrite color from section settings, background is controlled by the underlays */
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;

    &:has(.mega-menu__list:hover),
    &:has(.menu-list__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(--border-bottom-color, var(--color-border));
  }

  @media screen and (max-width: 749px) {
    .header__row--top:not(.divider--page-width),
    .header__row--top.divider--page-width .header__columns {
      border-bottom-width: var(--border-bottom-width-mobile);
      border-bottom-color: var(--border-bottom-color-mobile);
    }
  }

  #header-component[data-menu-style='drawer'] .header__row--top:not(.divider--page-width),
  #header-component[data-menu-style='drawer'] .header__row--top.divider--page-width .header__columns {
    border-bottom-width: var(--border-bottom-width-mobile);
    border-bottom-color: var(--border-bottom-color-mobile);
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* TD CHANGE START: hide bar search when drawer footer has its own.
   * data-menu-style is set in JS after paint, so mobile also uses a viewport
   * query — otherwise the icon flashes before the attribute lands. */
  @media screen and (max-width: 749px) {
    #header-component .header__column > .search-action {
      display: none;
    }
  }

  #header-component[data-menu-style='drawer'] .header__column > .search-action {
    display: none;
  }
  /* TD CHANGE END: hide bar search when drawer footer has its own */

  /* 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-actions__action is excluded: cart and account share this class inside the same
        column, so including it dims whichever icon isn't hovered instead of the hovered one. */
    .header__column:has(header-menu:hover),
    .header__column:has(.header__icon--menu:hover) {
      header-menu: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);
  }

  /* TD CHANGE START: keep fixed drawer kids viewport-positioned while open */
  .header:has(#Details-menu-drawer-container[open]),
  .header:has(#Details-menu-drawer-container.menu-open) {
    view-transition-name: none;
    contain: style;
  }
  /* TD CHANGE END: keep fixed drawer kids viewport-positioned while open */

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

  /* 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);
    /* TD CHANGE START: pin to the trigger’s end edge (localization sits in the right column) */
    right: 0;
    /* TD CHANGE END: pin to the trigger’s end edge (localization sits in the right column) */
    z-index: calc(var(--layer-header-menu) + 1);
  }

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

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

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

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

  .dropdown-localization .language-selector:where(:not(.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_BLOCK:_announcement (INDEX:82) */
.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_SNIPPET:accordion-custom-component (INDEX:198) */
accordion-custom {
    details {
      &::details-content,
      .details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        interpolate-size: allow-keywords;
        transition: content-visibility var(--animation-speed-slow) allow-discrete,
          padding-block var(--animation-speed-slow) var(--animation-easing),
          opacity var(--animation-speed-slow) var(--animation-easing),
          block-size var(--animation-speed-slow) var(--animation-easing);
      }

      /* Disable transitions when the content toggle is not caused by the direct user interaction, e.g. opening the filters on mobile. */
      &:not(:focus-within)::details-content,
      &:not(:focus-within) .details-content {
        transition: none;
      }

      &:not([open]) {
        &::details-content,
        .details-content {
          padding-block: 0;
        }
      }

      &[open] {
        &::details-content,
        .details-content {
          opacity: 1;
          block-size: auto;

          @starting-style {
            block-size: 0;
            opacity: 0;
            overflow-y: clip;
          }

          &:focus-within {
            overflow-y: visible;
          }
        }
      }
    }
  }

  accordion-custom[data-disable-on-mobile='true'] summary {
    @media screen and (max-width: 749px) {
      cursor: auto;
    }
  }

  accordion-custom[data-disable-on-desktop='true'] summary {
    @media screen and (min-width: 750px) {
      cursor: auto;
    }
  }
/* END_SNIPPET:accordion-custom-component */
/* START_SNIPPET:background-media (INDEX:200) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */
/* START_SNIPPET:cart-bubble (INDEX:209) */
.cart-bubble {
    --cart-padding: 0.2em;

    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    border-width: 0;
    display: flex;
    line-height: normal;
    align-items: center;
    justify-content: center;
    color: var(--cart-bubble-text, var(--cart-bubble-text-fallback));
    padding-inline: var(--cart-padding);
  }

  .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
  }

  .cart-bubble[data-maintain-ratio] .cart-bubble__background {
    border-radius: var(--style-border-radius-50);
  }

  .cart-bubble__background {
    position: absolute;
    inset: 0;
    background-color: var(--cart-bubble-background, var(--cart-bubble-background-fallback));
    border-radius: var(--style-border-radius-lg);
  }

  .cart-bubble__text {
    font-size: var(--font-size--3xs);
    z-index: var(--layer-flat);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:cart-bubble */
/* START_SNIPPET:cart-drawer (INDEX:210) */
cart-drawer-component {
    --cart-drawer-padding: var(--theme-drawer-padding);
    --font-paragraph--line-height: 1;
    display: contents;
  }

  .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .cart-drawer__inner > .cart-items-component {
    flex: 1;
    min-height: 0;
    height: auto;
  }

  .cart-drawer__content {
    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__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    overflow-y: auto;
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer__close-button--empty {
    margin-inline-start: auto;
  }

  .cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-lg);

    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl);
    padding: var(--cart-drawer-summary-padding);
    margin-top: auto;
    background-color: var(--color-background);
    /* stylelint-disable-next-line color-named */
    mask-image: linear-gradient(to bottom, transparent, black var(--cart-drawer-summary-padding));

    @media screen and (min-width: 750px) {
      --cart-drawer-summary-padding: var(--padding-2xl);
    }
  }

  .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow: unset;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
    border-block-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__items {
    padding-inline: 0;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__items {
    padding-inline: 0;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .theme-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }
/* END_SNIPPET:cart-drawer */
/* START_SNIPPET:chat-drawer (INDEX:214) */
/* Pin the chat's mobile/desktop boundary so the theme and the chat agree
     on where standalone mode kicks in. Must stay in sync with the @media
     query below — @shopify/storefront-components reads this value once at
     init and uses it to decide when to force standalone mode. */
  shopify-chat {
    --shopify-chat-breakpoint: 768px;
  }

  shopify-chat[mode='managed'] {
    position: static;
    height: 100%;
  }

  .theme-drawer__dialog:has(shopify-chat[mode='standalone'][open]) {
    z-index: calc(var(--layer-menu-drawer) + 1);
  }

  /* Keep the panel rendered while closed so <shopify-chat>'s position-fixed
     "Ask anything" launcher stays visible. */
  .theme-drawer__dialog.chat-drawer:has(shopify-chat:defined) {
    display: flex;
  }
/* END_SNIPPET:chat-drawer */
/* START_SNIPPET:header-actions (INDEX:232) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

    &[data-sticky-state='active'] {
      --account-offset-top: calc(var(--header-height) - 1px);
    }
  }

  .account-button {
    /* Remove the background color from the color scheme, we want to inherit the color of the header */
    background: transparent;
  }

  /* TD CHANGE START: plain login link sizing when new customer accounts is off */
  a.account-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    text-decoration: none;
  }
  /* TD CHANGE END: plain login link sizing when new customer accounts is off */

  .account-button__icon,
  .account-button__text {
    color: var(--color-account-icon);
    transition: color var(--header-content-transition-timing);
    -webkit-font-smoothing: antialiased;
  }

  shopify-account {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-input: var(--style-border-radius-buttons-primary);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent: var(--color-primary-button-background);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

    &:not(:defined) {
      min-width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Match the line height of the other buttons */
      line-height: normal;
    }
  }

  .account-button__fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shopify-account-color-accent, #0a142f);
  }

  .account-button--text shopify-account {
    color: inherit;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  header-actions {
    display: flex;

    @media screen and (max-width: 749px) {
      justify-self: flex-end;
    }
  }

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }

    .header-actions__text-style {
      font-size: var(--header-actions-font-size);
      font-family: var(--header-actions-font-family);
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-actions__cart-icon {
    --cart-bubble-size: 20px;
    --cart-bubble-top: 4.5px;
    --cart-bubble-right: 2.5px;

    position: relative;
  }

  .header-actions__cart-icon .cart-bubble {
    position: absolute;
    width: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }
  }

  @media screen and (max-width: 749px) {
    .header-actions__cart-icon .svg-wrapper {
      justify-content: flex-end;
    }
  }

  .header-actions__cart-icon .cart-bubble__text {
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
  }

  .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    /* Create donut mask where the cart bubble sits */
    mask: radial-gradient(
      calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
      transparent 45.45%,
      #fff 45.45%,
      #fff 100%
    );
  }

  .cart-bubble.cart-bubble--animating .cart-bubble__background {
    animation: grow var(--animation-speed) var(--animation-easing);
  }

  .cart-bubble--animating .cart-bubble__text {
    --start-y: -1em;
    --start-opacity: 1;
    /* Set initial transform state before animation starts */
    transform: translate(0, var(--start-y, -1em));
    opacity: var(--start-opacity, 1);
    animation: move-and-fade var(--animation-speed) var(--animation-easing);
  }

  cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
      --cart-bubble-top: 4px;
      --cart-bubble-right: 4px;
    }
  }

  @media screen and (min-width: 750px) {
    cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
      --cart-bubble-right: 2.5px;
    }
  }

  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }
/* END_SNIPPET:header-actions */
/* START_SNIPPET:header-drawer (INDEX:233) */
.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);
  }

  /* TD CHANGE START: cross-fade hamburger ↔ close */
  .menu-drawer-container .header__icon--summary {
    position: relative;
  }

  .header-drawer-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 300ms ease, opacity 300ms ease;
    transform-origin: center;
  }

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
    opacity: 0;
    transform: rotate(-90deg) scale(0.8);
    pointer-events: none;
  }

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--open {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }

  details.menu-open .header__icon--menu .header-drawer-icon--close {
    opacity: 1;
    transform: rotate(0deg) scale(1);

    @media screen and (min-width: 750px) {
      opacity: 0;
      pointer-events: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    opacity: 0;
    transform: rotate(90deg) scale(0.8);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      opacity: 1;
      transform: rotate(0deg) scale(1);
      pointer-events: auto;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .header-drawer-icon {
      transition: none;
    }
  }
  /* TD CHANGE END: cross-fade hamburger ↔ close */

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

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }
  }

  /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow  */
  .menu-drawer.menu-drawer--has-submenu-opened {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-overlay);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    /* TD CHANGE START: keep backdrop inert so the header close toggle stays clickable */
    .menu-open & {
      opacity: 0;
      pointer-events: none;
    }
    /* TD CHANGE END: keep backdrop inert so the header close toggle stays clickable */
  }

  .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__close-button.menu-drawer__close-button,
  .menu-drawer__back-button.menu-drawer__back-button {
    outline-color: var(--color-foreground-subdued);
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }

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

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

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

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

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
    right: 20px;
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:header-drawer */
/* START_SNIPPET:localization-form (INDEX:243) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-foreground);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-foreground-subdued);

    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 8px;
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &[aria-current='true'] {
      .country {
        font-weight: 500;
      }
    }
  }

  .localization-form__list-item#no-results-message {
    grid-template-columns: 1fr;
    text-align: center;
    color: var(--color-foreground-subdued);
  }

  .is-searching .localization-form__list-item .country {
    color: var(--color-foreground-subdued);
  }

  .localization-form__list-item .country mark {
    font-weight: 500;
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: var(--style-border-width) solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--color-border);
  }

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector__label {
    flex-shrink: 0;
    color: var(--color-foreground-subdued);
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;
    field-sizing: content;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

    @media screen and (min-width: 750px) {
      height: 36px;
    }
  }

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }
/* END_SNIPPET:localization-form */
/* START_SNIPPET:predictive-search-styles (INDEX:255) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;
    text-transform: var(--title-case);

    &:first-of-type {
      margin-block-start: 0;
    }

    @media screen and (max-width: 749px) {
      margin-block: var(--margin-lg) var(--margin-sm);
    }
  }

  .predictive-search-results__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

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

  /* Predictive search section styles */
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .search-action .predictive-search {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  .search-action .search-modal .predictive-search {
    z-index: var(--layer-window-overlay);
  }

  .header__column--right .predictive-search-form__content-wrapper {
    right: 0;
    left: unset;
  }

  .search-modal .predictive-search-form__content-wrapper {
    width: 100%;

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }
  .dialog-modal .predictive-search-form__header-inner {
    @media screen and (min-width: 750px) {
      border: 0;
    }
  }

  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .predictive-search:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 749px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
    .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: var(--search-border-radius);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
    }
  }

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    border-bottom: var(--style-border-width) solid var(--color-border);

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xs) var(--padding-2xs) 0;
      border-bottom: var(--search-border-width) solid var(--color-border);
    }

    @media screen and (max-width: 749px) {
      transition: box-shadow 0.2s ease;
      box-shadow: none;
    }
  }

  .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    background-color: var(--color-background);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal .predictive-search__close-modal-button {
      padding-inline-start: var(--margin-xs);
      margin-inline-start: 0;
    }
  }

  .dialog-modal[open] {
    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 750px) {
      border-bottom-color: transparent;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal {
      .predictive-search__reset-button-icon {
        display: none;
      }

      .predictive-search__reset-button-text {
        display: block;
      }

      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

      .predictive-search-form__content-wrapper {
        box-shadow: none;
      }

      .predictive-search-form__header {
        box-shadow: none;
      }

      .predictive-search-form__footer {
        padding-block: var(--padding-2xl);
      }
    }
  }

  .predictive-search-results__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: 2px;

    &:hover {
      transform: scale(1.03);
      box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8));
    }
  }

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: var(--color-foreground-subdued);
  }

  .predictive-search-results__pill:focus,
  .predictive-search-results__pill:hover,
  .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));

    background-color: var(--pill-background-color);
    outline: var(--border-width-sm) solid var(--color-border);
    border: var(--border-width-sm);
    text-decoration: none;
  }

  .predictive-search-results__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    40% {
      opacity: 1;
    }

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

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

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

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

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

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

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

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

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

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

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

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

  .predictive-search-results__no-results,
  .predictive-search-results__wrapper,
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
  }

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    &:active {
      transform: scale(0.97);
    }
  }

  /* Products list styles */
  .predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

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

  /* Resource carousel styles */
  .predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

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

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */
/* START_SNIPPET:product-grid (INDEX:260) */
.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 {
    grid-column: var(--grid-column--mobile);
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
      padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
    }
  }

  .main-collection-grid__empty {
    padding-block: var(--padding-6xl);
    padding-inline: var(--page-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--padding-sm);
  }

  .main-collection-grid__empty-title {
    margin: 0;
  }
/* END_SNIPPET:product-grid */
/* START_SNIPPET:resource-card (INDEX:336) */
.resource-card__wrapper {
    display: block;
    height: 100%;
  }

  .resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */
/* START_SNIPPET:search-modal (INDEX:341) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    overflow: hidden;

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-foreground);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xs) var(--padding-sm);
    }
  }

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  input.search-input::placeholder {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-muted-text));
  }

  input.search-input,
  input.search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  input.search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

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

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

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

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

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

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

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */
/* START_SNIPPET:search (INDEX:342) */
.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:343) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

  body:has(#header-group > .header-section > #header-component[transparent]):not(
      :has(#header-group > .header-section + .shopify-section)
    )
    #MainContent
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */
/* START_SNIPPET:skip-to-content-link (INDEX:345) */
.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:td-header-bar (INDEX:369) */
/* ---------------------------------------------------------------- *
   * TD header bar — Figma geometry
   * ---------------------------------------------------------------- */
  .header {
    --td-header-bar-height: 72px;
    --td-header-bar-inline: 24px;
    --td-header-lead-gap: 24px;
    --td-header-utility-gap: 8px;
    --td-header-ink: #1d2b28;
  }

  .header .header__row--top {
    border-block-end: 1px solid var(--td-header-ink);
  }

  /* padding-block is zeroed because the nav items carry the full bar height
   * themselves (see td-header-menu), and Horizon's --header-padding would
   * otherwise stack on top of it and overshoot the Figma height. */
  .header .header__row--top .header__columns {
    align-items: center;
    /* width is required — the columns size to content and never reach the cap */
    width: 100%;
    max-width: var(--td-header-max-width, 1440px);
    margin-inline: auto;
    min-height: var(--td-header-bar-height);
    padding-block: 0;
    padding-inline: var(--td-header-bar-inline);
  }

  /* Logo and menu share the left cluster; Figma sets a single wide gap. */
  .header .header__column--left {
    gap: var(--td-header-lead-gap);
    align-items: center;
  }

  .header .header__column--right {
    gap: var(--td-header-utility-gap);
    align-items: center;
  }

  /* Figma draws every utility glyph in a 32px box. Horizon renders them at
   * 20-22px, which reads noticeably lighter next to the 32px close and bag. */
  .header cart-icon .svg-wrapper svg,
  .header .account-button__icon,
  .header .header-drawer-icon--close svg,
  .header .search-action .svg-wrapper svg {
    width: 32px;
    height: 32px;
  }

  /* The wrapper is a flex box sized to ~14px, which clamps the glyph width. */
  .header .header-drawer-icon {
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
  }

  /* Figma draws the hamburger as three 18px rules in a 14.0625px band, centred
   * in the same 32px box as the close glyph — so it is sized to its own aspect
   * ratio rather than stretched to a square. */
  .header .header-drawer-icon--open svg {
    width: 18px;
    height: 14.0625px;
  }

  /* ---------------------------------------------------------------- *
   * TD header bar — buttons
   * ---------------------------------------------------------------- */
  .td-header-bar__buttons {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Same diagonal wipe the sitewide buttons use (assets/td-base.css): a 45deg
   * gradient sized to 400% that slides from 100% to 0 on hover. Colours come
   * from theme primary / secondary tokens or per-button custom pickers. */
  .td-header-bar__button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 40px;
    padding: 8px 8px 8px 12px;
    border-radius: 0;
    font-family: var(--font-subheading--family);
    font-weight: var(--font-subheading--weight);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--td-header-bar-button-color);
    box-shadow: inset 0 0 0 var(--button-border-width, 0px) var(--td-header-bar-button-border-color, transparent);
    background-color: var(--td-button-base-background-color);
    background-image: linear-gradient(45deg, var(--td-button-hover-background-color) 50%, transparent 50%);
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: 400%;
  }

  /* Scoped under .header to outrank the vendor's `.header a { transition: color,
   * border-color }` rule, which otherwise strips background-position from the
   * transition and kills the wipe. */
  .header .td-header-bar__button:hover {
    background-position: 0;
    color: var(--td-header-bar-button-hover-color);
  }

  .td-header-bar__button--style-primary {
    --td-button-base-background-color: var(--color-primary-button-background);
    --td-button-hover-background-color: var(--color-primary-button-hover-background);
    --td-header-bar-button-color: var(--color-primary-button-text);
    --td-header-bar-button-hover-color: var(--color-primary-button-hover-text);
    --td-header-bar-button-border-color: var(--color-primary-button-border);
    --button-border-width: var(--style-border-width-primary);
  }

  .td-header-bar__button--style-secondary {
    --td-button-base-background-color: var(--color-secondary-button-background);
    --td-button-hover-background-color: var(--color-secondary-button-hover-background);
    --td-header-bar-button-color: var(--color-secondary-button-text);
    --td-header-bar-button-hover-color: var(--color-secondary-button-hover-text);
    --td-header-bar-button-border-color: var(--color-secondary-button-border);
    --button-border-width: var(--style-border-width-secondary);
  }

  @media (prefers-reduced-motion: no-preference) {
    .header .td-header-bar__button {
      transition: background-position 300ms ease-in-out, color var(--animation-speed) var(--animation-easing);
    }
  }

  .td-header-bar__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
  }

  .td-header-bar__button-icon svg {
    width: 18px;
    height: 22px;
  }

  /* Arrow glyph keeps its own 13x12 Figma ratio instead of the lock icon's 18x22 box. */
  .td-header-bar__button--secondary .td-header-bar__button-icon svg {
    width: 13px;
    height: 12px;
  }

  /* ---------------------------------------------------------------- *
   * TD header bar — icon hover
   *
   * The arrow reuses the sitewide --td-button-arrow-shift and timing so it
   * moves exactly like every other button on the site. The lock shakes once.
   * ---------------------------------------------------------------- */
  @keyframes td-header-lock-shake {
    0%,
    100% {
      transform: rotate(0deg);
    }

    20% {
      transform: rotate(-12deg);
    }

    40% {
      transform: rotate(9deg);
    }

    60% {
      transform: rotate(-6deg);
    }

    80% {
      transform: rotate(3deg);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .td-header-bar__button--secondary .td-header-bar__button-icon {
      transition: transform var(--animation-speed) var(--animation-easing);
    }

    .header .td-header-bar__button--secondary:hover .td-header-bar__button-icon {
      transform: translateX(var(--td-button-arrow-shift));
    }

    .header .td-header-bar__button--primary:hover .td-header-bar__button-icon {
      animation: td-header-lock-shake 500ms var(--animation-easing) 1;
    }
  }

  /* ---------------------------------------------------------------- *
   * Mobile — Figma node 3081:6765
   *
   * Horizon lays the mobile bar out as a five-area bookend grid with the logo
   * centred. Figma wants a simple two-cluster row: logo left, then the 10% OFF
   * pill, the bag and the drawer toggle. The columns stay `display: contents`
   * so all four can be ordered as siblings of one flex row.
   * ---------------------------------------------------------------- */
  @media screen and (max-width: 1079px) {
    #header-component .header__row--top .header__columns.header__columns {
      display: flex;
      grid-template-areas: none;
      grid-template-columns: none;
      align-items: center;
      column-gap: 8px;
      padding-inline: 24px 12px;
    }

    #header-component .header__column {
      display: contents;
    }

    #header-component .header-logo {
      grid-area: auto;
      order: 1;

      /* Pushes every utility to the trailing edge. */
      margin-inline-end: auto;

      /* Never let the fixed-width utilities squeeze the mark — without this it
       * is the only flexible item and collapses from 56px to 32px at 320px. */
      flex: 0 0 auto;
    }

    #header-component .header-logo :is(img, svg) {
      flex: 0 0 auto;
      max-width: none;
    }

    /* Figma gives the toggle a 32px box. Keep that width for the horizontal
     * rhythm but hold a 44px tap height, which the 72px bar has room for. */
    #header-component .header__drawer .header__icon--menu {
      width: 32px;
      min-width: 32px;
      height: 44px;

      /* Horizon pads this for its own touch target; with a 32px box that
       * padding leaves zero content width and collapses the glyph. */
      padding: 0;
    }

    #header-component .td-header-bar__buttons {
      order: 2;
      margin-inline-end: 4px;
    }

    #header-component header-actions {
      order: 3;
    }

    #header-component .header__drawer {
      order: 4;
    }

    /* Figma's mobile bar carries no account icon — sign-in lives in the drawer. */
    #header-component .account-button {
      display: none;
    }
  }

  /* Below Figma's 375px artboard the row runs out of width. Tighten the page
   * inset and step the pill down rather than shrinking the logo or wrapping. */
  @media screen and (max-width: 374px) {
    .header {
      --td-header-bar-inline: 16px;
    }

    #header-component .header__row--top .header__columns.header__columns {
      padding-inline: var(--td-header-bar-inline) 8px;
    }

    .td-header-bar__button {
      font-size: 14px;
      padding-inline: 8px;
    }

    .td-header-bar__button-icon {
      width: 24px;
    }
  }

  /* ---------------------------------------------------------------- *
   * Desktop — bar metrics apply from 1080px up
   * ---------------------------------------------------------------- */
  @media screen and (min-width: 1080px) {
    .header {
      --td-header-bar-height: 120px;
    }
  }

  /* ---------------------------------------------------------------- *
   * Compact desktop (1080px up to Figma's artboard)
   *
   * The full-size bar needs roughly 1310px. Below that the nav overflows into
   * the "More" button, which drops the visible count under `minimum-items` and
   * makes utilities.js flip data-menu-style to 'drawer' — collapsing the whole
   * header into Horizon's mobile bookend grid and crushing the buttons to 28px.
   * Keeping the row narrow enough to fit avoids that cliff entirely.
   * ---------------------------------------------------------------- */
  @media screen and (min-width: 1080px) and (max-width: 1319px) {
    .header {
      --td-header-bar-inline: 24px;
      --td-header-lead-gap: 32px;
      --td-header-utility-gap: 12px;

      /* Consumed by the nav's inline style in td-header-menu.liquid. */
      --td-header-nav-font-size: 1.125rem;
      --td-header-nav-gap: 16px;
    }

    .td-header-bar__buttons {
      gap: 8px;
      margin-inline-end: 8px;
    }

    .td-header-bar__button {
      width: auto;
      height: 44px;
      padding-inline: 12px;
      font-size: 14px;
    }

    .td-header-bar__button-icon {
      width: 24px;
    }
  }

  /* ---------------------------------------------------------------- *
   * Figma artboard and wider — full-size buttons and spacing
   * ---------------------------------------------------------------- */
  @media screen and (min-width: 1320px) {
    .header {
      --td-header-bar-inline: 40px;
      --td-header-lead-gap: 64px;
      --td-header-utility-gap: 16px;
    }

    .td-header-bar__buttons {
      gap: 16px;

      /* Figma separates the button group from the utility icons by 32px, and
       * the right column already contributes 16px. */
      margin-inline-end: 16px;
    }

    .td-header-bar__button {
      width: 224px;
      height: 48px;
      padding: 8px 20px;
    }
  }
/* END_SNIPPET:td-header-bar */
/* START_SNIPPET:td-header-drawer (INDEX:371) */
/* Full-height panel under the header */
  .header__drawer .menu-drawer {
    --td-drawer-inline: 24px;
    --td-drawer-rule: rgba(29, 43, 40, 0.6);

    top: var(--total-header-height, 0px);
    bottom: auto;
    height: calc(100dvh - var(--total-header-height, 0px));
    width: 100vw;
    max-width: none;
    border-right: 0;
    background-color: #ffffff;
    color: var(--td-header-ink, #1d2b28);
  }

  .header__drawer .menu-drawer__backdrop {
    top: var(--total-header-height, 0px);
    height: 100dvh;
  }

  /* Hide Rebuy layers while open (Safari chrome tint) */
  html:has(.header__drawer details.menu-open) #rebuy-cart,
  html:has(.header__drawer details.menu-open) #rebuy-bubble-global-alert-modal,
  html:has(.header__drawer details.menu-open) .rebuy-cart__background {
    display: none !important;
  }

  /* Bar toggle is the close control */
  .header__drawer .menu-drawer__close-button {
    display: none;
  }

  /* Horizon disables the close icon above 750px; the drawer now runs to 1080. */
  @media screen and (min-width: 750px) and (max-width: 1079px) {
    #header-component details.menu-open .header__icon--menu .header-drawer-icon--close {
      opacity: 1;
      transform: rotate(0) scale(1);
      pointer-events: auto;
    }

    #header-component details.menu-open .header__icon--menu .header-drawer-icon--open {
      opacity: 0;
      transform: rotate(90deg) scale(0.8);
      pointer-events: none;
    }
  }

  /* Accordion group: display contents so list layout is unchanged */
  .header__drawer .td-menu-drawer__accordion-group {
    display: contents;
  }

  /* Nav scrolls; sign-in stays at the foot */
  .header__drawer .menu-drawer__navigation {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Rows own the inline inset — list is edge to edge */
  .header__drawer .menu-drawer__menu {
    padding-inline: 0;
  }

  .header__drawer .menu-drawer__menu-item--mainlist {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* Figma's 82px row is 32px of clear space above and below a cap-trimmed
       label; the browser adds ~6px of half-leading each side, so the declared
       padding comes down to keep the visual spacing on design. */
    padding: 26px var(--td-drawer-inline);
    font-family: var(--font-subheading--family);
    font-weight: var(--font-subheading--weight);
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: inherit;
    cursor: pointer;
    list-style: none;
  }

  /* The rule separates one main link from the next, so it belongs to the whole
     block: an open row keeps it below its expanded content and none appears
     between the link and its own children. */
  .header__drawer .menu-drawer__navigation details {
    border-block-end: 0.5px solid var(--td-drawer-rule);
  }

  /* A link with no children renders as a bare anchor rather than a <details>,
     so it needs the same separator to close the list. */
  .header__drawer .menu-drawer__navigation a.menu-drawer__menu-item--mainlist {
    border-block-end: 0.5px solid var(--td-drawer-rule);
  }

  .header__drawer
    .menu-drawer__navigation
    .menu-drawer__menu:not(.menu-drawer__menu--childlist):not(.td-menu-drawer__menu--grandchildlist) {
    border-block-start: 0.5px solid var(--td-drawer-rule);
  }

  /* Not .svg-wrapper — that carries the mainlist's 18px sizing. */
  .header__drawer .td-menu-drawer__arrow {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 13px;
  }

  .header__drawer .td-menu-drawer__arrow > svg {
    width: 15px;
    height: 13px;
  }

  .header__drawer .menu-drawer__menu-item--mainlist::-webkit-details-marker {
    display: none;
  }

  /* Doubled class outranks vendor icon sizing */
  .header__drawer .menu-drawer__menu-item--mainlist .svg-wrapper.svg-wrapper {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    min-width: 18px;
    padding: 0;
    margin: 0;
  }

  .header__drawer .menu-drawer .menu-drawer__menu-item--mainlist .svg-wrapper.svg-wrapper > svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
  }

  .header__drawer .menu-drawer__menu--childlist {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 var(--td-drawer-inline) 32px;
  }

  /* Shared with featured panel mobile row title */
  .header__drawer .menu-drawer__menu-item--parent,
  .header__drawer .td-header-featured__row-title {
    font-family: var(--font-subheading--family);
    font-weight: var(--font-subheading--weight);
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: inherit;
  }

  .header__drawer .menu-drawer__menu-item--parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .header__drawer .td-drawer-panel-content {
    padding: 0 var(--td-drawer-inline) 32px;
  }

  /* Panel tokens — drawer has no .td-header-panel ancestor */
  .header__drawer .td-drawer-panel {
    display: block; /* custom element defaults to inline */
    --td-header-ink: #1d2b28;
    --td-header-muted: #6b736f;
    --td-header-divider: #d2d5d4;
  }

  .header__drawer .td-menu-drawer__menu--grandchildlist {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-block-start: 12px;
    padding-inline-start: 16px;
  }

  .header__drawer .menu-drawer__menu-item--child {
    font-family: var(--font-body--family);
    font-weight: var(--font-body--weight);
    font-size: 16px;
    line-height: 1.6;
    color: inherit;
    text-transform: none;
    letter-spacing: 0;
  }

  /* Figma lifts the actions bar off the scrolling list with a soft shadow on its
     top edge only, so the spread is negative and the offset is upward. */
  .header__drawer .td-menu-drawer__footer {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px var(--td-drawer-inline) 24px;
    background-color: #ffffff;
    box-shadow: 0 -4px 12px -4px rgb(29 43 40 / 12%);
  }

  .header__drawer .td-menu-drawer__footer-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
  }

  .header__drawer .td-menu-drawer__footer-actions .search-action,
  .header__drawer .td-menu-drawer__footer-actions .header-actions__action {
    padding: 4px;
  }

  .header__drawer .td-menu-drawer__footer-actions .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .header__drawer .td-menu-drawer__footer-actions .menu-drawer__localization {
    width: auto;
  }

  .header__drawer .td-menu-drawer__footer-actions .drawer-localization__button {
    padding-inline: 4px;
  }

  .header__drawer .td-menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-block: 8px;
    font-family: var(--font-subheading--family);
    font-weight: var(--font-subheading--weight);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
  }

  .header__drawer .td-menu-drawer__account-icon.td-menu-drawer__account-icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    min-width: 32px;
  }

  .header__drawer .td-menu-drawer__account-icon.td-menu-drawer__account-icon svg {
    width: 32px;
    height: 32px;
  }
/* END_SNIPPET:td-header-drawer */
/* START_SNIPPET:td-header-featured-panel (INDEX:373) */
/* ---------------------------------------------------------------- *
   * TD header panel — featured links
   * ---------------------------------------------------------------- */
  /* Flex rather than a fixed 5-column grid so a short set (3 links today)
   * spreads across the full content width instead of leaving a gap, while no
   * single card grows past 193px. */
  /* Scoped to the active group and carrying all three classes so it cannot
   * win over `.td-header-panel__group { display: none }` for hidden branches
   * regardless of stylesheet order. */
  .td-header-featured__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  /* Center the cards in the content column's leftover width instead of
   * packing them flush left when a branch has fewer than five links. */
  .td-header-featured__grid:not(.td-header-featured__grid--mobile) {
    justify-content: center;
  }

  /* Mobile drawer — stacked rows (thumbnail + title + arrow) instead of the
   * desktop tile grid. Figma (node 3081:6797) shows a plain 16px gap between
   * rows, no dividers. Three classes so it outranks the rule above regardless
   * of stylesheet order. */
  .td-header-featured__grid.td-header-featured__grid--mobile {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .td-header-featured__row-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-decoration: none;
    color: var(--td-header-ink);
  }

  /* Reuses the desktop tile's edge-color tinting (`data-td-tile` /
   * `--td-tile-bg`, set by td-header-menu.liquid's td-header-panel element),
   * just at the 64px size Figma specs for the row layout. */
  .td-header-featured__row-media {
    --td-tile-bg: #f9f9f9;

    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 58px;
    overflow: hidden;
    background-color: var(--td-tile-bg);
  }

  .td-header-featured__row-title-group {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 12px;
  }

  /* Typography (font-family/size/line-height/letter-spacing/case) lives in
   * td-header-drawer.liquid, shared with .menu-drawer__menu-item--parent —
   * same Figma type role, one declaration. */
  .td-header-featured__row-title {
    min-width: 0;
  }

  .td-header-featured__row-badge {
    flex: 0 0 auto;
    padding: 6px;
    background-color: var(--td-header-ink);
    color: #ffffff;
    font-family: var(--font-subheading--family);
    font-weight: var(--font-subheading--weight);
    font-size: 12px;
    line-height: 1.02;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .td-header-featured__row-arrow {
    flex: 0 0 auto;
    font-size: 16px;
    letter-spacing: 0.1em;
  }

  .td-header-featured__grid {
    --td-header-featured-basis: calc(50% - 8px);
    --td-header-featured-tile-height: 140px;
  }

  .td-header-featured__item {
    flex: 1 1 var(--td-header-featured-basis);
    min-width: 0;
    max-width: var(--td-header-featured-item-max-width, 193px);
  }

  .td-header-featured__card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-decoration: none;
    color: var(--td-header-ink);
  }

  .td-header-featured__tile {
    --td-tile-bg: #f9f9f9;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Fixed height rather than an aspect ratio: cards may stretch to 300px
     * wide when a branch has fewer than four links, and an aspect ratio would
     * drive the tile — and the whole panel — taller than the 278px design. */
    height: var(--td-header-featured-tile-height);
    background-color: var(--td-tile-bg);
    border-radius: 0;
    overflow: hidden;
  }

  .td-header-featured__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: drop-shadow(0 6px 13px rgba(29, 43, 40, 0.1));
  }

  .td-header-featured__badge {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    padding: 0 6px;
    background-color: var(--td-header-ink);
    color: #ffffff;
    font-family: var(--font-subheading--family);
    font-weight: var(--font-subheading--weight);
    font-size: 12px;
    line-height: 23px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .td-header-featured__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-inline: 8px;
    min-height: 24px;
  }

  .td-header-featured__title {
    font-family: var(--font-subheading--family);
    font-weight: var(--font-subheading--weight);
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .td-header-featured__arrow {
    flex: 0 0 auto;
    transition: transform var(--animation-values);
  }

  .td-header-featured__card:hover .td-header-featured__arrow {
    transform: translateX(2px);
  }

  @media screen and (min-width: 1080px) {
    .td-header-featured__grid {
      --td-header-featured-basis: 0;
      --td-header-featured-tile-height: 176px;
    }

    .td-header-featured__grid--five-cards:not(.td-header-featured__grid--mobile) {
      gap: 12px;
    }
  }

  /* Large desktop panels with five featured cards get the requested 5px of
   * extra width per card without changing shorter panel layouts. */
  @media screen and (min-width: 1440px) {
    .td-header-featured__grid--five-cards {
      --td-header-featured-item-max-width: 200px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .td-header-featured__arrow {
      transition: none;
    }

    .td-header-featured__card:hover .td-header-featured__arrow {
      transform: none;
    }
  }
/* END_SNIPPET:td-header-featured-panel */
/* START_SNIPPET:td-header-logo (INDEX:375) */
.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;

    @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_SNIPPET:td-header-logo */
/* START_SNIPPET:td-header-menu (INDEX:376) */
/* The vendor submenu-inner is a wrapping flex row sized to its content. TD
   * panels supply their own inset and need the full row width, otherwise the
   * card grid wraps instead of laying out in one row. */
  .menu-list__submenu-inner--td-panel {
    display: block;
    padding-block: 0;
    padding-inline: 0;
    max-height: none;
    /* Removing the block padding above means the panel's own background now
       starts flush against the header row, painting over the header's bottom
       border. Redraw that seam here so nav and panel still read as separate. */
    border-block-start: 1px solid var(--td-header-ink);
  }

  .menu-list__submenu-inner--td-panel > .td-header-panel {
    width: 100%;
  }

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

  /* Horizon gates drawer vs menu on touch, not width. Doubled id beats its
     [data-menu-style] rule; don't reuse its declarations — the minifier merges. */
  @media screen and (max-width: 1079px) {
    #header-component#header-component header-menu {
      display: none;
    }

    #header-component#header-component .header__drawer {
      display: flex;
    }
  }

  @media screen and (min-width: 1080px) {
    #header-component#header-component .header__drawer {
      display: none;
    }
  }

  .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: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px;
    letter-spacing: 0.09em;
    cursor: pointer;
    height: 100%;
    margin-block: 0;

    /* Fill the bar height so the pointer never crosses dead space on its way
     * from a link down into the open panel — leaving a gap fires pointerleave
     * and closes the panel before the content can be reached. The label stays
     * optically centred because the link is a centred flex row. */
    min-height: var(--td-header-bar-height);

    &::after {
      content: '';
      position: absolute;
      display: none;
      top: var(--header-padding);
      height: var(--box-height);
      left: 0;
      right: 0;
    }

    &[data-safety-box='true']::after {
      display: block;
    }

    &:hover,
    &:focus {
      color: var(--menu-top-level-font-color);
    }

    @media screen and (min-width: 750px) {
      font-size: var(--menu-top-level-font-size-desktop);
    }
  }

  .menu-list__link-title {
    padding-inline: 0;
  }

  /* Figma: only the open top-level item is underlined, and its caret flips.
   * Scoped to [aria-haspopup] because header-menu.js sets aria-expanded on
   * every hovered item, including ones that open nothing. */
  .menu-list__link[aria-haspopup][aria-expanded='true'] .menu-list__link-title {
    text-decoration: underline;
    text-decoration-color: #c9c9c9;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    text-decoration-skip-ink: none;
  }

  .td-header-menu__caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    transition: transform var(--animation-values);
  }

  .td-header-menu__caret svg {
    width: 100%;
    height: 100%;
  }

  .menu-list__link[aria-haspopup][aria-expanded='true'] .td-header-menu__caret {
    transform: rotate(180deg);
  }

  .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: var(--menu-horizontal-gap);
    margin-inline: 0;
  }

  .overflow-menu {
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;
    padding: var(--focus-outline-size);
    margin: calc(-1 * var(--focus-outline-size));
  }

  /** mega menu **/
  .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-padding-block-start: 0px;
    --submenu-padding-block-end: 0px;

    background-color: transparent;
  }

  .header__row[style*='--border-bottom-width: 0px'] {
    .menu-list__submenu.background-matches-parent,
    .overflow-menu.background-matches-parent::part(overflow) {
      --submenu-padding-block-start: 0px;
    }
  }

  /* Closed panels share the same absolute offset, z-index, and clip as the open
   * one. Opacity + pointer-events keep inactive panels from painting over or
   * swallowing hovers meant for the active panel. */
  .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);

    /* stylelint-disable declaration-no-important */
    opacity: 0 !important;
    visibility: hidden !important;
    /* stylelint-enable declaration-no-important */
    pointer-events: none;
    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),
      opacity 0.3s ease,
      visibility 0s ease 0.3s,
      pointer-events 0s ease 0.3s;
  }

  [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 when open — must come after the inactive rule so
   * pointer-events / opacity win. Scope aria-expanded to the direct top-level
   * menuitem: TD panel branch links also set aria-expanded, and a bare
   * :has([aria-expanded='true']) would mark every panel open at once, so the
   * last one in the DOM always painted over the rest. */
  .menu-list__list-item:has(> .menu-list__link[aria-expanded='true']) > .menu-list__submenu,
  /* Show the overflow menu when a menu item is hovered */
  .overflow-menu:has([slot="overflow"] > .menu-list__link[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;

    /* stylelint-disable declaration-no-important */
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    /* stylelint-enable declaration-no-important */
    transition:
      clip-path var(--submenu-animation-speed) var(--ease-out-cubic),
      opacity 0.1s ease,
      visibility 0s ease,
      pointer-events 0s ease;
  }

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

    /* Make overflow menu scrollable when content exceeds viewport */
    max-height: calc(80vh - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent;
  }

  .mega-menu__link {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);
    white-space: normal;
    text-decoration: none;
    display: inline-flex;
    padding: var(--padding-2xs) 0;

    &:hover {
      color: var(--menu-child-active-font-color);
    }
  }

  .mega-menu__link--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-active-font-color);
    }
  }

  @media screen and (max-width: 989px) {
    .mega-menu__content-list-item--hidden-tablet {
      display: none;
    }
  }

  .mega-menu__link:has(.mega-menu__link-image) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    object-fit: cover;
    border-radius: var(--menu-image-border-radius);
  }

  /* Fix alignment for collection image mode links without images */

  /* Target only top-level links (direct children of column > div) in collection image mode */
  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image)) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--menu-columns-tablet), minmax(0, 1fr));
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: 100%;

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__column {
    grid-column: span 1;
  }

  .mega-menu__column--span-2 {
    grid-column: span 2;
  }

  .mega-menu__column--span-3 {
    grid-column: span 3;
  }

  .mega-menu__column--span-4 {
    grid-column: span 4;
  }

  .mega-menu__column--wide-collection-image {
    grid-column: span 1;

    @media screen and (min-width: 990px) {
      grid-column: span 2;
    }
  }

  .mega-menu__submenu .mega-menu__column--wide-collection-image {
    grid-column: span 1;
  }

  .mega-menu__content-list {
    display: grid;
    justify-content: end;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
  }

  .mega-menu__content-list--products {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 1fr));

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

  .mega-menu__content-list--collections {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 300px));
    }
  }

  .mega-menu__list {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span var(--menu-columns-tablet);
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-columns-desktop);
    }
  }

  .mega-menu__content {
    grid-column: span var(--menu-content-columns-tablet) / -1;

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-content-columns-desktop) / -1;
    }
  }

  .menu-list__list-item[slot='overflow'] .section {
    grid-template-columns: 1fr;
  }

  .menu-list__list-item[slot='overflow'] .section .mega-menu__grid {
    grid-column: 1;
  }

  .mega-menu__content-list li {
    white-space: normal;
  }

  /* mega more menu */
  .mega-menu__more-list {
    --menu-child-font-size: var(--font-size--xl);

    width: 200px;
  }

  .mega-menu__submenu {
    /* preserves the inherited grid layout when this submenu wrapper is used */
    display: contents;
  }

  /* Hide product cards in collapsed submenus from the IntersectionObserver that fires product view events */
  .menu-list__list-item:not(:has(> .menu-list__link[aria-expanded='true'])) > .menu-list__submenu product-component {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .td-header-menu__caret {
      transition: none;
    }
  }
/* END_SNIPPET:td-header-menu */
/* START_SNIPPET:td-header-panel (INDEX:378) */
/* ---------------------------------------------------------------- *
   * TD header panel — shared shell
   * ---------------------------------------------------------------- */
  .td-header-panel {
    --td-header-ink: #1d2b28;
    --td-header-muted: #6b736f;
    --td-header-divider: #d2d5d4;
    --td-header-panel-inline: 24px;
    --td-header-panel-aside-width: auto;
    --td-header-panel-gap: 24px;
    --td-header-panel-min-height: auto;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    max-width: var(--td-header-max-width, 1440px);
    margin-inline: auto;
    gap: var(--td-header-panel-gap);
    min-height: var(--td-header-panel-min-height);
    padding-inline: var(--td-header-panel-inline);
    /* Background comes from mega_menu_background via td-header-menu.liquid */
    background-color: #ffffff;
    color: var(--td-header-ink);
  }

  .td-header-panel__aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 0 auto;
    width: var(--td-header-panel-aside-width);
    align-self: stretch;
    padding-block: 24px 49px;
  }

  .td-header-panel__nav-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .td-header-panel__nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* The rule is a transparent border rather than an underline so the link keeps
     the same box in every state — text-decoration plus the line-height the
     active state used to set made the column shift on hover. */
  .td-header-panel__nav-link,
  .td-header-panel__footer-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-subheading--family);
    font-weight: var(--font-subheading--weight);
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--td-header-ink);
  }

  .td-header-panel__footer-link {
    /* Aside is a column flex; without this the border underlines the full
     * track width instead of the label. */
    align-self: flex-start;
    width: max-content;
    margin-block-start: 24px;
  }

  .td-header-panel__nav-text,
  .td-header-panel__footer-link {
    padding-block-end: 4px;
    border-block-end: 1px solid transparent;
  }

  /* Marks the open branch, and follows the pointer on any link — including the
     ones with no branch of their own. */
  .td-header-panel__nav-link--active .td-header-panel__nav-text,
  .td-header-panel__nav-link:hover .td-header-panel__nav-text,
  .td-header-panel__nav-link:focus-visible .td-header-panel__nav-text,
  .td-header-panel__footer-link:hover,
  .td-header-panel__footer-link:focus-visible {
    border-block-end-color: #cfcfcf;
  }

  .td-header-panel__nav-caret {
    display: none;
    width: 10px;
    height: 10px;
    transform: rotate(-90deg);
  }

  .td-header-panel__nav-caret svg {
    width: 100%;
    height: 100%;
  }

  /* Any second-level link that opens a panel advertises it with the chevron,
     not just the one currently open. */
  .td-header-panel__nav-link[data-td-panel-nav] .td-header-panel__nav-caret {
    display: inline-flex;
  }

  .td-header-panel__pill {
    display: inline-flex;
    align-items: center;
    padding: 6px;
    background-color: #c0ffdf;
    color: var(--td-header-ink);
    font-family: var(--font-subheading--family);
    font-weight: var(--font-subheading--weight);
    font-size: 14px;
    line-height: 1.02;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .td-header-panel__content {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    padding-block-start: 24px;
  }

  .td-header-panel__group {
    display: none;
    width: 100%;
  }

  .td-header-panel__group[data-td-active='true'] {
    display: block;
  }

  /* Grandchildren of a branch with no panel block of its own */
  .td-header-panel__plain-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .td-header-panel__plain-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-block-end: 4px;
    border-block-end: 1px solid transparent;
    font-family: var(--font-body--family);
    font-weight: var(--font-body--weight);
    font-size: 16px;
    line-height: 1.6;
    text-decoration: none;
    color: var(--td-header-ink);
  }

  .td-header-panel__plain-link:hover,
  .td-header-panel__plain-link:focus-visible {
    border-block-end-color: #cfcfcf;
  }

  /* ---------------------------------------------------------------- *
   * Reveal — driven entirely by Horizon's own aria-expanded state, so
   * it replays whenever a different top-level panel opens.
   * ---------------------------------------------------------------- */
  .td-header-panel__reveal {
    overflow: hidden;
  }

  .td-header-panel__reveal-content {
    display: block;
    transform: translateY(100%);
    transition: transform 420ms var(--ease-out-cubic);
    transition-delay: calc(var(--td-reveal-index, 0) * 55ms);
  }

  .menu-list__link[aria-expanded='true'] + .menu-list__submenu
    .td-header-panel__group[data-td-active='true']
    .td-header-panel__reveal-content {
    transform: translateY(0);
  }

  /* Held down after a branch switch so the stagger replays instead of the
   * content appearing already settled. Must beat the open rule above —
   * otherwise data-td-revealing never wins and branch swaps look like a cut. */
  .menu-list__link[aria-expanded='true'] + .menu-list__submenu
    .td-header-panel__group[data-td-active='true'][data-td-revealing='true']
    .td-header-panel__reveal-content {
    transform: translateY(100%);
    transition: none;
  }

  /* The theme editor opens the panel it is editing, which needs the reveal to
     settle without Horizon's hover state. */
  .td-header-panel[data-td-editor-open='true'] .td-header-panel__group[data-td-active='true'] .td-header-panel__reveal-content {
    transform: translateY(0);
  }

  /* ---------------------------------------------------------------- *
   * Desktop
   * ---------------------------------------------------------------- */
  /* Inset tracks the main nav's own inset (see td-header-bar.liquid) so the
     panel's left edge lines up with the menu above it below the Figma width. */
  @media screen and (min-width: 1080px) {
    .td-header-panel {
      --td-header-panel-inline: 24px;
      --td-header-panel-aside-width: 228px;
      --td-header-panel-min-height: 278px;
    }
  }

  @media screen and (min-width: 1320px) {
    .td-header-panel {
      --td-header-panel-inline: 32px;
    }
  }

  /* At the Figma width the panel takes its own 128px inset rather than tracking
     the nav. */
  @media screen and (min-width: 1440px) {
    .td-header-panel {
      --td-header-panel-inline: 128px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .td-header-panel__reveal-content {
      transform: none;
      transition: none;
    }
  }
/* END_SNIPPET:td-header-panel */
/* START_SNIPPET:td-header-resource-panel (INDEX:379) */
/* ---------------------------------------------------------------- *
   * TD header panel — resources
   * ---------------------------------------------------------------- */
  .td-header-resource {
    --td-header-resource-gap: 32px;

    display: flex;
    flex-wrap: wrap;
    gap: var(--td-header-resource-gap);
    width: 100%;
  }

  .td-header-resource__column {
    flex: 1 1 320px;
    min-width: 0;
  }

  .td-header-resource__notice {
    margin: 0;
    padding: 8px 12px;
    background-color: #fef1d6;
    color: var(--td-header-ink);
    font-family: var(--font-body--family);
    font-size: 14px;
    line-height: 1.4;
  }

  .td-header-resource__title {
    margin: 0;
    padding-block: 4px;
    font-family: var(--font-subheading--family);
    font-weight: var(--font-subheading--weight);
    font-size: 16px;
    line-height: 1.12;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--td-header-ink);
  }

  .td-header-resource__rows {
    margin-block-start: 8px;
  }

  .td-header-resource__row,
  .td-header-resource__see-all-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding-block: 6px;
    border-block-start: 0.5px solid var(--td-header-divider);
    text-decoration: none;
    color: inherit;
  }

  /* The title yields to the reading time instead of pushing it out of view:
     Figma gives the title 344px of the 451px row and pins the info right. */
  .td-header-resource__row-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-body--family);
    font-weight: var(--font-body--weight);
    font-size: 16px;
    line-height: 1.6;
    color: var(--td-header-ink);
  }

  .td-header-resource__meta {
    flex: 0 0 auto;
  }

  .td-header-resource__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
  }

  .td-header-resource__meta-icon {
    display: inline-flex;
    width: 17px;
    height: 15px;
  }

  .td-header-resource__meta-icon svg {
    width: 100%;
    height: 100%;
  }

  .td-header-resource__meta-text {
    font-family: var(--font-body--family);
    font-weight: var(--font-body--weight);
    font-size: 14px;
    line-height: 1.4;
    color: var(--td-header-muted);
    white-space: nowrap;
  }

  .td-header-resource__see-all-link {
    justify-content: flex-end;
    gap: 8px;
    min-height: 48px;
    font-family: var(--font-subheading--family);
    font-weight: var(--font-subheading--weight);
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--td-header-ink);
  }

  .td-header-resource__see-all-arrow {
    font-size: 16px;
    transition: transform var(--animation-values);
  }

  .td-header-resource__see-all-link:hover .td-header-resource__see-all-arrow {
    transform: translateX(2px);
  }

  .td-header-resource__promo {
    flex: 1 1 280px;
    min-width: 0;
  }

  /* Clip-path wipe instead of translateY(100%): the promo is tall, so a
   * percentage slide retargets when avatars/fonts settle and finishes with a
   * visible jump. Clip is relative to the box and stays smooth. */
  .td-header-resource__promo.td-header-panel__reveal {
    overflow: visible;
    clip-path: inset(100% 0 0 0);
    transition: clip-path 420ms var(--ease-out-cubic);
    transition-delay: calc(var(--td-reveal-index, 0) * 55ms);
  }

  .td-header-resource__promo .td-header-panel__reveal-content {
    transform: none;
    transition: none;
  }

  .menu-list__link[aria-expanded='true'] + .menu-list__submenu
    .td-header-panel__group[data-td-active='true']
    .td-header-resource__promo.td-header-panel__reveal {
    clip-path: inset(0);
  }

  .menu-list__link[aria-expanded='true'] + .menu-list__submenu
    .td-header-panel__group[data-td-active='true'][data-td-revealing='true']
    .td-header-resource__promo.td-header-panel__reveal {
    clip-path: inset(100% 0 0 0);
    transition: none;
  }

  .td-header-panel[data-td-editor-open='true']
    .td-header-panel__group[data-td-active='true']
    .td-header-resource__promo.td-header-panel__reveal {
    clip-path: inset(0);
  }

  .td-header-resource__promo-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    background-color: #f9f9f9;
    text-decoration: none;
    color: var(--td-header-ink);
  }

  /* One rectangular image — the paired circles in Figma are supplied as a
     single bitmap, so no radius and no overlap here. Height is reserved before
     the image decodes so the clip wipe's box does not grow mid-transition. */
  .td-header-resource__promo-media {
    display: block;
    min-height: 56px;
  }

  .td-header-resource__promo-image {
    display: block;
    width: auto;
    height: 56px;
    max-width: 100%;
    object-fit: contain;
  }

  /* The card shrinks before the article column does, so its copy has to wrap —
     including a single long word — rather than being clipped. */
  .td-header-resource__promo-heading,
  .td-header-resource__promo-body {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .td-header-resource__promo-heading {
    font-family: var(--font-subheading--family);
    font-weight: var(--font-subheading--weight);
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .td-header-resource__promo-body {
    font-family: var(--font-body--family);
    font-weight: var(--font-body--weight);
    font-size: 16px;
    line-height: 1.6;
  }

  .td-header-resource__promo-body > * {
    margin: 0;
  }

  @media screen and (min-width: 1080px) {
    .td-header-resource {
      --td-header-resource-gap: 64px;
      flex-wrap: nowrap;
    }

    .td-header-resource__column {
      flex: 0 0 451px;
    }
  }

  /* Mobile drawer — force the article list and promo banner to stack,
   * regardless of viewport width, and skip the reveal transition: it's driven
   * by the desktop hover selector chain, which never matches inside the
   * drawer. */
  .td-header-resource--mobile {
    flex-wrap: wrap;
    flex-direction: column;
  }

  .td-header-resource--mobile .td-header-resource__column,
  .td-header-resource--mobile .td-header-resource__promo {
    flex: 1 1 auto;
  }

  .td-header-resource--mobile .td-header-panel__reveal-content {
    transform: translateY(0);
  }

  .td-header-resource--mobile .td-header-resource__promo.td-header-panel__reveal {
    clip-path: none;
    transition: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .td-header-resource__see-all-arrow {
      transition: none;
    }

    .td-header-resource__see-all-link:hover .td-header-resource__see-all-arrow {
      transform: none;
    }

    .td-header-resource__promo.td-header-panel__reveal {
      clip-path: none;
      transition: none;
    }
  }
/* END_SNIPPET:td-header-resource-panel */
/* START_SNIPPET:td-product-selling-plan-styles (INDEX:389) */
.td-product-selling-plan {
    --td-selling-plan-background: transparent;
    --td-selling-plan-text: currentColor;
    --td-selling-plan-saving-text: var(--color-foreground);
    display: block;
    width: 100%;
    color: var(--td-selling-plan-text);
    background: var(--td-selling-plan-background);
  }

  .td-product-selling-plan[hidden],
  .td-product-selling-plan [hidden] {
    display: none !important;
  }

  .td-product-selling-plan__choices {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .td-product-selling-plan--subscription-first .td-product-selling-plan__subscription {
    order: -1;
  }

  .td-product-selling-plan__purchase,
  .td-product-selling-plan__subscription-shell,
  .td-product-selling-plan__plan,
  .td-product-selling-plan__mobile-select-wrap {
    border: 1px solid var(--td-selling-plan-border-inactive);
    border-radius: 4px;
  }

  .td-product-selling-plan__purchase-option {
    width: 100%;
  }

  .td-product-selling-plan__purchase.td-product-selling-plan__purchase {
    position: relative;
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 12px;
    align-items: start;
    min-height: 64px;
    padding: 15px 16px 17px;
    cursor: pointer;
  }

  .td-product-selling-plan__purchase.td-product-selling-plan__purchase--has-badge {
    grid-template-columns: 24px auto auto 1fr;
  }

  .td-product-selling-plan__purchase-price {
    justify-self: end;
  }

  .td-product-selling-plan__purchase-price-row {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 8px;
  }

  .td-product-selling-plan__purchase-compare-price {
    color: var(--td-selling-plan-border-inactive);
    font-family: var(--font-paragraph--family);
    font-size: 18px;
    line-height: 1.5;
    white-space: nowrap;
  }

  .td-product-selling-plan__purchase-price-details {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-self: end;
    gap: 2px;
  }

  .td-product-selling-plan__purchase--selected,
  .td-product-selling-plan__purchase-option.td-product-selling-plan__purchase--selected
    .td-product-selling-plan__purchase,
  .td-product-selling-plan__subscription--selected .td-product-selling-plan__subscription-shell {
    border-color: var(--td-selling-plan-border);
  }

  .td-product-selling-plan__native-control {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .td-product-selling-plan__radio {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid var(--td-selling-plan-border-inactive);
    border-radius: 50%;
    background: var(--td-selling-plan-background);
  }

  .td-product-selling-plan__native-control:focus-visible + .td-product-selling-plan__radio {
    outline: 2px solid var(--td-selling-plan-accent);
    outline-offset: 3px;
  }

  .td-product-selling-plan__native-control:checked + .td-product-selling-plan__radio {
    border-color: var(--td-selling-plan-accent);
  }

  .td-product-selling-plan__native-control:checked + .td-product-selling-plan__radio::after {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--td-selling-plan-accent);
    content: '';
  }

  .td-product-selling-plan__purchase-title,
  .td-product-selling-plan__purchase-price,
  .td-product-selling-plan__subscription-title,
  .td-product-selling-plan__starting-value,
  .td-product-selling-plan__plan-name,
  .td-product-selling-plan__plan-price,
  .td-product-selling-plan__benefits-heading,
  .td-product-selling-plan__gift-label {
    font-family: var(--font-subheading--family);
    font-style: var(--font-subheading--style);
    font-weight: var(--font-subheading--weight);
  }

  .td-product-selling-plan__purchase-title,
  .td-product-selling-plan__purchase-price,
  .td-product-selling-plan__subscription-title {
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: 0.96px;
    text-transform: none;
  }

  .td-product-selling-plan__subscription {
    position: relative;
  }

  .td-product-selling-plan__subscription-shell {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 16px;
  }

  .td-product-selling-plan__subscription-header.td-product-selling-plan__subscription-header {
    position: relative;
    display: grid;
    grid-template-columns: 24px auto auto 1fr;
    gap: 12px;
    align-items: center;
    cursor: pointer;
  }

  .td-product-selling-plan__subscription-header:not(.td-product-selling-plan__subscription-header--has-badge) {
    grid-template-columns: 24px 1fr auto;
  }

  .td-product-selling-plan__badge,
  .td-product-selling-plan__saving,
  .td-product-selling-plan__plan-mobile-saving,
  .td-product-selling-plan__promo-badge {
    font-family: var(--font-label--family);
    font-style: var(--font-label--style);
    font-weight: var(--font-label--weight);
    font-size: var(--font-label--size);
    line-height: var(--font-label--line-height);
    letter-spacing: var(--font-label--letter-spacing);
    text-transform: var(--font-label--case);
  }

  .td-product-selling-plan__saving,
  .td-product-selling-plan__plan-mobile-saving {
    color: var(--td-selling-plan-saving-text);
  }

  .td-product-selling-plan__badge {
    padding: 6px 8px;
    color: var(--td-selling-plan-badge-text);
    background: var(--td-selling-plan-accent);
    white-space: nowrap;
  }

  .td-product-selling-plan__badge--mobile {
    display: none;
  }

  .td-product-selling-plan__plan-best-value {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 8px;
    border-radius: 0 4px 0 4px;
    color: var(--td-selling-plan-badge-text);
    background: var(--td-selling-plan-accent);
    font-family: var(--font-label--family);
    font-style: var(--font-label--style);
    font-weight: var(--font-label--weight);
    font-size: 12px;
    line-height: var(--font-label--line-height);
    letter-spacing: var(--font-label--letter-spacing);
    text-transform: var(--font-label--case);
    white-space: nowrap;
  }

  .td-product-selling-plan__starting {
    display: flex;
    justify-self: end;
    align-items: center;
    gap: 12px;
  }

  .td-product-selling-plan__starting-label {
    display: none;
  }

  .td-product-selling-plan__starting-label:not(.td-product-selling-plan__starting-label--hidden) {
    display: block;
  }

  .td-product-selling-plan__starting-label,
  .td-product-selling-plan__purchase-shipping {
    color: var(--td-selling-plan-muted);
    font-family: var(--font-label--family);
    font-size: 12px;
    line-height: 1.02;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .td-product-selling-plan__starting-label--hidden {
    visibility: hidden;
  }

  .td-product-selling-plan__starting-value {
    font-size: var(--font-h4--size);
    line-height: var(--font-h4--line-height);
    letter-spacing: var(--font-h4--letter-spacing);
    white-space: nowrap;
  }

  .td-product-selling-plan__starting-value small,
  .td-product-selling-plan__plan-price small {
    font-size: 16px;
    letter-spacing: 0.02em;
    text-transform: none;
  }

  .td-product-selling-plan__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-inline: 24px;
  }

  .td-product-selling-plan__schedule {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .td-product-selling-plan__schedule--mobile {
    display: none;
  }

  .td-product-selling-plan__prompt {
    margin: 0;
    font-family: var(--font-paragraph--family);
    font-size: 18px;
    line-height: 1.4;
  }

  .td-product-selling-plan__plan-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .td-product-selling-plan__plan.td-product-selling-plan__plan {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-height: 104px;
    padding: 24px 16px;
    cursor: pointer;
  }

  .td-product-selling-plan__plan--selected {
    border-color: var(--td-selling-plan-border);
    background: var(--td-selling-plan-surface);
  }

  .td-product-selling-plan__purchase-option.td-product-selling-plan__purchase--selected
    .td-product-selling-plan__purchase--one-time {
    background: var(--td-selling-plan-surface);
  }

  .td-product-selling-plan__plan-content,
  .td-product-selling-plan__plan-topline,
  .td-product-selling-plan__plan-bottomline {
    display: flex;
    min-width: 0;
  }

  .td-product-selling-plan__plan-content {
    flex-direction: column;
    gap: 16px;
  }

  .td-product-selling-plan__plan-topline,
  .td-product-selling-plan__plan-bottomline {
    align-items: center;
  }

  .td-product-selling-plan__plan-topline {
    gap: 16px;
  }

  .td-product-selling-plan__plan-bottomline {
    justify-content: space-between;
    gap: 16px;
    font-family: var(--font-paragraph--family);
    font-size: 16px;
    line-height: 1.6;
  }

  .td-product-selling-plan__plan-bottomline s {
    color: var(--td-selling-plan-border-inactive);
    font-size: var(--font-paragraph-large--size);
    line-height: var(--font-paragraph-large--line-height);
    white-space: nowrap;
  }

  .td-product-selling-plan__plan:not(.td-product-selling-plan__plan--selected)
    .td-product-selling-plan__plan-bottomline {
    color: var(--td-selling-plan-muted);
  }

  .td-product-selling-plan__plan-name {
    font-size: 20px;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .td-product-selling-plan__saving,
  .td-product-selling-plan__plan-mobile-saving,
  .td-product-selling-plan__promo-badge {
    padding: 8px;
    background: var(--td-selling-plan-accent-soft);
    white-space: nowrap;
  }

  .td-product-selling-plan__daily {
    font-family: var(--font-paragraph-small--family);
    font-size: var(--font-paragraph-small--size);
    line-height: var(--font-paragraph-small--line-height);
    white-space: nowrap;
  }

  .td-product-selling-plan__plan-recurring {
    color: var(--td-selling-plan-muted);
    font-family: var(--font-paragraph--family);
    font-size: 16px;
    line-height: 1.6;
  }

  .td-product-selling-plan__plan--selected .td-product-selling-plan__plan-recurring {
    color: inherit;
  }

  .td-product-selling-plan__plan-price {
    display: flex;
    align-items: baseline;
    margin-left: auto;
    font-size: var(--font-h4--size);
    line-height: var(--font-h4--line-height);
    letter-spacing: var(--font-h4--letter-spacing);
    white-space: nowrap;
  }

  .td-product-selling-plan__plan-price-mobile {
    display: none;
  }

  .td-product-selling-plan__plan-mobile-details {
    display: none;
  }

  .td-product-selling-plan__benefits {
    padding: 24px 24px 0;
  }

  .td-product-selling-plan__benefits-heading {
    margin: 0 0 24px;
    font-size: var(--font-h5--size);
    line-height: var(--font-h5--line-height);
    letter-spacing: var(--font-h5--letter-spacing);
    text-transform: var(--font-h5--case);
  }

  .td-product-selling-plan__benefit-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .td-product-selling-plan__perk {
    display: block;
  }

  .td-product-selling-plan__benefit {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    font-family: var(--font-paragraph--family);
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
  }

  .td-product-selling-plan__benefit--mobile {
    display: none;
  }

  .td-product-selling-plan__benefit > img,
  .td-product-selling-plan__benefit > .svg-wrapper {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
  }

  .td-product-selling-plan__benefits-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .td-product-selling-plan__gift {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 8px 0;
    border: 0;
    text-align: left;
  }

  .td-product-selling-plan__gift-description > * {
    font-weight: 700;
  }

  @media screen and (min-width: 1201px) {
    .td-product-selling-plan__subscription-shell {
      padding: 22px 16px;
    }
    .td-product-selling-plan__plan-content {
      gap: 6px;
    }
    .td-product-selling-plan__plan.td-product-selling-plan__plan {
      padding: 22px 16px;
    }
    label.td-product-selling-plan__purchase .td-product-selling-plan__radio {
      margin-top: 5px;
    }
    label.td-product-selling-plan__plan .td-product-selling-plan__radio {
      margin-top: 5px;
    }

    .td-product-selling-plan__benefit-list {
      gap: 4px 16px;
    }
    .td-product-selling-plan__benefits-row--gift-featured {
      flex-direction: row;
      align-items: stretch;
      gap: 24px;
    }

    .td-product-selling-plan__benefits-row--gift-featured .td-product-selling-plan__benefits {
      flex: 1 1 auto;
      min-width: 0;
      padding-right: 0;
    }

    .td-product-selling-plan__benefits-row--gift-featured .td-product-selling-plan__benefit-list {
      grid-template-columns: minmax(0, 1fr);
    }

    .td-product-selling-plan__gift--featured {
      position: relative;
      flex: 0 0 148px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin-top: 28px;
      padding: 24px 16px 20px;
      border: 1px solid var(--td-selling-plan-border-inactive);
      border-radius: 4px;
      text-align: center;
    }

    .td-product-selling-plan__gift--featured .td-product-selling-plan__gift-label--desktop {
      position: absolute;
      top: -16px;
      left: 50%;
      order: 0;
      padding: 8px;
      transform: translateX(-50%);
      background: var(--td-selling-plan-accent-soft);
      color: var(--td-selling-plan-text);
      font-family: var(--font-label--family);
      font-style: var(--font-label--style);
      font-weight: var(--font-label--weight);
      font-size: var(--font-label--size);
      line-height: var(--font-label--line-height);
      letter-spacing: var(--font-label--letter-spacing);
      text-transform: var(--font-label--case);
      white-space: nowrap;
    }

    .td-product-selling-plan__gift--featured .td-product-selling-plan__gift-image {
      order: 1;
      width: 64px;
      height: 72px;
      transform: none;
    }

    .td-product-selling-plan__gift--featured .td-product-selling-plan__gift-copy {
      order: 2;
    }

    .td-product-selling-plan__gift--featured .td-product-selling-plan__gift-description--desktop {
      text-align: center;
    }

  }

  .td-product-selling-plan__gift-label--desktop {
    order: 2;
    font-family: var(--font-subheading--family);
    font-size: 20px;
    line-height: 1.24;
    letter-spacing: 0.02em;
  }

  .td-product-selling-plan__gift-label--mobile {
    display: none;
  }

  .td-product-selling-plan__gift-image {
    order: 1;
    display: flex;
    width: 48px;
    height: 53px;
    align-items: center;
    justify-content: center;
    transform: rotate(-7.71deg);
  }

  .td-product-selling-plan__gift-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .td-product-selling-plan__gift-copy,
  .td-product-selling-plan__gift-description {
    display: block;
  }

  .td-product-selling-plan__gift-copy {
    order: 3;
  }

  .td-product-selling-plan__gift-description {
    font-family: var(--font-paragraph-small--family);
    font-size: var(--font-paragraph-small--size);
    line-height: var(--font-paragraph-small--line-height);
  }

  .td-product-selling-plan__gift-description--mobile {
    display: none;
  }

  .add-to-cart-button.td-product-selling-plan__main-cta {
    justify-content: center;
    gap: 24px;
  }

  .td-product-selling-plan__main-cta .add-to-cart-icon {
    display: none;
  }

  .td-product-selling-plan__cta-price {
    color: var(--td-selling-plan-cta-price);
  }

  .td-product-selling-plan__cta-label--mobile {
    display: none;
  }

  @media screen and (max-width: 1200px) {
    .td-product-selling-plan__cta-label--desktop {
      display: none;
    }

    .td-product-selling-plan__cta-label--mobile {
      display: inline;
    }

    .td-product-selling-plan__purchase.td-product-selling-plan__purchase {
      grid-template-columns: 24px 1fr auto;
      gap: 8px;
    }

    .td-product-selling-plan__purchase-option--has-badge .td-product-selling-plan__purchase {
      border-radius: 0 4px 4px 4px;
    }

    .td-product-selling-plan__purchase-title,
    .td-product-selling-plan__subscription-title {
      font-size: 20px;
    }

    .td-product-selling-plan__purchase-price {
      font-size: 24px;
    }

    .td-product-selling-plan__purchase-compare-price {
      font-size: 14px;
    }

    .td-product-selling-plan__badge--desktop,
    .td-product-selling-plan__schedule--desktop,
    .td-product-selling-plan__benefit--desktop,
    .td-product-selling-plan__gift-label--desktop,
    .td-product-selling-plan__gift-description--desktop {
      display: none;
    }

    .td-product-selling-plan--mobile-schedule-cards .td-product-selling-plan__schedule--desktop {
      display: flex;
    }

    .td-product-selling-plan--mobile-schedule-cards .td-product-selling-plan__schedule--mobile {
      display: none;
    }

    .td-product-selling-plan--mobile-schedule-cards .td-product-selling-plan__daily {
      display: none;
    }

    .td-product-selling-plan__plan-best-value {
      padding: 3px 6px;
      font-size: 12px;
    }

    .td-product-selling-plan--mobile-schedule-cards .td-product-selling-plan__plan.td-product-selling-plan__plan {
      grid-template-columns: 18px minmax(0, 1fr);
      gap: 8px;
      min-height: unset;
      padding: 12px 8px;
    }

    .td-product-selling-plan--mobile-schedule-cards
      .td-product-selling-plan__plan.td-product-selling-plan__plan:has(.td-product-selling-plan__plan-best-value) {
      padding-top: 22px;
    }

    .td-product-selling-plan--mobile-schedule-cards .td-product-selling-plan__plan-content {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      column-gap: 0;
      row-gap: 2px;
    }

    .td-product-selling-plan--mobile-schedule-cards .td-product-selling-plan__plan-topline,
    .td-product-selling-plan--mobile-schedule-cards .td-product-selling-plan__plan-bottomline {
      display: contents;
    }

    .td-product-selling-plan--mobile-schedule-cards .td-product-selling-plan__plan-name {
      grid-column: 1;
      grid-row: 1;
      min-width: 0;
      margin-right: 8px;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 18px;
    }

    .td-product-selling-plan--mobile-schedule-cards .td-product-selling-plan__plan-bottomline s {
      display: none;
    }

    .td-product-selling-plan--mobile-schedule-cards .td-product-selling-plan__plan-topline > .td-product-selling-plan__saving {
      display: none;
    }

    .td-product-selling-plan--mobile-schedule-cards .td-product-selling-plan__plan-price {
      display: none;
    }

    .td-product-selling-plan--mobile-schedule-cards .td-product-selling-plan__plan-price-mobile {
      display: flex;
      grid-column: 2;
      grid-row: 1;
      align-items: baseline;
      justify-self: end;
      gap: 4px;
      white-space: nowrap;
    }

    .td-product-selling-plan--mobile-schedule-cards .td-product-selling-plan__plan-price-mobile-compare {
      color: var(--td-selling-plan-border-inactive);
      font-family: var(--font-paragraph--family);
      font-size: 14px;
      line-height: 1.5;
      white-space: nowrap;
    }

    .td-product-selling-plan--mobile-schedule-cards .td-product-selling-plan__plan-price-mobile-current {
      display: flex;
      align-items: baseline;
      font-family: var(--font-subheading--family);
      font-size: 16px;
      font-style: var(--font-subheading--style);
      font-weight: var(--font-subheading--weight);
      line-height: 1.2;
      letter-spacing: 0.02em;
    }

    .td-product-selling-plan--mobile-schedule-cards .td-product-selling-plan__plan-price-mobile-current small {
      font-size: 16px;
      letter-spacing: 0.02em;
      text-transform: none;
    }

    .td-product-selling-plan--mobile-schedule-cards .td-product-selling-plan__plan-bottomline > span:not(.td-product-selling-plan__plan-mobile-details) {
      display: none;
    }

    .td-product-selling-plan--mobile-schedule-cards .td-product-selling-plan__plan-mobile-details {
      display: flex;
      grid-column: 1 / -1;
      grid-row: 2;
      min-width: 0;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
    }

    .td-product-selling-plan--mobile-schedule-cards .td-product-selling-plan__plan-mobile-description {
      min-width: 0;
      flex: 1 1 auto;
      font-family: var(--font-paragraph--family);
      font-size: 14px;
      line-height: 1.6;
    }

    .td-product-selling-plan--mobile-schedule-cards .td-product-selling-plan__saving {
      font-size: 14px;
      padding: 6px 8px;
    }

    .td-product-selling-plan--mobile-schedule-cards .td-product-selling-plan__plan-mobile-saving {
      flex: 0 0 auto;
      font-size: 12px;
      padding: 4px 6px;
    }

    .td-product-selling-plan--mobile-schedule-cards .td-product-selling-plan__plan-recurring {
      grid-column: 1 / -1;
      grid-row: 3;
    }

    .td-product-selling-plan--mobile-schedule-cards .td-product-selling-plan__radio {
      margin-top: 2px;
    }

    .td-product-selling-plan__badge--mobile {
      display: block;
      border: 1px solid var(--td-selling-plan-border-inactive);
      border-bottom: 0;
      border-radius: 4px 4px 0 0;
      font-size: 12px;
      text-align: center;
      width: fit-content;
      min-width: 160px;
    }

    .td-product-selling-plan__purchase-option.td-product-selling-plan__purchase--selected
      .td-product-selling-plan__badge--mobile,
    .td-product-selling-plan__subscription.td-product-selling-plan__subscription--selected
      .td-product-selling-plan__badge--mobile {
      border-color: var(--td-selling-plan-border);
    }

    .td-product-selling-plan__subscription-shell {
      gap: 0;
      padding: 20px 16px 32px;
      border-radius: 4px;
    }

    .td-product-selling-plan__subscription--has-badge .td-product-selling-plan__subscription-shell {
      border-radius: 0 4px 4px 4px;
    }

    .td-product-selling-plan__subscription-header.td-product-selling-plan__subscription-header {
      grid-template-columns: 24px minmax(0, 1fr) auto;
      gap: 8px;
      align-items: start;
      min-height: 43px;
    }

    .td-product-selling-plan__starting {
      display: flex;
      grid-column: 3;
      grid-row: 1;
      flex-direction: column-reverse;
      gap: 3px;
      align-items: flex-end;
    }

    .td-product-selling-plan__starting-label {
      display: block;
      visibility: hidden;
    }

    .td-product-selling-plan__starting-label:not(.td-product-selling-plan__starting-label--hidden) {
      visibility: visible;
    }

    .td-product-selling-plan__starting-label,
    .td-product-selling-plan__purchase-shipping {
      font-family: var(--font-paragraph--family);
      font-size: 12px;
      line-height: 1.5;
      letter-spacing: 0;
      text-transform: none;
    }

    .td-product-selling-plan__body {
      display: flex;
      flex-direction: column;
      gap: 18px;
      padding: 0;
    }

    .td-product-selling-plan__schedule--mobile {
      display: flex;
      gap: 16px;
    }

    .td-product-selling-plan__mobile-select-wrap {
      position: relative;
      display: flex;
      min-height: 88px;
      align-items: center;
      gap: 12px;
      padding: 15px 16px 12px 24px;
      background: var(--td-selling-plan-surface);
    }

    .td-product-selling-plan__mobile-summary {
      display: flex;
      flex: 1;
      min-width: 0;
      flex-direction: column;
      gap: 3px;
    }

    .td-product-selling-plan__mobile-title-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-subheading--family);
      font-size: 20px;
      font-weight: var(--font-subheading--weight);
      line-height: 1.24;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    .td-product-selling-plan__mobile-saving {
      color: var(--td-selling-plan-accent);
      font-size: 16px;
      line-height: 1.12;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    .td-product-selling-plan__mobile-description {
      font-family: var(--font-paragraph--family);
      font-size: 16px;
      line-height: 1.6;
    }

    .td-product-selling-plan__chevron {
      align-self: flex-start;
      flex: 0 0 14px;
      width: 14px;
      height: 8px;
      margin-top: 8px;
    }

    .td-product-selling-plan__mobile-select {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
    }

    .td-product-selling-plan__mobile-select-wrap:focus-within {
      outline: 2px solid var(--td-selling-plan-accent);
      outline-offset: 2px;
    }

    .td-product-selling-plan__benefits {
      padding: 8px 24px 0 32px;
    }

    .td-product-selling-plan__benefits-heading {
      margin-bottom: 14px;
    }

    .td-product-selling-plan__benefit--mobile {
      display: flex;
    }

    .td-product-selling-plan__perk {
      order: var(--td-selling-plan-mobile-order);
    }

    .td-product-selling-plan__benefit-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .td-product-selling-plan__gift {
      flex-direction: row;
      justify-content: center;
      gap: 12px;
      padding: 0;
    }

    .td-product-selling-plan__gift-label--mobile,
    .td-product-selling-plan__gift-description--mobile {
      display: block;
    }

    .td-product-selling-plan__gift-image {
      flex: 0 0 34px;
      width: 34px;
      height: 40px;
    }

    .td-product-selling-plan__gift-copy {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .td-product-selling-plan__gift-label--mobile {
      font-size: 18px;
      line-height: 1.24;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    .td-product-selling-plan__gift-description--mobile {
      font-family: var(--font-subheading--family);
      font-size: 14px;
      font-weight: var(--font-subheading--weight);
      line-height: 1.12;
      letter-spacing: 0.04em;
      text-transform: none;
    }

    .td-product-selling-plan__plan-bottomline {
      font-size: 14px;
    }

    .td-product-selling-plan__plan-recurring {
      font-size: 14px;
    }
  }
/* END_SNIPPET:td-product-selling-plan-styles */
/* START_SNIPPET:td-quick-add-styles (INDEX:391) */
html.td-quick-add-scroll-locked {
    overflow: hidden;
  }

  html.td-quick-add-scroll-locked body {
    overflow: hidden;
    padding-right: var(--td-quick-add-scrollbar-gap, 0px);
  }

  .td-quick-add {
    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;
  }

  .td-quick-add__trigger {
    position: absolute;
    right: var(--padding-sm);
    bottom: var(--padding-sm);
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-background);
    color: var(--color-foreground);
    box-shadow: 0 4px 18px rgb(0 0 0 / 0.14);
    cursor: pointer;
    pointer-events: auto;
  }

  .td-quick-add__trigger-icon,
  .td-quick-add__trigger-icon svg {
    display: block;
    width: 28px;
    height: 28px;
  }

  .td-quick-add__trigger:hover {
    transform: scale(1.04);
  }

  .td-quick-add__image,
  .td-quick-add__summary {
    min-width: 0;
  }

  .td-quick-add__image-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .td-quick-add__image-img--mobile {
    display: none;
  }

  .td-quick-add__summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .td-quick-add__reviews {
    min-height: 27px;
  }

  .td-quick-add__title {
    margin: 0;
    color: #1d2b28;
  }

  .td-quick-add__description {
    color: #1d2b28;
  }

  .td-quick-add__description,
    .td-quick-add__traits {
    margin: 10px 0 0;
  }

  .td-quick-add-modal__buying-box .td-product-selling-plan__purchase-title,
  .td-quick-add-modal__buying-box .td-product-selling-plan__purchase-price, 
  .td-quick-add-modal__buying-box .td-product-selling-plan__subscription-title {
    font-size: 20px;
  }
  .td-quick-add-modal__buying-box .td-product-selling-plan__plan-name {
    font-size: 18px;
  }

  .td-quick-add-modal__buying-box .td-product-selling-plan__badge
  .td-quick-add-modal__buying-box .td-product-selling-plan__saving {
    font-size: 12px;
  }

  .td-quick-add__traits {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    list-style: none;
  }

  .td-quick-add__trait {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    color: #1d2b28;
  }

  .td-quick-add__trait-icon,
  .td-quick-add__trait-icon svg {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    color: #1a554e;
    margin-top: 2px;
  }

  .td-quick-add-modal {
    display: none;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 24px;
    border: 0;
    background: transparent;
    overflow: visible;
  }

  .td-quick-add-modal[open] {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .td-quick-add-modal::backdrop {
    background: rgb(0 0 0 / 0.42);
    opacity: 0;
    transition: opacity 320ms ease;
  }

  .td-quick-add-modal[open]::backdrop {
    opacity: 1;
  }

  .td-quick-add-modal__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 658px);
    width: min(1200px, calc(100vw - 48px));
    height: min(760px, calc(100dvh - 160px));
    margin: auto;
    overflow: hidden;
    background: #fff;
    color: #1d2b28;
    opacity: 0;
    transform: translateX(100vw);
    transition:
      transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 260ms ease;
  }

  .td-quick-add-modal[data-td-state='open'] .td-quick-add-modal__panel {
    opacity: 1;
    transform: translateX(0);
  }

  .td-quick-add-modal[data-td-state='closing'] .td-quick-add-modal__panel {
    opacity: 0;
    transform: translateX(48px);
    transition:
      transform 220ms cubic-bezier(0.4, 0, 1, 1),
      opacity 200ms ease;
  }

  .td-quick-add-modal__image,
  .td-quick-add-modal__content > * {
    opacity: 0;
    transform: translateY(12px);
    transition:
      transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 320ms ease;
    transition-delay: 80ms;
  }

  .td-quick-add-modal__content > *:nth-child(2) {
    transition-delay: 130ms;
  }

  .td-quick-add-modal__content > *:nth-child(3) {
    transition-delay: 170ms;
  }

  .td-quick-add-modal[data-td-state='open'] .td-quick-add-modal__image,
  .td-quick-add-modal[data-td-state='open'] .td-quick-add-modal__content > * {
    opacity: 1;
    transform: translateY(0);
  }

  .td-quick-add-modal__scroll {
    display: contents;
  }

  .td-quick-add-modal__image {
    display: grid;
    place-items: center;
    min-height: 0;
    overflow: hidden;
    background: {{ settings.quick_add_image_background }};
  }

  .td-quick-add-modal__image .td-quick-add__image {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
  }

  .td-quick-add-modal__image .td-quick-add__image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .td-quick-add-modal__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 40px 32px 0 72px;
    border-left: 1px solid #bdbdbd;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* The image and buying box load asynchronously and can resize after the
       modal opens; scroll anchoring would otherwise shift scrollTop away from
       the top we deliberately reset it to. */
    overflow-anchor: none;
  }

  .td-quick-add-modal__summary {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .td-quick-add-modal__buying-box {
    margin-top: 40px;
    padding-bottom: 10px;
  }

  .td-quick-add-modal__buying-box .td-product-selling-plan {
    display: block;
  }

  .td-quick-add-modal__native-submit {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .td-quick-add-modal__loading {
    display: block;
    min-height: 120px;
    color: rgb(29 43 40 / 0.65);
    font-family: var(--font-paragraph--family);
  }

  .td-quick-add-modal__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: auto;
    padding-top: 48px;
    will-change: transform;
  }

  /* Overshoots the sticky/fixed bar's own top edge by a couple of pixels so
     scrolled content can't show through a subpixel gap at the seam. */
  .td-quick-add-modal__actions::before {
    content: '';
    position: absolute;
    top: -2px;
    right: 0;
    left: 0;
    height: 2px;
    background-color: #fff;
  }

  .td-quick-add-modal__action {
    width: 100%;
    min-height: var(--td-button-height, var(--height-buy-buttons));
    text-decoration: none;
  }

  .td-quick-add-modal__actions add-to-cart-component {
    display: contents;
  }

  @media screen and (min-width: 1200px) {
    .td-quick-add-modal__actions {
      position: sticky;
      bottom: 0;
      z-index: 1;
      align-self: stretch;
      padding: 24px 0 56px;
      background-color: #fff;
    }
    .td-quick-add__trait-icon,
    .td-quick-add__trait-icon svg {
      flex: 0 0 20px;
      width: 20px;
      height: 20px;
      margin-top: 3px;
    }
  }

  .td-quick-add-modal__product-form {
    display: contents;
  }

  .td-quick-add-modal__product-form form {
    display: contents;
  }

  .td-quick-add-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1px solid #1d2b28;
    background-color: #fff;
    color: #1d2b28;
    cursor: pointer;
    will-change: transform;
  }

  .td-quick-add-modal__close svg {
    width: 28px;
    height: 28px;
  }

  @media screen and (max-width: 1199px) {
    .td-quick-add-modal {
      padding: 0;
    }

    .td-quick-add-modal::backdrop {
      transition: opacity 220ms ease;
    }

    .td-quick-add-modal__panel {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100dvh;
      max-height: 100dvh;
      opacity: 1;
      transform: translateX(100%);
      transition: transform 220ms ease;
    }

    .td-quick-add-modal[data-td-state='open'] .td-quick-add-modal__panel {
      opacity: 1;
      transform: translateX(0);
    }

    .td-quick-add-modal[data-td-state='closing'] .td-quick-add-modal__panel {
      opacity: 1;
      transform: translateX(100%);
      transition: transform 220ms ease;
    }

    .td-quick-add-modal__image,
    .td-quick-add-modal__content > * {
      opacity: 1;
      transform: none;
      transition: none;
    }

    .td-quick-add-modal[data-td-state='open'] .td-quick-add-modal__image,
    .td-quick-add-modal[data-td-state='open'] .td-quick-add-modal__content > * {
      opacity: 1;
      transform: none;
    }

    .td-quick-add-modal__scroll {
      display: block;
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overflow-anchor: none;
    }

    .td-quick-add-modal__image {
      display: block;
      flex: 0 0 auto;
      width: 100%;
      min-height: 0;
    }

    .td-quick-add-modal__image .td-quick-add__image {
      height: auto;
    }

    .td-quick-add-modal__image .td-quick-add__image-img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }

    .td-quick-add__image:has(.td-quick-add__image-img--mobile) .td-quick-add__image-img--primary {
      display: none;
    }

    .td-quick-add__image-img--mobile {
      display: block;
    }

    .td-quick-add-modal__content {
      height: auto;
      overflow: visible;
      border-top: 1px solid #bdbdbd;
      border-left: 0;
      padding: 24px 24px calc(172px + env(safe-area-inset-bottom));
    }

    .td-quick-add-modal__summary {
      gap: 20px;
    }

    .td-quick-add__trait {
      gap: 10px;
    }

    .td-quick-add-modal__actions {
      position: fixed;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 2;
      grid-template-columns: 1fr;
      gap: 10px;
      margin: 0;
      padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
      background: #fff;
      box-shadow: 0 -8px 24px rgb(0 0 0 / 0.08);
    }

    .td-quick-add-modal__action {
      min-height: var(--height-buy-buttons);
    }

    .td-quick-add-modal__close {
      position: fixed;
      top: 12px;
      right: 12px;
    }
  }

  @media screen and (min-width: 640px) and (max-width: 1199px) {
    .td-quick-add-modal__panel {
      width: min(600px, 90vw);
      height: 90dvh;
      max-height: 90dvh;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .td-quick-add-modal__panel,
    .td-quick-add-modal__image,
    .td-quick-add-modal__content > *,
    .td-quick-add-modal::backdrop {
      transition-duration: 1ms;
      transition-delay: 0ms;
    }

    .td-quick-add__trigger:hover {
      transform: none;
    }
  }
/* END_SNIPPET:td-quick-add-styles */
/* START_SNIPPET:text (INDEX:399) */
: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);
    color: var(--color, var(--color-foreground));
  }

  .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.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-line: none;
    color: currentColor;

    &:hover {
      text-decoration-line: none;
      color: currentColor;
    }
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block p,
  .text-block.p > * {
    margin-block: var(--font-paragraph--spacing);
  }

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

  /* TD CHANGE START: sitewide text-block color accent */
  .td-text-block__accent {
    color: var(--td-text-block-accent-color, currentColor);
  }
  /* TD CHANGE END: sitewide text-block color accent */
/* END_SNIPPET:text */
/* START_SNIPPET:theme-drawer-styles (INDEX:401) */
theme-drawer {
    display: contents;
  }

  .theme-drawer__dialog {
    --theme-drawer-padding: var(--padding-xl);

    z-index: calc(var(--layer-sticky) + var(--drawer-stack-order, 0));
    position: fixed;
    inset: unset;
    top: 0;
    right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    flex-direction: column;
    width: var(--theme-drawer-width, var(--sidebar-width));
    max-width: 100%;
    max-height: none;
    height: 100dvh;
    padding: 0;
    border: none;
    border-left: var(--style-border-drawer);
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  .theme-drawer__dialog[open] {
    display: flex;
    right: 0;
  }

  .theme-drawer__dialog--opening {
    animation: drawer-slide-in var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--opening-inline-start {
    animation: drawer-slide-in-inline-start var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--closing {
    animation: drawer-slide-out var(--animation-speed) var(--animation-timing-fade-out) forwards;
  }

  .theme-drawer__dialog-instant {
    animation: none;
  }

  @keyframes drawer-slide-in {
    from {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  @keyframes drawer-slide-in-inline-start {
    from {
      right: calc(var(--theme-drawer-width, var(--sidebar-width)) / 2);
    }
  }

  @keyframes drawer-slide-out {
    to {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  .theme-drawer__dialog::backdrop {
    background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
  }

  /* Exclude open drawers from the page navigation cross-fade so they
     stay frozen (visually unchanged) while the rest of the page transitions. */
  html:active-view-transition-type(page-navigation) .theme-drawer__dialog[open] {
    view-transition-name: theme-drawer;
  }

  ::view-transition-old(theme-drawer),
  ::view-transition-new(theme-drawer) {
    animation: none;
  }

  .theme-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--theme-drawer-padding);
    flex-shrink: 0;
    color: var(--color-foreground);
  }

  .theme-drawer__title {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin: 0;
  }

  .theme-drawer__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: var(--style-border-radius-lg);
    background-color: rgb(var(--color-foreground-rgb) / 0.1);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
    padding-inline: 0.5em;
    line-height: 1;
  }

  .theme-drawer__badge[data-maintain-ratio] {
    aspect-ratio: 1 / 1;
    padding-inline: 0.2em;
  }

  .theme-drawer__close-button {
    --private-button-size: 34px;
    --private-focus-ring-size: 2px;
    --private-motion-speed: 150ms;
    --private-motion-ease: cubic-bezier(0.25, 0, 0.1, 1);
    --private-border-width: 1px;
    --private-button-border-color: rgb(0, 0, 0, 0.06);
    --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    width: var(--private-button-size);
    height: var(--private-button-size);
    border-radius: var(--private-button-size);
    background-color: var(--color-background);
    outline: var(--private-focus-ring-size) solid transparent;
    outline-offset: var(--private-focus-ring-size);
    transition-property: color, outline-color, background-color;
    transition-duration: var(--private-motion-speed);
    transition-timing-function: var(--private-motion-ease);

    /* Legacy non-contrast-aware color scheme */
    --button-icon-opacity: 0.8;
    color: var(--color-foreground);
    border: var(--private-border-width) solid var(--private-button-border-color);
    box-shadow: var(--private-button-shadow);

    &:hover:not(:active) {
      /* Legacy non-contrast-aware color scheme */
      --button-icon-opacity: 1;
    }

    &:focus-visible {
      outline-color: var(--color-foreground);
    }
  }

  @supports (color: oklch(from red l c h)) {
    .theme-drawer__close-button {
      --contrast-color: oklch(from var(--color-background) clamp(0, (0.6 / l - 1) * infinity, 1) 0 0);
      --button-icon-opacity: 1;
      --private-button-border-color: color-mix(in srgb, var(--contrast-color) 6%, transparent);
      --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

      color: color-mix(in srgb, var(--contrast-color) 50%, transparent);

      &:hover:not(:active) {
        color: color-mix(in srgb, var(--contrast-color) 70%, transparent);
      }
    }

    .theme-drawer__close-button:hover:not(:active) {
      background-color: color-mix(in srgb, var(--contrast-color) 6%, var(--color-background));
    }
  }
/* END_SNIPPET:theme-drawer-styles */