/** Shopify CDN: Minification failed

Line 2816:0 All "@import" rules must come first

**/
* {
  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);
  --submenu-animation-speed: 360ms;
  --submenu-animation-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
}

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

@media (min-width: 990px) {
  html:has(.page-wrapper),
  html:has(.page-wrapper) body {
    height: 100dvh;
    overflow: hidden;
  }
}

html[scroll-lock],
html[scroll-lock] .page-wrapper {
  overflow: hidden;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  transition: margin-right var(--animation-speed) var(--animation-timing-fade-out);
}

@media (min-width: 990px) {
  .page-wrapper {
    height: 100dvh;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) var(--color-background);
  }

  .page-wrapper--drawer-open shopify-account::part(dialog) {
    translate: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
  }
}

.page-wrapper--drawer-open {
  margin-right: var(--theme-drawer-width, var(--sidebar-width));
  transition-timing-function: var(--animation-timing-fade-in);
}

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

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

.product-card,
.collection-card,
.predictive-search-results__card--product,
.predictive-search-results__card {
  position: relative;
  transition: transform var(--hover-transition-duration) var(--hover-transition-timing),
    box-shadow var(--hover-transition-duration) var(--hover-transition-timing);
  z-index: var(--layer-flat);
}

.product-card__link {
  position: absolute;
  inset: 0;
}

.product-card__content {
  position: relative;
}

.product-card__content {
  cursor: pointer;
}

@media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card-hover-effect-lift .product-card:hover,
  .card-hover-effect-lift .collection-card:hover,
  .card-hover-effect-lift .predictive-search-results__card:hover {
    transform: translateY(calc(-1 * var(--hover-lift-amount)));
  }

  .card-hover-effect-scale .product-card:hover,
  .card-hover-effect-scale .collection-card:hover,
  .card-hover-effect-scale .predictive-search-results__card:hover {
    transform: scale(var(--hover-scale-amount));
  }

  .card-hover-effect-subtle-zoom .card-gallery,
  .card-hover-effect-subtle-zoom .collection-card__image,
  .card-hover-effect-subtle-zoom .product-card__image {
    overflow: hidden;
    transition: transform var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .card-hover-effect-subtle-zoom .product-card:hover .card-gallery,
  .card-hover-effect-subtle-zoom .collection-card:hover .collection-card__image,
  .card-hover-effect-subtle-zoom .product-card:hover .product-card__image,
  .card-hover-effect-subtle-zoom .predictive-search-results__card:hover {
    transform: scale(var(--hover-subtle-zoom-amount));
  }
}

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

/* view transitions */

/*
 * The cross-document (MPA) opt-in `@view-transition { navigation: auto }` is declared per-layout
 * (layout/theme.liquid and layout/password.liquid), because this stylesheet is shared by both layouts
 * and a static stylesheet can't read theme settings.
 * It is gated on the same `settings.page_transition_enabled or settings.transition_to_main_product` condition as the
 * render blocker, so the opt-in and its opt-out switch can never disagree. The rules below only
 * take effect once an `@view-transition` opt-in is active, so they are inert without it.
 */
@media (prefers-reduced-motion: no-preference) {
  /* Keep page interactive while view transitions are running */
  :root {
    view-transition-name: none;
  }

  /* Have the root transition during page navigation */
  html:active-view-transition-type(page-navigation),
  html:active-view-transition-type(product-image-transition) {
    view-transition-name: root-custom;
  }

  ::view-transition {
    pointer-events: none;
  }

  html:active-view-transition-type(page-navigation) main[data-page-transition-enabled='true'] {
    view-transition-name: main-content;
  }

  html:active-view-transition-type(page-navigation) main[data-product-transition='true'][data-template*='product'] {
    view-transition-name: none;
  }

  ::view-transition-old(main-content) {
    animation: var(--view-transition-old-main-content);
  }

  ::view-transition-new(main-content) {
    animation: var(--view-transition-new-main-content);
  }

  html:active-view-transition-type(product-image-transition) {
    [data-view-transition-type='product-image-transition'] {
      view-transition-name: product-image-transition;
    }

    [data-view-transition-type='product-details'] {
      view-transition-name: product-details;
    }
  }

  ::view-transition-group(product-image-transition) {
    z-index: 1;
  }

  ::view-transition-group(product-image-transition),
  ::view-transition-group(product-details) {
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
  }

  ::view-transition-old(product-image-transition),
  ::view-transition-new(product-image-transition) {
    block-size: 100%;
    overflow: hidden;
    object-fit: cover;
    animation-duration: 0.25s;
    animation-timing-function: var(--animation-easing);
  }

  ::view-transition-new(product-details) {
    animation: var(--view-transition-new-main-content);
  }
}

/* Focus */
*:focus-visible {
  outline: var(--focus-outline-width) solid currentcolor;
  outline-offset: var(--focus-outline-offset);
}

@supports not selector(:focus-visible) {
  *:focus {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }
}

.focus-inset {
  outline-offset: calc(var(--focus-outline-width) * -1);
}

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

.content-for-layout > .shopify-section:last-child {
  flex-grow: 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));
}

/* 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), 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) {
  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);
  background-color: var(--color-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;
}

@media screen and (max-width: 749px) {
  .section--mobile-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%;
}

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

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

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

/* Icons */
.icon-success,
.icon-error {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  flex-shrink: 0;
}

.icon-success {
  color: var(--color-success);
}

.icon-error {
  fill: var(--color-error);
}

.icon-default {
  fill: currentColor;
}

[data-placeholder='true'] * {
  cursor: default;
}

/* Base text and heading styles */
body,
.paragraph:not(.button),
.paragraph > *,
.text-block.paragraph :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-weight: var(--font-paragraph--weight);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  text-transform: var(--font-paragraph--case);
  -webkit-font-smoothing: antialiased;
  color: var(--color, var(--color-foreground));
}

/* Ensure inputs with type presets maintain minimum 16px on mobile to prevent iOS zoom */
@media screen and (max-width: 1440px) {
  input.paragraph.paragraph,
  input.paragraph.paragraph:not([type]),
  textarea.paragraph.paragraph,
  select.paragraph.paragraph {
    font-size: max(1rem, var(--font-paragraph--size));
  }
}

.paragraph > small {
  font-size: smaller;
}

/* Typography presets */

h1,
.h1.h1,
.text-block.h1 > *,
.text-block.h1 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h1--family);
  font-style: var(--font-h1--style);
  font-weight: var(--font-h1--weight);
  font-size: var(--font-h1--size);
  line-height: var(--font-h1--line-height);
  letter-spacing: var(--font-h1--letter-spacing);
  text-transform: var(--font-h1--case);
  color: var(--color);
}

@media screen and (max-width: 1440px) {
  input.h1.h1,
  textarea.h1.h1,
  select.h1.h1 {
    font-size: max(1rem, var(--font-h1--size));
  }
}

h2,
.h2.h2,
.text-block.h2 > *,
.text-block.h2 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h2--family);
  font-style: var(--font-h2--style);
  font-weight: var(--font-h2--weight);
  font-size: var(--font-h2--size);
  line-height: var(--font-h2--line-height);
  letter-spacing: var(--font-h2--letter-spacing);
  text-transform: var(--font-h2--case);
  color: var(--color);
}

@media screen and (max-width: 1440px) {
  input.h2.h2,
  textarea.h2.h2,
  select.h2.h2 {
    font-size: max(1rem, var(--font-h2--size));
  }
}

h3,
.h3,
.h3.h3,
.text-block.h3 > *,
.text-block.h3 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h3--family);
  font-style: var(--font-h3--style);
  font-weight: var(--font-h3--weight);
  font-size: var(--font-h3--size);
  line-height: var(--font-h3--line-height);
  letter-spacing: var(--font-h3--letter-spacing);
  text-transform: var(--font-h3--case);
  color: var(--color);
}

@media screen and (max-width: 1440px) {
  input.h3,
  textarea.h3,
  select.h3 {
    font-size: max(1rem, var(--font-h3--size));
  }
}

h4,
.h4.h4,
.text-block.h4 > *,
.text-block.h4 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h4--family);
  font-style: var(--font-h4--style);
  font-weight: var(--font-h4--weight);
  font-size: var(--font-h4--size);
  line-height: var(--font-h4--line-height);
  letter-spacing: var(--font-h4--letter-spacing);
  text-transform: var(--font-h4--case);
  color: var(--color);
}

@media screen and (max-width: 1440px) {
  input.h4.h4,
  textarea.h4.h4,
  select.h4.h4 {
    font-size: max(1rem, var(--font-h4--size));
  }
}

h5,
.h5.h5,
.text-block.h5 > *,
.text-block.h5 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h5--family);
  font-style: var(--font-h5--style);
  font-weight: var(--font-h5--weight);
  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);
  color: var(--color);
}

@media screen and (max-width: 1440px) {
  input.h5.h5,
  textarea.h5.h5,
  select.h5.h5 {
    font-size: max(1rem, var(--font-h5--size));
  }
}

h6,
.h6.h6,
.text-block.h6 > *,
.text-block.h6 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h6--family);
  font-style: var(--font-h6--style);
  font-weight: var(--font-h6--weight);
  font-size: var(--font-h6--size);
  line-height: var(--font-h6--line-height);
  letter-spacing: var(--font-h6--letter-spacing);
  text-transform: var(--font-h6--case);
  color: var(--color);
}

