/** Shopify CDN: Minification failed

Line 4369:14 Unexpected "{"
Line 4369:23 Expected ":"
Line 4369:30 Unexpected "{"
Line 4374:22 Unexpected "{"
Line 4374:31 Expected ":"
Line 4374:38 Unexpected "{"
Line 4828:19 Unexpected "{"
Line 4828:28 Expected ":"
Line 4840:19 Unexpected "{"
Line 4840:28 Expected ":"
... and 34 more hidden warnings

**/
/* =========================
   FONTS – SIYAA
========================= */

* {
  box-sizing: border-box;
}

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

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

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

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

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

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

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

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

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

.product-card,
.collection-card,
.resource-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);
  will-change: transform, box-shadow;
  z-index: var(--layer-flat);
}

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

.product-card__content {
  position: relative;
}

.product-card__content {
  cursor: pointer;
}

.product-card__content slideshow-component {
  --cursor: pointer;
}

.predictive-search-results__card .product-card,
.predictive-search-results__card .collection-card,
.predictive-search-results__card .resource-card {
  transition: none;
  will-change: auto;
}

@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 .resource-card:hover,
  .card-hover-effect-lift .predictive-search-results__card:hover {
    transform: translateY(calc(-1 * var(--hover-lift-amount)));
  }

  .card-hover-effect-lift .header .product-card:hover,
  .card-hover-effect-lift .header .collection-card:hover,
  .card-hover-effect-lift .header .resource-card:hover,
  .card-hover-effect-lift .header-drawer .product-card:hover,
  .card-hover-effect-lift .header-drawer .collection-card:hover,
  .card-hover-effect-lift .header-drawer .resource-card:hover {
    transform: none;
  }

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

  .card-hover-effect-scale .header .product-card:hover,
  .card-hover-effect-scale .header .collection-card:hover,
  .card-hover-effect-scale .header .resource-card:hover,
  .card-hover-effect-scale .header-drawer .product-card:hover,
  .card-hover-effect-scale .header-drawer .collection-card:hover,
  .card-hover-effect-scale .header-drawer .resource-card:hover {
    transform: none;
  }

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

  .predictive-search-results__card .card-gallery,
  .predictive-search-results__card .collection-card__image,
  .predictive-search-results__card .product-card__image,
  .predictive-search-results__card .resource-card__image {
    transition: none;
  }

  .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 .resource-card:hover .resource-card__image,
  .card-hover-effect-subtle-zoom .predictive-search-results__card:hover {
    transform: scale(var(--hover-subtle-zoom-amount));
  }

  .card-hover-effect-subtle-zoom .header .product-card:hover .card-gallery,
  .card-hover-effect-subtle-zoom .header .collection-card:hover .collection-card__image,
  .card-hover-effect-subtle-zoom .header .product-card:hover .product-card__image,
  .card-hover-effect-subtle-zoom .header .resource-card:hover .resource-card__image,
  .card-hover-effect-subtle-zoom .header-drawer .product-card:hover .card-gallery,
  .card-hover-effect-subtle-zoom .header-drawer .collection-card:hover .collection-card__image,
  .card-hover-effect-subtle-zoom .header-drawer .product-card:hover .product-card__image,
  .card-hover-effect-subtle-zoom .header-drawer .resource-card:hover .resource-card__image {
    transform: none;
  }

  .predictive-search-results__card .product-card:hover,
  .predictive-search-results__card .collection-card:hover,
  .predictive-search-results__card .resource-card:hover,
  .header .product-card:hover,
  .header .collection-card:hover,
  .header .resource-card:hover,
  .header-drawer .product-card:hover,
  .header-drawer .collection-card:hover,
  .header-drawer .resource-card:hover {
    transform: none;
    box-shadow: none;
  }
}

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 */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

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

/* 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-container) {
  background: transparent;
}

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

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

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

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

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

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

.contents {
  display: contents;
}

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

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

  display: flex;
  flex-direction: column;
}

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

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

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

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

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

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

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

.skip-to-content-link:focus {
  z-index: var(--layer-temporary);
  overflow: auto;
  width: auto;
  height: auto;
  padding: var(--padding-lg) var(--padding-4xl);
  left: var(--margin-lg);
  top: var(--margin-lg);
  background-color: var(--color-background);
  box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
}

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

  text-align: left;
}

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

  text-align: center;
}

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

  text-align: right;
}

.text-inherit {
  color: inherit;
}

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

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

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

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

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

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

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

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

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

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

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

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

.relative {
  position: relative;
}

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

slideshow-component [data-placeholder='true'] * {
  cursor: grab;
}

/* Base text and heading styles */
body,
.paragraph:not(.button),
.paragraph > * {
  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: 1200px) {
  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 > * {
  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, var(--font-h1-color));
}

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

h2,
.h2.h2,
.text-block.h2 > * {
  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, var(--font-h2-color));
}

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

h3,
.h3,
.h3.h3,
.text-block.h3 > * {
  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, var(--font-h3-color));
}

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

h4,
.h4.h4,
.text-block.h4 > * {
  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, var(--font-h4-color));
}

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

h5,
.h5.h5,
.text-block.h5 > * {
  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, var(--font-h5-color));
}

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

h6,
.h6.h6,
.text-block.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, var(--font-h6-color));
}

@media screen and (max-width: 1200px) {
  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 {
  --button-color: var(--color, var(--color-primary));

  color: var(--button-color);
  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 {
  --button-color: var(--color, var(--color-primary-hover));
}

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

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

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

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

/* Featured collection block */
.featured-collection-block {
  width: 100%;
}

/* Product grid */
.product-grid-container {
  display: block;
  width: 100%;
  padding-block: var(--padding-block-start) var(--padding-block-end);

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

.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--product-grid-gap);
  margin: auto;
  padding: 0;
  list-style: none;
}

@media screen and (min-width: 750px) {
  .product-grid {
    grid-template-columns: var(--product-grid-columns-desktop);
  }
}

.product-grid :is(h3, p) {
  margin: 0;
}

.product-grid__item {
  border: var(--product-card-border-width) solid rgb(var(--color-border-rgb) / var(--product-card-border-opacity));
}

.product-grid--organic[product-grid-view='default'] .product-grid__item {
  height: fit-content;
}

.product-grid__card.product-grid__card {
  display: flex;
  flex-flow: column nowrap;
  gap: var(--product-card-gap);
  align-items: var(--product-card-alignment);
  text-decoration: none;
  color: var(--color, var(--color-foreground));
  padding-block: var(--padding-block-start) var(--padding-block-end);
  padding-inline: var(--padding-inline-start) var(--padding-inline-end);
  overflow: hidden;
}

[product-grid-view='zoom-out'] .product-grid__card {
  row-gap: var(--padding-xs);
}

[product-grid-view='default'] {
  --product-grid-gap: 16px;
  --padding-block-start: 24px;
  --padding-block-end: 24px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
}

[product-grid-view='default'] .product-grid__item {
  padding-block: 0;
}

[product-grid-view='mobile-single'],
.product-grid-mobile--large {
  @media screen and (max-width: 749px) {
    grid-template-columns: 1fr;
  }
}

.product-grid__card .group-block > * {
  @media screen and (max-width: 749px) {
    flex-direction: column;
  }
}

ul[product-grid-view='zoom-out'] .product-grid__card > * {
  display: none;
}

ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
  display: block;
}

[product-grid-view='zoom-out']
  .card-gallery
  > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
  display: none;
}

ul[product-grid-view='zoom-out'] .card-gallery > img {
  display: block;
}

[product-grid-view='zoom-out'] {
  --product-grid-columns-desktop: repeat(
    10,
    minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr)
  );
}

.product-grid-view-zoom-out--details {
  display: none;
}

.product-grid-view-zoom-out--details .h4,
.product-grid-view-zoom-out--details span,
.product-grid-view-zoom-out--details s {
  font-size: var(--font-size--xs);
  font-family: var(--font-paragraph--family);
}

.product-grid-view-zoom-out--details span {
  font-weight: 500;
}

.product-grid-view-zoom-out--details .h4 {
  line-height: 1.3;
  font-weight: 400;
}

.product-grid-view-zoom-out--details > span.h6,
.product-grid-view-zoom-out--details > div.h6 > product-price {
  display: inline-block;
  line-height: 0;
  margin-top: var(--margin-2xs);
}

.product-grid-view-zoom-out--details > span.h6 > *,
.product-grid-view-zoom-out--details > div.h6 > * > * {
  line-height: 1.2;
}

@media (prefers-reduced-motion: no-preference) {
  :root:active-view-transition-type(product-grid) {
    details[open] floating-panel-component {
      view-transition-name: panel-content;

      .checkbox *,
      .facets__pill-label {
        transition: none;
      }

      .facets--vertical & {
        view-transition-name: none;
      }
    }

    .product-grid {
      view-transition-name: product-grid;
    }

    footer {
      view-transition-name: footer;
    }

    .product-grid__item,
    floating-panel-component {
      transition: none;
    }
  }
}

::view-transition-group(panel-content) {
  z-index: 1;
}

::view-transition-new(product-grid) {
  animation-delay: 150ms;
  animation-name: fadeInUp;
  animation-duration: var(--animation-speed);
  animation-timing-function: var(--animation-easing);
}

results-list[initialized] {
  .product-grid__item {
    transition: opacity var(--animation-speed) var(--animation-easing),
      transform var(--animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(10px);
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

/* Collection and product list cards have equal heights */
:is(.product-grid__item, .resource-list__item) .product-card {
  display: grid;
  height: 100%;
}

/* Video background */
.video-background,
.video-background * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.video-background--cover * {
  object-fit: cover;
}

.video-background--contain * {
  object-fit: contain;
}

.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: slideInLeft;
  --dialog-drawer-closing-animation: slideOutLeft;
}

.dialog-drawer--right {
  --dialog-drawer-opening-animation: slideInRight;
  --dialog-drawer-closing-animation: slideOutRight;
}
/* stylelint-enable value-keyword-case */

.dialog-drawer[open] {
  animation: var(--dialog-drawer-opening-animation) var(--animation-speed) var(--animation-easing) forwards;
}

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

/* Buttons */
.button,
.button-secondary,
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-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-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 {
  background-color: var(--color-input-background);
  border-color: var(--color-input-border);
}

textarea::placeholder,
input::placeholder {
  color: var(--color-input-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: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);
}

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

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

/* Show more */

.show-more__button {
  color: var(--color-primary);
  cursor: pointer;
}

.show-more__button:hover {
  @media screen and (min-width: 750px) {
    color: var(--color-primary-hover);
  }
}

.show-more__label {
  text-align: start;
  font-size: var(--font-size--body-md);
  font-family: var(--font-paragraph--family);
}

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

.show-more[data-expanded='true'] .show-more__label--more,
.show-more[data-expanded='false'] .show-more__label--less {
  display: none;
}

.link {
  display: inline-block;
  text-align: center;
}

shopify-accelerated-checkout,
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
  --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
}

.product-form-buttons:has(.add-to-cart-button.button-secondary)
  :is(shopify-accelerated-checkout, shopify-accelerated-checkout-cart) {
  --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-secondary);
  --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
}

/* 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: var(--color-primary-hover);
}

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),
.show-more__button .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,
.details-open > summary .icon-plus .horizontal,
.show-more:where([data-expanded='true']) .show-more__button .icon-plus .horizontal {
  transform: rotate(90deg);
}

details[open] > summary .icon-plus .vertical,
.details-open > summary .icon-plus .vertical,
.show-more:where([data-expanded='true']) .show-more__button .icon-plus .vertical {
  transform: rotate(90deg);
  opacity: 0;
}

/* Product Media */
media-gallery {
  display: block;
  width: 100%;
}

:where(media-gallery, .product-grid__item) {
  .media-gallery__grid {
    grid-template-columns: 1fr;
    gap: var(--image-gap);
  }
}

.product-media-gallery__slideshow--single-media slideshow-container {
  @media screen and (max-width: 749px) {
    grid-area: unset;
  }
}

:not(.dialog-zoomed-gallery) > .product-media-container {
  /* width and overflow forces children to shrink to parent width */
  --slide-width: round(up, 100%, 1px);

  display: flex;
  aspect-ratio: var(--gallery-aspect-ratio, var(--media-preview-ratio));
  max-height: var(--constrained-height);
  width: 100%;

  /* Relative position needed for video and 3d models */
  position: relative;
  overflow: hidden;

  &:where(.constrain-height) {
    /* arbitrary offset value based on average theme spacing and header height */
    --viewport-offset: 400px;
    --constrained-min-height: 300px;
    --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

    margin-right: auto;
    margin-left: auto;
  }
}

media-gallery:where(.media-gallery--grid) .media-gallery__grid {
  display: none;
}

media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
  /* Needed for safari to stretch to full grid height */
  height: 100%;
}

.product-media :is(deferred-media, product-model) {
  position: absolute;
}

@media screen and (max-width: 749px) {
  .product-media-container.constrain-height {
    max-height: none;
  }
}

@media screen and (min-width: 750px) {
  .product-media-container.constrain-height {
    --viewport-offset: var(--header-height, 100px);
    --constrained-min-height: 500px;
  }

  body:has(header-component[transparent]) .product-media-container.constrain-height {
    --viewport-offset: 0px;
  }

  .media-gallery--two-column .media-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .media-gallery--large-first-image .product-media-container:first-child,
  .media-gallery--two-column .product-media-container:only-child {
    /* First child spans 2 columns */
    grid-column: span 2;
  }

  /* Display grid view as a carousel on mobile, grid on desktop */
  media-gallery:is(.media-gallery--grid) slideshow-component {
    display: none;
  }

  media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: grid;
  }
}

.product-media-container--model {
  /* Usefull when view in your space is shown */
  flex-direction: column;
}

.shopify-model-viewer-ui__controls-area {
  bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
}

.product-media-container img {
  aspect-ratio: inherit;
  object-fit: contain;
}

.product-media-container.media-fit-contain img {
  object-position: center center;
}

.product-media-container.media-fit {
  --product-media-fit: cover;

  img {
    object-fit: var(--product-media-fit);
  }
}

/* Media gallery zoom dialog */
.product-media-container__zoom-button {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: var(--layer-flat);
  cursor: zoom-in;
  background-color: transparent;

  &:hover {
    background-color: transparent;
  }
}

zoom-dialog dialog {
  width: 100vw;
  height: 100vh;
  border: none;
  margin: 0;
  padding: 0;
  max-width: 100%;
  max-height: 100%;
  background: #fff;
  opacity: 0;
  transition: opacity var(--animation-speed) var(--animation-easing);
  scrollbar-width: none;

  &[open] {
    opacity: 1;
  }

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

  &::backdrop {
    background: transparent;
  }
}

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

.dialog-thumbnails-list-container {
  position: fixed;
  width: 100%;
  bottom: 0;
  display: flex;
  z-index: var(--layer-raised);
}

.dialog-thumbnails-list {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  gap: 8px;
  bottom: 0;
  overflow-x: auto;
  opacity: 0;
  padding: var(--padding-lg);
  margin-inline: auto;
  scrollbar-width: none;
  animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
  animation-delay: calc(var(--animation-speed) * 1.5);
}

