/** Shopify CDN: Minification failed

Line 455:1 Unexpected "]"

**/
* {
  box-sizing: border-box;
}

body {
  color: var(--color-foreground);
  background: var(--color-background);
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100svh;
  font-variation-settings: "slnt" 0;
}

:root {
  --hover-lift-amount: 4px;
  --hover-scale-amount: 1.03;
  --hover-subtle-zoom-amount: 1.015;
  --hover-shadow-color: var(--color-shadow);
  --hover-transition-duration: 0.25s;
  --hover-transition-timing: ease-out;
  --surface-transition-duration: 0.3s;
  --surface-transition-timing: var(--ease-out-quad);
}

html {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40))
    var(--color-background);
  scroll-behavior: smooth;
}

html[scroll-lock] {
  overflow: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  width: 100%;
  height: auto;
}

input,
textarea,
select {
  font: inherit;
  border-radius: var(--style-border-radius-inputs);
}

input:hover {
  background-color: var(--color-input-hover-background);
}

/** override ios and firefox defaults */
select {
  background-color: var(--color-background);
  color: currentcolor;
}

dialog {
  /* the ::backdrop inherits from the originating element, custom properties must be set on the dialog element */
  --backdrop-color-rgb: var(--color-shadow-rgb);

  background-color: var(--color-background);
  color: var(--color-foreground);
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

.wrap-text {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

p:empty {
  display: none;
}

:first-child:is(p, h1, h2, h3, h4, h5, h6),
:first-child:empty + :where(p, h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

/* Remove bottom margin from last text item, or previous to last if the last is empty */
:last-child:is(p, h1, h2, h3, h4, h5, h6),
:where(p, h1, h2, h3, h4, h5, h6):nth-child(2):has(+ :last-child:empty) {
  margin-block-end: 0;
}

.restock-alerts-variant-select {
  color: var(--color-input-text);
}

:host {
  display: grid;
  width: 100%;
}

[part="list"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--overflow-list-alignment);
  column-gap: 0.6rem;

  @media (max-width: 749px) {
    justify-content: var(--overflow-list-alignment-mobile);
  }
}

[part="list"],
[part="overflow-list"],
[part="placeholder"] {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Make sure the "more" slot can be measured */
slot[name="more"]:not([hidden]) {
  display: block;
}

slot[name="more"] .button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-paragraph-family);
  font-size: var(--font-paragraph-size);
  text-transform: var(--text-transform);
  color: currentcolor;
  text-align: start;
}

[part="overflow"] {
  display: none;
}

[part="placeholder"] {
  visibility: hidden;
  width: 0;
  height: 0;
}

:host([disabled]) {
  slot[name="more"] {
    display: none;
  }
}

/* Layout */
.content-for-layout {
  flex: 1;
}

/* Set up page widths & margins */
.page-width-wide,
.page-width-normal,
.page-width-narrow,
.page-width-content {
  --page-margin: 16px;
}

@media screen and (min-width: 750px) {
  .page-width-wide,
  .page-width-normal,
  .page-width-narrow,
  .page-width-content {
    --page-margin: 40px;
  }
}

.page-width-wide {
  /* NOTE: This results in a page width of 2400px because of how we set up margins with grid */
  --page-content-width: var(--wide-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-normal {
  --page-content-width: var(--normal-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-narrow,
.page-width-content {
  /* NOTE: This results in a page width of 1400px because of how we set up margins with grid */
  --page-content-width: var(--narrow-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-content {
  --page-content-width: var(--normal-content-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

/* Utility */

.hidden {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

@media screen and (max-width: 749px) {
  .hidden--mobile,
  .mobile\:hidden {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }
}

@media screen and (min-width: 750px) {
  .hidden--desktop,
  .desktop\:hidden {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }
}

.hide-when-empty:empty {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

.visually-hidden:not(:focus, :active) {
  /* stylelint-disable-next-line declaration-no-important */
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  /* stylelint-disable-next-line declaration-no-important */
  word-wrap: normal !important;
}

@media screen and (max-width: 749px) {
  .is-visually-hidden-mobile:not(:focus, :active) {
    /* stylelint-disable-next-line declaration-no-important */
    position: absolute !important;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    /* stylelint-disable-next-line declaration-no-important */
    word-wrap: normal !important;
  }
}

.contents {
  display: contents;
}

.flex {
  display: flex;
  gap: var(--gap-md);
}

.grid {
  --centered-column-number: 12;
  --full-width-column-number: 14;
  --centered: column-1 / span var(--centered-column-number);
  --full-width: column-0 / span var(--full-width-column-number);

  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 750px) {
  .grid {
    display: grid;
    gap: 0;
    grid-template-columns:
      var(--margin-4xl) repeat(var(--centered-column-number), minmax(0, 1fr))
      var(--margin-4xl);
    grid-template-areas: "column-0 column-1 column-2 column-3 column-4 column-5 column-6 column-7 column-8 column-9 column-10 column-11 column-12 column-13";
  }
}

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

.flex {
  display: flex;
  gap: var(--gap-md);
}

.flip-x {
  scale: -1 1;
}

.flip-y {
  scale: 1 -1;
}

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

.skip-to-content-link {
  position: absolute;
  overflow: hidden;
  height: 1px;
  left: -99999px;
  /* stylelint-disable-next-line declaration-no-important */
  word-wrap: normal !important;
}

.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);
  box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
}

.text-left {
  --text-align: left;

  text-align: left;
}

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

  text-align: center;
}

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

  text-align: right;
}

.text-inherit {
  color: inherit;
}

.user-select-text {
  user-select: text;
}

.justify-left {
  justify-content: left;
}

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

.justify-right {
  justify-content: right;
}

.title--aligned-center {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.background-image-container {
  overflow: hidden;
  position: absolute;
  inset: 0;
  opacity: var(--image-opacity);
}

.background-image-container img,
.background-image-container svg {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.background-image-fit img,
.background-image-fit svg {
  object-fit: contain;
}

.svg-wrapper {
  color: currentcolor;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  pointer-events: none;
}

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

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

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

.relative {
  position: relative;
}]

/* Splide Overrides */
.splide__track {
  will-change: transform;
  transform: translateZ(0);
}

/* Spacing style */
.spacing-style {
  --spacing-scale: var(--spacing-scale-md);

  @media screen and (min-width: 990px) {
    --spacing-scale: var(--spacing-scale-default);
  }

  /* Must disable this, when you use these with calc and another unit type, things break — see logo.liquid */
  /* stylelint-disable length-zero-no-unit */
  --padding-block: 0px;
  --padding-block-start: var(--padding-block, 0px);
  --padding-block-end: var(--padding-block, 0px);
  --padding-inline: 0px;
  --padding-inline-start: var(--padding-inline, 0px);
  --padding-inline-end: var(--padding-inline, 0px);
  --margin-block: 0px;
  --margin-block-start: var(--margin-block, 0px);
  --margin-block-end: var(--margin-block, 0px);
  --margin-inline: 0px;
  --margin-inline-start: var(--margin-inline, 0px);
  --margin-inline-end: var(--margin-inline, 0px);
  --padding-block-start-mobile: initial;
  --padding-block-end-mobile: initial;
  --padding-inline-start-mobile: initial;
  --padding-inline-end-mobile: initial;
}

.spacing-style,
.inherit-spacing {
  padding-block: calc(
      var(--padding-block-start) + var(--section-top-offset, 0px)
    )
    var(--padding-block-end);
  padding-inline: var(--padding-inline-start) var(--padding-inline-end);
  margin-block: var(--margin-block-start) var(--margin-block-end);
  margin-inline: var(--margin-inline-start) var(--margin-inline-end);
}

@media screen and (max-width: 749px) {
  .spacing-style,
  .inherit-spacing {
    padding-block: calc(
        var(--padding-block-start-mobile, var(--padding-block-start)) +
          var(--section-top-offset, 0px)
      )
      var(--padding-block-end-mobile, var(--padding-block-end));
    padding-inline: var(
        --padding-inline-start-mobile,
        var(--padding-inline-start)
      )
      var(--padding-inline-end-mobile, var(--padding-inline-end));
  }
}

/* Size style */
.size-style {
  width: var(--size-style-width-mobile, var(--size-style-width));
  height: var(--size-style-height-mobile, var(--size-style-height));

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

/* Section width full vs. page
   The reason we use a grid to contain the section is to allow for the section to have a
   full-width background image even if the section content is constrained by the page width. Do not try
   to rewrite this to max-width: --page-width; margin: 0 auto;, it doesn't work. */
.section {
  --full-page-grid-central-column-width: min(
    var(--page-width) - var(--page-margin) * 2,
    calc(100% - var(--page-margin) * 2)
  );
  --full-page-grid-margin: minmax(var(--page-margin), 1fr);
  --full-page-grid-with-margins: var(--full-page-grid-margin)
    var(--full-page-grid-central-column-width) var(--full-page-grid-margin);

  /* Utility variable gives the grid's first column width. Provides an offset width for components like carousels */
  --util-page-margin-offset: max(
    var(--page-margin),
    calc(
      (
          100% -
            min(
              var(--page-content-width),
              calc(100% - (var(--page-margin) * 2))
            )
        ) / 2
    )
  );

  /* Offset for full-width sections to account for the page margin,
  used for Marquee — note that --util-page-margin-offset doesn't work here */
  --full-page-margin-inline-offset: calc(
    ((100vw - var(--full-page-grid-central-column-width)) / 2) * -1
  );

  width: 100%;

  /* This is required to make background images work, which are <img> rendered absolutely */
  position: relative;

  /* Set up the grid */
  display: grid;
  grid-template-columns: var(--full-page-grid-with-margins);
  min-height: var(--section-min-height, "auto");
}

/* Place all direct children in the center column by default */
.section > * {
  grid-column: 2;
}

/* Make the actual section background transparent, and instead apply it to a separate sibling element to enable stacking with hero shadow  */
.shopify-section:not(.header-section) :is(.section, .cart__summary-container) {
  background: transparent;
}

.shopify-section:not(.header-section):has(.section) {
  position: relative;
}

.shopify-section:not(.header-section) .section-background {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--layer-section-background);
}

/* For page-width sections, all content goes in the center column */
.section--page-width > * {
  grid-column: 2;
}

/* For full-width sections, content spans all columns */
.section--full-width > * {
  grid-column: 1 / -1;
}

/* Some page-width sections should still extend all the way to the right edge of the page, e.g. collection carousel */
.section--page-width.section--full-width-right > * {
  grid-column: 2 / 4;
}

/* For full-width sections with margin, content still spans full width but with space on the sides */
.section--full-width.section--full-width-margin > * {
  grid-column: 1 / -1;

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

/* Some section content break out to full width of the page */
.section > .force-full-width {
  grid-column: 1 / -1;
}

.section--height-small {
  --section-min-height: var(--section-height-small);
}

.section--height-medium {
  --section-min-height: var(--section-height-medium);
}

.section--height-large {
  --section-min-height: var(--section-height-large);
}

.section--height-full-screen {
  --section-min-height: 100svh;
}

.section-content-wrapper.section-content-wrapper {
  min-height: calc(
    var(--section-min-height, "auto") - var(--section-height-offset, 0px)
  );
  position: relative;
  width: 100%;
  height: 100%;
}

/* When header is transparent, pull the first main content section up to sit under the floating header */
body:has(.header[transparent])
  .content-for-layout
  > .shopify-section:first-child {
  margin-top: calc(var(--header-group-height) * -1);
}

body:has(.header[transparent]) #header-group > *:not(.header-section) {
  z-index: 1;
}

body:has(.header[transparent]) #header-group > .header-section {
  z-index: var(--layer-sticky);
}

.hero-wrapper {
  --hero-height-offset: 0px;
}

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

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

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

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

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

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

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

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

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

  &[transparent='not-sticky'][data-sticky-state='active'],
    /* Only show opaque background when hovering over menu items with children (mega menu)
       Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'], [data-animating])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'], [data-animating])) {
    --header-logo-display: unset;
    --header-logo-inverse-display: unset;
    --header-bg-color: unset;
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-background: inherit;
    --color-background-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;

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

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

.header[transparent]::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background-color: #00000080;
  mask-image: linear-gradient(to bottom, #000 50%, #0009 100%, #0000);
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 50%,
    rgba(0, 0, 0, 0.6) 100%,
    rgba(0, 0, 0, 0) 100%
  );
}

.header[transparent]:has(
    .menu-list__link[aria-haspopup]:is(
        :hover,
        [aria-expanded="true"],
        [data-animating]
      )
  ):before {
  mask-image: none;
}

:is(
    .header[transparent]:not([data-sticky-state="active"]),
    .header[transparent="always"][data-sticky-state="active"]
  )
  .header__row:not(
    :has(
        .mega-menu__list:hover,
        .menu-list__link[aria-haspopup]:is(
            :hover,
            [aria-expanded="true"],
            [data-animating]
          ),
        .menu-list__list-item[slot="overflow"]
          .menu-list__link:is(:hover, [aria-expanded="true"], [data-animating])
      )
  ) {
  /* while transparent, header-row ignores its color-scheme settings, pull from the header-component */
  --color-foreground: inherit;
  --color-foreground-rgb: inherit;
  --color-border: inherit;
  --color-border-rgb: inherit;
  --color-primary-button-background: inherit;
  --color-primary-button-text: inherit;
}

.header--inherit-color-scheme-on-menu-open:has(.mega-menu__list:hover)
  .header__row,
.header--inherit-color-scheme-on-menu-open:has(
    .menu-list__link[aria-haspopup]:is(
        :hover,
        [aria-expanded="true"],
        [data-animating]
      )
  )
  .header__row,
.header--inherit-color-scheme-on-menu-open:has(
    .menu-list__list-item[slot="overflow"]
      .menu-list__link:is(:hover, [aria-expanded="true"], [data-animating])
  )
  .header__row {
  --color-foreground: inherit;
  --color-foreground-rgb: inherit;
  --color-background: inherit;
  --color-background-rgb: inherit;
  --color-border: inherit;
  --color-border-rgb: inherit;
}

.header-section {
  position: relative;
}

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

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

  /* Use -1 instead of 0 so intersection observer can track sticky state */
  top: -1px;
  z-index: var(--layer-header-menu);
}

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

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

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

.header__row {
  position: relative;

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

.header__row--top:not(.divider--page-width),
.header__row--top.divider--page-width .header__columns,
.header__row--bottom {
  border-bottom: var(--border-bottom-width) solid var(--color-border);
}

.header[transparent] .header__row--top:not(.divider--page-width),
.header[transparent] .header__row--top.divider--page-width .header__columns,
.header[transparent] .header__row--bottom {
  border-color: #fff3 !important;
}

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

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

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

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

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

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

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

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

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

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

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

  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: 4fr;
      --header-left: 1fr;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.header-quick-links {
  display: flex;
  gap: 20px;
  justify-content: flex-end;
  align-items: center;
  padding: 0 3rem;
  border-bottom: 1px solid var(--color-border);
  margin: 0 auto;
}

.header-quick-links .trustpilot-widget {
  margin-right: auto;
  width: 420px;
}
@media screen and (max-width: 1148px) {
  .header-quick-links .trustpilot-widget {
    display: none;
  }
}

.header[transparent] .header-quick-links {
  border-color: #fff3 !important;
}

@media screen and (max-width: 750px) {
  .header-quick-links {
    display: none;
  }
}

.header-quick-links__link {
  font-size: 12px;
  font-family: var(--font-heading--family);
  color: var(--color-foreground);
  font-weight: 600;
  margin: 0;
  cursor: pointer;
  padding-block: 0.8rem;
  text-wrap: wrap;
}

.header-quick-links > .header-quick-links__link:first-of-type {
  color: #ef5328;
}

.header-quick-links__link--title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-direction: row;

  svg {
    margin-top: 4px;
    transition: transform 0.2s ease;
  }
}

.header-quick-links__link--child {
  font-size: 12px;
  color: #fff;
  font-weight: 600;
  display: block;
  width: 100%;
  padding: 12px 15px;
  border-bottom: 1px solid #4e5566;
  transition: opacity 0.2s ease;
}

.header-quick-links__dropdown-menu:hover .header-quick-links__link--child {
  opacity: 0.5;
}

.header-quick-links__dropdown-menu:hover
  .header-quick-links__link--child:hover {
  opacity: 1;
}

.header-quick-links__dropdown-menu {
  opacity: 0;
  visibility: hidden;
  max-width: 10rem;
  flex-direction: column;
  position: absolute;
  background: var(--color-foreground);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #ffffff;
  z-index: 1000;
  transition: opacity 0.1s ease, visibility 0.1s ease;
  transition-delay: 0.2s;
}

.header[transparent] .header-quick-links__dropdown-menu {
  background: var(--color-background);
}

.header-quick-links__dropdown:hover .header-quick-links__dropdown-menu {
  opacity: 1;
  visibility: visible;
  display: flex;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  transition-delay: 0s;
}

.header-quick-links__dropdown-menu:hover {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  transition-delay: 0s;
}

.header-quick-links__dropdown:hover .header-quick-links__link--title svg {
  transform: rotate(180deg);
}

/* When the header is transparent, add a margin to a potential header-section below it */
.header-section:has(.header[transparent]) + .shopify-section {
  margin-top: var(--header-height);
}

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

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

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

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

/* Mega Menu Blocks */
.mega-menu-blocks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
  grid-column: span 2;
  grid-row: span 2;
  gap: var(--gap-xl);

  @media screen and (min-width: 1200px) {
    grid-column: span 4;
    grid-template-rows: repeat(1, 1fr);
    grid-row: span 1;
  }
}

.mega-menu-blocks__item {
  grid-column: span var(--image-block-span);
  height: 100%;

  @media screen and (max-width: 1200px) {
    grid-column: span 2;
    grid-row: span 1;
  }
}

.mega-menu-blocks__item a {
  display: block;
}

.mega-menu-blocks__image-wrapper {
  aspect-ratio: var(--aspect-ratio);
  width: 100%;
}

.mega-menu-blocks__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mega-menu-blocks__label {
  font-family: var(--font-heading--family);
  text-wrap: wrap;
  font-size: 0.875rem;
  line-height: var(--font-paragraph--line-height);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-foreground);
  margin-top: 1.25rem;
  display: block;
}

.header[transparent] .header__row {
  background-color: transparent;
  --color-border: #ffffff33;
}

.header[transparent]:has(.mega-menu__list:hover),
.header[transparent]:has(
    .menu-list__link[aria-haspopup]:is(
        :hover,
        [aria-expanded="true"],
        [data-animating]
      )
  ) {
  --color-background: transparent;
}

.header[transparent]:has(.mega-menu__list:hover) .header__row--top,
.header[transparent]:has(
    .menu-list__link[aria-haspopup]:is(
        :hover,
        [aria-expanded="true"],
        [data-animating]
      )
  )
  .header__row--top,
.header[transparent]:has(.header-menu[data-overflow-expanded="true"])
  .header__row--top {
  background-color: #00000080;
}

.header[transparent]
  .menu-list__list-item:where(:not([slot="overflow"]))
  > .menu-list__submenu,
.header[transparent] .overflow-menu::part(overflow) {
  background-color: transparent;
  backdrop-filter: blur(20px);
}

.header[transparent]
  :is(
    .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: var(--color-foreground) !important;
}

.header[transparent] .header__row {
  --color-background: rgb(0 0 0 / 1);
}

.mega-menu-blocks__image {
  border-radius: 0;
}

@media screen and (max-width: 749px) {
  /* Dissolve header-actions so account and cart can be individually grid-placed */
  .header--swap-mobile-icons header-actions {
    display: contents;
  }

  /* account-popover has mobile:hidden so it becomes display:none — no layout impact */
  .header--swap-mobile-icons .account-drawer {
    grid-area: leftA;
  }

  .header--swap-mobile-icons cart-drawer,
  .header--swap-mobile-icons .action__cart {
    grid-area: rightA;
  }

  .header--swap-mobile-icons .header__drawer {
    grid-area: rightB;
  }

  .header--swap-mobile-icons .menu-drawer-container .header__icon--summary {
    padding: var(--padding-xs);
  }

  .header--swap-mobile-icons .search-modal__button .svg-wrapper {
    justify-content: center;
  }
}

header-actions {
  display: flex;

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

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

.header-actions__action {
  --button-color: var(--color-foreground);

  cursor: pointer;
  display: flex;
  justify-content: center;
}

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

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

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

  position: relative;
}

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

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

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

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

.hero .size-style {
  font-family: var(--font-heading--family);
  font-weight: 600;
  font-size: 12px;
}

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

  min-height: 600px;
}

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

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

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

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

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

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

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

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

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

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

.hero__video-wrapper {
  position: relative;
}

.hero__video-poster {
  position: absolute;
}

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

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

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

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

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

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

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

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

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

    &:last-child {
      right: 0;
      left: auto;
    }
  }
}