@media screen and (max-width: 1440px) {
  input.h6.h6,
  textarea.h6.h6,
  select.h6.h6 {
    font-size: max(1rem, var(--font-h6--size));
  }
}

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

:last-child:is(.h1, .h2, .h3, .h4, .h5, .h6) {
  margin-block-end: 0;
}

/* Links */
a {
  color: currentcolor;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.125em;
  transition: text-decoration-color var(--animation-speed) var(--animation-easing),
    color var(--animation-speed) var(--animation-easing);
}

:is(h1, h2, h3, h4, h5, h6, p) > a:hover {
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / 0.7);
}

/* Add underline to text using our paragraph styles only. */
p:not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-secondary)),
.rte :is(p, ul, ol, table):not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-secondary)) {
  text-decoration-color: currentcolor;

  &:hover {
    text-decoration-color: currentcolor;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / 0.7);
  }
}

.container-background-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

details[open] .summary-closed {
  display: none;
}

details:not([open]) .summary-open {
  display: none;
}

details[open] > summary .icon-animated > svg {
  transform: rotate(180deg);
}

/* iOS fix: hide the default arrow on the summary */
summary::-webkit-details-marker {
  display: none;
}

/* 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 > .header-section {
  z-index: var(--layer-menu-drawer);
}

/* All other header group content should be beneath the floating header,
but above the rest of the page content */
body:has(.header[transparent]) #header-group > *:not(.header-section) {
  z-index: calc(var(--layer-menu-drawer) - 1);
}

.text-block {
  width: 100%;
}

.text-block > *:first-child,
.text-block > *:first-child:empty + * {
  margin-block-start: 0;
}

.text-block > *:last-child,
.text-block > *:has(+ *:last-child:empty) {
  margin-block-end: 0;
}

/* This is to deal with the margin applied to the p when custom styles are enabled. The p isn't the first child anymore due to the style tag */
.text-block > style + * {
  margin-block-start: 0;
}

/* Dialog */
.dialog-modal {
  border: none;
  box-shadow: var(--shadow-popover);

  @media screen and (min-width: 750px) {
    border-radius: var(--style-border-radius-popover);
    max-width: var(--normal-content-width);
  }

  @media screen and (max-width: 749px) {
    max-width: 100%;
    max-height: 100%;
    height: 100dvh;
    width: 100dvw;
    padding: var(--padding-md);
  }
}

.dialog-modal::backdrop {
  transition: backdrop-filter var(--animation-speed) var(--animation-easing);
  backdrop-filter: brightness(1);
  background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
}

.dialog-modal[open] {
  animation: elementSlideInTop var(--animation-speed) var(--animation-easing) forwards;

  &::backdrop {
    animation: backdropFilter var(--animation-speed) var(--animation-easing) forwards;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }
}

.dialog-modal.dialog-closing {
  animation: elementSlideOutTop var(--animation-speed) var(--animation-easing) forwards;

  &::backdrop {
    opacity: 0;
  }
}

/* stylelint-disable value-keyword-case */
.dialog-drawer {
  --dialog-drawer-opening-animation: move-and-fade;
  --dialog-drawer-closing-animation: move-and-fade;
}

.dialog-drawer--right {
  --dialog-drawer-opening-animation: move-and-fade;
  --dialog-drawer-closing-animation: move-and-fade;
}
/* stylelint-enable value-keyword-case */

.dialog-drawer[open] {
  --start-x: var(--custom-transform-from, 100%);
  --end-x: var(--custom-transform-to, 0px);
  --start-opacity: 1;

  animation: var(--dialog-drawer-opening-animation) var(--animation-speed) var(--animation-easing) forwards;
}

.dialog-drawer[open].dialog-closing {
  --start-x: 0px;
  --end-x: 100%;
  --start-opacity: 1;
  --end-opacity: 1;

  animation: var(--dialog-drawer-closing-animation) var(--animation-speed) var(--animation-easing);
}

.dialog-drawer--right[open] {
  --start-x: -100%;
  --start-opacity: 1;
}

.dialog-drawer--right[open].dialog-closing {
  --start-x: 0px;
  --end-x: -100%;
  --start-opacity: 1;
  --end-opacity: 1;

  animation: var(--dialog-drawer-closing-animation) var(--animation-speed) var(--animation-easing);
}

/* Buttons */
.button,
.button-secondary,
.button-custom,
button.shopify-payment-button__button--unbranded {
  --text-align: center;

  display: grid;
  align-content: center;
  text-decoration: none;
  text-align: var(--text-align);
  color: var(--button-color);
  appearance: none;
  background-color: var(--button-background-color);
  border: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-weight: var(--font-paragraph--weight);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  margin-block: 0;
  transition: color var(--animation-speed) var(--animation-easing),
    box-shadow var(--animation-speed) var(--animation-easing),
    background-color var(--animation-speed) var(--animation-easing);
  cursor: pointer;
  width: fit-content;
  box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color);
  padding-block: var(--button-padding-block);
  padding-inline: var(--button-padding-inline);
}

.button {
  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
  border-radius: var(--style-border-radius-buttons-primary);
}

.button:not(.button-secondary, .button-unstyled) {
  outline-color: var(--button-focus-outline-color, var(--button-background-color));
}

.button-secondary {
  font-family: var(--button-font-family-secondary);
  text-transform: var(--button-text-case-secondary);
  border-radius: var(--style-border-radius-buttons-secondary);
}

button.shopify-payment-button__button--unbranded {
  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
}

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

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

textarea:not(:placeholder-shown)::placeholder,
input:not(:placeholder-shown)::placeholder {
  opacity: 0;
}

/* The declaration above is messing with buttons that have an attribute of hidden as it overwrites the display value */
.button[hidden] {
  display: none;
}

.button[aria-disabled='true'],
.button-secondary[aria-disabled='true'],
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button,
button.shopify-payment-button__button--unbranded {
  --button-color: var(--color-primary-button-text);
  --button-background-color: var(--color-primary-button-background);
  --button-border-color: var(--color-primary-button-border);
  --button-border-width: var(--style-border-width-primary);
  --button-focus-outline-color: var(--color-primary-button-focus-outline);
}

.button:hover,
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  --button-color: var(--color-primary-button-hover-text);
  --button-background-color: var(--color-primary-button-hover-background);
  --button-border-color: var(--color-primary-button-hover-border);
}

.button-secondary {
  --button-color: var(--color-secondary-button-text);
  --button-background-color: var(--color-secondary-button-background);
  --button-border-color: var(--color-secondary-button-border);
  --button-border-width: var(--style-border-width-secondary);
}

.button-secondary:hover {
  --button-color: var(--color-secondary-button-hover-text);
  --button-background-color: var(--color-secondary-button-hover-background);
  --button-border-color: var(--color-secondary-button-hover-border);
}

.button-custom {
  --button-color: var(--color-primary-button-text);
  --button-background-color: var(--color-primary-button-background);
  --button-border-color: var(--color-primary-button-border);
  --button-border-width: var(--style-border-width-secondary);
  --button-focus-outline-color: var(--color-primary-button-focus-outline);

  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
  border-radius: var(--style-border-radius-buttons-primary);
  outline-color: var(--button-focus-outline-color, var(--button-background-color));
}

.button-custom:hover {
  --button-color: var(--color-primary-button-hover-text);
  --button-background-color: var(--color-primary-button-hover-background);
  --button-border-color: var(--color-primary-button-hover-border);
}

/* Needed to override the default Shopify styles */
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  background-color: var(--button-background-color);
}

.button-unstyled {
  display: block;
  padding: 0;
  background-color: inherit;
  color: var(--color-foreground);
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-size: var(--font-paragraph--size);
}

.button-unstyled:hover {
  background-color: inherit;
}

/* Default hover dim for link-style buttons, scoped via :where() so component-specific
   hover rules (.facets__clear-all-link, .header-actions__action, etc.) still win. */
:where(.button-unstyled):hover {
  --hover-color-rgb: var(--color-foreground-rgb);

  color: rgb(var(--hover-color-rgb) / var(--opacity-70));
}

.button-unstyled--with-icon {
  color: var(--color-foreground);
  display: flex;
  gap: var(--gap-2xs);
  align-items: center;
}

.button-unstyled--transparent {
  background-color: transparent;
  box-shadow: none;
}

/* Collapsible row */

.icon-caret svg {
  transition: transform var(--animation-speed) var(--animation-easing);
}

.icon-caret--forward svg {
  transform: rotate(-90deg);
}

.icon-caret--backward svg {
  transform: rotate(90deg);
}

summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding-block: var(--padding-sm);
}

summary:hover {
  color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
}

summary .svg-wrapper {
  margin-inline-start: auto;
  height: var(--icon-size-xs);
  width: var(--icon-size-xs);
  transition: transform var(--animation-speed) var(--animation-easing);
}

/* Shared plus/minus icon animations */
summary .icon-plus :is(.horizontal, .vertical) {
  transition: transform var(--animation-speed) var(--animation-easing);
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  opacity: 1;
}

details[open] > summary .icon-plus .horizontal {
  transform: rotate(90deg);
}

details[open] > summary .icon-plus .vertical {
  transform: rotate(90deg);
  opacity: 0;
}