.dialog--closed .dialog-thumbnails-list {
  animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
}

@media screen and (min-width: 750px) {
  .dialog-thumbnails-list {
    position: fixed;
    flex-direction: column;
    inset: 50% var(--margin-lg) auto auto;
    right: 0;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    animation: thumbnailsSlideInTop calc(var(--animation-speed) * 0.5) var(--animation-easing) forwards;
    animation-delay: calc(var(--animation-speed) * 2);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }
}

.dialog-thumbnails-list__thumbnail {
  width: var(--thumbnail-width);
  height: auto;
  transition: transform var(--animation-speed) var(--animation-easing);
  flex-shrink: 0;
  border-radius: var(--media-radius);

  img {
    height: 100%;
    object-fit: cover;
    border-radius: var(--media-radius);
    aspect-ratio: var(--aspect-ratio);
  }

  &:is([aria-selected='true']) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: calc(var(--focus-outline-offset) / 2);
    border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
  }
}

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

/* If the product media is already providing an image cover, hide images provided by sibling deferred-media */
.product-media__image ~ * .deferred-media__poster-image {
  display: none;
}

/* If the product media is playing, hide the preview image */
.product-media-container:has(.deferred-media__playing) .product-media__image {
  opacity: 0;
  transition: opacity var(--animation-speed) var(--animation-easing);
}

/* Deferred media & Product model  */
:is(product-model, deferred-media) {
  /* Height needed to make sure when it's set to be stretched, it takes the full height */
  height: 100%;
  width: 100%;
  position: relative;
}

product-model model-viewer,
/* Media that have a poster button sibling providing the size should be absolute-positioned.
Otherwise, it should be a block to rely on its own size */
:is(deferred-media, product-model) > .deferred-media__poster-button ~ *:not(template) {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;

  /* Required to make sure the absolute position respects the padding of the wrapper: */
  padding: inherit;
}

slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
  bottom: var(--padding-sm);
  right: var(--padding-sm);
}

.dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
  /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
  bottom: calc(var(--thumbnail-width) / var(--media-preview-ratio) + var(--padding-lg) * 2);
  right: var(--padding-lg);
}

@media screen and (max-width: 749px) {
  slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
    .shopify-model-viewer-ui__controls-area {
    /* Position the controls just above the counter */
    bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
  }
}

@media screen and (min-width: 750px) {
  slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
    .shopify-model-viewer-ui__controls-area {
    /* Position the controls just above the counter */
    bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls up to match the padding on the thumbnails */
    bottom: var(--padding-lg);

    /* Move the controls to the left of the thumbnails list on the right */
    right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
  }
}

:is(deferred-media, .video-placeholder-wrapper).border-style {
  /* Apply the border radius to the video */
  overflow: hidden;
}

deferred-media {
  /* The overflow hidden in the deferred-media won't let the button show the focus ring */
  &:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

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

.deferred-media__poster-button {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--video-aspect-ratio, auto);
}

.deferred-media__poster-button.deferred-media__playing {
  opacity: 0;
  transition: opacity 0.3s ease;
}

deferred-media img {
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

deferred-media iframe {
  width: 100%;
  height: 100%;
  border: none;
  aspect-ratio: var(--size-style-aspect-ratio, auto);
}

deferred-media[data-media-loaded] img {
  opacity: 0;
}

.deferred-media__poster-icon,
.video-placeholder-wrapper__poster-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deferred-media__poster-icon svg,
.video-placeholder-wrapper__poster-icon svg {
  width: var(--button-size);
  height: var(--button-size);
  color: var(--color-white);
  filter: drop-shadow(var(--shadow-button));

  &:hover {
    color: rgb(var(--color-white-rgb) / var(--opacity-80));
  }

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

deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
  /* only apply this on the video block not product media */
  object-fit: cover;
  height: 100%;
  aspect-ratio: var(--size-style-aspect-ratio, auto);
}

.button-shopify-xr {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--padding-md);
}

.button-shopify-xr > svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  margin-inline-end: var(--margin-md);
}

.button-shopify-xr[data-shopify-xr-hidden] {
  display: none;
}

/* Swatches */
.swatch {
  --color-border: rgb(var(--color-foreground-rgb) / var(--style-border-swatch-opacity));
  --min-width-unitless: 15.9999; /* want to avoid division by 0 */
  --min-height-unitless: 15.9999; /* want to avoid division by 0 */
  --min-height: 16px;
  --min-width: 16px;

  /* mobile values */
  --scaling-factor: 0.5;
  --max-swatch-size: 28px;
  --max-pill-size: 20px;
  --max-filter-size: 32px;

  /* From the settings */
  --offset-swatch-width: calc(var(--variant-picker-swatch-width-unitless) - var(--min-width-unitless));
  --offset-swatch-height: calc(var(--variant-picker-swatch-height-unitless) - var(--min-height-unitless));

  /**
    Offset values are obtained from the following formulas:
      offset-width = width - min-width
      offset-height = height - min-height

    The offset-scaled-width and heigth are obtained by extending the line from
    [min,min] to [W,H] and taking the intersection with a square that starts at
    [min,min] and ends at [max,max].

    The extending line forms right angle triangles with the [min,min]->[max,max]
    box that enable us to derive the following formulas

    We also want the result to always be smaller than the input (pdp > everywhere else)
    by some scaling factor.
  */
  --offset-scaled-width: calc(
    var(--scaling-factor) * var(--offset-swatch-width) / var(--offset-swatch-height) * var(--offset-max-swatch-size)
  );
  --offset-scaled-height: calc(
    var(--scaling-factor) * var(--offset-swatch-height) / var(--offset-swatch-width) * var(--offset-max-swatch-size)
  );
  --offset-max-swatch-size: calc(var(--max-swatch-size) - var(--min-width));

  /* width = min(m + sU, (m + s * W'/H' * M'), M) */
  --swatch-width: min(
    calc(var(--min-width) + var(--scaling-factor) * var(--offset-swatch-width) * 1px),
    calc(var(--min-width) + var(--offset-scaled-width)),
    var(--max-swatch-size)
  );

  /* height = min(m + sV, (m + s * H'/W' * M'), M) */
  --swatch-height: min(
    calc(var(--min-height) + var(--scaling-factor) * var(--offset-swatch-height) * 1px),
    calc(var(--min-height) + var(--offset-scaled-height)),
    var(--max-swatch-size)
  );

  display: block;
  background: var(--swatch-background);
  background-position: var(--swatch-focal-point, center);
  border-radius: var(--variant-picker-swatch-radius);
  border: var(--style-border-swatch-width) var(--style-border-swatch-style) var(--color-border);
  width: var(--swatch-width);
  height: var(--swatch-height);

  /* This is different than `background-size: cover` because we use `box-sizing: border-box`,
   * doing it like makes the background clip under the border without repeating.
   */
  background-size: var(--swatch-width) var(--swatch-height);

  &.swatch--unavailable {
    border-style: dashed;
  }

  &.swatch--unscaled {
    /* for when you want fixed sizing (e.g. pdp) */
    --swatch-width: var(--variant-picker-swatch-width);
    --swatch-height: var(--variant-picker-swatch-height);
  }

  &.swatch--filter {
    --swatch-width: var(--max-filter-size);
    --swatch-height: var(--max-filter-size);

    border-radius: var(--variant-picker-swatch-radius);
  }

  &.swatch--pill {
    --swatch-width: var(--max-pill-size);
    --swatch-height: var(--max-pill-size);

    border-radius: var(--variant-picker-swatch-radius);
  }

  /* swatches in filters and pills always have a border  */
  &.swatch--filter,
  &.swatch--pill {
    --style-border-swatch-width: var(--variant-picker-border-width);
    --style-border-swatch-style: var(--variant-picker-border-style);
    --color-border: rgb(var(--color-foreground-rgb) / var(--variant-picker-border-opacity));
  }

  &.swatch--variant-image {
    background-size: cover;
  }

  @media screen and (min-width: 750px) {
    /* desktop values */
    --max-swatch-size: 32px;
    --max-pill-size: 16px;
    --max-filter-size: 28px;
    --scaling-factor: 0.65;
  }
}

.variant-picker .variant-option--buttons label:has(.swatch) {
  border-radius: var(--variant-picker-swatch-radius);
}

.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-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-foreground-rgb) / var(--opacity-subdued-text));
}

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

.compare-at-price {
  opacity: 0.4;
  text-decoration-line: line-through;
  text-decoration-thickness: 1.5px;
}

.card-gallery {
  position: relative;
}

@container (max-width: 70px) {
  .card-gallery:hover .quick-add__button {
    display: none;
  }
}

/* Drawer */
.drawer {
  background-color: var(--color-background);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  z-index: var(--layer-raised);
  transform: translateX(-120%);
  transition: transform var(--animation-speed) var(--animation-easing);
}

.drawer[data-open='true'] {
  transform: translateX(0);
}

.drawer-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--drawer-header-block-padding) var(--drawer-inline-padding);
}

.drawer__title {
  font-size: var(--font-h2--size);
  margin: 0;
}

.drawer__close {
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
}

.drawer__content {
  display: block;
  padding: var(--drawer-content-block-padding) var(--drawer-inline-padding);
  width: 100%;
}

/* Background overlay */
.background-overlay {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-overlay-color, rgb(0 0 0 / 15%));
  }
}

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

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

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

@media (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:is(:focus, :hover) {
  box-shadow: var(--input-box-shadow-focus);
  background-color: var(--color-input-hover-background);
}

.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) clamp(1rem, 1em * 0.25, 2rem);
  }

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

.checkbox {
  --checkbox-size: 22px;
  --checkbox-top: 50%;
  --checkbox-left: 1.5px;
  --checkbox-offset: 3px;
  --checkbox-border-radius: 7px;
  --checkbox-label-padding: 8px;
  --checkbox-path-opacity: 0;
  --checkbox-cursor: pointer;
  --checkbox-border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

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

  @media screen and (min-width: 750px) {
    --checkbox-size: 16px;
    --checkbox-border-radius: 5px;
    --checkbox-label-padding: 6px;
  }

  &:has(.checkbox__input:checked) {
    --checkbox-path-opacity: 1;
  }

  &.checkbox--disabled {
    --checkbox-cursor: not-allowed;
  }
}

.checkbox__input {
  position: absolute;
  opacity: 0;
  margin: 0;
  width: var(--checkbox-size);
  height: var(--checkbox-size);

  /* Outline is on the SVG instead, to allow it to have border-radius */
  &:focus-visible {
    outline: none;
  }

  &:focus-visible + .checkbox__label .icon-checkmark {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  
  &:checked + .checkbox__label .icon-checkmark {
  background-color: #F8F1F4 !important;
  border-color: #F8F1F4 !important;
}


.checkbox__label .icon-checkmark path {
  fill: #000 !important;
}













  &:disabled + .checkbox__label .icon-checkmark {
    background-color: var(--input-disabled-background-color);
    border-color: var(--input-disabled-border-color);
  }
}

.checkbox__label {
  position: relative;
  display: inline-flex;
  cursor: var(--checkbox-cursor);
  line-height: var(--checkbox-size);
  min-width: var(--minimum-touch-target);
}

.checkbox .icon-checkmark {
  height: var(--checkbox-size);
  width: var(--checkbox-size);
  flex-shrink: 0;
  border: var(--checkbox-border);
  border-radius: var(--checkbox-border-radius);
  background-color: var(--color-background);
}

.checkbox__label-text {
  padding-inline-start: var(--checkbox-label-padding);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.checkbox .icon-checkmark path {
  stroke: var(--color-background);
  opacity: var(--checkbox-path-opacity);
  transition: opacity var(--animation-speed) var(--animation-easing);
}

.checkbox__input:disabled + .checkbox__label {
  color: var(--input-disabled-text-color);
}

/* Add to cart button */
.button[id^='BuyButtons-ProductSubmitButton-'] {
  position: relative;
  overflow: hidden;
}

/* Cart bubble */
.cart-bubble {
  --cart-padding: 0.2em;

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

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

.cart-bubble__text {
  font-size: var(--font-size--2xs);
  z-index: var(--layer-flat);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Quantity selector */
.quantity-selector {
  --quantity-selector-width: 124px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-input-text);
  background-color: var(--color-input-background);
  border: var(--style-border-width-inputs) solid var(--color-input-border);
  border-radius: var(--style-border-radius-inputs);
  flex: 1 1 var(--quantity-selector-width);
  align-self: stretch;
  transition: background-color var(--animation-speed) var(--animation-easing);

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

.product-form-buttons:has(.add-to-cart-button.button-secondary) .quantity-selector {
  border-radius: var(--style-border-radius-buttons-secondary);
}

.quantity-selector :is(.quantity-minus, .quantity-plus) {
  /* Unset button styles */
  padding: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
  flex-shrink: 0;
  color: var(--color-input-text);
}

.quantity-selector .quantity-minus {
  border-start-start-radius: var(--style-border-radius-inputs);
  border-end-start-radius: var(--style-border-radius-inputs);
}

.quantity-selector .quantity-plus {
  border-start-end-radius: var(--style-border-radius-inputs);
  border-end-end-radius: var(--style-border-radius-inputs);
}

.product-details .quantity-selector {
  border-radius: var(--style-border-radius-buttons-primary);
}

.product-details .quantity-selector .quantity-minus {
  border-start-start-radius: var(--style-border-radius-buttons-primary);
  border-end-start-radius: var(--style-border-radius-buttons-primary);
}

.product-details .quantity-selector .quantity-plus {
  border-start-end-radius: var(--style-border-radius-buttons-primary);
  border-end-end-radius: var(--style-border-radius-buttons-primary);
}

.quantity-selector .svg-wrapper {
  transition: transform var(--animation-speed) var(--animation-easing);
}

.quantity-selector svg {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

:is(.quantity-minus, .quantity-plus):active .svg-wrapper {
  transform: scale(0.9);
}

.quantity-selector input[type='number'] {
  margin: 0;
  text-align: center;
  border: none;
  appearance: none;
  max-width: calc(var(--quantity-selector-width) - var(--minimum-touch-target) * 2);
  border-radius: var(--style-border-radius-buttons);
  color: var(--color-input-text);
  background-color: transparent;
}

/* Chrome, Safari, Edge, Opera */
.quantity-selector input[type='number']::-webkit-inner-spin-button,
.quantity-selector input[type='number']::-webkit-outer-spin-button {
  appearance: none;
}

/* Firefox */
.quantity-selector input[type='number'] {
  appearance: textfield;
}

/* Pills (used in facets and predictive search) */

.pills__pill {
  --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));

  color: var(--color-foreground);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-sm);
  min-width: 48px;
  padding: 6px 12px;
  border-radius: var(--style-border-radius-pills);
  cursor: pointer;
  background-color: var(--pills-pill-background-color);
  transition: background-color var(--animation-speed) var(--animation-easing);

  &:hover {
    --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

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

.pills__pill > .svg-wrapper {
  --close-icon-opacity: 0.4;
  --icon-stroke-width: 1px;

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

.pills__pill--swatch {
  @media screen and (max-width: 749px) {
    padding-inline-start: var(--padding-sm);
  }
}

.pills__pill--swatch .swatch {
  margin-right: -4px;
}

.pills__pill--desktop-small {
  @media screen and (min-width: 750px) {
    font-size: var(--font-size--xs);
  }
}

/* Fly to cart animation */
fly-to-cart {
  --offset-y: 10px;

  position: fixed;
  width: var(--width, 40px);
  height: var(--height, 40px);
  left: 0;
  top: 0;
  z-index: calc(infinity);
  pointer-events: none;
  border-radius: var(--style-border-radius-buttons-primary);
  overflow: hidden;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  opacity: 0;
  background-color: var(--color-foreground);
  translate: var(--start-x, 0) var(--start-y, 0);
  transform: translate(-50%, -50%);
  animation-name: travel-x, travel-y, travel-scale;
  animation-timing-function: var(--x-timing), var(--y-timing), var(--scale-timing);
  animation-duration: 0.6s;
  animation-composition: accumulate;
  animation-fill-mode: both;
}

fly-to-cart.fly-to-cart--main {
  --x-timing: cubic-bezier(0.7, -5, 0.98, 0.5);
  --y-timing: cubic-bezier(0.15, 0.57, 0.9, 1.05);
  --scale-timing: cubic-bezier(0.85, 0.05, 0.96, 1);
}

fly-to-cart.fly-to-cart--quick {
  --x-timing: cubic-bezier(0, -0.1, 1, 0.32);
  --y-timing: cubic-bezier(0, 0.92, 0.92, 1.04);
  --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98);

  animation-duration: 0.6s;
}

fly-to-cart.fly-to-cart--sticky {
  --x-timing: cubic-bezier(0.98, -0.8, 0.92, 0.5);
  --y-timing: cubic-bezier(0.14, 0.56, 0.92, 1.04);
  --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98);
  --radius: var(--style-border-radius-buttons-primary);

  @media (max-width: 749px) {
    --x-timing: cubic-bezier(0.98, -0.1, 0.92, 0.5);
  }

  animation-duration: 0.8s;
}

@keyframes travel-scale {
  0% {
    opacity: var(--start-opacity, 1);
  }

  5% {
    opacity: 1;
  }

  100% {
    border-radius: 50%;
    opacity: 1;
    transform: translate(-50%, calc(-50% + var(--offset-y))) scale(0.25);
  }
}

@keyframes travel-x {
  to {
    translate: var(--travel-x, 0) 0;
  }
}

@keyframes travel-y {
  to {
    translate: 0 var(--travel-y, 0);
  }
}

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

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

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

/* 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 slideInLeft {
  from {
    transform: translateX(var(--custom-transform-from, 100%));
  }

  to {
    transform: translateX(var(--custom-transform-to, 0));
  }
}

@keyframes slideInLeftViewTransition {
  from {
    transform: translateX(100px);
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(var(--custom-transform-to, -100%));
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes slideInTop {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

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

@keyframes slideOutBottom {
  from {
    transform: translateY(0);
  }

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

@keyframes slideInBottom {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slideOutTop {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-100%);
  }
}

@keyframes cartBubbleSlideIn {
  from {
    transform: translateY(-1em);
  }

  to {
    transform: translateY(0);
  }
}

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

.bubble {
  display: inline-flex;
  height: calc(var(--variant-picker-swatch-height) / 1.5);
  font-size: var(--font-size--xs);
  border-radius: 20px;
  min-width: 20px;
  padding: 0 6px;
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  color: var(--color-foreground);
  align-items: center;
  justify-content: center;
}

.bubble svg {
  width: 12px;
  height: 12px;
}

.top-shadow::before {
  content: '';
  box-shadow: 0 0 10px var(--color-shadow);
  position: absolute;
  z-index: var(--layer-lowest);
  inset: 0;
  clip-path: inset(-50px 0 0 0); /* stylelint-disable-line */
}

@media (min-width: 750px) {
  .top-shadow--mobile::before {
    display: none;
  }
}

.bottom-shadow::before {
  content: '';
  box-shadow: 0 0 10px var(--color-shadow);
  position: absolute;
  z-index: var(--layer-lowest);
  inset: 0;
  clip-path: inset(0 0 -50px 0); /* stylelint-disable-line */
}

@media (min-width: 750px) {
  .bottom-shadow--mobile::before {
    display: none;
  }
}

.video-placeholder-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--size-style-aspect-ratio, auto);
}