.hero .text-block em {
  -webkit-text-stroke: 2px currentColor;
  text-stroke: 2px currentColor;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  font-style: normal;
  color: currentColor;
}

.hero__mobile-video,
.hero__tablet-video {
  display: none;
}

.hero__desktop-video {
  display: contents;
}

@media screen and (max-width: 480px) {
  .hero__mobile-video {
    display: contents;
  }
  .hero__tablet-video,
  .hero__desktop-video {
    display: none;
  }
}

@media screen and (min-width: 481px) and (max-width: 1024px) {
  .hero__tablet-video {
    display: contents;
  }
  .hero__mobile-video,
  .hero__desktop-video {
    display: none;
  }
}

.menu-drawer__menu {
  list-style: none;
  padding: 0;
  margin-inline: 0;
  margin-block-start: 0;
}

marquee-component {
  display: block;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-background);
}

.marquee__wrapper {
  display: flex;
  gap: var(--marquee-gap);
  width: fit-content;
  white-space: nowrap;
}

.marquee__content {
  min-width: max-content;
  display: flex;
  gap: var(--marquee-gap);
}

.marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
  white-space: nowrap;
}

.marquee__content .marquee__repeated-items * {
  max-width: none;
}

.marquee__repeated-items {
  min-width: max-content;
  display: flex;
  gap: var(--marquee-gap);
  align-items: center;
  justify-content: center;
}