/* Animate the UI elements in only after the view transition is complete */
.close-button {
  position: fixed;
  top: var(--margin-lg);
  right: var(--margin-lg);
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
  z-index: var(--layer-flat);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;

  /* For the outline radius */
  border-radius: 50%;
}

/* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */

@supports not (background-color: rgb(from red 150 g b / alpha)) {
  /**
    There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround.
    Using element selector to increase specificity.
  **/

  .close-button:focus-visible {
    outline: none;
    overflow: visible;
  }

  .close-button:focus-visible::after {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--focus-outline-offset));
    border: var(--focus-outline-width) solid currentColor;
    border-radius: 50%;
    display: inherit;
  }
}

.dialog--closed .close-button {
  animation: elementSlideOutBottom calc(var(--animation-speed) * 0.5) var(--animation-easing) forwards;
}

.close-button:hover {
  background-color: transparent;
  opacity: 0.8;
}

.close-button svg {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

/* Product media */
.product-media {
  display: flex;
  flex: 1;
}

.sticky-content {
  position: sticky;
  top: var(--sticky-header-offset, 0);
  z-index: var(--layer-flat);
}

@media screen and (min-width: 750px) {
  .sticky-content--desktop,
  .sticky-content--desktop.full-height--desktop > .group-block {
    position: sticky;
    top: var(--sticky-header-offset, 0);
    z-index: var(--layer-flat);
  }
}

.price,
.compare-at-price,
.unit-price {
  white-space: nowrap;
}

.unit-price {
  display: block;
  font-size: min(0.85em, var(--font-paragraph--size));
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
}

.tax-note.tax-note.tax-note {
  font-size: min(0.85em, var(--font-paragraph--size));
  font-weight: var(--font-paragraph--weight);
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
}

.tax-note:empty {
  display: none;
}

product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
  margin-block: 0;
}

/* Volume pricing note should match unit-price styling (small, grey text) */
product-price .volume-pricing-note,
product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) .volume-pricing-note {
  display: block;
  font-family: var(--font-body--family);
  font-weight: normal;
  font-size: var(--font-size--xs);
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
}

.compare-at-price {
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  text-decoration-line: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-30));
}

.price-item__group {
  display: inline-block;
}

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

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

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

/* Custom Typography style */
.custom-typography,
.custom-typography > * {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  text-transform: var(--text-transform);
  text-wrap: var(--text-wrap);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
}

.custom-typography {
  h1 {
    line-height: var(--line-height--display, var(--line-height));
  }

  h2,
  h3,
  h4 {
    line-height: var(--line-height--heading, var(--line-height));
  }

  p {
    line-height: var(--line-height--body, var(--line-height));
  }
}

.custom-font-size,
.custom-font-size > * {
  font-size: var(--font-size);
}

.custom-font-weight,
.custom-font-weight > * {
  font-weight: var(--font-weight);
}

/* Border override style */
.border-style {
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--border-color);
  border-radius: var(--border-radius);
}

/* Gap scaling style */
.gap-style,
.layout-panel-flex {
  --gap-scale: var(--spacing-scale-md);

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

.layout-panel-flex {
  display: flex;
  gap: var(--gap);
  height: 100%;
}

.shopify-block:has(> [shopify-block-empty]) {
  display: none;
}

.layout-panel-flex--row {
  flex-flow: row var(--flex-wrap);
  justify-content: var(--horizontal-alignment);
  align-items: var(--vertical-alignment);
}

.layout-panel-flex--column {
  flex-flow: column var(--flex-wrap);
  align-items: var(--horizontal-alignment);
  justify-content: var(--vertical-alignment);
}

@media screen and (max-width: 749px) {
  .mobile-column {
    flex-flow: column nowrap;
    align-items: var(--horizontal-alignment);
    justify-content: var(--vertical-alignment-mobile);
  }

  .layout-panel-flex--row:not(.mobile-column) {
    flex-wrap: var(--flex-wrap-mobile);
    height: auto;

    > .menu {
      flex: 1 1 min-content;
    }

    > .text-block {
      flex: 1 1 var(--max-width--display-tight);
    }

    > .image-block {
      flex: 1 1 var(--size-style-width-mobile-min);
    }

    > .button {
      flex: 0 0 fit-content;
    }

    > .group-block--height-fill {
      height: calc(var(--section-min-height, auto) - var(--section-height-offset, 0px));
    }
  }
}

@media screen and (min-width: 750px) {
  .layout-panel-flex {
    flex-direction: var(--flex-direction);
  }
}

/* Form fields */
.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--animation-speed) ease;
}

.field__input {
  flex-grow: 1;
  text-align: left;
  border-radius: var(--style-border-radius-inputs);
  transition: box-shadow var(--animation-speed) ease, background-color var(--animation-speed) ease;
  padding: var(--input-padding);
  box-shadow: var(--input-box-shadow);
  background-color: var(--color-input-background);
  color: var(--color-input-text);
  border: none;
  outline: none;
  font-size: var(--font-paragraph--size);

  &:autofill {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }
}

.field__input:focus {
  box-shadow: var(--input-box-shadow-focus);
}

.field__input--button-radius {
  border-radius: var(--style-border-radius-buttons-primary);
}

.field__input--button-padding {
  padding-inline: var(--padding-3xl);
}

.field__label {
  color: rgb(var(--color-input-text-rgb) / var(--opacity-80));
  font-size: var(--font-paragraph--size);
  left: var(--input-padding-x);
  top: 50%;
  transform: translateY(-50%);
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--animation-speed) ease, font-size var(--animation-speed) ease;
}

/* RTE styles */
.rte,
.shopify-policy__title {
  :is(h1, h2, h3, h4, h5, h6) {
    margin-block: clamp(1.5rem, 1em * 3.3, 2.5rem) var(--font-heading--spacing);
  }

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

  ul,
  ol {
    margin-block-start: 0;
    padding-inline-start: 1.5em;
  }

  /* Only apply margin-block-end to the higher level list, not nested lists */
  :is(ul, ol):not(:is(ul, ol) :is(ul, ol)) {
    margin-block-end: 1em;
  }

  blockquote {
    margin-inline: 1.5em 2.3em;
    margin-block: 3.8em;
    padding-inline-start: 0.8em;
    border-inline-start: 1.5px solid rgb(var(--color-foreground-rgb) / var(--opacity-25));
    font-style: italic;
    font-weight: 500;
  }

  .rte-table-wrapper {
    overflow-x: auto;
  }

  table {
    /* stylelint-disable-next-line declaration-no-important */
    width: 100% !important;
    border-collapse: collapse;
  }

  tr:not(:has(td)),
  thead {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    font-weight: bold;
    text-transform: uppercase;
  }

  tr:has(td) {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  th,
  td {
    text-align: start;
    padding-inline: var(--padding-md);
    padding-block: var(--padding-sm);
  }
}

.shopify-policy__container {
  padding-block: var(--padding-xl);
}

/* Radio buttons and checkboxes - shared base styles */
:where(input[type='radio']),
:where(input[type='checkbox']) {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  aspect-ratio: 1;
  margin: 0;
  margin-inline-end: var(--padding-3xs);
  padding: 0;
  border: var(--checkbox-border);
  appearance: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

/* Radio buttons */
input[type='radio'] {
  border-radius: var(--style-border-radius-50);
  background: transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

:where(input[type='radio']):checked {
  border-color: var(--color-foreground);
  background: var(--color-background);
}

:where(input[type='radio']):checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--checkbox-size) / 2);
  height: calc(var(--checkbox-size) / 2);
  background: var(--color-foreground);
  border-radius: var(--style-border-radius-50);
  transition: background 0.2s ease;
}

:where(input[type='radio']):disabled {
  border-color: var(--input-disabled-border-color);
  background-color: var(--input-disabled-background-color);
  cursor: not-allowed;
}

:where(input[type='radio']):disabled:checked::after {
  background: var(--input-disabled-background-color);
}