:not(deferred-media) > .video-placeholder-wrapper {
  width: var(--video-placeholder-width);
}

.video-placeholder-wrapper > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/*
 * Slideshow Component
 */
slideshow-component {
  --cursor: grab;
  --slide-offset: 6px;

  position: relative;
  display: flex;
  flex-direction: column;
  timeline-scope: var(--slideshow-timeline);
}

slideshow-component.slideshow--content-below-media slideshow-slide {
  display: grid;
}

.slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
  position: static;
}

.slideshow--content-below-media slideshow-slide {
  grid-template-rows: var(--grid-template-rows);

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

.slide__content {
  opacity: 0;
  animation: slide-reveal both linear;
  animation-timeline: var(--slideshow-timeline);

  @media (prefers-reduced-motion) {
    opacity: 1;
    animation: none;
  }
}

.slideshow--single-media {
  --cursor: default;
}

a slideshow-component {
  --cursor: pointer;
}

/*
 * Slideshow Slides
 */
slideshow-slides {
  width: 100%;
  position: relative;
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-color: transparent transparent;
  scrollbar-width: none;
  gap: var(--slideshow-gap, 0);
  cursor: var(--cursor);
  min-height: var(--slide-min-height);

  @media (prefers-reduced-motion) {
    scroll-behavior: auto;
  }

  &::-webkit-scrollbar {
    width: 0;
  }

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

  &::-webkit-scrollbar-thumb {
    background: transparent;
    border: none;
  }

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

slideshow-component[disabled='true'] slideshow-slides {
  overflow: hidden;
}

slideshow-component[mobile-disabled] slideshow-slides {
  @media screen and (max-width: 749px) {
    overflow: hidden;
  }
}

slideshow-slide {
  position: relative;
  scroll-snap-align: center;
  width: var(--slide-width, 100%);
  max-height: 100%;
  flex-shrink: 0;
  view-timeline-name: var(--slideshow-timeline);
  view-timeline-axis: inline;
  content-visibility: auto;
  contain-intrinsic-size: auto none;
  border-radius: var(--corner-radius, 0);
  overflow: hidden;

  slideshow-component[actioned] &,
  &[aria-hidden='false'] {
    content-visibility: visible;
  }

  slideshow-component slideshow-slide:not([aria-hidden='false']) {
    content-visibility: hidden;
  }

  &[hidden]:not([reveal]) {
    display: none;
  }

  /* Make inactive slides appear clickable */
  &[aria-hidden='true'] {
    cursor: pointer;
  }
}

slideshow-slide .slide__image-container--rounded {
  border-radius: var(--corner-radius, 0);
}

slideshow-slide.product-media-container--tallest {
  content-visibility: visible;
}

@media screen and (max-width: 749px) {
  /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
  .media-gallery--hint
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
}

/*
 * Collection and Resource list carousels have peeking slides on both sides.
 * Card galleries preview the next or previous images on 'pointerenter', so we
 * try to kick load them beforehand (they are lazy loaded otherwise).
 */
:is(.resource-list__carousel, .card-gallery)
  :is(
    slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
    slideshow-slide[aria-hidden='false'] + slideshow-slide
  ) {
  content-visibility: auto;

  slideshow-component[actioned] & {
    content-visibility: visible;
  }
}

/*
 * Be specific about HTML children structure to avoid targeting nested slideshows.
 * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
 */
slideshow-component:is([dragging], [transitioning], :hover) > slideshow-container > slideshow-slides > slideshow-slide {
  content-visibility: visible;
}

slideshow-slides[gutters*='start'] {
  padding-inline-start: var(--gutter-slide-width, 0);
  scroll-padding-inline-start: var(--gutter-slide-width, 0);
}

slideshow-slides[gutters*='end'] {
  padding-inline-end: var(--gutter-slide-width, 0);
}

slideshow-component[dragging] {
  --cursor: grabbing;

  * {
    pointer-events: none;
  }
}

slideshow-component[dragging] slideshow-arrows {
  display: none;
}

slideshow-container {
  width: 100%;
  display: block;
  position: relative;
  grid-area: container;
  container-type: inline-size;
}

@media screen and (min-width: 750px) {
  .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) {
    &:has(slideshow-controls[pagination-position='right']) {
      display: grid;
      grid-template:
        'container controls' auto
        'arrows controls' min-content
        / 1fr auto;
    }

    &:has(slideshow-controls[pagination-position='left']) {
      display: grid;
      grid-template:
        'controls container' auto
        'controls arrows' min-content
        / auto 1fr;
    }

    slideshow-controls[pagination-position='left'] {
      order: -1;
    }
  }
}

/* Slideshow Play/Pause */
.slideshow-control:is(.icon-pause, .icon-play) {
  color: var(--color-active);

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

  svg {
    display: none;
  }
}

slideshow-component:is([autoplay]) {
  &:is([paused]) {
    .icon-play > svg {
      display: block;
    }
  }

  &:not([paused]) {
    .icon-pause > svg {
      display: block;
    }
  }
}

/* Slideshow Arrows */
slideshow-arrows {
  --cursor-previous: w-resize;
  --cursor-next: e-resize;

  position: absolute;
  inset: 0;
  display: flex;
  z-index: var(--layer-heightened);
  pointer-events: none;
  mix-blend-mode: difference;
  align-items: flex-end;

  &[position='left'] {
    justify-content: flex-start;
    padding-inline: var(--padding-xs);
  }

  &[position='right'] {
    justify-content: flex-end;
    padding-inline: var(--padding-xs);
  }

  &[position='center'] {
    justify-content: space-between;
    align-items: center;
  }
}

slideshow-arrows:has(.slideshow-control--shape-square),
slideshow-arrows:has(.slideshow-control--shape-circle) {
  mix-blend-mode: normal;
}

slideshow-component[disabled='true'] slideshow-arrows {
  display: none;
}

slideshow-arrows .slideshow-control {
  pointer-events: auto;
  opacity: 0;
  min-height: var(--minimum-touch-target);
  min-width: var(--minimum-touch-target);
  padding: 0 var(--padding-xs);
  color: var(--color-white);
}

slideshow-arrows .slideshow-control.slideshow-control--style-none {
  display: none;
}

.media-gallery--carousel slideshow-arrows .slideshow-control {
  padding-inline: 0 var(--padding-md);
  opacity: 1;
}

.card-gallery slideshow-arrows .slideshow-control {
  /* Align icons with quick-add button */
  padding-inline: var(--padding-xl);

  @container (max-width: 249px) {
    padding-inline: 0 var(--padding-sm);
  }
}

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

@keyframes slide-reveal {
  0% {
    translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0;
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0;
    opacity: 0;
  }
}

.block-resource-list {
  display: flex;
  flex-direction: column;
  row-gap: var(--gap);
  min-width: 0;
  min-height: 0;
  container-type: inline-size;
  container-name: resource-list;
}

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

.section-resource-list.section--full-width product-card-link > .group-block,
.section-carousel.section--full-width product-card-link > .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));
  }
}

.resource-list--carousel-mobile {
  display: block;

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

.resource-list {
  --resource-list-mobile-gap-max: 9999px;
  --resource-list-column-gap: min(var(--resource-list-column-gap-desktop), var(--resource-list-mobile-gap-max));
  --resource-list-row-gap: min(var(--resource-list-row-gap-desktop), var(--resource-list-mobile-gap-max));

  width: 100%;

  @media screen and (max-width: 749px) {
    --resource-list-mobile-gap-max: 12px;
  }

  @container resource-list (max-width: 749px) {
    --resource-list-mobile-gap-max: 12px;
  }
}

.resource-list--grid {
  display: grid;
  gap: var(--resource-list-row-gap) var(--resource-list-column-gap);
  grid-template-columns: var(--resource-list-columns-mobile);

  @media screen and (min-width: 750px) {
    grid-template-columns: var(--resource-list-columns);
  }

  @container resource-list (max-width: 449px) {
    grid-template-columns: var(--resource-list-columns-mobile);
  }

  @container resource-list(min-width: 450px) and (max-width: 749px) {
    --resource-list-columns-per-row: 3;

    grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

    /* Avoid orphan in last row when there are 4, 7, or 10 items */
    &:has(.resource-list__item:first-child:nth-last-child(3n + 1)),
    /* Clean two full rows when there are 8 items */
    &:has(.resource-list__item:first-child:nth-last-child(8n)) {
      --resource-list-columns-per-row: 4;
    }
  }

  @container resource-list (min-width: 750px) {
    grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

    &:has(.resource-list__item:first-child:nth-last-child(n + 9)) {
      --resource-list-columns-per-row: 5;
    }

    &:has(.resource-list__item:first-child:nth-last-child(n + 7):nth-last-child(-n + 8)) {
      --resource-list-columns-per-row: 4;
    }

    &:has(.resource-list__item:first-child:nth-last-child(6)) {
      --resource-list-columns-per-row: 3;
    }

    &:has(.resource-list__item:first-child:nth-last-child(5)) {
      --resource-list-columns-per-row: 5;
    }

    &:has(.resource-list__item:first-child:nth-last-child(-n + 4)) {
      --resource-list-columns-per-row: 4;
    }
  }

  @container resource-list (min-width: 1200px) {
    &:has(.resource-list__item:first-child:nth-last-child(6)) {
      --resource-list-columns-per-row: 6;
    }
  }
}

.resource-list__item {
  height: 100%;
  color: var(--color-foreground);
  text-decoration: none;
}

.resource-list__carousel {
  --slide-width: 60vw;

  width: 100%;
  position: relative;
  container-type: inline-size;
  container-name: resource-list-carousel;

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

  .slideshow-control--next {
    margin-inline-start: auto;
  }
}

@container resource-list-carousel (max-width: 749px) {
  .resource-list__carousel .resource-list__slide {
    --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
  }
}

@container resource-list-carousel (min-width: 750px) {
  .resource-list__carousel .resource-list__slide {
    --section-slide-width: calc(
      (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) /
        var(--column-count)
    );
    --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
    --slide-width: var(--section-slide-width, var(--fallback-slide-width));
  }
}

.resource-list__carousel slideshow-slides {
  gap: var(--resource-list-column-gap);

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

  margin-block: -16px;
  padding-block: 16px;
}

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

.resource-list__carousel .resource-list__slide {
  width: var(--slide-width);
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 0;
}

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

accordion-custom {
  details {
    &::details-content,
    .details-content {
      block-size: 0;
      overflow-y: clip;
      opacity: 0;
      interpolate-size: allow-keywords;
      transition: content-visibility var(--animation-speed-slow) allow-discrete,
        padding-block var(--animation-speed-slow) var(--animation-easing),
        opacity var(--animation-speed-slow) var(--animation-easing),
        block-size var(--animation-speed-slow) var(--animation-easing);
    }

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

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

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

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

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

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


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

text-component {
  --shimmer-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
  --shimmer-color-light: rgb(var(--color-foreground-rgb) / var(--opacity-10));
  --shimmer-speed: 1.25s;

  display: inline-block;
  position: relative;
  transition: color var(--animation-speed-slow) ease;
  line-height: 1;

  &::after {
    content: attr(value);
    position: absolute;
    inset: 0;
    color: transparent;
    opacity: 0;
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
    pointer-events: none;
    background-image: linear-gradient(
      -85deg,
      var(--shimmer-text-color) 10%,
      var(--shimmer-color-light) 50%,
      var(--shimmer-text-color) 90%
    );
    background-clip: text;
    background-size: 200% 100%;
    background-position: 100% 0;
    place-content: center;
  }

  &[shimmer] {
    color: transparent;

    &::after {
      opacity: 1;
      animation: text-shimmer var(--shimmer-speed) infinite linear;
    }
  }
}

@keyframes text-shimmer {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

/* 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 title truncation - applied only to zoom-out view */
[product-grid-view='zoom-out'] :is(.product-card, .product-grid__card) :is(h4, .h4) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
}

/* Product card title truncation - applied on mobile regardless of view */
@media screen and (max-width: 749px) {
  :is(.product-card, .product-grid__card) :is(h4, .h4) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
  }
}

.product-card:hover,
.collection-card:hover,
.resource-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);
}