.marquee__repeated-items > * {
  align-content: center;
}

.hero__content-wrapper.layout-panel-flex--column marquee-component {
  --margin-inline: var(--full-page-margin-inline-offset);

  width: -webkit-fill-available;
  min-height: max-content;
}

@media (prefers-reduced-motion: no-preference) {
  marquee-component:not([data-disabled]) .marquee__wrapper {
    animation: marquee-motion var(--marquee-speed) linear infinite
      var(--marquee-direction);
  }
}

@keyframes marquee-motion {
  to {
    transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
  }
}

marquee-component {
  display: block;
  width: 100%;
  overflow: hidden;
}

.marquee__wrapper {
  display: flex;
  gap: var(--marquee-gap);
  width: fit-content;
  white-space: nowrap;
}

.marquee__content {
  min-width: max-content;
  display: flex;
  gap: var(--marquee-gap);
}

.marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
  white-space: nowrap;
}

.marquee__content .marquee__repeated-items * {
  max-width: none;
}

.marquee__repeated-items {
  min-width: max-content;
  display: flex;
  gap: var(--marquee-gap);
  align-items: center;
  justify-content: center;
  position: relative;
}

.marquee__repeated-items > * {
  align-content: center;
}

@media (prefers-reduced-motion: no-preference) {
  marquee-component:not([data-disabled]) .marquee__wrapper {
    animation: marquee-motion var(--marquee-speed) linear infinite
      var(--marquee-direction);
  }
}

@keyframes marquee-motion {
  to {
    transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
  }
}

/**
 * Section.liquid
 */
.section-wrapper {
  --section-height-offset: 0px;
}

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

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

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

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

.custom-section-content {
  z-index: var(--layer-flat);
}

.section--narrow-width {
  --page-content-width: var(--narrow-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

@media screen and (max-width: 749px) {
  .section--narrow-width {
    --page-content-width: var(--normal-page-width);
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
  }
}

.section--narrow-width > * {
  grid-column: 2;
}