:where(input[type='radio']):not(:disabled):hover {
  border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

:where(input[type='radio']):not(:disabled):hover:checked {
  border-color: var(--color-foreground);
  background-color: var(--color-background);
}

:where(input[type='radio']):not(:disabled):hover:checked::after {
  background: rgb(var(--color-foreground-rgb) / var(--opacity-85));
}

/* Checkboxes */
:where(input[type='checkbox']) {
  border-radius: var(--checkbox-border-radius);
  background-color: var(--color-background);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

:where(input[type='checkbox']):checked {
  background-color: var(--color-foreground);
  border-color: var(--color-foreground);
}

:where(input[type='checkbox']):checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  background-color: var(--color-background);
  mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

:where(input[type='checkbox']):not(:disabled):hover {
  border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

:where(input[type='checkbox']):not(:disabled):hover:checked {
  border-color: var(--color-foreground);
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
}

:where(input[type='checkbox']):disabled {
  background-color: var(--input-disabled-background-color);
  border-color: var(--input-disabled-border-color);
  cursor: not-allowed;
}

:where(input[type='checkbox']):disabled:checked::after {
  background-color: var(--input-disabled-text-color);
}

/* Shared styles for radio buttons and checkboxes */
:where(input[type='radio']) + label,
:where(input[type='checkbox']) + label {
  display: inline;
  vertical-align: middle;
  cursor: pointer;
}

:where(input[type='radio']):disabled + label,
:where(input[type='checkbox']):disabled + label {
  color: var(--input-disabled-text-color);
  cursor: not-allowed;
}

/* Flexbox for labels wrapping radio buttons or checkboxes */
label:has(input[type='radio']),
label:has(input[type='checkbox']) {
  display: inline-flex;
  align-items: center;
  gap: var(--padding-2xs);
  cursor: pointer;
}

label:has(input[type='radio']:disabled),
label:has(input[type='checkbox']:disabled) {
  cursor: not-allowed;
}

/* ------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------ */

/* Animation declarations - to be kept at the bottom of the file for ease of find */
@keyframes grow {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

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

@keyframes move-and-fade {
  from {
    transform: translate(var(--start-x, 0), var(--start-y, 0));
    opacity: var(--start-opacity, 0);
  }

  to {
    transform: translate(var(--end-x, 0), var(--end-y, 0));
    opacity: var(--end-opacity, 1);
  }
}

@keyframes slideInTopViewTransition {
  from {
    transform: translateY(100px);
  }
}

@keyframes elementSlideInTop {
  from {
    margin-top: var(--padding-sm);
    opacity: 0;
  }

  to {
    margin-top: 0;
    opacity: 1;
  }
}

@keyframes elementSlideOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }
}

@keyframes elementSlideInBottom {
  from {
    transform: translateY(calc(-1 * var(--padding-sm)));
    opacity: 0;
  }

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

@keyframes elementSlideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(calc(-1 * var(--padding-sm)));
    opacity: 0;
  }
}

@keyframes thumbnailsSlideInTop {
  from {
    transform: translateY(calc(-50% + var(--margin-lg)));
    opacity: 0;
  }

  to {
    transform: translateY(-50%);
    opacity: 1;
  }
}

@keyframes thumbnailsSlideOutTop {
  from {
    transform: translateY(-50%);
    opacity: 1;
  }

  to {
    transform: translateY(calc(-50% + var(--margin-lg)));
    opacity: 0;
  }
}

@keyframes thumbnailsSlideInBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

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

@keyframes thumbnailsSlideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes search-element-slide-in-bottom {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

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

  100% {
    transform: translateY(20px);
    opacity: 0;
  }
}

@keyframes dialogZoom {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

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

@keyframes thumbnail-selected {
  0%,
  100% {
    box-shadow: 0 0 0 2px transparent;
    scale: 0.9;
  }

  50% {
    box-shadow: 0 0 0 2px #000;
    scale: 1;
  }
}

@keyframes backdropFilter {
  from {
    backdrop-filter: brightness(1);
  }

  to {
    backdrop-filter: brightness(0.75);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalSlideInTop {
  from {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }

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

@keyframes modalSlideOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }
}

/* Slideshow Arrow Hover Animation - must stay in base.css for proper CSS cascade */

:not(.media-gallery--carousel)
  > :is(slideshow-component:hover, slideshow-component:focus-within):not(:has(slideshow-controls:hover))
  > slideshow-container
  > slideshow-arrows
  .slideshow-control {
  animation: arrowsSlideIn var(--animation-speed) var(--animation-easing) forwards;
}

@keyframes arrowsSlideIn {
  from {
    transform: translate(var(--padding-sm), 0);
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.section-resource-list,
.section-carousel {
  row-gap: var(--gap);
}

.section-resource-list__content {
  display: flex;
  flex-direction: column;
  align-items: var(--horizontal-alignment);
  gap: var(--gap);
  width: 100%;
}

.section-resource-list__content:empty {
  display: none;
}

.section-resource-list__header:is(:empty, :has(.group-block-content:empty)),
.section-resource-list__content:empty {
  display: none;
}

:where(.section-resource-list.section--full-width) product-card[data-product-transition] > .group-block,
:where(.section-carousel.section--full-width) product-card[data-product-transition] > .group-block {
  @media screen and (max-width: 749px) {
    padding-inline: max(var(--padding-xs), var(--padding-inline-start))
      max(var(--padding-xs), var(--padding-inline-end));
  }
}

/* Base styles */
.group-block,
.group-block-content {
  position: relative;
}

.group-block:has(> video-background-component),
.group-block:has(> .background-image-container) {
  overflow: hidden;
}

.group-block-content {
  height: 100%;
  width: 100%;
}

/* Container styles */
.section-content-wrapper.section-content-wrapper:where(.layout-panel-flex) .group-block--fill {
  flex: 1;
}

/* Flex behavior for width variants */
.layout-panel-flex--row > .group-block--width-fit {
  flex: 0;
}

.layout-panel-flex--row > .group-block--width-fill {
  flex: 1;
}

.layout-panel-flex--row > .group-block--width-custom {
  flex-basis: var(--size-style-width);
}

/* Dimension utilities - Height */
.group-block--height-fit {
  height: auto;
}

.group-block--height-custom,
.group-block--height-fill {
  height: var(--size-style-height);
}

/* Flex behavior for height variants */
.layout-panel-flex--column > .group-block--height-fit {
  flex: 0 1 auto;
}

.layout-panel-flex--column > .group-block--height-fill {
  flex: 1;
}

.layout-panel-flex--column > .group-block--height-custom {
  flex-basis: var(--size-style-height);
}

/* Animation transitions */
.transition-background-color {
  transition: background-color var(--animation-speed-medium) ease-in-out;
}

.transition-transform {
  transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
}

.transition-border-color {
  transition: border-color var(--animation-speed-medium) var(--animation-timing-hover);
}

/* Global scrollbar styles */

/* Webkit browsers */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.product-card:hover,
.collection-card:hover,
.predictive-search-results__card--product:hover,
.predictive-search-results__card:hover {
  position: relative;
  z-index: var(--layer-raised);
  transition: transform var(--hover-transition-duration) var(--hover-transition-timing),
    box-shadow var(--hover-transition-duration) var(--hover-transition-timing);
}

/* Prevent iOS zoom on input focus by ensuring minimum 16px font size on mobile */
@media screen and (max-width: 1440px) {
  input,
  textarea,
  select,
  /* Higher specificity to override type preset classes like .paragraph, .h1, etc. */
  .paragraph.paragraph input,
  .paragraph.paragraph textarea,
  .paragraph.paragraph select,
  .h1.h1 input,
  .h1.h1 textarea,
  .h1.h1 select,
  .h2.h2 input,
  .h2.h2 textarea,
  .h2.h2 select,
  .h3.h3 input,
  .h3.h3 textarea,
  .h3.h3 select,
  .h4.h4 input,
  .h4.h4 textarea,
  .h4.h4 select,
  .h5.h5 input,
  .h5.h5 textarea,
  .h5.h5 select,
  .h6.h6 input,
  .h6.h6 textarea,
  .h6.h6 select {
    font-size: max(1rem, 100%);
  }
}

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


/* ==========================================================================
   CLEAN EDITS FOR TEDDY & SONS AURÉLIEN / ICON HOMEPAGE
   ========================================================================== */

/* FORCE ZERO PADDING AND FULL EDGE COVER FOR PRODUCT CARDS */
.product-card-gallery, [class*="product-card-gallery"], [class*="product-card-media"], .card__media, .media {
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.product-card-gallery img, [class*="product-card-gallery"] img, [class*="product-card-media"] img, .card__media img, .media img {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
}

/* BOTH PRIMARY AND SECONDARY HOVER IMAGES MATCH 100% */
.icon-bestsellers-grid .card__media img.primary-img,
.icon-bestsellers-grid .card__media img.secondary-img,
[class*="product-card"] img.primary-img,
[class*="product-card"] img.secondary-img,
.card__media img:first-child,
.card__media img:nth-child(2) {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  transform: none !important;
}

.icon-bestsellers-grid .card__media img.primary-img,
.card__media img:first-child {
  opacity: 1 !important;
  transition: opacity 0.35s ease-in-out !important;
}

.icon-bestsellers-grid .product-card:hover img.primary-img,
.card-wrapper:hover img:first-child:not(:only-child) {
  opacity: 0 !important;
}

.icon-bestsellers-grid .card__media img.secondary-img,
.card__media img:nth-child(2) {
  opacity: 0 !important;
  transition: opacity 0.35s ease-in-out !important;
  pointer-events: none !important;
}

.icon-bestsellers-grid .product-card:hover img.secondary-img,
.card-wrapper:hover img:nth-child(2) {
  opacity: 1 !important;
}

/* ALL SECTION HEADINGS USE SLEEK UPPERCASE SANS-SERIF */
h1:not(.sleek-brand-logo),
h2:not(.sleek-brand-logo),
h3:not(.sleek-brand-logo),
h4:not(.sleek-brand-logo),
.icon-serif-heading,
.icon-hero-pool-content h1,
.icon-tile-body h3,
.icon-mh-title,
.icon-fs-left h2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: #1C1A17 !important;
}

.icon-hero-pool-content h1 {
  font-size: 44px !important;
  color: #ffffff !important;
  letter-spacing: 0.16em !important;
}

.icon-serif-heading {
  font-size: 26px !important;
  letter-spacing: 0.16em !important;
}

.icon-tile-body h3 {
  font-size: 24px !important;
  color: #ffffff !important;
  letter-spacing: 0.14em !important;
}

.icon-mh-title {
  font-size: 22px !important;
  color: #ffffff !important;
  letter-spacing: 0.16em !important;
}

/* ABSOLUTELY PRESERVE LOGO IN CURSIVE ITALIC SERIF */
.sleek-brand-logo,
a.sleek-brand-logo,
.sleek-header-brand a {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  font-style: italic !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  color: #1C1A17 !important;
}


/* ==========================================================================
   SUPER SLEEK LUXURY HEADER & TOP TICKER BAR CSS
   ========================================================================== */

.icon-ticker-bar {
  background: #1C1A17 !important;
  color: #F8F6F0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 11px 0 !important;
  text-align: center !important;
  border-bottom: 1px solid rgba(158, 130, 90, 0.3) !important;
  width: 100% !important;
  display: block !important;
}

header.sleek-header-wrapper,
.sleek-header-wrapper {
  position: sticky !important;
  top: 0 !important;
  z-index: 999999 !important;
  background-color: #F8F6F0 !important;
  border-bottom: 1px solid #E5E3DC !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}

.sleek-header-inner {
  max-width: 1380px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  height: 72px !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.sleek-header-nav {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  justify-content: flex-start !important;
}

.sleek-nav-link {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #1C1A17 !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
  white-space: nowrap !important;
}

.sleek-nav-link:hover {
  opacity: 0.6 !important;
}

.sleek-header-brand {
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.sleek-brand-logo,
a.sleek-brand-logo,
.sleek-header-brand a {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  font-style: italic !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  color: #1C1A17 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.sleek-header-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 20px !important;
}

.sleek-currency-selector {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  color: #1C1A17 !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.sleek-lang-selector {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  color: #1C1A17 !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  padding-left: 12px !important;
  border-left: 1px solid #D5D2C8 !important;
  white-space: nowrap !important;
}

.sleek-header-icons {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-left: 8px !important;
}

.sleek-icon-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #1C1A17 !important;
  text-decoration: none !important;
  position: relative !important;
}

.sleek-cart-btn {
  position: relative !important;
}

.sleek-cart-badge {
  position: absolute !important;
  top: -6px !important;
  right: -8px !important;
  background: #1C1A17 !important;
  color: #ffffff !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

@media (max-width: 1024px) {
  .sleek-header-nav { display: none !important; }
  .sleek-header-inner { grid-template-columns: 1fr auto 1fr !important; }
}


/* ==========================================================================
   SUPER MODERN ULTRA-SLEEK HEADINGS (OUTFIT FONT FAMILY)
   ========================================================================== */

/* All headings & section titles use the super modern Outfit font family */
h1:not(.sleek-brand-logo),
h2:not(.sleek-brand-logo),
h3:not(.sleek-brand-logo),
h4:not(.sleek-brand-logo),
.icon-serif-heading,
.icon-hero-pool-content h1,
.icon-tile-body h3,
.icon-mh-title,
.icon-fs-left h2,
.icon-pillar-item h4,
.icon-usp-box h4,
.product-title,
.product-title a {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
}

/* Hero Section Title */
.icon-hero-pool-content h1 {
  font-size: 42px !important;
  font-weight: 800 !important;
  letter-spacing: 0.22em !important;
  color: #ffffff !important;
}

/* Section Headings (Bestsellers, Champions, Flagship, etc.) */
.icon-serif-heading {
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  color: #1C1A17 !important;
}

/* Category Tiles Headings */
.icon-tile-body h3 {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: #ffffff !important;
}

/* Must Haves Title */
.icon-mh-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  color: #ffffff !important;
}

/* Strictly Preserve Logo in Cursive Serif */
.sleek-brand-logo,
a.sleek-brand-logo,
.sleek-header-brand a {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  font-style: italic !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  color: #1C1A17 !important;
}


/* ==========================================================================
   EXACT SWISS NEO-GROTESQUE DISPLAY FONT (MATCHING USER'S "NEW ARRIVALS" SCREENSHOT)
   ========================================================================== */

/* Headings use clean Helvetica Neue / Inter / Swiss Grotesk with compact 0.04em letter-spacing */
h1:not(.sleek-brand-logo),
h2:not(.sleek-brand-logo),
h3:not(.sleek-brand-logo),
h4:not(.sleek-brand-logo),
.icon-serif-heading,
.icon-hero-pool-content h1,
.icon-tile-body h3,
.icon-mh-title,
.icon-fs-left h2,
.icon-pillar-item h4,
.icon-usp-box h4 {
  font-family: "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #1C1A17 !important;
}

/* Hero Title */
.icon-hero-pool-content h1 {
  font-size: 42px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  color: #ffffff !important;
}

/* Section Headings (BESTSELLERS, WORN BY CHAMPIONS, etc.) */
.icon-serif-heading {
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: #1C1A17 !important;
}

/* Category Tiles Headings */
.icon-tile-body h3 {
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: #ffffff !important;
}

/* Must Haves Title */
.icon-mh-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  color: #ffffff !important;
}

/* ABSOLUTELY PRESERVE LOGO IN CURSIVE ITALIC SERIF */
.sleek-brand-logo,
a.sleek-brand-logo,
.sleek-header-brand a {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  font-style: italic !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  color: #1C1A17 !important;
}


/* ==========================================================================
   MONTSERRAT GEOMETRIC SANS-SERIF HEADINGS
   ========================================================================== */

/* All headings & section titles use Google Font Montserrat */
h1:not(.sleek-brand-logo),
h2:not(.sleek-brand-logo),
h3:not(.sleek-brand-logo),
h4:not(.sleek-brand-logo),
.icon-serif-heading,
.icon-hero-pool-content h1,
.icon-tile-body h3,
.icon-mh-title,
.icon-fs-left h2,
.icon-pillar-item h4,
.icon-usp-box h4 {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 800 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #1C1A17 !important;
}

/* Hero Title */
.icon-hero-pool-content h1 {
  font-size: 40px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  color: #ffffff !important;
}

/* Section Headings (BESTSELLERS, WORN BY CHAMPIONS, etc.) */
.icon-serif-heading {
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: #1C1A17 !important;
}

/* Category Tiles Headings */
.icon-tile-body h3 {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: #ffffff !important;
}

/* Must Haves Title */
.icon-mh-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: #ffffff !important;
}

/* ABSOLUTELY PRESERVE LOGO IN CURSIVE ITALIC SERIF */
.sleek-brand-logo,
a.sleek-brand-logo,
.sleek-header-brand a {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  font-style: italic !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  color: #1C1A17 !important;
}


/* ==========================================================================
   SLEEK THIN ELEGANT MONTSERRAT HEADINGS (WEIGHT: 500 MEDIUM / 600 SEMIBOLD)
   ========================================================================== */

h1:not(.sleek-brand-logo),
h2:not(.sleek-brand-logo),
h3:not(.sleek-brand-logo),
h4:not(.sleek-brand-logo),
.icon-serif-heading,
.icon-hero-pool-content h1,
.icon-tile-body h3,
.icon-mh-title,
.icon-fs-left h2,
.icon-pillar-item h4,
.icon-usp-box h4 {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: #1C1A17 !important;
}

/* Hero Title */
.icon-hero-pool-content h1 {
  font-size: 42px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  color: #ffffff !important;
}

/* Section Headings */
.icon-serif-heading {
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  color: #1C1A17 !important;
}

/* Category Tiles Headings */
.icon-tile-body h3 {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  color: #ffffff !important;
}

/* Must Haves Title */
.icon-mh-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  color: #ffffff !important;
}

/* ABSOLUTELY PRESERVE LOGO IN CURSIVE ITALIC SERIF */
.sleek-brand-logo,
a.sleek-brand-logo,
.sleek-header-brand a {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  font-style: italic !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  color: #1C1A17 !important;
}


/* EXTRA PADDING UNDER "VAKMANSCHAP EN PRESTATIES..." IN CHAMPIONS SECTION */
.icon-champ-desc {
  font-size: 13px !important;
  color: #66635C !important;
  margin-top: 10px !important;
  margin-bottom: 54px !important;
  padding-bottom: 10px !important;
  display: block !important;
}


/* BALANCED PADDING UNDER CHAMPIONS SUBTITLE */
.icon-champ-desc {
  font-size: 13px !important;
  color: #66635C !important;
  margin-top: 8px !important;
  margin-bottom: 28px !important;
  padding-bottom: 0 !important;
  display: block !important;
}


/* ==========================================================================
   ULTIMATE MONTSERRAT FOR ALL HEADINGS (ABSOLUTE CSS SPECIFICITY)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

html body *,
html body h1:not(.sleek-brand-logo),
html body h2:not(.sleek-brand-logo),
html body h3:not(.sleek-brand-logo),
html body h4:not(.sleek-brand-logo),
html body h5:not(.sleek-brand-logo),
html body h6:not(.sleek-brand-logo),
html body .icon-serif-heading,
html body .icon-hero-pool-content h1,
html body .icon-tile-body h3,
html body .icon-mh-title,
html body .icon-fs-left h2,
html body .icon-pillar-item h4,
html body .icon-usp-box h4,
html body .product-title,
html body .product-title a {
  font-family: 'Montserrat', sans-serif !important;
}

html body h1:not(.sleek-brand-logo),
html body h2:not(.sleek-brand-logo),
html body h3:not(.sleek-brand-logo),
html body h4:not(.sleek-brand-logo),
html body .icon-serif-heading,
html body .icon-hero-pool-content h1,
html body .icon-tile-body h3,
html body .icon-mh-title,
html body .icon-fs-left h2 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}

/* SPECIFICALLY KEEP LOGO IN ITALIC SERIF */
html body .sleek-brand-logo,
html body a.sleek-brand-logo,
html body .sleek-header-brand a {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  font-style: italic !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  color: #1C1A17 !important;
}


/* FORCE WHITE OVERLAY TEXT FOR MUST HAVES FOR THE SEASON CARDS */
.icon-musthaves-grid .icon-mh-title,
.icon-mh-card h3,
.icon-mh-title,
h3.icon-mh-title {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
}


/* ==========================================================================
   UNIFORM WIDE PAGE WIDTH (1440PX) FOR HEADER, FOOTER & ALL SECTIONS
   ========================================================================== */

:root {
  --page-max-width: 1440px !important;
}

/* Header Inner Grid Width */
.sleek-header-inner,
header .sleek-header-inner {
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

/* Footer Container Width */
.sleek-footer-container,
footer .sleek-footer-container {
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

/* All Homepage Sections Container Width */
.icon-section-wrapper,
.icon-hero-pool-content-container,
.page-width {
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}


/* FORCE PURE WHITE FOR ALL FOOTER MENU TITLES */
.sleek-footer-col-title,
.sleek-footer-col h4,
footer h4.sleek-footer-col-title {
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin: 0 0 14px 0 !important;
  display: block !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  opacity: 1 !important;
}


/* MATCH FOOTER TITLE FONT SIZE TO MENU ITEMS (13PX) */
.sleek-footer-col-title,
.sleek-footer-col h4,
footer h4.sleek-footer-col-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin: 0 0 14px 0 !important;
  display: block !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  opacity: 1 !important;
}


.sleek-payment-icons {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.sleek-pay-card {
  width: 38px !important;
  height: 24px !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
  transition: transform 0.2s ease !important;
}
.sleek-pay-card:hover {
  transform: translateY(-2px) !important;
}


.sleek-payment-icons {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.sleek-pay-card-wrapper {
  width: 42px !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border-radius: 4px !important;
  border: 1px solid #E5E3DC !important;
  padding: 3px 6px !important;
  box-sizing: border-box !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  transition: transform 0.2s ease !important;
}
.sleek-pay-card-wrapper:hover {
  transform: translateY(-2px) !important;
}
.sleek-pay-card-wrapper svg {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
}


.sleek-payment-icons {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.sleek-payment-icons svg {
  height: 26px !important;
  width: auto !important;
  display: block !important;
  background: transparent !important;
}


/* REMOVE ALL PADDING, BORDERS, SHADOWS, AND BACKGROUNDS AROUND PAYMENT SVGS */
.sleek-payment-icons {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

.sleek-payment-icons svg,
.sleek-payment-icons div,
.sleek-pay-card-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  height: 26px !important;
  width: auto !important;
  display: block !important;
}

.sleek-payment-icons svg rect {
  stroke: none !important;
}


/* ENFORCE 100% IDENTICAL HEIGHT FOR ALL PAYMENT SVG LOGOS */
.sleek-payment-icons {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.sleek-payment-icons svg,
.sleek-payment-icons div,
.sleek-payment-icons > * {
  height: 22px !important;
  max-height: 22px !important;
  min-height: 22px !important;
  width: auto !important;
  display: block !important;
  flex-shrink: 0 !important;
}


/* ENFORCE EXACT IDENTICAL WIDTH (38PX) AND HEIGHT (24PX) FOR ALL PAYMENT SVG LOGOS */
.sleek-payment-icons {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.sleek-payment-icons svg,
.sleek-payment-icons div,
.sleek-payment-icons > * {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  display: block !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
}


/* ==========================================================================
   

/* ==========================================================================
   FIXED CLEAN 3:4 PRODUCT CARDS FOR HORIZON COLLECTION PAGES
   ========================================================================== */

/* 1. Reset broken wildcards */
product-card * {
  box-sizing: border-box !important;
}

/* 2. Collection Product Card Web Components */
product-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  margin-bottom: 24px !important;
}

/* 3. Product Gallery 3:4 Aspect Ratio & Full Images */
product-card-gallery,
.product-card-gallery,
.card-gallery {
  aspect-ratio: 3 / 4 !important;
  width: 100% !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  background-color: #F4F3EF !important;
  margin-bottom: 12px !important;
}

product-card-gallery img,
.product-card-gallery img,
product-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* 4. Product Titles & Price Typography */
product-card [data-type="product-title"],
product-card .product-title,
product-card h3,
product-card a {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #1C1A17 !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

product-card [data-type="price"],
product-card .price {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  color: #77736D !important;
  text-transform: uppercase !important;
  margin-top: 4px !important;
  text-align: center !important;
}


/* ==========================================================================
   

/* ==========================================================================
   

/* ==========================================================================
   

/* ==========================================================================
   FIX ZOOM-OUT 10-COLUMN SESSIONSTORAGE BUG FOR COLLECTION PRODUCT GRID
   ========================================================================== */

/* Force 5 Columns Layout always, even if product-grid-view='zoom-out' is set */
.product-grid,
ul.product-grid,
[product-grid-view],
[product-grid-view='zoom-out'],
ul[product-grid-view='zoom-out'] {
  grid-template-columns: repeat(5, 1fr) !important;
  --product-grid-columns-desktop: repeat(5, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
  list-style: none !important;
}

/* Ensure images are NEVER hidden by zoom-out mode */
[product-grid-view='zoom-out'] .card-gallery,
[product-grid-view='zoom-out'] product-card-gallery,
[product-grid-view='zoom-out'] .product-card-gallery,
ul[product-grid-view='zoom-out'] .card-gallery,
ul[product-grid-view='zoom-out'] img {
  display: block !important;
  aspect-ratio: 3 / 4 !important;
  width: 100% !important;
  height: auto !important;
  position: relative !important;
  overflow: hidden !important;
  visibility: visible !important;
  opacity: 1 !important;
}

[product-grid-view='zoom-out'] img,
ul[product-grid-view='zoom-out'] img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure product card elements are laid out in flex column (gallery top, title mid, price bot) */
product-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
}

product-card > .card-gallery,
product-card > product-card-gallery {
  order: 1 !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  position: relative !important;
  display: block !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
}

product-card > [data-type="product-title"],
product-card > .product-title,
product-card > h3 {
  order: 2 !important;
  position: relative !important;
  display: block !important;
  text-align: center !important;
  margin-bottom: 4px !important;
}

product-card [data-type="product-title"]::before,
product-card .product-title::before,
product-card h3::before {
  content: "TEDDY&SONS" !important;
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  color: #B39665 !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
  text-align: center !important;
}

product-card [data-type="product-title"] a,
product-card .product-title a,
product-card h3 a {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #1C1A17 !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

product-card > [data-type="price"],
product-card > .price {
  order: 3 !important;
  position: relative !important;
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  color: #77736D !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

@media (max-width: 1440px) {
  .product-grid, [product-grid-view] { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 900px) {
  .product-grid, [product-grid-view] { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 600px) {
  .product-grid, [product-grid-view] { grid-template-columns: repeat(2, 1fr) !important; }
}


/* ==========================================================================
   COLLECTION PAGE STYLING, USPs STRIP & BRAND CREST SECTION
   ========================================================================== */

/* Collection Page Title Styling */
.section-background h1,
.main-collection-grid__title,
h1.collection-title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #1C1A17 !important;
  margin: 30px 0 20px 0 !important;
  text-align: center !important;
}

/* Force 4-5 Column Product Grid on Collection Pages */
.product-grid,
ul.product-grid,
.resource-list__grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px 18px !important;
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto 60px auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
  list-style: none !important;
}

/* Ensure 3:4 Product Cards render cleanly */
.ts-product-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
}
.ts-card-media-link {
  display: block !important;
  width: 100% !important;
  margin-bottom: 12px !important;
}
.ts-card-media {
  aspect-ratio: 3 / 4 !important;
  width: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  background-color: #F4F3EF !important;
}
.ts-card-media img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transition: opacity 0.35s ease-in-out !important;
}

@media (max-width: 1440px) {
  .product-grid, ul.product-grid, .resource-list__grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
  .product-grid, ul.product-grid, .resource-list__grid { grid-template-columns: repeat(2, 1fr) !important; }
}


/* ==========================================================================
   ENFORCE EXACT HOMEPAGE PAGE WIDTH (1440PX) ON ALL COLLECTION CONTAINERS
   ========================================================================== */

.collection-wrapper,
.collection-grid,
.product-grid-container,
.main-collection-grid,
collection-component,
results-list,
.section-background,
.page-width {
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.product-grid,
ul.product-grid,
.resource-list__grid {
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
}


/* ==========================================================================
   FORCE 100% IDENTICAL 1440PX PAGE WIDTH & ALIGNMENT (HEADER, TITLE, FILTERS, GRID, FOOTER)
   ========================================================================== */

/* 1. All Container Outer Wrappers -> 1440px max-width, 24px inline padding */
.section-background,
.collection-wrapper,
.main-collection-grid,
.product-grid-container,
results-list,
collection-component,
collection-products-list,
.facets-container,
.facets,
.collection-header,
.page-width {
  max-width: 1440px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* 2. Collection Title & Filters -> Align to exact left edge of 1440px container */
.section-background h1,
.main-collection-grid__title,
h1.collection-title,
.facets__form,
.facets-wrapper,
.facets-container > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 3. Product Grid List -> 100% Width of 1440px Container */
.product-grid,
ul.product-grid,
.resource-list__grid,
resource-list[class*="resource-list"] {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  list-style: none !important;
}

@media (max-width: 1440px) {
  .product-grid, ul.product-grid, .resource-list__grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
  .product-grid, ul.product-grid, .resource-list__grid { grid-template-columns: repeat(2, 1fr) !important; }
}


/* ==========================================================================
   PERFECT ZERO-EXTRA-PADDING ALIGNMENT FOR COLLECTION PAGES
   ========================================================================== */

/* 1. Outer Collection Container -> Exactly 1440px max-width, 24px padding (matches Header) */
.section-background,
collection-component,
results-list,
.product-grid-container,
.main-collection-grid,
.collection-wrapper {
  max-width: 1440px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* 2. Strip all nested extra paddings and indents from Title, Filters & Grid */
.facets-container,
.facets-wrapper,
.facets__form,
.facets,
.main-collection-grid__title,
h1.collection-title,
.collection-wrapper > * {
  padding-left: 0 !important;
  margin-left: 0 !important;
  --padding-inline-start: 0px !important;
  --padding-inline-end: 0px !important;
  --page-margin: 0px !important;
}

/* 3. Product Grid -> Exact 100% Width of 1440px container */
.product-grid,
ul.product-grid,
.resource-list__grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}


/* ==========================================================================
   PERFECT 1440PX CONTAINER & ZERO-EXTRA-PADDING GRID & TITLE ALIGNMENT
   ========================================================================== */

/* 1. Main Outer Wrappers -> 1440px max-width, 24px padding (matches Header) */
main#MainContent,
.template-collection #MainContent,
.template-collection .section-background,
.template-collection collection-component,
.template-collection results-list,
.template-collection .product-grid-container,
.template-collection .main-collection-grid,
.template-collection .collection-wrapper {
  max-width: 1440px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* 2. Collection Page Title (PRODUITS) -> Inside 1440px container, aligned to 24px padding */
.template-collection h1,
.template-collection .section-background h1,
.template-collection .main-collection-grid__title,
.template-collection h1.collection-title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #1C1A17 !important;
  margin: 30px 0 20px 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  text-align: left !important;
  display: block !important;
}

/* 3. Filters -> Inside 1440px container, zero extra padding */
.facets-container,
.facets-wrapper,
.facets__form,
.facets {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* 4. Product Grid -> ZERO extra padding left/right */
.product-grid,
ul.product-grid,
.resource-list__grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}


/* ==========================================================================
   ALIGN SECTION HEADINGS (BESTSELLERS, PRODUITS, ETC.) TO LEFT MENU ITEM (HEREN)
   ========================================================================== */

/* Left-align section headings inside 1440px container */
.icon-section-wrapper h2,
.icon-serif-heading,
.main-collection-grid__title,
h1.collection-title,
.template-collection h1,
.section-background h1 {
  text-align: left !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Ensure inner wrappers sit in 1440px container with 24px padding (matching header) */
.icon-section-wrapper,
.icon-hero-pool-content-container,
.sleek-header-inner,
.sleek-footer-container,
.collection-wrapper,
.product-grid-container {
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}


/* ==========================================================================
   MASTER GLOBAL PAGE WIDTH OVERRIDE (EVERYTHING UNIFORM 1440PX)
   ========================================================================== */

/* 1. Global Page Width Variables */
:root {
  --page-max-width: 1440px !important;
  --page-width: 1440px !important;
  --grid-desktop-vertical-spacing: 20px !important;
  --grid-desktop-horizontal-spacing: 20px !important;
}

/* 2. Target EVERY Outer Container / Wrapper in the entire theme */
header .sleek-header-inner,
footer .sleek-footer-container,
.sleek-header-inner,
.sleek-footer-container,
.icon-section-wrapper,
.icon-hero-pool-content-container,
.page-width,
.section-background,
.collection-wrapper,
.main-collection-grid,
.product-grid-container,
results-list,
collection-component,
collection-products-list,
.facets-container,
.facets,
.collection-header,
main#MainContent > *,
.content-for-layout > * {
  max-width: 1440px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* 3. Ensure grids inside containers extend to 100% of the 1440px box without extra margin/padding */
.product-grid,
ul.product-grid,
.resource-list__grid,
.facets__form,
.facets-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}


/* ==========================================================================
   100% FULL WIDTH SECTIONS OVERRIDE (EDGE-TO-EDGE)
   ========================================================================== */

.section-background,
.icon-section-wrapper,
.icon-hero-pool,
.icon-hero-section,
.icon-category-tiles-wrapper,
.icon-champions-wrapper,
.icon-flagship-wrapper,
.icon-trust-strip-wrapper,
.icon-crest-wrapper,
.collection-wrapper,
.main-collection-grid,
.product-grid-container,
results-list,
collection-component,
collection-products-list,
.facets-container,
.facets,
.collection-header,
.page-width,
main#MainContent > *,
.content-for-layout > * {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Full bleed Hero media */
.icon-hero-pool-container,
.icon-hero-pool,
.icon-hero-section,
.icon-hero-pool img,
.icon-hero-section img,
.icon-hero-pool video {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Grid elements fill 100% */
.icon-bestsellers-grid,
.icon-category-tiles-grid,
.icon-champions-grid,
.icon-must-haves-grid,
.icon-flagship-content,
.icon-trust-usps,
.icon-hero-pool-content-container,
.product-grid,
ul.product-grid,
.resource-list__grid {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}


/* ==========================================================================
   FORCE HERO IMAGE & ALL HERO BANNERS TO BE 100% TRULY EDGE-TO-EDGE FULL BLEED
   ========================================================================== */

/* 1. Hero Section Containers -> Break out of container to 100vw edge-to-edge */
.icon-hero-pool-container,
.icon-hero-pool-wrapper,
.icon-hero-pool,
.icon-hero-section,
.icon-hero-banner,
.hero-wrapper,
.hero-container {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* 2. Hero Image & Video -> 100% Edge-to-edge */
.icon-hero-pool img,
.icon-hero-pool video,
.icon-hero-section img,
.icon-hero-banner img,
.hero-wrapper img,
.hero-container img {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 500px !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3. Also make outer wrappers 100% width with 0 padding */
body, html {
  overflow-x: hidden !important;
}


/* ==========================================================================
   CLEAN 100% FULL BLEED HERO BANNER & SECTIONS OVERRIDE
   ========================================================================== */

/* Remove any side padding from main layout wrappers */
html, body, main, #MainContent, .content-for-layout, .page-width {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Hero Pool Banner -> 100% Edge to Edge */
.icon-hero-pool {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: 0 !important;
  right: 0 !important;
  position: relative !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Sections padding -> 24px padding inside sections */
.icon-section-wrapper,
.icon-category-tiles-wrapper,
.icon-champions-wrapper,
.icon-flagship-wrapper,
.icon-trust-strip-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}


/* ==========================================================================
   REMOVE ALL SIDE CLIPPING PADDINGS & MARGINS FROM ALL SECTIONS (100% FULL BLEED)
   ========================================================================== */

main#MainContent,
.content-for-layout,
.page-width,
.section-background,
.icon-section-wrapper,
.icon-hero-pool,
.icon-hero-section,
.icon-category-tiles-wrapper,
.icon-champions-wrapper,
.icon-flagship-wrapper,
.icon-trust-strip-wrapper,
.icon-crest-wrapper,
.collection-wrapper,
.main-collection-grid,
.product-grid-container,
results-list,
collection-component,
collection-products-list,
.facets-container,
.facets,
.collection-header {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

.icon-hero-pool {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.icon-bestsellers-grid,
.icon-category-tiles-grid,
.icon-champions-grid,
.icon-must-haves-grid,
.icon-flagship-content,
.icon-trust-usps,
.product-grid,
ul.product-grid,
.resource-list__grid {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}


/* ==========================================================================
   ABSOLUTE ZERO PADDING & ZERO MARGIN OVERRIDE (100% FULL BLEED ON EVERYTHING)
   ========================================================================== */

* {
  --page-margin: 0px !important;
  --padding-inline-start: 0px !important;
  --padding-inline-end: 0px !important;
}

html, body, main, #MainContent, .content-for-layout, .page-width, .section-background,
.icon-section-wrapper, .icon-hero-pool, .icon-hero-section, .icon-category-tiles-wrapper,
.icon-champions-wrapper, .icon-flagship-wrapper, .icon-trust-strip-wrapper, .icon-crest-wrapper,
.collection-wrapper, .main-collection-grid, .product-grid-container, results-list,
collection-component, collection-products-list, .facets-container, .facets, .collection-header,
.icon-bestsellers-grid, .icon-category-tiles-grid, .icon-champions-grid, .icon-must-haves-grid,
.icon-flagship-content, .icon-trust-usps, .icon-hero-pool-content-container,
.product-grid, ul.product-grid, .resource-list__grid {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}


/* ==========================================================================
   NUKE ALL SIDE SPACE, PADDING & MARGINS (INLINE STYLES + CSS VARS OVERRIDE)
   ========================================================================== */

:root {
  --page-margin: 0px !important;
  --padding-inline-start: 0px !important;
  --padding-inline-end: 0px !important;
  --grid-margin: 0px !important;
}

*,
*::before,
*::after {
  --padding-inline-start: 0px !important;
  --padding-inline-end: 0px !important;
  --page-margin: 0px !important;
}

html, body, main, #MainContent, .content-for-layout, .page-width, .section-background,
.icon-section-wrapper, .icon-hero-pool, .icon-hero-section, .icon-category-tiles-wrapper,
.icon-champions-wrapper, .icon-flagship-wrapper, .icon-trust-strip-wrapper, .icon-crest-wrapper,
.collection-wrapper, .main-collection-grid, .product-grid-container, results-list,
collection-component, collection-products-list, .facets-container, .facets, .collection-header,
.icon-bestsellers-grid, .icon-category-tiles-grid, .icon-champions-grid, .icon-must-haves-grid,
.icon-flagship-content, .icon-trust-usps, .icon-hero-pool-content-container,
.product-grid, ul.product-grid, .resource-list__grid {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Force container children to have 0px side padding */
div[class*="wrapper"],
div[class*="container"],
div[class*="grid"],
section,
header,
footer {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}


/* ==========================================================================
   PURGE ALL SIDE PADDING & RUIMTE LINKS EN RECHTS IN IEDERE SECTIE (100% FLUSH)
   ========================================================================== */

:root {
  --page-margin: 0px !important;
  --padding-inline-start: 0px !important;
  --padding-inline-end: 0px !important;
  --grid-margin: 0px !important;
  --page-width: 100% !important;
}

body, html, main, #MainContent, .content-for-layout, .page-width, .section-background,
.icon-section-wrapper, .icon-hero-pool, .icon-hero-section, .icon-category-tiles-wrapper,
.icon-champions-wrapper, .icon-flagship-wrapper, .icon-trust-strip-wrapper, .icon-crest-wrapper,
.collection-wrapper, .main-collection-grid, .product-grid-container, results-list,
collection-component, collection-products-list, .facets-container, .facets, .collection-header,
.icon-bestsellers-grid, .icon-category-tiles-grid, .icon-champions-grid, .icon-must-haves-grid,
.icon-flagship-content, .icon-trust-usps, .icon-hero-pool-content-container,
.product-grid, ul.product-grid, .resource-list__grid,
section, article, div[class*="wrapper"], div[class*="container"], div[class*="grid"] {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  --padding-inline-start: 0px !important;
  --padding-inline-end: 0px !important;
}


/* ==========================================================================
   SHOPIFY SECTION 100% FULL BLEED BREAKOUT (NO SIDE PADDING/SPACE)
   ========================================================================== */

/* 1. Target Shopify Section wrappers */
.shopify-section,
[id^="shopify-section"],
main#MainContent,
.content-for-layout,
.content-for-layout > * {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  --padding-inline-start: 0px !important;
  --padding-inline-end: 0px !important;
  --page-margin: 0px !important;
}

/* 2. Hero Pool Perfect 100vw Breakout */
.icon-hero-pool {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Prevent horizontal scrollbar on body */
html, body {
  overflow-x: hidden !important;
}


/* ==========================================================================
   100VW BREAKOUT TO EVERY SINGLE SECTION FOR PERFECT FULL-BLEED BACKGROUNDS
   ========================================================================== */

/* 1. Global 100vw Breakout for ALL Sections and Containers */
.shopify-section,
[id^="shopify-section"],
.icon-section-wrapper,
.icon-hero-pool,
.icon-hero-section,
.icon-brand-pillars-strip,
.icon-category-tiles-wrapper,
.icon-champions-wrapper,
.icon-flagship-wrapper,
.icon-trust-strip-wrapper,
.icon-crest-wrapper,
.section-background,
.collection-wrapper,
.main-collection-grid,
.product-grid-container,
results-list,
collection-component,
collection-products-list,
.facets-container,
.facets,
.collection-header,
.page-width,
main#MainContent > *,
.content-for-layout > * {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* 2. Prevent horizontal scrollbar on body */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
}


/* ==========================================================================
   PERFECT ARCHITECTURE: 100% FULL-BLEED BACKGROUNDS + 1380PX ALIGNED INNER CONTENT
   ========================================================================== */

/* 1. OUTER SECTION WRAPPERS & BACKGROUNDS -> 100% FULL BLEED */
.shopify-section,
[id^="shopify-section"],
.icon-section-wrapper,
.icon-hero-pool,
.icon-hero-section,
.icon-brand-pillars-strip,
.icon-category-tiles-wrapper,
.icon-champions-wrapper,
.icon-flagship-wrapper,
.icon-trust-strip-wrapper,
.icon-crest-wrapper,
.section-background,
main#MainContent,
.content-for-layout {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* 2. INNER CONTENT CONTAINERS -> LOCKED TO EXACT 1380PX CONTAINER WITH 24PX PADDING */
.sleek-header-inner,
.sleek-footer-container,
.icon-hero-pool-content-container,
.icon-bestsellers-grid,
.icon-category-tiles-grid,
.icon-champions-grid,
.icon-must-haves-grid,
.icon-flagship-content,
.icon-trust-usps,
.icon-section-header-wrap,
.collection-wrapper,
.main-collection-grid,
.product-grid-container,
results-list,
collection-component,
collection-products-list,
.facets-container,
.facets,
.collection-header,
.page-width {
  max-width: 1380px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* 3. Section Titles -> Left aligned inside 1380px container */
h2.icon-serif-heading,
.icon-serif-heading,
h1.collection-title,
.main-collection-grid__title,
.template-collection h1 {
  text-align: left !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* 4. Grids inside 1380px container fill 100% of inner space */
.product-grid,
ul.product-grid,
.resource-list__grid,
.facets__form,
.facets-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

html, body {
  overflow-x: hidden !important;
  width: 100% !important;
}


/* ==========================================================================
   FULL-WIDTH BACKGROUNDS + 24PX INNER CONTENT PADDING (ALIGNED EVERYWHERE)
   ========================================================================== */

/* 1. SECTION BACKGROUND WRAPPERS -> 100% FULL BLEED */
.shopify-section,
[id^="shopify-section"],
.icon-section-wrapper,
.icon-hero-pool,
.icon-hero-section,
.icon-brand-pillars-strip,
.icon-category-tiles-wrapper,
.icon-champions-wrapper,
.icon-flagship-wrapper,
.icon-trust-strip-wrapper,
.icon-crest-wrapper,
.section-background,
main#MainContent,
.content-for-layout {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* 2. INNER CONTENT CONTAINERS -> 24PX SIDE PADDING INSIDE 1380PX MAX-WIDTH */
.sleek-header-inner,
.sleek-footer-container,
.icon-hero-pool-content-container,
.icon-bestsellers-grid,
.icon-brand-pillars-inner,
.icon-category-tiles-grid,
.icon-champions-grid,
.icon-must-haves-grid,
.icon-flagship-content,
.icon-trust-usps,
.icon-section-header-wrap,
.collection-wrapper,
.main-collection-grid,
.product-grid-container,
results-list,
collection-component,
collection-products-list,
.facets-container,
.facets,
.collection-header,
.page-width {
  max-width: 1380px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* 3. Section Titles -> Left-aligned to 24px inner padding */
h2.icon-serif-heading,
.icon-serif-heading,
h1.collection-title,
.main-collection-grid__title,
.template-collection h1 {
  text-align: left !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* 4. Product Grids -> 100% inner width */
.product-grid,
ul.product-grid,
.resource-list__grid,
.facets__form,
.facets-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

html, body {
  overflow-x: hidden !important;
  width: 100% !important;
}


/* ==========================================================================
   FORCE ALL SECTIONS TO USE THE EXACT SAME CONTAINER & WIDTH AS HEADER (1380PX)
   ========================================================================== */

/* 1. Reset any 100vw breakout transforms */
.shopify-section,
[id^="shopify-section"],
.icon-hero-pool {
  left: auto !important;
  transform: none !important;
}

/* 2. ALL SECTIONS, CONTAINERS & WRAPPERS -> EXACT SAME 1380PX WIDTH + 24PX PADDING AS HEADER */
.sleek-header-inner,
.sleek-footer-container,
.shopify-section,
[id^="shopify-section"],
.icon-section-wrapper,
.icon-hero-pool,
.icon-hero-section,
.icon-brand-pillars-strip,
.icon-category-tiles-wrapper,
.icon-champions-wrapper,
.icon-flagship-wrapper,
.icon-trust-strip-wrapper,
.icon-crest-wrapper,
.section-background,
.collection-wrapper,
.main-collection-grid,
.product-grid-container,
results-list,
collection-component,
collection-products-list,
.facets-container,
.facets,
.collection-header,
.page-width,
main#MainContent,
.content-for-layout,
main#MainContent > *,
.content-for-layout > * {
  max-width: 1380px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* 3. Section Titles -> Left-aligned to 24px inner padding */
h2.icon-serif-heading,
.icon-serif-heading,
h1.collection-title,
.main-collection-grid__title,
.template-collection h1 {
  text-align: left !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* 4. Product Grids -> 100% inner width */
.product-grid,
ul.product-grid,
.resource-list__grid,
.facets__form,
.facets-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}