.header .product-card:hover,
.header .collection-card:hover,
.header .resource-card:hover,
.header-drawer .product-card:hover,
.header-drawer .collection-card:hover,
.header-drawer .resource-card:hover {
  z-index: auto;
  transform: none;
  box-shadow: none;
}

/* Prevent iOS zoom on input focus by ensuring minimum 16px font size on mobile */
@media screen and (max-width: 1200px) {
  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%);
  }
}


/* ===============================
   PINK BACKGROUND SECTIONS
================================ */

.section--pink,
.fireworks,
.visual-navigation,
.featured-products {
  background-color: #f8f1f4;
}

/* ===============================
   PRODUCT CARD
================================ */

.product-tile__content {
  background: #ffffff;
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  text-align: left;
}



/* Taille du logo en haut (desktop + mobile) */
.site-header__logo,
.header__heading,
.header__heading-logo {
  font-size: clamp(16px, 1.15vw, 20px) !important;
  line-height: 1 !important;
}

/* Évite que le logo rétrécisse trop */
.header__heading-link,
.site-header__logo a {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

/* Taille du SIYAA au centre (ajuste si besoin) */
.visual-navigation__heading,
.banner__heading,
.hero__content h1 {
  font-size: clamp(34px, 5vw, 64px) !important;
}

/* Taille desktop */
@media (min-width: 990px) {
  .header__heading-link,
  .site-header__logo a {
    font-size: 22px !important;
  }
}

/* Taille mobile */
@media (max-width: 989px) {
  .header__heading-link,
  .site-header__logo a {
    font-size: 18px !important;
    letter-spacing: 0.28em;
  }
}

/* Empêche Shopify de réduire le logo */
.header__heading-link {
  max-width: none !important;
}
.kylie-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.kylie-grid .kylie-card{position:relative;overflow:hidden;border-radius:20px}
.kylie-grid .kylie-card>img{width:100%!important;height:100%!important;aspect-ratio:9/16!important;object-fit:cover!important;display:block}
.kylie-grid .kylie-card>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font:700 22px Arial;color:#fff;background:rgba(0,0,0,.2)}
@media(max-width:768px){.kylie-grid{grid-template-columns:1fr}}
/* Bouton transparent */
.button,
.button--primary,
.button--secondary {
  background-color: transparent !important;
  border: 1px solid #393939 !important;
  color: #393939 !important;
  transition: all 0.3s ease;
  border-radius: 8px; /* arrondi léger comme sur la photo */
}


/* IMPORTANT : flèches du carousel produit = pas de style bouton (pas de contour) */
.template-product .media-gallery--carousel slideshow-arrows .slideshow-control {
  border: 0 !important;
  box-shadow: none !important;          /* enlève le cadre inset */
  outline: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 var(--padding-xs) !important; /* garde le padding d'origine */
}

/* si le cadre vient du système de variables boutons */
.template-product .media-gallery--carousel slideshow-arrows .slideshow-control {
  --button-border-width: 0px !important;
  --button-border-color: transparent !important;
}





/* Survol */
.button:hover,
.button--primary:hover,
.button--secondary:hover {
  background-color: #393939 !important;
  color: #ffffff !important;
  border-color: #393939 !important;
}.kylieCard{position:relative;border-radius:14px;overflow:hidden;background:#efefef;transition:.2s}
.kylieCard__media{display:block;position:relative;background:#e9e9e9}
.kylieCard__img{width:100%;height:320px;object-fit:contain;display:block;background:#e9e9e9}
.kylieCard__badge{position:absolute;top:12px;font-size:12px;padding:6px 10px;border-radius:999px;background:#fff;color:#111;opacity:.95}
.kylieCard__badge--left{left:12px}
.kylieCard__badge--right{right:12px}
.kylieCard__drawer{position:absolute;left:0;right:0;bottom:0;background:#f4f4f4;padding:12px 12px 14px;transform:translateY(58%);transition:.25s}
.kylieCard:hover .kylieCard__drawer{transform:translateY(0)}
.kylieCard__swatches{display:flex;gap:8px;align-items:center;margin-bottom:10px;overflow:auto;padding-bottom:2px}
.kylieSwatch{border:0;background:transparent;padding:0;cursor:pointer}
.kylieSwatch__dot{display:block;width:14px;height:14px;border-radius:50%;background:#c9c9c9;box-shadow:0 0 0 2px rgba(0,0,0,.08)}
.kylieSwatch.is-active .kylieSwatch__dot{box-shadow:0 0 0 2px #111}
.kylieCard__meta{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.kylieCard__title{font-size:14px;line-height:1.15;color:#111}
.kylieCard__price{font-size:14px;color:#111;white-space:nowrap}
.kylieCard__btn{margin-top:10px;width:100%;border:0;border-radius:10px;padding:12px 14px;background:#121212;color:#fff;font-size:14px;cursor:pointer}

/* =========================
   SIYAA — Swatches métal
   Or / Argent / Rose gold
   ========================= */

/* Texte (nom des choix) */
.variant-swatch label,
.variant-swatch .swatch__label,
.color-swatch .swatch__label,
.swatch .swatch__label{
  font-family: inherit;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: #2b2b2b;
}

/* Cercle : base (sans contour noir) */
.swatch,.variant-swatch label,.color-swatch label,.color-swatch{
  width: 22px; height: 22px; border-radius: 999px;
  border: 0 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset 0 10px 14px rgba(255,255,255,.18),
    0 8px 18px rgba(0,0,0,.22);
  background-size: 100% 100%;
}

/* Sélection : halo clair (pas noir) */
.is-selected .swatch,
.is-selected .variant-swatch label,
.is-selected .color-swatch,
.color-swatch[aria-checked="true"]{
  box-shadow:
    0 0 0 2px rgba(255,255,255,.75),
    0 0 0 4px rgba(0,0,0,.12),
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 0 10px 14px rgba(255,255,255,.20),
    0 10px 22px rgba(0,0,0,.28);
}
/* ========= Couleurs métal (sur data-value) ========= */
/* OR */
[data-value="Or" i]{
  background: radial-gradient(circle at 30% 25%,
    #fff2b6 0%, #f3d27a 18%, #d2a84b 45%, #b5872f 70%, #8a6a1f 100%);
}

/* ARGENT */
[data-value="Argent" i]{
  background: radial-gradient(circle at 30% 25%,
    #ffffff 0%, #e9edf2 18%, #cfd6df 45%, #aeb6c2 70%, #7f8794 100%);
}

/* ROSE GOLD */
[data-value="Rose gold" i]{
  background: radial-gradient(circle at 30% 25%,
    #ffe2dc 0%, #f6c2b6 18%, #d99a8d 45%, #b76e79 70%, #7f3e47 100%);
}
/* ===============================
   SIYAA – Swatches métal
   =============================== */

/* Base du rond */
.siyaaSwatch{
  width:34px;
  height:34px;
  border-radius:50%;
  display:inline-block;
  cursor:pointer;
  border:none !important;
  background-size:120% 120%;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.45),
    inset 0 -4px 6px rgba(0,0,0,.25),
    0 4px 10px rgba(0,0,0,.25);
  transition:all .25s ease;
}

/* Hover */
.siyaaSwatch:hover{
  transform:scale(1.08);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.55),
    inset 0 -6px 8px rgba(0,0,0,.3),
    0 6px 14px rgba(0,0,0,.35);
}

/* Sélection (clic) */
.siyaaSwatch.is-active{
  box-shadow:
    0 0 0 2px rgba(255,255,255,.9),
    0 0 0 4px rgba(0,0,0,.15),
    inset 0 1px 2px rgba(255,255,255,.45),
    inset 0 -4px 6px rgba(0,0,0,.25);
}

/* ===== COULEURS MÉTAL ===== */

/* OR */
.siyaaSwatch.is-gold{
  background:
    radial-gradient(circle at 30% 30%, #fff4c2, #e6c15a 45%, #b8952e 70%, #8a6f1d);
}

/* ARGENT */
.siyaaSwatch.is-silver{
  background:
    radial-gradient(circle at 30% 30%, #ffffff, #dcdcdc 45%, #b5b5b5 70%, #8f8f8f);
}

/* ROSE GOLD */
.siyaaSwatch.is-rose{
  background:
    radial-gradient(circle at 30% 30%, #ffe5dc, #e6b3a3 45%, #c48a78 70%, #9e5f50);
}

/* 🔝 Localisation TOUT EN HAUT À GAUCHE – SS Header #15 */
#ss-header-15 .header-localization,
.ss-header-15 .header-localization,
[data-section-id*="ss-header-15"] .header-localization {
  position: absolute;
  top: 10px;        /* ajuste si tu veux + ou - haut */
  left: 16px;       /* marge gauche */
  z-index: 1000;
}

/* empêche le décalage du reste du header */
#ss-header-15 {
  position: relative;
}

/* Sélecteur devise – aligné header */
.header-localization-SECTION {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* bouton */
.localization-toggle-SECTION {
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  padding: 0;
}

/* dropdown */
.localization-dropdown-SECTION {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 10px;
  min-width: 200px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  z-index: 999;
}
/* FORCER ALIGNEMENT TOUT À GAUCHE */
.header-menu-{{ section.id }} {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.header-localization-{{ section.id }} {
  display: flex;
  align-items: center;
  margin-left: 0;
}

.kylie-card{
  height:530px!important;
  min-height:0!important;
  overflow:hidden!important;
  position:relative
}
.kylie-card img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  background:#f5f5f5
}
/* ===== SIYAA – Kylie cards hauteur finale ===== */
.kylie-card{
  height:530px!important;
  min-height:0!important;
  overflow:hidden!important;
  position:relative
}
.kylie-card img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  background:#f5f5f5
}
/* SIYAA – Footer finition luxe */
.shopify-section-footer h2,
.shopify-section-footer .footer-block__heading {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  font-weight: 500;
}

.shopify-section-footer a {
  font-size: 13px;
  line-height: 1.9;
}

.shopify-section-footer .footer__blocks {
  gap: 50px;
}

/* Newsletter footer – message de confirmation (SIYAA) */
.siyaa-diorFooter__nlMsg{
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(0,0,0,0.55);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* ================================
   SIYAA — HERO HOMEPAGE (COMME AVANT)
   Grand hero + image en "cover"
================================ */

/* Donne une vraie hauteur au hero */
.template-index .cover-section,
.template-index .banner,
.template-index .slideshow,
.template-index .image-banner {
  min-height: clamp(520px, 78vh, 920px) !important;
}

/* Le conteneur média doit prendre la hauteur */
.template-index .cover-section__media,
.template-index .banner__media,
.template-index .slideshow__media,
.template-index .image-banner__media {
  height: 100% !important;
  min-height: inherit !important;
}

/* Image = remplie (comme avant), donc peut crop un peu mais c’est normal */
.template-index .cover-section__media img,
.template-index .banner__media img,
.template-index .slideshow__media img,
.template-index .image-banner__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}



/* ✅ ACCESSIBILITÉ : ZOOM (mobile/tablette) + GRAS (en même temps) */
@media (max-width: 1024px){

  /* ZOOM footer */
  html.siyaa-a11y-on .siyaa-diorFooter{
    font-size: 115% !important;
  }

  /* ✅ GRAS : textes + liens + bouton + input */
  html.siyaa-a11y-on .siyaa-diorFooter,
  html.siyaa-a11y-on .siyaa-diorFooter a,
  html.siyaa-a11y-on .siyaa-diorFooter button,
  html.siyaa-a11y-on .siyaa-diorFooter input,
  html.siyaa-a11y-on .siyaa-diorFooter summary,
  html.siyaa-a11y-on .siyaa-diorFooter p,
  html.siyaa-a11y-on .siyaa-diorFooter span,
  html.siyaa-a11y-on .siyaa-diorFooter li{
    font-weight: 600 !important;
    opacity: 1 !important;
  }

  /* Titres un peu + forts */
  html.siyaa-a11y-on .siyaa-diorFooter__nlTitle,
  html.siyaa-a11y-on .siyaa-diorFooter__colTitle{
    font-weight: 700 !important;
  }
}

/* ===================================================
   FIX TITRES AUTOMATIQUES DES PAGES POLITIQUES SHOPIFY
   Desktop • Tablette • Mobile – Thème Atelier
   =================================================== */

/* Structure générale pages légales */
.template-policy,
.shopify-policy__container {
  padding-top: 120px !important; /* DESKTOP */
}

/* Titre */
.shopify-policy__container h1,
.shopify-policy__title,
.template-policy h1 {
  margin-top: 0 !important;
  padding-top: 0 !important;
  text-align: center;
}

/* =====================
   TABLETTE
   ===================== */
@media (max-width: 1024px) {
  .template-policy,
  .shopify-policy__container {
    padding-top: 90px !important;
  }
}

/* =====================
   MOBILE
   ===================== */
@media (max-width: 768px) {
  .template-policy,
  .shopify-policy__container {
    padding-top: 70px !important;
  }
}

/* ===================================================
   PAGES POLITIQUES – TITRE PERSONNALISÉ (H2 / H3)
   Desktop • Tablette • Mobile – Thème Atelier
   =================================================== */

/* Cache uniquement le titre AUTOMATIQUE Shopify */
.shopify-policy__title {
  display: none !important;
}

/* Structure globale de la page */
.template-policy,
.shopify-policy__container {
  padding-top: 110px !important; /* desktop */
}

/* =====================
   TABLETTE
   ===================== */
@media (max-width: 1024px) {
  .template-policy,
  .shopify-policy__container {
    padding-top: 90px !important;
  }
}

/* =====================
   MOBILE
   ===================== */
@media (max-width: 768px) {
  .template-policy,
  .shopify-policy__container {
    padding-top: 70px !important;
  }
}

/* =====================
   TES TITRES MANUELS
   ===================== */

/* ===============================
   TITRES H2 PAGES POLITIQUES
   =============================== */

/* Desktop */
.shopify-policy__container h2 {
  max-width: 900px;              /* empêche les coupures */
  margin: 0 auto 32px auto;      /* centré proprement */
  text-align: center;
  line-height: 1.2;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/* ===============================
   TABLETTE & MOBILE
   =============================== */
@media (max-width: 1024px) {
  .shopify-policy__container h2 {
    max-width: 100%;
    text-align: left;            /* ← clé du rendu clean */
    margin-left: 0;
    margin-right: 0;
  }
}


/* H3 = sous-titres */
.shopify-policy__container h3 {
  margin-top: 40px;
  margin-bottom: 14px;
  font-weight: 500;
}

/* ===================================================
   PAGES POLITIQUES – ESPACEMENT & AERATION TITRES
   SIYAA – Desktop / Tablette / Mobile
   =================================================== */

/* Cache le titre automatique Shopify */
.shopify-policy__title {
  display: none !important;
}

/* Espace global entre le header et le contenu */
.template-policy,
.shopify-policy__container {
  padding-top: 190px !important; /* DESKTOP */
}

/* =====================
   TABLETTE
   ===================== */
@media (max-width: 1024px) {
  .template-policy,
  .shopify-policy__container {
    padding-top: 120px !important;
  }
}

/* =====================
   MOBILE
   ===================== */
@media (max-width: 768px) {
  .template-policy,
  .shopify-policy__container {
    padding-top: 90px !important;
  }
}

/* =====================
   TITRE PRINCIPAL (H2)
   ===================== */
.shopify-policy__container h2 {
  max-width: 920px;
  margin: 0 auto 48px auto; /* espace sous le titre */
  padding-top: 0;
  text-align: center;
  line-height: 1.25;       /* aération verticale */
  letter-spacing: 0.03em;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/* =====================
   SOUS-TITRES (H3)
   ===================== */
.shopify-policy__container h3 {
  margin-top: 56px;
  margin-bottom: 18px;
  line-height: 1.3;
  font-weight: 500;
}

/* ===================================================
   ATELIER – Souligner les boutons "Style lien"
   (hors footer) – Desktop/Tablette/Mobile
   =================================================== */

/* 1) Soulignement : dans le contenu seulement */
main a.button,
main button.button,
main .button,
main a.btn,
main button.btn,
main .btn {
  /* rien par défaut */
}

/* Cible les variantes “lien / texte / tertiary / plain” (très courant sur Atelier) */
main a.button[class*="tertiary"],
main button.button[class*="tertiary"],
main .button[class*="tertiary"],
main a.button[class*="plain"],
main button.button[class*="plain"],
main .button[class*="plain"],
main a.button[class*="text"],
main button.button[class*="text"],
main .button[class*="text"],
main a.button[class*="link"],
main button.button[class*="link"],
main .button[class*="link"],
main a[class*="link"],
main button[class*="link"] {
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

/* Hover (optionnel) */
main a.button[class*="tertiary"]:hover,
main button.button[class*="tertiary"]:hover,
main .button[class*="tertiary"]:hover,
main a.button[class*="plain"]:hover,
main button.button[class*="plain"]:hover,
main .button[class*="plain"]:hover,
main a.button[class*="text"]:hover,
main button.button[class*="text"]:hover,
main .button[class*="text"]:hover,
main a.button[class*="link"]:hover,
main button.button[class*="link"]:hover,
main .button[class*="link"]:hover,
main a[class*="link"]:hover,
main button[class*="link"]:hover {
  text-decoration-thickness: 2px;
}

/* 2) Protection : jamais dans le footer */
footer a,
footer button,
footer .button,
#shopify-section-footer a,
#shopify-section-footer button,
#shopify-section-footer .button,
.footer a,
.footer button,
.footer .button {
  text-decoration: none !important;
}

/* ===================================================
   RENDRE LES BOUTONS STYLE LIEN PLUS VISIBLES
   (hors footer) – Thème Atelier
   =================================================== */

/* Boutons style lien dans le contenu */
main a,
main button {
  /* on ne touche pas à tout */
}

/* Liens / boutons type lien (texte) */
main a[class*="link"],
main a[class*="text"],
main a[class*="plain"],
main .button[class*="link"],
main .button[class*="text"],
main .button[class*="plain"],
main button[class*="link"],
main button[class*="text"],
main button[class*="plain"] {
  font-weight: 600;              /* plus visible (semi-bold) */
  letter-spacing: 0.02em;        /* luxe / lisibilité */
}

/* Hover (optionnel mais recommandé) */
main a[class*="link"]:hover,
main .button[class*="link"]:hover,
main button[class*="link"]:hover {
  font-weight: 700;              /* encore plus visible au hover */
}

/* ===============================
   PROTECTION FOOTER
   =============================== */
footer a,
footer button,
footer .button,
#shopify-section-footer a,
#shopify-section-footer button,
#shopify-section-footer .button {
  font-weight: inherit !important;
}

/* ===================================================
   POLICIES – ESPACE AVANT FOOTER (AJUSTÉ & PROPRE)
   =================================================== */

.shopify-policy__container::after {
  content: "";
  display: block;
  height: 35vh;   /* ← espace maîtrisé */
}

.shopify-policy__container {
  padding-bottom: 40px !important;
}


/* ================================
   SIYAA - Badge "Épuisé" (Atelier)
   ================================ */

/* Style général des badges produit */
.product-badges__badge{
  background: #FFFFFF !important;      /* fond blanc */
  color: #3A2E2E !important;           /* texte brun/noir doux */
  border-radius: 6px !important;       /* léger arrondi */
  text-transform: none !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(58,46,46,.18) !important;
}
.product-badges__badge--rectangle{
  border-radius: 6px !important;
}







/* =========================
   ✅ OVERRIDE FINAL — Carousel 7
   Desktop: 4 | Tablette: 2 | Mobile: 1
   + centrage (spacers)
   ========================= */

#siyaa-carousel-7-{{ section.id }} .siyaaC7__track{
  --gap: 14px;
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:var(--gap) !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x mandatory !important;
  scroll-snap-stop: always !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:none;
}
#siyaa-carousel-7-{{ section.id }} .siyaaC7__track::-webkit-scrollbar{display:none}

/* ✅ Desktop (≥1101px): 4 cartes */
@media (min-width:1101px){
  #siyaa-carousel-7-{{ section.id }} .siyaaTile{
    flex: 0 0 calc((100% - (var(--gap) * 3)) / 4) !important;
    scroll-snap-align: start !important;
  }

  /* ✅ PAS de spacers en desktop */
  #siyaa-carousel-7-{{ section.id }} .siyaaC7__track::before,
  #siyaa-carousel-7-{{ section.id }} .siyaaC7__track::after{content:none !important;}
}

/* ✅ Tablette (768–1100px): 2 cartes */
@media (min-width:768px) and (max-width:1100px){
  #siyaa-carousel-7-{{ section.id }} .siyaaTile{
    flex: 0 0 calc((100% - var(--gap)) / 2) !important;
    scroll-snap-align: start !important;
  }

  /* ✅ PAS de spacers en tablette (comme avant) */
  #siyaa-carousel-7-{{ section.id }} .siyaaC7__track::before,
  #siyaa-carousel-7-{{ section.id }} .siyaaC7__track::after{content:none !important;}
}

/* ✅ Mobile (≤767px): 1 carte centrée + 1ère/dernière centrées */
@media (max-width:767px){
  #siyaa-carousel-7-{{ section.id }} .siyaaC7__track{
    padding: 12px 0 18px !important;
    justify-content:flex-start !important;
  }

  /* spacers pour centrer 1ère/dernière */
  #siyaa-carousel-7-{{ section.id }} .siyaaC7__track::before,
  #siyaa-carousel-7-{{ section.id }} .siyaaC7__track::after{
    content:"" !important;
    flex: 0 0 14px !important;
  }

  #siyaa-carousel-7-{{ section.id }} .siyaaTile{
    flex: 0 0 calc(100% - 28px) !important; /* 14px + 14px */
    scroll-snap-align: center !important;
  }

  /* flèches cachées mobile */
  #siyaa-carousel-7-{{ section.id }} .siyaaC7__nav{display:none !important;}
}








/* ===== Boutons coeur (cartes + fiche produit) ===== */
.siyaaWishBtn{
  -webkit-tap-highlight-color: transparent;
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:12px;
  position:relative;
}

.siyaaWishBtn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:12px;
  background: rgba(245,245,245,.95);
  opacity:0;
  transform: scale(.96);
  transition: opacity .15s ease, transform .15s ease;
}

.siyaaWishBtn.is-tapped::before{ opacity:1; transform: scale(1); }

@media(hover:hover){
  .siyaaWishBtn:hover::before{ opacity:1; transform: scale(1); }
}

.siyaaWishBtn svg{
  width:22px;
  height:22px;
  position:relative;
  z-index:1;
}

.siyaaWishBtn svg path{
  fill: transparent;
  stroke: rgba(0,0,0,.75);
  stroke-width: 1.8;
  transition: fill .18s ease, stroke .18s ease;
}

/* Etat actif : contour noir + rempli rose signature */
.siyaaWishBtn.is-active svg path{
  fill: #B76E79;
  stroke: #B76E79;
}

/* Position coeur sur card produit */
.siyaaWishWrap{
  position:absolute;
  top:10px;
  right:10px;
  z-index:5;
}

/* ===== Icone coeur header + compteur ===== */
.siyaaHeaderWish{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.siyaaHeaderWish::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:12px;
  background: rgba(245,245,245,.95);
  opacity:0;
  transform: scale(.96);
  transition: opacity .15s ease, transform .15s ease;
}

@media(hover:hover){
  .siyaaHeaderWish:hover::before{ opacity:1; transform: scale(1); }
}

.siyaaHeaderWish__icon{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
}

.siyaaHeaderWish__icon svg{ width:22px; height:22px; }
.siyaaHeaderWish__icon svg path{
  fill: transparent;
  stroke: rgba(0,0,0,.75);
  stroke-width: 1.8;
}

.siyaaHeaderWish__count{
  position:absolute;
  top: 8px;
  right: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(0,0,0,.9);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align:center;
  z-index:2;
}

@media(max-width: 989px){
  .siyaaHeaderWish{ width: 42px; height: 42px; }
  .siyaaHeaderWish__icon svg{ width: 21px; height: 21px; }
}

/* ===== Page Wishlist : rendu identique a ta capture ===== */
.siyaaWL{
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 16px 60px;
}

.siyaaWL__top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding: 6px 0 14px;
  border-bottom: 1px solid rgba(0,0,0,.10);
}

.siyaaWL__title{
  margin:0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .2px;
}

.siyaaWL__count{
  font-size: 13px;
  opacity: .7;
}

.siyaaWL__list{ padding-top: 14px; }

.siyaaWL__row{ margin-bottom: 14px; }

/* Card bordure + fond blanc */
.siyaaWL__card{
  display:grid;
  grid-template-columns: 150px 1fr auto;
  gap: 16px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

@media(max-width: 749px){
  .siyaaWL__card{
    grid-template-columns: 140px 1fr;
    grid-template-areas:
      "img info"
      "img price";
    gap: 14px;
  }
}

.siyaaWL__imgWrap{
  grid-area: img;
  background: #f2f2f2;
  display:grid;
  place-items:center;
  min-height: 150px;
  text-decoration:none;
}

@media(max-width: 749px){
  .siyaaWL__imgWrap{ min-height: 140px; }
}

.siyaaWL__img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}

.siyaaWL__info{
  padding: 16px 0;
  min-width: 0;
}

.siyaaWL__name{
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}

.siyaaWL__sub{
  margin-top: 4px;
  font-size: 12px;
  opacity: .6;
}

.siyaaWL__actions{
  margin-top: 14px;
  display:flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}

.siyaaWL__linkBtn{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: inherit;
  text-align:left;
  width: fit-content;
}

.siyaaWL__linkBtn[disabled]{
  opacity:.45;
  cursor:not-allowed;
  text-decoration:none;
}

.siyaaWL__price{
  padding: 16px 16px 16px 0;
  font-size: 14px;
  white-space: nowrap;
  text-align:right;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

@media(max-width: 749px){
  .siyaaWL__price{
    grid-area: price;
    padding: 0 0 16px 0;
    align-items:flex-start;
    justify-content:flex-start;
    text-align:left;
    margin-left: 156px;
  }
}

/* Bloc message bas (identique) */
.siyaaWL__login{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,.10);
  text-align:center;
}

.siyaaWL__loginTitle{
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}

.siyaaWL__loginText{
  font-size: 13px;
  opacity:.65;
  margin-bottom: 14px;
  line-height: 1.45;
}

.siyaaWL__loginLink{
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: inherit;
}

.siyaaWL__empty{
  padding: 28px 0;
  text-align:center;
  font-size: 14px;
  opacity:.7;
}


/* === Wishlist heart – fiche produit === */
.siyaa-wishlist-btn{
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.siyaa-wishlist-btn svg{
  width:20px;
  height:20px;
  display:block;
}

.siyaa-wishlist-btn.is-added svg path{
  fill: currentColor;   /* cœur rempli noir */
  stroke: currentColor;
}


/* =========================
   SIYAA – Wishlist (PDP + Header dot)
   ========================= */

/* Coeur sur la fiche produit (à côté du titre) */
.siyaa-pdp-wish {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  padding: 6px;
  margin-left: 10px;
  cursor: pointer;
  line-height: 0;
}

.siyaa-pdp-wish svg{
  width: 18px;          /* <-- taille du coeur */
  height: 18px;
  display:block;
}

.siyaa-pdp-wish svg path{
  stroke: currentColor;
  stroke-width: 1;      /* <-- même épaisseur que tes autres icônes */
  fill: transparent;
  transition: fill .2s ease, transform .2s ease;
}

.siyaa-pdp-wish.is-active svg path{
  fill: #000;           /* coeur rempli noir quand ajouté */
}

/* Petit “pulse” discret au clic */
@keyframes siyaaWishPulse {
  0%{ transform: scale(1); }
  50%{ transform: scale(1.10); }
  100%{ transform: scale(1); }
}
.siyaa-pdp-wish.is-pulsing svg{
  animation: siyaaWishPulse .35s ease;
}

/* DOT header (noir + plus petit + battement lent) */
.wishlist-dot,
[class*="wishlist-dot-"]{
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: #000 !important;
  position: absolute !important;
  top: -2px !important;
  right: -2px !important;
  transform-origin: center;
  animation: siyaaDotBeat 1.8s ease-in-out infinite;
}

@keyframes siyaaDotBeat{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.25); }
}


/* ================================
   WISHLIST – COEUR SUR CARTE PRODUIT
   ================================ */

/* Le conteneur image doit être "position:relative" */
.card__media,
.card-product__media,
.product-card__media,
.media {
  position: relative;
}

.wishlist-card-btn{
  position:absolute;
  top:10px;
  right:10px;
  z-index:5;
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}

.wishlist-card-btn svg{
  width:16px;
  height:16px;
  display:block;
}

/* Etat ajouté = coeur rempli noir */
.wishlist-card-btn.is-added{
  border-color: rgba(0,0,0,.28);
}
.wishlist-card-btn.is-added svg{
  fill:#000;
}
.wishlist-card-btn:not(.is-added) svg{
  fill:none;
}


/* --- WISHLIST coeur sur cartes produits --- */
.product-card__content{
  position: relative;
}

.wishlist-card-btn{
  position:absolute;
  top:10px;
  right:10px;
  z-index: 50;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  pointer-events:auto;
}

.wishlist-card-btn svg{
  width:16px;
  height:16px;
  display:block;
}

/* état rempli noir quand ajouté */
.wishlist-card-btn.is-added svg{ fill:#000; }
.wishlist-card-btn:not(.is-added) svg{ fill:none; }

/* au hover (optionnel) */
.wishlist-card-btn:hover{
  background:#fff;
}


/* Le conteneur devient une base de position */
.product-card__content{
  position: relative;
}

/* Le gros lien overlay (si présent) passe sous le coeur */
.product-card__link{
  z-index: 1;
}

/* Le coeur passe au-dessus de TOUT */
.wishlist-card-btn{
  position:absolute;
  top:10px;
  right:10px;
  z-index: 9999 !important;
  pointer-events: auto !important;

  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
}

.wishlist-card-btn svg{
  width:16px;
  height:16px;
  display:block;
}

.wishlist-card-btn.is-added svg{ fill:#000; }
.wishlist-card-btn:not(.is-added) svg{ fill:none; }



.siyaa-pdp-wish{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:1px solid rgba(0,0,0,.18);
  border-radius:999px;
  background:transparent;
  cursor:pointer;
  margin:8px 0;
}
.siyaa-pdp-wish.is-active{
  border-color: rgba(0,0,0,.35);
}
.siyaa-pdp-wish.is-pulsing{
  transform: scale(1.06);
  transition: transform .2s ease;
}






.siyaa-pdp-wish{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;height:34px;
  border:1px solid rgba(0,0,0,.18);
  border-radius:999px;
  background:transparent;
  cursor:pointer;
  margin:8px 0;
}
.siyaa-pdp-wish svg{display:block}





















/* Coeur wishlist fiche produit : icône seule (sans encadré) */
.siyaa-pdp-wish{
  -webkit-appearance:none !important;
  appearance:none !important;
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  margin:10px auto 12px !important; /* auto = centré */
  width:auto !important;
  height:auto !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:none !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  line-height:1 !important;
  cursor:pointer;
}

.siyaa-pdp-wish svg{
  width:18px;
  height:18px;
  display:block;
}


.siyaa-pdp-wish-wrap{
  display:block;
  width:100%;
  text-align:center;
}


.siyaa-pdp-wish-wrap{
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 20px;   /* ⬅️ espace sous le prix */
}



/* ✅ WISHLIST PAGE ONLY */
.siyaaWishPage{
  background: rgb(0 0 0 / 0.06);
  padding: 40px 16px;
}

.siyaaWishPanel{
  max-width: 980px;
  margin-left: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgb(0 0 0 / 0.12);
  padding: 26px;
}

.siyaaWishTop{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  margin-bottom: 18px;
}

.siyaaWishH1{
  margin:0;
  font-size: 22px;
  letter-spacing: 0.02em;
}

.wishlist-count{
  font-size: 14px;
  opacity: .75;
}

.siyaaWishItem{
  display:grid;
  grid-template-columns: 140px 1fr 220px;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.siyaaWishImg{
  display:block;
  background:#f4f4f4;
  border-radius: 10px;
  overflow:hidden;
  aspect-ratio: 1/1;
}

.siyaaWishImg img{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
}

.siyaaWishTitle{
  display:inline-block;
  font-size: 16px;
  text-decoration: none;
  color: inherit;
}

.siyaaWishSub{
  margin-top: 6px;
  font-size: 13px;
  opacity: .7;
}

.siyaaWishRight{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.siyaaWishPrice{
  font-size: 16px;
  font-weight: 600;
}

.siyaaWishActions{
  display:flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.siyaaWishLink{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  text-decoration: underline;
  font-size: 14px;
}

.siyaaWishLink.is-danger{ opacity:.75; }

.siyaaWishEmpty, .siyaaWishLoading{
  padding: 18px 0;
  opacity: .75;
}

@media (max-width: 860px){
  .siyaaWishItem{ grid-template-columns: 120px 1fr; }
  .siyaaWishRight{
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .siyaaWishActions{
    flex-direction: row;
    gap: 14px;
  }
}


.siyaaWishPanel { min-height: 60vh; }
#wishlist-grid img { aspect-ratio: 1 / 1; object-fit: cover; }



.siyaa-wishlist-close{
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  background:transparent;
  padding:8px 0;
  cursor:pointer;
  color: inherit;
  margin-bottom: 14px;
}
.siyaa-wishlist-close span[aria-hidden="true"]{
  font-size: 26px;
  line-height: 1;
}
.siyaa-wishlist-close__txt{
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* Croix fermer wishlist (overlay, ne décale pas) */
.siyaaWishPanel{ position: relative; }

.siyaaWishClose{
  position: absolute;
  top: 14px;
  right: 14px;
  border: 0;
  background: transparent;
  padding: 6px;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  color: inherit;
}


/* Overlay wishlist AU-DESSUS du header */
.siyaaWishPage{
  position: fixed;
  inset: 0;
  z-index: 999999; /* plus haut que le header */
  background: rgba(0,0,0,.35);

  /* ✅ laisse respirer sous le header */
  padding-top: calc(var(--header-group-height, 60px) + 18px);
  padding-inline: 18px;
  padding-bottom: 18px;

  display: grid;
  place-items: start center; /* panel en haut mais centré */
}


/* Panel wishlist */
.siyaaWishPanel{
  position: relative;
  width: min(980px, 100%);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 70px rgba(0,0,0,.18);
  overflow: hidden;

  /* ✅ réserve une vraie zone en haut pour la croix */
  padding-top: 54px;
}

/* Croix */
.siyaaWishClose{
  position: absolute;
  top: 16px;
  left: 18px;   /* comme sur l’exemple : croix à gauche */
  border: 0;
  background: transparent;
  padding: 6px;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  color: inherit;
}


.siyaaWishPage{
  opacity: 1;
  transition: opacity .15s ease;
}

.siyaaWishPage.is-closing{
  opacity: 0;
}


html.siyaa-wish-lock,
body.siyaa-wish-lock{
  overflow: hidden !important;
}


/* =========================================
   Wishlist – enlever le bleu mobile/tablette
   et garder le style PC (noir + souligné)
   cible: .siyaaWishLink
   ========================================= */

/* Force la couleur “PC” (hérite du texte, donc noir) + souligné */
.siyaaWishLink{
  color: inherit !important;
  text-decoration: underline !important;
  -webkit-text-decoration-skip: ink;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;

  /* neutralise le style bouton natif mobile */
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* iOS Safari: empêche le “bleu” de tap */
.siyaaWishLink,
.siyaaWishLink:visited,
.siyaaWishLink:hover,
.siyaaWishLink:active{
  color: inherit !important;
}

/* iOS/Android: retire le surlignage bleu au tap */
.siyaaWishLink{
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  tap-highlight-color: rgba(0,0,0,0) !important;
}


/* ================================
   COEUR WISHLIST – enlever fond rond blanc (cartes produits)
   ================================ */

/* bouton coeur sur les cartes produits */
.product-card .wishlist-card-btn,
.product-card .wishlist-card-btn::before,
.product-card .wishlist-card-btn::after {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* au cas où le thème met un fond via un wrapper */
.product-card .wishlist-card-btn {
  border-radius: 0 !important;
}

/* sécurité : aucun fond au hover / active */
.product-card .wishlist-card-btn:hover,
.product-card .wishlist-card-btn:active,
.product-card .wishlist-card-btn:focus {
  background: transparent !important;
}






/* =========================================================
   TITRES – STYLE ÉLÉGANT & CENTRÉ (GLOBAL)
   ========================================================= */

h1, h2, h3, h4, h5, h6,
.heading,
.section-title,
.rich-text__heading {
  margin: 0 auto;
  text-align: center;

  font-family: "Atacama VAR", "ABCDiorIcons", Arial, sans-serif;
  font-weight: normal;
  font-size: 1.5rem; /* 24px */
  line-height: 34px;
  letter-spacing: -0.03rem;
  color: #33383C;
  font-variation-settings: "wght" 352, "wdth" 100, "CNTR" 28, "XHGT" 0;
  -webkit-font-smoothing: antialiased;
}













/* ========== HEADER WISHLIST (sans compteur) ========== */
a[class*="header-wishlist-"] svg path{
  stroke:#000 !important;
  fill:transparent;
}
a[class*="header-wishlist-"].siyaa-wish-pulse{
  animation: siyaaPulse 1.15s ease-in-out infinite;
}
@keyframes siyaaPulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.08); }
}

/* ========== CARTES PRODUITS (on ne change pas ton HTML, juste fiabiliser le clic) ========== */
.wishlist-card-btn{
  -webkit-tap-highlight-color: transparent;
  pointer-events:auto !important;
  z-index: 20 !important;
}
.wishlist-card-btn svg path{
  stroke:#000 !important;
  fill:transparent !important;
}
.wishlist-card-btn.is-added svg path{
  fill:#000 !important;
}

/* ========== PDP coeur seul sous le prix ========== */
.siyaa-pdp-wish{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin: 10px auto 0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color: transparent;
}
.siyaa-pdp-wish svg{ width:18px !important; height:18px !important; display:block !important; }
.siyaa-pdp-wish svg path{ stroke:#000 !important; fill:transparent !important; }
.siyaa-pdp-wish.is-added svg path{ fill:#000 !important; }

/* ========== PAGE WISHLIST (pas de lock, pas de sauts) ========== */
.siyaaWishPage{ padding: 30px 0; }
.siyaaWishPanel{ max-width: 980px; margin: 0 auto; position: relative; }
.siyaaWishClose{
  position:absolute; top:0; right:0;
  width:42px; height:42px;
  border:0; background:transparent;
  font-size:28px; line-height:1;
  cursor:pointer;
}
.siyaaWishTop{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(0,0,0,.08);
  margin-bottom:18px;
}
#wishlist-grid{ display:block; }

.siyaaWishRow{
  display:flex;
  gap:16px;
  padding:18px 0;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.siyaaWishImg{ width:160px; flex:0 0 160px; display:block; }
.siyaaWishImg img{ width:100%; height:auto; display:block; }
.siyaaWishInfo{ flex:1; min-width:0; }
.siyaaWishTitle{ color:#000 !important; text-decoration:none; font-size:16px; }
.siyaaWishActions{ margin-top:10px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.siyaaWishLink{
  appearance:none; -webkit-appearance:none;
  border:0; background:transparent;
  padding:0; margin:0;
  cursor:pointer;
  color:#000 !important;
  text-decoration: underline !important;
  font: inherit;
}


/* ✅ Empêche la wishlist de "sauter" quand les images chargent */
.siyaaWishImg{
  width:160px;
  flex:0 0 160px;
  display:block;
}
.siyaaWishImg img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio: 1 / 1;     /* réserve la place */
  object-fit: cover;
  background: rgba(0,0,0,.03);
}


/* ===============================
   SIYAA — WISHLIST ANTI-SAUT (FIX)
   =============================== */

/* 1) Le panneau ne doit pas bouger, seul le contenu scroll */
.siyaaWishPage{
  position: fixed;
  inset: 0;
  z-index: 99999;
}

.siyaaWishPanel{
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;               /* pas de scroll ici */
}

/* 2) Header wishlist "stable" */
.siyaaWishTop{
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  margin-bottom: 0;
}

/* 3) Zone liste = seule zone scrollable */
#wishlist-grid,
.wishlist-grid{
  flex: 1;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px;
}

/* 4) Réserver la place des images -> zéro jump */
.siyaaWishImg,
.wishlist-item__img,
.wishlist-item .wishlist-item__img{
  width: 160px;
  flex: 0 0 160px;
  display: block;
}

.siyaaWishImg img,
.wishlist-item__img img,
.wishlist-item img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio: 1 / 1;        /* réserve la hauteur */
  object-fit: cover;          /* évite le recalcul */
  background: rgba(0,0,0,.03);
}

/* 5) Ligne wishlist stable */
.siyaaWishRow,
.wishlist-item{
  display:flex;
  gap:16px;
  padding:18px 0;
  border-bottom:1px solid rgba(0,0,0,.08);
  align-items:flex-start;
}

/* 6) Empêche les changements de largeur/retour à la ligne */
.siyaaWishTitle,
.wishlist-item__title{
  display:block;
  max-width: 100%;
}

/* 7) Bonus : évite le "reflow" quand les polices/transform changent */
.siyaaWishPanel *{
  -webkit-font-smoothing: antialiased;
}

/* 8) IMPORTANT: annule tout vieux "lock" qui peut casser le scroll */
html.wl-lock,
body.wl-lock{
  overflow: auto !important;
  height: auto !important;
}
body.wl-lock{
  position: static !important;
  width: auto !important;
}








/* Tap highlight mobile OFF */
.wishlist-card-btn,
.siyaa-pdp-wish,
[class*="header-wishlist-"]{
  -webkit-tap-highlight-color: transparent;
}

/* PDP: coeur seul centré sous le prix */
.siyaa-pdp-wish{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:fit-content !important;
  margin: 10px auto 14px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  line-height:1 !important;
}
.siyaa-pdp-wish svg{ display:block; }

/* Coeurs: contour noir, rempli noir quand ajouté */
.wishlist-card-btn svg path,
.siyaa-pdp-wish svg path{
  stroke:#000 !important;
  fill: transparent !important;
}
.wishlist-card-btn.is-added svg path,
.siyaa-pdp-wish.is-added svg path{
  fill:#000 !important;
}

/* Header: battre seulement si wishlist > 0 (sans bouger la place) */
.siyaa-wish-has-items{
  animation: siyaaPulse 1.2s ease-in-out infinite;
}
@keyframes siyaaPulse{
  0%,100%{ transform: translateZ(0) scale(1); }
  50%{ transform: translateZ(0) scale(1.08); }
}

/* Wishlist page: actions à droite */
.siyaaWishInfo{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.siyaaWishRight{
  margin-left:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}
.siyaaWishLink{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  text-decoration:underline;
  color:#000;
}



/* Wishlist – état bouton add to cart */
.siyaaWishAdd.is-loading{
  opacity:.6;
  pointer-events:none;
}
.siyaaWishAdd.is-success{
  font-weight:600;
}
.siyaaWishAdd.is-error{
  font-weight:600;
}


/* ===============================
   Wishlist — layout propre
   - Nom puis prix dessous
   - Actions en bas (droite)
=============================== */

.siyaaWishInfo{
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
}

/* Nom produit */
.siyaaWishTitle{
  display:block !important;
  margin:0 !important;
}

/* Prix sous le nom */
.siyaaWishPrice{
  margin-top:6px !important;
}

/* Actions en bas */
.siyaaWishActions{
  margin-top:auto !important;          /* pousse tout en bas */
  padding-top:12px !important;
  display:flex !important;
  flex-direction:row !important;       /* sur la même ligne */
  gap:14px !important;
  justify-content:flex-end !important; /* à droite */
  align-items:center !important;
}

/* Si tu préfères centré au lieu de droite, remplace juste la ligne ci-dessus par :
.siyaaWishActions{ justify-content:center !important; }
*/

/* Les boutons restent soulignés et noirs partout (PC/tablette/mobile) */
.siyaaWishLink{
  appearance:none !important;
  -webkit-appearance:none !important;
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  cursor:pointer !important;
  text-decoration:underline !important;
  color:#000 !important;
  font:inherit !important;
}

/* Anti “bleu iOS/Android” sur tap */
.siyaaWishLink{
  -webkit-tap-highlight-color: transparent;
}


/* Validation discrète après ajout panier */
.siyaaWishAdd{
  position:relative;
}

.siyaaWishAdd.is-loading{
  opacity:.55;
  pointer-events:none;
}

.siyaaWishAdd.is-success::after{
  content:"Ajouté ✓";
  position:absolute;
  right:0;
  top:-18px;
  font-size:12px;
  opacity:.85;
  white-space:nowrap;
}

.siyaaWishAdd.is-error::after{
  content:"Erreur";
  position:absolute;
  right:0;
  top:-18px;
  font-size:12px;
  opacity:.85;
  white-space:nowrap;
}

/* ===============================
   Wishlist — layout propre
   - Nom puis prix dessous
   - Actions en bas à droite
=============================== */

.siyaaWishInfo{
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
}

.siyaaWishTitle{
  display:block !important;
  margin:0 !important;
  color:#000 !important;
  text-decoration:none !important;
}

.siyaaWishPrice{
  margin-top:6px !important;
}

/* Actions en bas à droite */
.siyaaWishActions{
  margin-top:auto !important;
  padding-top:12px !important;
  display:flex !important;
  flex-direction:row !important;
  gap:14px !important;
  justify-content:flex-end !important;
  align-items:center !important;
}

/* Boutons "Ajouter au panier" / "Supprimer" : noir + souligné partout */
.siyaaWishLink{
  appearance:none !important;
  -webkit-appearance:none !important;
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  cursor:pointer !important;
  text-decoration:underline !important;
  color:#000 !important;
  font:inherit !important;
  -webkit-tap-highlight-color: transparent;
}

/* ===============================
   Validation discrète (sans "ajout en cours")
=============================== */

.siyaaWishAdd{
  position:relative;
}

/* petit message au dessus du bouton */
.siyaaWishAdd.is-success::after{
  content:"Ajouté ✓";
  position:absolute;
  right:0;
  top:-18px;
  font-size:12px;
  opacity:.85;
  white-space:nowrap;
}

.siyaaWishAdd.is-error::after{
  content:"Erreur";
  position:absolute;
  right:0;
  top:-18px;
  font-size:12px;
  opacity:.85;
  white-space:nowrap;
}





/* ===============================
   SIYAA — WISHLIST (PROPRE & STABLE)
   =============================== */

/* --- Page wishlist en overlay (ne saute pas) --- */
.siyaaWishPage{
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.siyaaWishPanel{
  width: min(980px, 100%);
  max-height: min(86vh, 820px);
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  display: flex;
  flex-direction: column;
}

/* Top sticky (reste en haut), la liste scroll dans le panel */
.siyaaWishTop{
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.siyaaWishH1{ margin:0; font-size: 22px; color:#000; font-weight: 500; }
.wishlist-count{ font-size: 13px; color: rgba(0,0,0,.65); }

/* Bouton fermer */
.siyaaWishClose{
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  color:#000;
  -webkit-tap-highlight-color: transparent;
}

/* La liste scroll ici (et pas la page) */
#wishlist-grid{
  padding: 16px 18px 20px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}

/* Grid produits */
.wishlist-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
@media (max-width: 900px){
  .wishlist-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .wishlist-grid{ grid-template-columns: 1fr; }
}

/* Card wishlist */
.siyaaWishItem{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  display:flex;
  flex-direction: column;
}

.siyaaWishImg{ display:block; background:#fff; }
.siyaaWishImg img{
  width: 100%;
  height: auto;
  display:block;
}

.siyaaWishInfo{
  padding: 12px 12px 12px;
  display:flex;
  flex-direction: column;
  gap: 6px;
}

/* Nom produit en NOIR (tu as demandé) */
.siyaaWishTitle{
  color:#000 !important;
  text-decoration: none !important;
  font-size: 14px;
  line-height: 1.25;
}

/* Prix sous le nom */
.siyaaWishPrice{
  color: rgba(0,0,0,.75);
  font-size: 13px;
}

/* Actions en bas (pas en haut), alignées droite */
.siyaaWishActions{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Boutons liens soulignés, même rendu PC/tablette/mobile */
.siyaaWishLink{
  appearance:none;
  -webkit-appearance:none;
  border:0 !important;
  background: transparent !important;
  padding:0 !important;
  margin:0 !important;
  cursor:pointer;
  text-decoration: underline !important;
  color:#000 !important;
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}

/* Validation discrète (sans changer le texte) */
.siyaaWishLink.is-success{
  text-decoration-thickness: 2px !important;
}
.siyaaWishLink.is-success::after{
  content:" ✓";
  font-size: 12px;
  opacity: .75;
}
.siyaaWishLink.is-error::after{
  content:" (erreur)";
  font-size: 12px;
  opacity: .75;
}

/* --- Coeurs: NOIR uniquement --- */
.wishlist-card-btn,
.siyaa-pdp-wish,
[class*="header-wishlist-"]{
  color:#000 !important;
  -webkit-tap-highlight-color: transparent;
}

/* Remove rond blanc autour des coeurs sur cartes (si tu en as) */
.wishlist-card-btn{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Important : clic toujours possible */
.wishlist-card-btn,
.siyaa-pdp-wish{
  pointer-events: auto !important;
}

/* Header coeur: battement seulement si items (sans compteur) */
.siyaa-wish-has-items{
  animation: siyaaHeartPulse 1.15s ease-in-out infinite;
}
@keyframes siyaaHeartPulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.08); }
}



/* Validation ajout panier – discrète */
.siyaaWishBtnLoading {
  opacity: 0.55;
  pointer-events: none;
}

.siyaaWishBtnOk {
  color: #000;
  opacity: 0.6;
}





/* ===============================
   WISHLIST – Titre aligné avec compteur
=============================== */

/* Titre "Votre wishlist" */
.siyaaWishH1 {
  font-size: 14px !important;      /* même taille que "1 article" */
  font-weight: 600 !important;     /* gras élégant */
  letter-spacing: 0.02em;
  margin: 0 !important;
}

/* Compteur "1 article" (on sécurise l’alignement visuel) */
.wishlist-count {
  font-size: 14px !important;
  font-weight: 400 !important;
}


/* WISHLIST – Compteur un peu plus foncé */
.wishlist-count {
  font-size: 14px !important;
  font-weight: 500 !important;   /* un peu plus présent */
  color: rgba(0, 0, 0, 0.75) !important; /* plus foncé mais doux */
}





















/* SIYAA — COLLECTION : supprimer le carré/contour blanc autour des pastilles
   (sélecteurs robustes, sans dépendre de variant-option--swatches exactement) */

#ResultsList :is(fieldset, div, ul)[class*="swatch"] :is(label, button) {
  /* enlève le ring blanc */
  outline: none !important;
  box-shadow: none !important;
  border: none !important;

  /* si le “carré” vient du label lui-même */
  border-radius: 999px !important;
  overflow: hidden !important;
}

/* ring dessiné en pseudo-élément (très fréquent) */
#ResultsList :is(fieldset, div, ul)[class*="swatch"] :is(label, button)::before,
#ResultsList :is(fieldset, div, ul)[class*="swatch"] :is(label, button)::after {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 999px !important;
}

/* ring au focus/checked (sans toucher aux couleurs) */
#ResultsList :is(fieldset, div, ul)[class*="swatch"] :is(label, button):focus,
#ResultsList :is(fieldset, div, ul)[class*="swatch"] :is(label, button):focus-visible,
#ResultsList :is(fieldset, div, ul)[class*="swatch"] :is(label, button):has(input:checked) {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}












/* ✅ SIYAA — Pastilles (Vous pourriez aimer / product recommendations) : enlever contour carré blanc */
product-recommendations :is(fieldset, div, ul)[class*="swatch"],
.product-recommendations :is(fieldset, div, ul)[class*="swatch"],
.resource-list :is(fieldset, div, ul)[class*="swatch"] {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* enlève le ring sur label/bouton/pseudo-elements */
product-recommendations :is(label, button)[class*="swatch"],
product-recommendations :is(label, button)[class*="swatch"]::before,
product-recommendations :is(label, button)[class*="swatch"]::after,
.product-recommendations :is(label, button)[class*="swatch"],
.product-recommendations :is(label, button)[class*="swatch"]::before,
.product-recommendations :is(label, button)[class*="swatch"]::after,
.resource-list :is(label, button)[class*="swatch"],
.resource-list :is(label, button)[class*="swatch"]::before,
.resource-list :is(label, button)[class*="swatch"]::after {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 999px !important;
}
























/* ✅ SIYAA — Variantes "Taille" (boutons) : enlever les contours */
variant-picker fieldset.variant-option--buttons > label,
variant-picker fieldset.variant-option--buttons > label::before,
variant-picker fieldset.variant-option--buttons > label::after {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* enlève aussi le ring quand checked / focus */
variant-picker fieldset.variant-option--buttons > label:has(input:checked),
variant-picker fieldset.variant-option--buttons > label:has(input:focus),
variant-picker fieldset.variant-option--buttons > label:has(input:focus-visible) {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}


variant-picker fieldset.variant-option--buttons > label:has(input:checked) {
  background: #F8F1F4 !important;
}
















/* SIYAA — iPad/tablette : collection ONLY (fix tronquage + écrasement) */
@media (min-width: 750px) and (max-width: 1366px) {

  /* Bord à bord uniquement sur la page collection */
  body.template-collection main .page-width,
  body.template-collection main .page-width--narrow,
  body.template-collection main .page-width--wide {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* IMPORTANT : enlever le hidden qui coupe tout */
  body.template-collection main ul.product-grid,
  body.template-collection main ul.product-grid > li,
  body.template-collection main .product-card,
  body.template-collection main .product-card__content,
  body.template-collection main .product-card__info,
  body.template-collection main .price {
    overflow: visible !important;
    min-width: 0 !important;
  }
}







/* SIYAA — iPad/tablette : collection ONLY (cards non écrasées + arrondis) */
@media (min-width: 750px) and (max-width: 1366px) {

  /* 1) Arrondis des cartes produits (collection uniquement) */
  body.template-collection main .product-card,
  body.template-collection main .product-card__content,
  body.template-collection main .product-card__media,
  body.template-collection main .media {
    border-radius: 18px !important;
  }

  /* 2) On garde l’arrondi propre : hidden sur la carte + media,
        MAIS on laisse la grille visible (déjà géré) */
  body.template-collection main .product-card,
  body.template-collection main .product-card__media,
  body.template-collection main .media {
    overflow: hidden !important;
  }

  /* 3) Stop “cartes écrasées” : zone image stable */
  body.template-collection main .product-card__media,
  body.template-collection main .media {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }

  /* 4) Image non écrasée */
  body.template-collection main .product-card__media img,
  body.template-collection main .media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }
}















/* FIX coupe au hover (molette sur le carrousel) */
@media (hover:hover){
  #siyaa-carousel-7-{{ section.id }} .siyaaC7__track{
    overflow-y: visible !important;     /* autorise la carte à dépasser */
    padding-top: 6px !important;        /* marge pour que ça ne coupe jamais */
  }
}

@media (hover:hover){
  #siyaa-carousel-7-{{ section.id }} .siyaaTile:hover{
    transform: none !important;
  }
}







/* Guide des tailles - ne pas décaler les boutons */
.siyaa-size-guide{
  display: inline-block;
  margin: 0 0 6px 0;
  font-size: 12px;
  line-height: 1;
  text-decoration: underline;
  color: #000;
}

.siyaa-size-guide:hover{
  color: #bdbdbd;
}






/* Guide des tailles - style aéré */
.siyaa-size-guide{
  display: inline-block;
  margin: 12px 0 14px 0; /* espace au-dessus + en dessous */
  font-size: 13px;
  line-height: 1.2;

  color: #000;
  text-decoration: underline;
  text-underline-offset: 5px;   /* éloigne le trait du texte */
  text-decoration-thickness: 1px; /* épaisseur du trait */
}

.siyaa-size-guide:hover{
  color: #bdbdbd;
}


/* Guide des tailles */
.siyaa-size-guide{
  display: inline-block;
  margin: 12px 0 25px 0;
  font-size: 13px;
  line-height: 1.2;

  color: #000;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

.siyaa-size-guide:hover{
  color: #bdbdbd;
  text-decoration: none; /* enlève le soulignement au hover */
}
















/* ✅ FICHE PRODUIT — UNIQUEMENT pastilles Couleur (swatches) : enlève le fond blanc du label */
body.template-product fieldset.variant-option--swatches label.variant-option__button-label--has-swatch{
  background-color: transparent !important;
}

/* sécurité si le thème met le fond via pseudo-élément */
body.template-product fieldset.variant-option--swatches label.variant-option__button-label--has-swatch::before,
body.template-product fieldset.variant-option--swatches label.variant-option__button-label--has-swatch::after{
  background-color: transparent !important;
  box-shadow: none !important;
}
body.template-product fieldset.variant-option--swatches label.variant-option__button-label--has-swatch .swatch{
  background-color: transparent !important;
}





















/* ✅ SIYAA — COLLECTION : supprimer le cadre qui revient après "Retour" (focus Safari) */
body.template-collection #ResultsList :is(.product-grid__item, .product-grid__card, .product-card, .card):focus,
body.template-collection #ResultsList :is(.product-grid__item, .product-grid__card, .product-card, .card):focus-visible,
body.template-collection #ResultsList :is(.product-grid__item, .product-grid__card, .product-card, .card):focus-within{
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* pareil si le focus est sur le lien dans la carte */
body.template-collection #ResultsList :is(.product-grid__item, .product-grid__card, .product-card, .card) a:focus,
body.template-collection #ResultsList :is(.product-grid__item, .product-grid__card, .product-card, .card) a:focus-visible{
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* si Atelier dessine le cadre en pseudo-élément */
body.template-collection #ResultsList :is(.product-grid__card, .product-card, .card)::before,
body.template-collection #ResultsList :is(.product-grid__card, .product-card, .card)::after{
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
}




@media (max-width: 989px){
  .featured-product-section .wishlist-card-btn{
    top:10px !important;
    right:10px !important;
    z-index:9999 !important;
  }
}















/* ✅ Fix position coeur : on le met dans le bloc image (PC + mobile + tablette) */
(function () {
  function moveWishToMedia() {
    document.querySelectorAll(".wishlist-card-btn").forEach((btn) => {
      const card =
        btn.closest("product-card") ||
        btn.closest(".product-card") ||
        btn.closest(".product-grid__card") ||
        btn.closest(".product-card__content");

      if (!card) return;

      const media =
        card.querySelector(".cardGallery") ||
        card.querySelector(".card__media") ||
        card.querySelector(".media");

      if (!media) return;

      // le bloc image devient le parent référent
      if (getComputedStyle(media).position === "static") {
        media.style.position = "relative";
      }

      // on met le coeur DANS l'image
      if (btn.parentElement !== media) {
        media.appendChild(btn);
      }

      // position stable
      btn.style.position = "absolute";
      btn.style.top = "10px";
      btn.style.right = "10px";
      btn.style.zIndex = "999999";
      btn.style.pointerEvents = "auto";
    });
  }

  function run() {
    moveWishToMedia();
    setTimeout(moveWishToMedia, 150);
    setTimeout(moveWishToMedia, 500);
    setTimeout(moveWishToMedia, 1200);
  }

  document.addEventListener("DOMContentLoaded", run);
  window.addEventListener("resize", run);
  document.addEventListener("shopify:section:load", run);

  // rerenders Shopify → on recale automatiquement
  const obs = new MutationObserver(() => moveWishToMedia());
  obs.observe(document.documentElement, { childList: true, subtree: true });
})();




/* =========================================================
   SIYAA — Déplacer le coeur UNIQUEMENT dans "Mise en avant produit"
   Ciblage robuste : section Shopify dont l'id contient "featured_product"
========================================================= */

/* PC */
div[id^="shopify-section-"][id*="featured_product"] .wishlist-card-btn{
  position: absolute !important;
  top: 100px !important;      /* + petit = monte / + grand = descend */
  right: 200px !important;    /* + grand = va à gauche / + petit = va à droite */
  left: auto !important;
  bottom: auto !important;
  z-index: 50 !important;
}

/* TABLETTE */
@media (min-width: 750px) and (max-width: 1024px){
  div[id^="shopify-section-"][id*="featured_product"] .wishlist-card-btn{
    top: 90px !important;
    right: 60px !important;
  }
}

/* MOBILE */
@media (max-width: 749px){
  div[id^="shopify-section-"][id*="featured_product"] .wishlist-card-btn{
    top: 70px !important;
    right: 40px !important;
  }
}
















/* =========================================================
   SIYAA — TABLETTE : "Découvrir" non cliquable (Image banner)
   Le lien existe, mais un overlay au-dessus bloque le clic.
========================================================= */

@media (min-width: 750px) and (max-width: 1024px) {

  /* 1) Le contenu texte de la bannière doit passer AU-DESSUS */
  .banner__content,
  .banner__box,
  .banner__buttons {
    position: relative !important;
    z-index: 50 !important;
    pointer-events: auto !important;
  }

  /* 2) Le bouton "Découvrir" doit capter les clics */
  .banner__buttons a,
  .banner__buttons a.button,
  .banner__buttons .button {
    position: relative !important;
    z-index: 60 !important;
    pointer-events: auto !important;
  }

  /* 3) Les overlays (souvent invisibles) ne doivent jamais capter le touch */
  .banner::before,
  .banner::after,
  .banner__media::before,
  .banner__media::after,
  .banner__media,
  .banner__media * {
    pointer-events: none !important;
  }

  /* 4) Mais on réactive les clics sur le contenu (sinon tout est bloqué) */
  .banner__content * {
    pointer-events: auto !important;
  }
}
@media (min-width: 750px) and (max-width: 1024px) {
  .banner > a { pointer-events: none !important; }
}












/* =========================================================
   SIYAA — HERO (Atelier) : bouton "Découvrir" ne clique pas sur TABLETTE
   Cause probable : overlay gradient (toggle_overlay=true) qui capte le touch
   Cible : tablette uniquement
========================================================= */
@media (min-width: 750px) and (max-width: 1024px) {

  /* 1) Les overlays / gradients ne doivent JAMAIS capter les clics */
  .hero::before,
  .hero::after,
  .hero__media::before,
  .hero__media::after,
  .hero__overlay,
  .banner__overlay,
  .section-overlay,
  .overlay,
  .gradient-overlay {
    pointer-events: none !important;
  }

  /* 2) Le contenu (texte + bouton) doit être au-dessus et cliquable */
  .hero__content,
  .hero__box,
  .hero__buttons,
  .hero a,
  .hero .button,
  .hero [class*="button"] {
    position: relative !important;
    z-index: 50 !important;
    pointer-events: auto !important;
  }

  /* 3) Si un élément média recouvre tout (image/video), il ne doit pas bloquer le CTA */
  .hero__media,
  .hero__media * {
    pointer-events: none !important;
  }

  /* 4) On réactive les clics uniquement sur la zone contenu */
  .hero__content * {
    pointer-events: auto !important;
  }
}














/* ✅ SIYAA — Ronds de couleurs DANS LES CARTES (mise en avant / recos)
   -> enlève contours/halos
   -> NE change PAS la taille des ronds
   -> garde le barré indisponible
*/
:is(.product-card, .resource-card) fieldset.variant-option--swatches{
  --color-variant-background: transparent !important;
  --color-variant-hover-background: transparent !important;
  --color-selected-variant-background: transparent !important;

  /* on garde les variables de taille du thème */
}

/* Le contour/carré vient du label : on enlève juste border/outline/box-shadow */
:is(.product-card, .resource-card)
fieldset.variant-option--swatches
:is(.variant-option__button-label, .variant-option__button-label--has-swatch){
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;

  /* ⚠️ ne pas toucher padding/min-height/display */
}

/* La pastille elle-même : pas de halo/contour */
:is(.product-card, .resource-card)
fieldset.variant-option--swatches
:is(.swatch, .swatch--unscaled){
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Focus (quand tu cliques) : pas de ring */
:is(.product-card, .resource-card)
fieldset.variant-option--swatches
:is(a, button, label):focus,
:is(.product-card, .resource-card)
fieldset.variant-option--swatches
:is(a, button, label):focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* ✅ IMPORTANT : on NE SUPPRIME PAS les ::before/::after
   car c’est souvent ça qui dessine le "barré" indisponible */












   /* ✅ WISHLIST: uniquement Mise en avant produit */
.featured-product-section .cardGallery,
.featured-product-section .card__media,
.featured-product-section .media{
  position: relative !important;
}

.featured-product-section .wishlist-card-btn{
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 999999 !important;
}

















/* ✅ PC seulement — Mise en avant produit : coeur NE PASSE PAS au-dessus de la page */
@media (min-width: 990px){
  .featured-product-section .cardGallery,
  .featured-product-section .card__media,
  .featured-product-section .media{
    position: relative !important;
    z-index: 0 !important; /* contexte propre */
  }

  .featured-product-section .wishlist-card-btn{
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;

    /* IMPORTANT : z-index faible */
    z-index: 2 !important;
  }

  /* si un parent du thème force un z-index haut, on le neutralise */
  .featured-product-section .product-grid__card,
  .featured-product-section .product-card__content{
    position: relative !important;
    z-index: 0 !important;
  }
}


/* ✅ Mise en avant produit : le coeur reste DANS la carte (pas au-dessus du site) */
.featured-product-section .product-card,
.featured-product-section .product-grid__card,
.featured-product-section .product-card__content{
  position: relative !important;
  z-index: 0 !important;
}

/* parent image */
.featured-product-section .cardGallery,
.featured-product-section .card__media,
.featured-product-section .media{
  position: relative !important;
  z-index: 0 !important;
}

/* coeur */
.featured-product-section .wishlist-card-btn{
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;

  /* IMPORTANT : z-index faible */
  z-index: 2 !important;
}








/* ✅ PC : déplacer le coeur UNIQUEMENT dans Mise en avant produit */
@media (min-width: 990px){
  .featured-product-section .wishlist-card-btn{
    top: 14px !important;     /* ⬅️ change ici */
    right: 14px !important;   /* ⬅️ change ici */
  }
}



/* ============================
   SIYAA — Coeur wishlist
   UNIQUEMENT "Mise en avant du produit"
   PC (>= 990px)
============================ */
@media (min-width: 990px){

  /* Le conteneur devient la référence du positionnement du coeur */
  .featured-product-section .product-grid__card{
    position: relative !important;
    overflow: hidden !important;      /* empêche le coeur de déborder sur les autres sections */
    isolation: isolate !important;    /* fixe les histoires de z-index */
  }

  /* Position coeur seulement dans cette section */
  .featured-product-section .wishlist-card-btn{
    position: absolute !important;
    top: 90px !important;     /* ⬅️ change ici */
    right: 80px !important;   /* ⬅️ change ici */
    z-index: 2 !important;    /* ⬅️ IMPORTANT : plus de 9999/999999 */
  }
}


















/* TABLETTE — SAFE : éviter écrasement + éviter disparition swatches (sans toucher design) */
@media (min-width: 750px) and (max-width: 1024px) {

  /* éviter les cartes écrasées */
  ul.product-grid,
  .product-grid {
    align-items: stretch !important;
  }
  ul.product-grid > *,
  .product-grid > * {
    align-self: stretch !important;
  }

  /* ne pas couper les éléments (prix + swatches) */
  .product-card,
  .product-grid__card,
  .card-product {
    overflow: visible !important;
  }

  .product-card__content,
  .product-card__information,
  .card__content,
  .card__information {
    overflow: visible !important;
    max-height: none !important;
  }

  /* empêcher les ronds de se compresser/disparaître (sans forcer display) */
  .product-card :is(.variant-picker, .variant-picker__swatches, .swatches, .product-swatches) {
    overflow: visible !important;
    flex-wrap: wrap !important;
  }

  .product-card :is(.variant-picker button, .variant-picker label, .variant-picker a) {
    flex-shrink: 0 !important;
  }
}







/* =========================================
   TAILLES — sélectionnée + indispo = BLANC
   (n'affecte pas les ronds couleur)
========================================= */

/* 1) Si les tailles sont en <label> */
.product-form__input input[type="radio"]:checked[disabled] + label:not(.swatch):not(.color-swatch),
.product-form__input input[type="radio"][disabled]:checked + label:not(.swatch):not(.color-swatch),
.variant-picker input[type="radio"]:checked[disabled] + label:not(.swatch):not(.color-swatch),
.variant-picker input[type="radio"][disabled]:checked + label:not(.swatch):not(.color-swatch) {
  background: #fff !important;
  opacity: 1 !important;
}

/* 2) Si les tailles sont en <button> (très fréquent sur Atelier) */
.product-form__input button[aria-pressed="true"][disabled]:not(.swatch):not(.color-swatch),
.product-form__input button[aria-pressed="true"][aria-disabled="true"]:not(.swatch):not(.color-swatch),
.variant-picker button[aria-pressed="true"][disabled]:not(.swatch):not(.color-swatch),
.variant-picker button[aria-pressed="true"][aria-disabled="true"]:not(.swatch):not(.color-swatch) {
  background: #fff !important;
  opacity: 1 !important;
}

/* 3) Atelier met parfois "aria-selected" au lieu de "aria-pressed" */
.product-form__input button[aria-selected="true"][disabled]:not(.swatch):not(.color-swatch),
.product-form__input button[aria-selected="true"][aria-disabled="true"]:not(.swatch):not(.color-swatch),
.variant-picker button[aria-selected="true"][disabled]:not(.swatch):not(.color-swatch),
.variant-picker button[aria-selected="true"][aria-disabled="true"]:not(.swatch):not(.color-swatch) {
  background: #fff !important;
  opacity: 1 !important;
}

.product-form__input button[aria-pressed="true"][disabled]::before,
.product-form__input button[aria-pressed="true"][disabled]::after {
  background: transparent !important;
}

/* Taille : si indispo + sélectionné => fond BLANC (PC / tablette / mobile) */
.variant-option__button-label:has(input[name^="Taille"][data-option-available="false"]:checked),
.variant-option__button-label:has(input[name*="Taille"][data-option-available="false"]:checked) {
  background-color: var(--color-variant-background) !important; /* blanc */
  color: rgb(var(--color-variant-text-rgb) / var(--opacity-60)) !important; /* garde le texte "indispo" */
}


/* ==================================================
   ATELIER — VARIANTS (FUTURS)
   Boutons (tailles/options texte) :
   si indispo + sélectionné => fond BLANC
   EXCLU les ronds couleur (.variant-option--images)
================================================== */

/* Boutons texte/tailles UNIQUEMENT */
.variant-option:not(.variant-option--images)
  .variant-option__button-label:has(input[data-option-available="false"]:checked) {
  background-color: var(--color-variant-background) !important; /* blanc */
  color: rgb(var(--color-variant-text-rgb) / var(--opacity-60)) !important;
}

/* Optionnel : garde bordure normale (pas style sélection noir) */
.variant-option:not(.variant-option--images)
  .variant-option__button-label:has(input[data-option-available="false"]:checked) {
  border-color: var(--color-variant-border) !important;
  box-shadow: none !important;
}





//* =========================================
   HALO sur les ronds couleur (swatches) sélectionnés
   Atelier — PC / TABLETTE / MOBILE
========================================= */

fieldset.variant-option--swatches .variant-option__button-label--has-swatch {
  position: relative;
  overflow: visible !important; /* important: sinon le halo peut être coupé */
}

fieldset.variant-option--swatches
  .variant-option__button-label--has-swatch:has(input:checked)::after {
  content: "";
  position: absolute;
  inset: -3px;                 /* largeur du halo (mini) */
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / 0.22);
  background: transparent;
  pointer-events: none;
}





/* ==================================================
   TAILLES indispo : restent BLANCHES même sélectionnées
   (ne touche pas aux ronds de couleur)
   PC / TABLETTE / MOBILE
================================================== */

.variant-option:not(.variant-option--swatches)
  .variant-option__button-label:has(input[data-option-available="false"]:checked),
.variant-option:not(.variant-option--swatches)
  .variant-option__button-label:has(input[data-option-available="false"][data-current-checked="true"]) {
  background-color: var(--co




  /* ==================================================
   ATELIER — TAILLES ÉPUISÉES : AUTOMATIQUE
   (vraies infos : data-option-available + data-current-checked)
   - épuisé = blanc
   - épuisé + sélectionné = blanc aussi
   PC / TABLETTE / MOBILE
================================================== */

/* Taille épuisée (même non sélectionnée) */
.variant-option:not(.variant-option--swatches)
  .variant-option__button-label:has(input[data-option-available="false"]) {
  background-color: var(--color-variant-background) !important; /* blanc */
  border-color: var(--color-variant-border) !important;
  color: rgb(var(--color-variant-text-rgb) / var(--opacity-60)) !important;
}

/* Taille épuisée + sélectionnée (empêche le noir automatique du thème) */
.variant-option:not(.variant-option--swatches)
  .variant-option__button-label:has(input[data-option-available="false"][data-current-checked="true"]) {
  background-color: var(--color-variant-background) !important; /* blanc */
  border-color: var(--color-variant-border) !important;
  color: rgb(var(--color-variant-text-rgb) / var(--opacity-60)) !important;
  box-shadow: none !important;
}