/** Shopify CDN: Minification failed

Line 2878:10 Expected identifier but found whitespace
Line 2878:11 Unexpected "calc("
Line 2918:0 Unexpected "}"
Line 3237:0 Unexpected "}"

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

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

:root {
  --hover-transition-duration: 0.25s;
  --hover-transition-timing: ease-out;
  --submenu-animation-speed: 360ms;
}

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

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

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

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

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

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

  /* The theme drawer opens from the inline-end edge, so the shift mirrors in RTL */
  [dir='rtl'] .page-wrapper--drawer-open shopify-account::part(dialog) {
    translate: var(--theme-drawer-width, var(--sidebar-width));
  }
}

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

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

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

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

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

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

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

.product-card__content {
  position: relative;
  cursor: pointer;
}

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

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

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

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

p:empty {
  display: none;
}

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

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

/* view transitions */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.content-for-layout > .shopify-section:last-child {
  flex-grow: 1;
}

/* Set up page widths & margins. Gutters grow to the device safe-area insets (viewport-fit=cover)
   so section backgrounds bleed edge-to-edge while content stays clear of the notch; taking the
   larger of both insets keeps the centered page grid symmetric. */
.page-width-wide,
.page-width-normal,
.page-width-narrow,
.page-width-content {
  --page-margin: max(16px, var(--safe-area-inset-left, 0px), var(--safe-area-inset-right, 0px));
}

@media screen and (min-width: 750px) {
  .page-width-wide,
  .page-width-normal,
  .page-width-narrow,
  .page-width-content {
    --page-margin: max(40px, var(--safe-area-inset-left, 0px), var(--safe-area-inset-right, 0px));
  }
}

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

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

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

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

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

  width: 100%;

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

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

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

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

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

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

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

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

@media screen and (max-width: 749px) {
  .section--mobile-full-width > * {
    grid-column: 1 / -1;
  }
}

/* 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-inline: var(--page-margin);
  }
}

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

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

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

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

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

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

/* Utility */

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

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

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

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

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

.contents {
  display: contents;
}

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

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

  display: flex;
  flex-direction: column;
}

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

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

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

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

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

  text-align: start;
}

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

  text-align: center;
}

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

  text-align: end;
}

.text-inherit {
  color: inherit;
}

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

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

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

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

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

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

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

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

.relative {
  position: relative;
}

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

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

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

.icon-default {
  fill: currentColor;
}

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

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

/* Ensure inputs with type presets maintain minimum 16px on mobile to prevent iOS zoom */
@media screen and (max-width: 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 > *,
.text-block.h1 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h1--family);
  font-style: var(--font-h1--style);
  font-weight: var(--font-h1--weight);
  font-size: var(--font-h1--size);
  line-height: var(--font-h1--line-height);
  letter-spacing: var(--font-h1--letter-spacing);
  text-transform: var(--font-h1--case);
  color: var(--color);
}

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

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

@media screen and (max-width: 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 > *,
.text-block.h3 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h3--family);
  font-style: var(--font-h3--style);
  font-weight: var(--font-h3--weight);
  font-size: var(--font-h3--size);
  line-height: var(--font-h3--line-height);
  letter-spacing: var(--font-h3--letter-spacing);
  text-transform: var(--font-h3--case);
  color: var(--color);
}

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

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

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

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

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

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

@media screen and (max-width: 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 {
  color: currentcolor;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.125em;
  transition: text-decoration-color var(--animation-speed) var(--animation-easing),
    color var(--animation-speed) var(--animation-easing);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Animate the UI elements in only after the view transition is complete */
.close-button {
  position: fixed;

  /* Keep the fixed close button clear of the status bar and inline-end notch (viewport-fit=cover) */
  top: max(var(--margin-lg), var(--safe-area-inset-top, 0px));
  inset-inline-end: max(var(--margin-lg), var(--safe-area-inset-right, 0px));
  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%;
}

/* Safe-area env() values are physical; in RTL the button sits by the left-side notch */
[dir='rtl'] .close-button {
  inset-inline-end: max(var(--margin-lg), var(--safe-area-inset-left, 0px));
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

:where(input[type='radio']):checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%; /* stylelint-disable-line csstools/use-logical -- centring pair with a physical translate(-50%) */
  transform: translate(-50%, -50%);
  width: calc(var(--checkbox-size) / 2);
  height: calc(var(--checkbox-size) / 2);
  background: var(--color-foreground);
  border-radius: var(--style-border-radius-50);
  transition: background 0.2s ease;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  50% {
    transform: scale(1.2);
  }

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

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

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

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

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

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

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

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

@keyframes 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 backdropFilter {
  from {
    backdrop-filter: brightness(1);
  }

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

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

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

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

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

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

slideshow-container[animate-arrows]:hover > slideshow-arrows .slideshow-control,
slideshow-component:focus-within > slideshow-container[animate-arrows] > slideshow-arrows .slideshow-control {
  animation: arrowsSlideIn var(--animation-speed) var(--animation-easing) forwards;
}

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

  to {
    opacity: 1;
  }
}

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

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

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

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

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

.group-block:has(> video-background-component) {
  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);
}

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

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

/* When the header is transparent, and when there is no header-section below it, offset the first main-section with
 * the height of the header
 */
main > .shopify-section:first-child .section:not(.disable-section-top-offset) {
  &.spacing-style,
  .spacing-style {
    --section-top-offset: calc(var(--header-height) * var(--transparent-header-offset-boolean));

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

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

.price-item__group.price {
  color: #1A1A1A !important;
  font-size: 1.25em !important;
  font-weight: 700 !important;
}

.price-item__group.compare-at-price {
  color: #5a5a5aff !important;
  font-size: 1.1em !important;
  font-weight: 600 !important;
  text-decoration: line-through;
}

.calmy-sale-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 12px;
  padding: 5px 9px;
  background: #2B3A21;
  color: #FFFFFF;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* Ligne prix + badge */
.calmy-price-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap;
}

/* Conteneur des deux prix */
.calmy-price-row div[ref="priceContainer"] {
  display: inline-flex !important;
  align-items: baseline !important;
  width: auto !important;
  margin: 0 !important;
  gap: 14px !important;
}

/* Prix actuel */
.calmy-price-row .price-item__group.price {
  color: #a32222ff !important;
  font-size: 1.25em !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

/* Prix barré */
.calmy-price-row .price-item__group.compare-at-price {
  color: #777777 !important;
  font-size: 1.1em !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

/* Badge réduction */
.calmy-sale-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  background: #2B3A21 !important;
  color: #FFFFFF !important;
  padding: 6px 10px !important;
  border-radius: 5px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

/* =========================================
   CALMY — Galerie produit mobile
   ========================================= */

@media screen and (max-width: 749px) {

  /* Image principale avec coins arrondis */
  .product-information__media .product-media,
  .product-information__media .product-media-container {
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  .product-information__media .product-media__image {
    border-radius: 8px !important;
  }

  /* Vignettes plus grandes sur mobile */
  .product-information__media {
    --thumbnail-width: 70px !important;
  }

  .product-information__media .slideshow-controls__thumbnail {
    width: 70px !important;
    height: 70px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }

  .product-information__media .slideshow-controls__thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}


@media screen and (max-width: 749px) {
  media-gallery slideshow-arrows.mobile\:hidden {
    display: flex !important;
  }
}

.announcement-bar__text {
  line-height: 1.5 !important;
}

.product-badges__badge.color-custom-badge-sale {
  display: none !important;
}

product-card product-price .price-item__group.price {
  font-size: 13px !important;
  font-weight: 400 !important;
}

product-card product-price .price-item__group.price bdi {
  font-size: 13px !important;
  font-weight: 400 !important;
}

product-card .rating {
  --star-size: 12px !important;
}

product-card .rating .stars {
  width: 12px !important;
  height: 12px !important;
}

/* ========================================
   PRIX PAGE PRODUIT
   ======================================== */

.product-info__block-item[data-block-type="price"] .product-price-row {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  flex-wrap: wrap;
}

/* Conteneur contenant prix + ancien prix */
.product-info__block-item[data-block-type="price"] .product-price-row > div[ref="priceContainer"] {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  margin: 0 !important;
}

/* Prix actuel */
.product-info__block-item[data-block-type="price"] .product-price-row .price {
  order: 1 !important;
  color: #c51f17 !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

/* Prix barré */
.product-info__block-item[data-block-type="price"] .product-price-row .compare-at-price {
  order: 2 !important;
  color: #707070 !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

/* Badge -50% */
.product-info__block-item[data-block-type="price"] .product-price__discount {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 16px !important;
  background: #2F2A27 !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* ========================================
   ÉTOILES PRODUCT CARDS
   ======================================== */

product-card .rating {
  --star-size: 12px !important;
}

product-card .rating .stars {
  width: 11px !important;
  height: 11px !important;
}

/* Nombre d'avis */
product-card .rating-count {
  font-size: 11px !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

/* ========================================
   PRIX PRODUCT CARDS
   ======================================== */

product-card product-price .price-item__group.price,
product-card product-price .price-item__group.price bdi {
  font-size: 11px !important;
  font-weight: 400 !important;
}

/* Espace entre le titre du produit et "À partir de..." */
product-card product-price {
  margin-top: 3px !important;
}

/* ========================================
   ZOOM PROGRESSIF SUR LA 2e IMAGE
   ======================================== */

@media (hover: hover) and (pointer: fine) {

  product-card .card-gallery slideshow-slide:nth-child(2) .product-media__image {
    transition: transform 0.9s ease !important;
    will-change: transform;
  }

  product-card .card-gallery:hover slideshow-slide:nth-child(2) .product-media__image {
    transform: scale(1.06) !important;
  }

}

/* ========================================
   ESPACE TITRE VARIANTE → SELECT
   ======================================== */

variant-picker .variant-option > label {
  display: block !important;
  margin-bottom: 10px !important;
}

/* Espace entre les deux groupes de variantes */
variant-picker .variant-option + .variant-option {
  margin-top: 18px !important;
}

@media (min-width: 750px) {
  product-card .text-block--align-center p[role="heading"] {
    font-size: 15px !important;
    font-weight: 600 !important;
  }
}

@media (max-width: 749px) {
  product-card .text-block--align-center p[role="heading"] {
    font-size: 13px !important;
    font-weight: 600 !important;
  }
}

/* Petit espace entre l'image et le titre */
product-card .text-block--align-center p[role="heading"] {
  margin-top: 4px !important;
}

.rating-count {
  margin: 0 !important;
  font-weight: 400 !important;
}

.rating-count-visible {
  display: inline-block;
}

.rating-count .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

product-card .rating-count {
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  margin: 0 !important;
}

product-card .rating-count-visible {
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

product-card .rating-count {
  display: inline-flex !important;
  align-items: center !important;
}

product-card .rating-wrapper {
  margin-top: 4px !important;
}

/* ========================================
   ESPACE HEADER → PRODUIT
   DESKTOP UNIQUEMENT
   ======================================== */

@media (min-width: 750px) {
  .product-information[data-testid="product-information"] {
    --padding-block-start: 30px !important;
  }
}

variant-picker .variant-option label::after {
  content: ":" !important;
  margin-left: 3px !important;
}

/* =========================================================
   BOUTON AJOUTER AU PANIER
   ========================================================= */

/* Masquer l'icône panier */
product-form-component .add-to-cart-icon {
  display: none !important;
}

/* Hauteur + typographie du bouton */
product-form-component .add-to-cart-button {
  min-height: 58px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}

/* Ligne texte + prix */
product-form-component .tfg-add-to-cart-content {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100%;
}

/* Prix dans le bouton */
product-form-component .tfg-add-to-cart-price {
  font-weight: 500 !important;
  white-space: nowrap !important;
}

/* Séparateur vertical */
product-form-component .tfg-add-to-cart-separator {
  opacity: 0.65;
  font-weight: 400;
}

/* =========================================================
   ESPACE QUANTITÉ → AJOUTER AU PANIER
   MOBILE
   ========================================================= */

@media (max-width: 749px) {

  .product-form-buttons--stacked .quantity-selector-wrapper + span {
    margin-top: 14px !important;
  }

}

/* Espace quantité → Ajouter au panier : MOBILE UNIQUEMENT */
@media (max-width: 749px) {
  .product-form-buttons--stacked .quantity-selector-wrapper + span {
    margin-top: 14px !important;
  }
}

[ref="priceContainer"]:not(product-card [ref="priceContainer"]) {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

[ref="priceContainer"]:not(product-card [ref="priceContainer"]) .price-item__group.price bdi {
  color: #b91c1c;
  font-weight: 700;
  font-size: 1.1rem;
}

[ref="priceContainer"]:not(product-card [ref="priceContainer"]) .price-item__group.compare-at-price bdi {
  color: #8c8c8c;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: line-through;
}

[ref="priceContainer"]:not(product-card [ref="priceContainer"])::after {
  content: "-50%";
  background-color: #1a1a1a;
  color: #ffffff;
  font-weight: 700;
  font-size: 1.1em;
  padding: 5px 14px;
  border-radius: 6px;
  white-space: nowrap;
  line-height: 1.4;
}
.frame-swatch-label-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.frame-swatch-selected-value {
  font-weight: 500;
  text-transform: uppercase;
}

.frame-swatch-list {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.frame-swatch-btn {
  width: 75px;
  height: 55px;
  border-radius: 10px;
  border: 1px solid #e5e5e5;
  background-color: #fafafa;
  background-image: var(--swatch-img);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  padding: 0px;
  box-sizing: border-box;
}

.frame-swatch-btn.is-selected {
  border: 2px solid #1a1a1a;
}

@media screen and (max-width: 749px) {

  /* MARLOW ART — grandes vignettes galerie mobile */


  slideshow-controls[thumbnails]
  .slideshow-controls__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px !important;
  }
}

@media screen and (min-width: 750px) {
  .media-gallery--grid
  .product-media-container:first-child {
    border-radius: 5px !important;
    overflow: hidden;
  }

  .media-gallery--grid
  .product-media-container:first-child img {
    border-radius: 5px !important;
  }
}

@media screen and (max-width: 749px) {
  .menu-drawer__menu-item--mainlist {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
}

@media screen and (max-width: 749px) {

  /* Réduit la hauteur de chaque rubrique principale */
  .menu-drawer__menu > .menu-drawer__list-item {
    min-height: auto !important;
  }

  .menu-drawer__menu-item--mainlist {
    min-height: 46px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Réduit aussi l'espace autour des sous-rubriques */
  .menu-drawer__menu--childlist .menu-drawer__menu-item {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  /* Petit espace entre les grands groupes */
  .menu-drawer__menu > .menu-drawer__list-item {
    margin-bottom: 2px !important;
  }
}

/* =========================================================
   MARLOW ART — GALERIE MOBILE
   IMAGE PRINCIPALE + VIGNETTES
   ========================================================= */

@media screen and (max-width: 749px) {

  /* =======================================================
     IMAGE PRINCIPALE
     ======================================================= */

  /* 10px de chaque côté */
  media-gallery > slideshow-component {
    padding-inline: 10px !important;
  }

  /* Coins arrondis + suppression du décalage */
  media-gallery > slideshow-component .product-media-container {
    margin: 0 !important;
    width: 100% !important;
    border-radius: 5px !important;
    overflow: hidden !important;
  }

  media-gallery > slideshow-component .product-media-container img {
    border-radius: 5px !important;
  }


  /* =======================================================
     CONTENEUR DES VIGNETTES
     ======================================================= */

  media-gallery .media-gallery__mobile-controls {
    padding-inline: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }



@media screen and (min-width: 750px) {
  .product-media-container:first-child,
  .product-media-container:first-child::before,
  .product-media-container:first-child img {
    border-radius: 5px !important;
    overflow: hidden !important;
  }
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  margin-top: 13px;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
}


.breadcrumb--desktop { display: none; }

@media screen and (min-width: 750px) {
  .breadcrumb--mobile { display: none; }
  .breadcrumb--desktop {
    display: flex;
    font-size: 13px;
    margin-top: 18px;
    margin-bottom: -13px;
  }
}

/* =========================================================
   GRILLE DES DIMENSIONS
   ========================================================= */

.dimension-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10px;
  row-gap: 20px;
  width: 100%;
  margin-top: 8px;
}


/* =========================================================
   DESKTOP — 3 COLONNES
   ========================================================= */

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


/* =========================================================
   BOUTONS DES DIMENSIONS
   ========================================================= */

.dimension-grid__label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 6px;
  border: 1px solid #ddd;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
}

.dimension-grid__label input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}


/* Variante sélectionnée */

.dimension-grid__label:has(input:checked) {
  border: 2px solid #1a1a1a;
}


/* Survol */

.dimension-grid__label:hover {
  border-color: #999;
}


/* Texte */

.dimension-grid__text {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}


/* =========================================================
   BADGE BEST-SELLER
   ========================================================= */

.dimension-grid__badge {
  position: absolute;
  top: -16px !important;
  left: 50%;
  transform: translateX(-50%);

  background: #1a1a1a;
  color: #fff;

  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.03em;

  padding: 3px 8px;

  border-radius: 4px !important;

  white-space: nowrap;
  line-height: 1.15;

  z-index: 5;
}


/* =========================================================
   SUPPRESSION DES PSEUDO-ÉLÉMENTS HORIZON
   ========================================================= */

.dimension-grid__label::before,
.dimension-grid__label::after {
  content: none !important;
  display: none !important;
}


/* =========================================================
   MOBILE — 3 COLONNES / 2 LIGNES
   ========================================================= */

@media screen and (max-width: 749px) {

  .dimension-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 20px !important;
  }

  .dimension-grid__label {
    padding: 6px 4px !important;
    min-height: 0 !important;
    height: 45px !important;
    border-radius: 8px !important;
  }

  .dimension-grid__text {
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    white-space: nowrap;
  }

}

.dimension-grid__badge {
  position: absolute;
  top: -14px !important;
  left: 50%;
  transform: translateX(-50%);

  background: #1a1a1a;
  color: #fff;

  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.03em;

  padding: 3px 8px;

  border-radius: 4px !important;

  white-space: nowrap;
  line-height: 1.15;

  z-index: 5;
}

/* =========================================================
   TITRES DES VARIANTES — ALIGNEMENT IDENTIQUE
   ========================================================= */

/* =========================
   VARIANTE 1 — DIMENSIONS
   ========================= */

variant-picker .variant-option--dimension-grid > legend.dimension-grid__legend {
  display: flex !important;
  align-items: baseline !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

.dimension-grid__title {
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dimension-grid__colon {
  font-weight: 600 !important;
  margin-left: 6px !important;
  margin-right: 6px !important;
  padding: 0 !important;
}

.dimension-grid__selected-value {
  font-weight: 500 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================
   VARIANTE 2 — CADRE
   ========================= */

.frame-swatch-label-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 0 !important;
}

.frame-swatch-label-row > label {
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.frame-swatch-selected-value {
  font-weight: 500 !important;
  text-transform: uppercase;
  margin-left: 6px !important;
  margin-right: 0 !important;
  padding: 0 !important;
}


/* =========================
   ESPACEMENT ENTRE LES
   DEUX VARIANTES
   ========================= */

variant-picker .variant-option + .variant-option {
  margin-top: 18px !important;
}

/* Taille des textes de la barre d'annonce */
#shopify-section-sections--30685790699867__header_announcements_9jGBFp
.announcement-bar__text {
  font-size: 10px !important;
}

/* =========================================================
   MARLOW ART — VIGNETTES GALERIE MOBILE
   ========================================================= */

@media screen and (max-width: 749px) {

  /* Même retrait que l'image principale */
  media-gallery .media-gallery__mobile-controls {
    padding-inline: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

    /* On neutralise le décalage restant */

    /* On récupère la largeur perdue */
    width: calc(100% + 10px) !important;
  }

  /* Vignettes */
  media-gallery slideshow-controls[thumbnails]
  .slideshow-controls__thumbnail {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    height: 80px !important;

    aspect-ratio: 1 / 1 !important;
    flex: 0 0 80px !important;

    border-radius: 6px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Image des vignettes */
  media-gallery slideshow-controls[thumbnails]
  .slideshow-controls__thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 6px !important;
  }
}

@media screen and (max-width: 749px) {
  media-gallery .media-gallery__mobile-controls
  .slideshow-controls__thumbnails-container {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    filter: none !important;
  }

  media-gallery .media-gallery__mobile-controls
  .slideshow-controls__thumbnails-container::before,
  media-gallery .media-gallery__mobile-controls
  .slideshow-controls__thumbnails-container::after,
  media-gallery .media-gallery__mobile-controls
  .slideshow-controls__thumbnails::before,
  media-gallery .media-gallery__mobile-controls
  .slideshow-controls__thumbnails::after {
    display: none !important;
    content: none !important;
    background: none !important;
    opacity: 0 !important;
  }
}

@media screen and (max-width: 749px) {

  /* Même retrait que l'image principale, des deux côtés */
  media-gallery .media-gallery__mobile-controls {
    padding-inline: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Vignettes individuelles */
  media-gallery slideshow-controls[thumbnails] .slideshow-controls__thumbnail {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    height: 80px !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 80px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  media-gallery slideshow-controls[thumbnails] .slideshow-controls__thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 6px !important;
  }

  /* Conteneur défilant : zéro padding, le fondu est neutralisé ici */
  media-gallery .media-gallery__mobile-controls .slideshow-controls__thumbnails-container {
    overflow-x: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    scroll-padding-left: 10px !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    filter: none !important;
  }

  media-gallery .media-gallery__mobile-controls .slideshow-controls__thumbnails-container::before,
  media-gallery .media-gallery__mobile-controls .slideshow-controls__thumbnails-container::after,
  media-gallery .media-gallery__mobile-controls .slideshow-controls__thumbnails::before,
  media-gallery .media-gallery__mobile-controls .slideshow-controls__thumbnails::after {
    display: none !important;
    content: none !important;
    background: none !important;
    opacity: 0 !important;
  }

  /* Liste interne : c'est elle qui porte l'inset gauche/droite */
  media-gallery .media-gallery__mobile-controls .slideshow-controls__thumbnails {
    gap: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin: 0 !important;
    transform: none !important;
  }

}

.variant-picker__form > fieldset.variant-option--dimension-grid + .variant-option--dropdowns {
  margin-top: 28px !important;
}

.frame-swatch-list {
  margin-top: 14px !important;
}

.accordion--AVHRydG40ZWljSExic__accordion_iyA9HC .details__header {
  font-weight: 650 !important;
}

@media screen and (max-width: 749px) {
  .accordion--ASHU0RkN1MmpLbStTN__accordion_bMwWG8 .details__header {
    font-size: 13px !important;
  }
}

@media screen and (min-width: 750px) {
  .section-resource-list__content h3 {
    font-size: 28px !important;
  }
}

@media screen and (max-width: 749px) {
  .section-resource-list__content h3 {
    font-size: 22px !important;
  }
}

@media screen and (min-width: 750px) {
  #shopify-section-template--30685790536027__custom_liquid_8cx9Fi .breadcrumb--mobile {
    display: none !important;
  }

  #shopify-section-template--30685790536027__custom_liquid_8cx9Fi .breadcrumb--desktop {
    display: flex !important;
    font-weight: 600 !important;
  }
}

  /* =======================================================
     LISTE DES VIGNETTES
     ======================================================= */

    /*
      Supprime le décalage supplémentaire à gauche
      pour aligner la première vignette sur l'image.
    */

    /*
      Compense le déplacement de 10px
      pour conserver la largeur disponible.
    */
    width: calc(100% + 10px) !important;
  }


  /* =======================================================
     VIGNETTES
     ======================================================= */

  media-gallery slideshow-controls[thumbnails]
  .slideshow-controls__thumbnail {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;

    height: 80px !important;

    aspect-ratio: 1 / 1 !important;
    flex: 0 0 80px !important;

    border-radius: 6px !important;
    overflow: hidden !important;

    box-sizing: border-box !important;
  }


  /* =======================================================
     IMAGES DANS LES VIGNETTES
     ======================================================= */

  media-gallery slideshow-controls[thumbnails]
  .slideshow-controls__thumbnail img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    border-radius: 6px !important;
  }

}

@media screen and (min-width: 750px) {
  .product-media-container:first-child,
  .product-media-container:first-child::before,
  .product-media-container:first-child img {
    border-radius: 5px !important;
    overflow: hidden !important;
  }
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  margin-top: 13px;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
}


.breadcrumb--desktop { display: none; }

@media screen and (min-width: 750px) {
  .breadcrumb--mobile { display: none; }
  .breadcrumb--desktop {
    display: flex;
    font-size: 13px;
    margin-top: 18px;
    margin-bottom: -13px;
  }
}

/* =========================================================
   GRILLE DES DIMENSIONS
   ========================================================= */

.dimension-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10px;
  row-gap: 20px;
  width: 100%;
  margin-top: 8px;
}


/* =========================================================
   DESKTOP — 3 COLONNES
   ========================================================= */

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


/* =========================================================
   BOUTONS DES DIMENSIONS
   ========================================================= */

.dimension-grid__label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 6px;
  border: 1px solid #ddd;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
}

.dimension-grid__label input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}


/* Variante sélectionnée */

.dimension-grid__label:has(input:checked) {
  border: 2px solid #1a1a1a;
}


/* Survol */

.dimension-grid__label:hover {
  border-color: #999;
}


/* Texte */

.dimension-grid__text {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}


/* =========================================================
   BADGE BEST-SELLER
   ========================================================= */

.dimension-grid__badge {
  position: absolute;
  top: -16px !important;
  left: 50%;
  transform: translateX(-50%);

  background: #1a1a1a;
  color: #fff;

  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.03em;

  padding: 3px 8px;

  border-radius: 4px !important;

  white-space: nowrap;
  line-height: 1.15;

  z-index: 5;
}


/* =========================================================
   SUPPRESSION DES PSEUDO-ÉLÉMENTS HORIZON
   ========================================================= */

.dimension-grid__label::before,
.dimension-grid__label::after {
  content: none !important;
  display: none !important;
}


/* =========================================================
   MOBILE — 3 COLONNES / 2 LIGNES
   ========================================================= */

@media screen and (max-width: 749px) {

  .dimension-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 20px !important;
  }

  .dimension-grid__label {
    padding: 6px 4px !important;
    min-height: 0 !important;
    height: 45px !important;
    border-radius: 8px !important;
  }

  .dimension-grid__text {
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    white-space: nowrap;
  }

}

.dimension-grid__badge {
  position: absolute;
  top: -14px !important;
  left: 50%;
  transform: translateX(-50%);

  background: #1a1a1a;
  color: #fff;

  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.03em;

  padding: 3px 8px;

  border-radius: 4px !important;

  white-space: nowrap;
  line-height: 1.15;

  z-index: 5;
}

/* =========================================================
   TITRES DES VARIANTES — ALIGNEMENT IDENTIQUE
   ========================================================= */

/* =========================
   VARIANTE 1 — DIMENSIONS
   ========================= */

variant-picker .variant-option--dimension-grid > legend.dimension-grid__legend {
  display: flex !important;
  align-items: baseline !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

.dimension-grid__title {
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dimension-grid__colon {
  font-weight: 600 !important;
  margin-left: 6px !important;
  margin-right: 6px !important;
  padding: 0 !important;
}

.dimension-grid__selected-value {
  font-weight: 500 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* =========================
   VARIANTE 2 — CADRE
   ========================= */

.frame-swatch-label-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 0 !important;
}

.frame-swatch-label-row > label {
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.frame-swatch-selected-value {
  font-weight: 500 !important;
  text-transform: uppercase;
  margin-left: 6px !important;
  margin-right: 0 !important;
  padding: 0 !important;
}


/* =========================
   ESPACEMENT ENTRE LES
   DEUX VARIANTES
   ========================= */

variant-picker .variant-option + .variant-option {
  margin-top: 18px !important;
}

/* Taille des textes de la barre d'annonce */
#shopify-section-sections--30685790699867__header_announcements_9jGBFp
.announcement-bar__text {
  font-size: 10px !important;
}

/* =========================================================
   MARLOW ART — VIGNETTES GALERIE MOBILE
   ========================================================= */

@media screen and (max-width: 749px) {

  /* Même retrait que l'image principale */
  media-gallery .media-gallery__mobile-controls {
    padding-inline: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

    /* On neutralise le décalage restant */

    /* On récupère la largeur perdue */
    width: calc(100% + 10px) !important;
  }

  /* Vignettes */
  media-gallery slideshow-controls[thumbnails]
  .slideshow-controls__thumbnail {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    height: 80px !important;

    aspect-ratio: 1 / 1 !important;
    flex: 0 0 80px !important;

    border-radius: 6px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Image des vignettes */
  media-gallery slideshow-controls[thumbnails]
  .slideshow-controls__thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 6px !important;
  }
}

/* Liste des vignettes mobile */
@media screen and (max-width: 749px) {

  media-gallery .media-gallery__mobile-controls
  .slideshow-controls__thumbnails-container {
    padding-left: 10px !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
  }

  media-gallery .media-gallery__mobile-controls
  .slideshow-controls__thumbnails {
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

}

/* Correction définitive : première vignette entièrement visible */
@media screen and (max-width: 749px) {

  media-gallery .media-gallery__mobile-controls
  .slideshow-controls__thumbnails-container {
    overflow-x: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    scroll-padding-left: 12px !important;
  }

  media-gallery .media-gallery__mobile-controls
  .slideshow-controls__thumbnails {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

}

@media screen and (max-width: 749px) {
  media-gallery .media-gallery__mobile-controls
  .slideshow-controls__thumbnails-container {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    filter: none !important;
  }

  media-gallery .media-gallery__mobile-controls
  .slideshow-controls__thumbnails-container::before,
  media-gallery .media-gallery__mobile-controls
  .slideshow-controls__thumbnails-container::after,
  media-gallery .media-gallery__mobile-controls
  .slideshow-controls__thumbnails::before,
  media-gallery .media-gallery__mobile-controls
  .slideshow-controls__thumbnails::after {
    display: none !important;
    content: none !important;
    background: none !important;
    opacity: 0 !important;
  }
}

@media screen and (max-width: 749px) {

  variant-picker .variant-option--dimension-grid > legend.dimension-grid__legend {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    width: 100% !important;
  }

  variant-picker .variant-option--dimension-grid
  .dimension-grid__title {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    min-width: max-content !important;
  }

  variant-picker .variant-option--dimension-grid
  .dimension-grid__colon {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  variant-picker .variant-option--dimension-grid
  .dimension-grid__selected-value {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    min-width: max-content !important;
  }

}

@media screen and (min-width: 750px) {
  .header-menu .menu-list__link-title {
    font-weight: 600 !important;
  }
}

@media screen and (min-width: 750px) {
  .footer-content > .group-block:nth-child(3),
  .footer-content > .group-block:nth-child(4) {
    position: relative;
    top: -10.5px !important;
  }
}

/* =========================================================
   MARLOW ART — CORRECTION PREMIÈRE VIGNETTE MOBILE
   ========================================================= */

/* =========================================================
   MARLOW ART — PREMIÈRE VIGNETTE NON ROGNÉE
   ========================================================= */

media-gallery slideshow-controls[thumbnails]
.slideshow-controls__thumbnail:first-child img,
media-gallery slideshow-controls[thumbnails]
.slideshow-controls__thumbnail:first-child picture,
media-gallery slideshow-controls[thumbnails]
.slideshow-controls__thumbnail:first-child picture img {
  object-fit: contain !important;
  object-position: center center !important;
}

/* =========================================================
   MARLOW ART — FIX DÉFINITIF PREMIÈRE VIGNETTE
   ========================================================= */

media-gallery slideshow-controls[thumbnails]
.slideshow-controls__thumbnail:first-child {
  overflow: hidden !important;
}

media-gallery slideshow-controls[thumbnails]
.slideshow-controls__thumbnail:first-child img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

media-gallery slideshow-controls[thumbnails]
.slideshow-controls__thumbnail:first-child img {
  object-fit: contain !important;
  object-position: center center !important;
}

/* =========================================================
   SUPPRESSION DU CADRE AUTOUR DE LA VARIANTE DIMENSIONS
   ========================================================= */

variant-picker fieldset.variant-option--dimension-grid {
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;

  outline: none !important;
  box-shadow: none !important;

  margin: 0 !important;
  padding: 0 !important;

  min-inline-size: 0 !important;
  min-width: 0 !important;
}

variant-picker fieldset.variant-option--dimension-grid > legend {
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   SUPPRESSION DU CADRE AUTOUR DE LA VARIANTE DIMENSIONS
   ========================================================= */

variant-picker fieldset.variant-option--dimension-grid {
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;

  outline: none !important;
  box-shadow: none !important;

  margin: 0 !important;
  padding: 0 !important;

  min-inline-size: 0 !important;
  min-width: 0 !important;
}

variant-picker fieldset.variant-option--dimension-grid > legend {
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   SUPPRESSION DU CADRE AUTOUR DE LA VARIANTE DIMENSIONS
   ========================================================= */

variant-picker fieldset.variant-option--dimension-grid {
  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;

  outline: none !important;
  box-shadow: none !important;

  margin: 0 !important;
  padding: 0 !important;

  min-inline-size: 0 !important;
  min-width: 0 !important;
}

variant-picker fieldset.variant-option--dimension-grid > legend {
  margin: 0 !important;
  padding: 0 !important;
}

/* Réduit l'espace au-dessus de la première variante */
variant-picker.variant-picker--left {
  margin-top: -8px !important;
}

@media screen and (min-width: 750px) {
  .text-block--ALzBaUDE0ZHJ6UHVSb__product_list_text_YFtzcL h2 {
    font-size: 34px !important;
  }
}

@media screen and (min-width: 750px) {
  .text-block--AckJGbVpWSUZGTDVpM__product_list_text_GYHxzD h2 {
    font-size: 34px !important;
  }
}

/* =========================================================
   RÉDUCTION DE LA HAUTEUR DE TOUS LES BOUTONS
   SAUF LE BOUTON AJOUTER AU PANIER
   ========================================================= */

.button:not(.add-to-cart-button):not(.button-unstyled):not(.slideshow-controls__thumbnail) {
  min-height: 42px !important;
  height: 42px !important;
  padding-block: 8px !important;
}

@media screen and (max-width: 749px) {
  .details__header {
    font-size: 13px !important;
  }
}

@media screen and (min-width: 750px) {
  [class*="collection_title_"] p {
    font-size: 30px !important;
    font-weight: 650 !important;
  }
}

/* =========================================================
   PAGES COLLECTIONS — 4 COLONNES SUR ORDINATEUR
   ========================================================= */

@media screen and (min-width: 750px) {
  .main-collection-grid .product-grid.product-grid--grid {
    --product-grid-columns-desktop: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media screen and (min-width: 750px) {
  .text-block--AaGVNMnY1eVIyRFVMb__text_C6Pwwk h3 {
    font-size: 34px !important;
    font-weight: 600 !important;
  }
}

/* ===== TITRE FAQ ===== */

/* Ordinateur */
@media screen and (min-width: 750px) {
  #shopify-section-template--30685790568795__ss_simple_faq_4HmYPN .rb-faq-shopify-section > h1 {
    font-size: 34px !important;
  }
}

/* Mobile */
@media screen and (max-width: 749px) {
  #shopify-section-template--30685790568795__ss_simple_faq_4HmYPN .rb-faq-shopify-section > h1 {
    font-size: 23.5px !important;
  }
}

/* =========================================
   TITRE QUESTIONS FRÉQUENTES
   ========================================= */

/* ORDINATEUR */
@media screen and (min-width: 750px) {
  .rb-faq-shopify-section > h1 {
    font-size: 34px !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
  }
}

/* MOBILE */
@media screen and (max-width: 749px) {
  .rb-faq-shopify-section > h1 {
    font-size: 23.5px !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
  }
}

/* =========================================
   SECTION PROFESSIONNELS
   BLOC CENTRÉ AVEC BORDS BLANCS
   ========================================= */

/* Ordinateur */
@media screen and (min-width: 750px) {

  #shopify-section-template--30685790568795__section_hDJakA {
    padding-left: 70px !important;
    padding-right: 70px !important;
  }

  /* On retire le fond pleine largeur du thème */
  #shopify-section-template--30685790568795__section_hDJakA > .section-background {
    display: none !important;
  }

  /* Le bloc brun */
  #shopify-section-template--30685790568795__section_hDJakA > .section {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background-color: #2F2A27 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }

}

/* Mobile */
@media screen and (max-width: 749px) {

  #shopify-section-template--30685790568795__section_hDJakA {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  #shopify-section-template--30685790568795__section_hDJakA > .section-background {
    display: none !important;
  }

  #shopify-section-template--30685790568795__section_hDJakA > .section {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background-color: #2F2A27 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }

}

/* Réduire la hauteur du bouton "Devenir revendeur" */
#shopify-section-template--30685790568795__section_hDJakA a.button-secondary {
  min-height: 42px !important;
  height: 42px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* =========================================
   SECTION "NOTRE HISTOIRE"
   BORDS BLANCS À GAUCHE ET À DROITE
   ========================================= */

/* Ordinateur */
@media screen and (min-width: 750px) {

  #shopify-section-template--30685790568795__section_ebQeh9 {
    padding-left: 70px !important;
    padding-right: 70px !important;
    box-sizing: border-box !important;
  }

  #shopify-section-template--30685790568795__section_ebQeh9 > .section-background {
    display: none !important;
  }

  #shopify-section-template--30685790568795__section_ebQeh9 > .section {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    background-color: #2F2A27 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }

}

/* Mobile */
@media screen and (max-width: 749px) {

  #shopify-section-template--30685790568795__section_ebQeh9 {
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }

  #shopify-section-template--30685790568795__section_ebQeh9 > .section-background {
    display: none !important;
  }

  #shopify-section-template--30685790568795__section_ebQeh9 > .section {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    background-color: #2F2A27 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }

}

/* Réduire le bouton "LIRE PLUS" — Notre histoire */
#shopify-section-template--30685790568795__section_ebQeh9 a.button-secondary {
  min-height: 42px !important;
  height: 42px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

@media screen and (max-width: 749px) {
  #shopify-section-template--30685790568795__section_ebQeh9
  .section-content-wrapper {
    padding-bottom: 18px !important;
  }
}

/* =========================================
   NOTRE HISTOIRE — RÉDUIRE LA HAUTEUR DESKTOP
   ========================================= */

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

  #shopify-section-template--30685790568795__section_ebQeh9
  .custom-section-content {
    height: 450px !important;
    min-height: 450px !important;
  }

  #shopify-section-template--30685790568795__section_ebQeh9
  .section-content-wrapper {
    height: 450px !important;
    min-height: 450px !important;
    padding: 0 !important;
  }

  #shopify-section-template--30685790568795__section_ebQeh9
  .image-block--AWllJMS81QUR0RFhxS__image_eNf4mR,
  #shopify-section-template--30685790568795__section_ebQeh9
  .image-block--AWllJMS81QUR0RFhxS__image_eNf4mR .image-block__image {
    height: 500px !important;
  }

}

/* Faire remonter le groupe texte — Notre histoire */
@media screen and (min-width: 750px) {
  #shopify-section-template--30685790568795__section_ebQeh9
  .group-block-content {
    transform: translateY(-25px) !important;
  }
}

/* Arrondir les 4 coins des 2 cards */
.ai-gallery-arlzsrzz3b2l3sjvmcaigenblock3cb6671paetlq .ai-gallery__card {
  border-radius: 6px !important;
  overflow: hidden !important;
}

/* =========================================
   DÉCOUVREZ NOS UNIVERS — DESKTOP
   ========================================= */

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

  /* Marges blanches à gauche et à droite */
  #shopify-section-template--30685790568795__1791316271a8b3a01a > .section {
    width: calc(100% - 100px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Hauteur exacte de la composition */
  #shopify-section-template--30685790568795__1791316271a8b3a01a
  .ai-gallery-aogx1cwowdll2wgrhyaigenblock4c49e93pa8hmm__grid {
    height: 700px !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* Grande image gauche */
  #shopify-section-template--30685790568795__1791316271a8b3a01a
  .ai-gallery-aogx1cwowdll2wgrhyaigenblock4c49e93pa8hmm__card--1 {
    height: 100% !important;
  }

  /* Images droite : partage parfaitement la hauteur */
  #shopify-section-template--30685790568795__1791316271a8b3a01a
  .ai-gallery-aogx1cwowdll2wgrhyaigenblock4c49e93pa8hmm__card--2,
  #shopify-section-template--30685790568795__1791316271a8b3a01a
  .ai-gallery-aogx1cwowdll2wgrhyaigenblock4c49e93pa8hmm__card--3 {
    height: 100% !important;
  }

  /* Texte plus à gauche et plus bas */
  #shopify-section-template--30685790568795__1791316271a8b3a01a
  .ai-gallery-aogx1cwowdll2wgrhyaigenblock4c49e93pa8hmm__content {
    padding-left: 28px !important;
    padding-right: 28px !important;
    padding-bottom: 32px !important;
    padding-top: 18px !important;
  }

}

@media screen and (min-width: 750px) {
  #shopify-section-template--30685790536027__section_QHBdEa .section-content-wrapper {
    padding-top: 50px !important;
  }
}

@media screen and (min-width: 750px) {
  #shopify-section-template--30685790536027__section_QHBdEa .text-block h2 {
    font-size: 34px !important;
    line-height: 1.2 !important;
  }
}

/* =========================================
   SECTION "VU DANS" — TITRE
   ========================================= */

/* ORDINATEUR */
@media screen and (min-width: 750px) {
  #shopify-section-template--30685790536027__179132457608446651
  .ai-press-aee9jbkxbduk3axdlaaigenblock0c692c7vjjc9n__heading {
    font-size: 34px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    color: #000000 !important;
  }

    /* Plus d'espace entre les logos */
  #shopify-section-template--30685790536027__179132457608446651
  .ai-press-aee9jbkxbduk3axdlaaigenblock0c692c7vjjc9n__logos {
    gap: 170px !important;
  }
}

/* MOBILE */
@media screen and (max-width: 749px) {
  #shopify-section-template--30685790536027__179132457608446651
  .ai-press-aee9jbkxbduk3axdlaaigenblock0c692c7vjjc9n__heading {
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    color: #000000 !important;
  }
}

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

  /* Titre plus grand et plus épais */
  #shopify-section-template--30685790536027__179132457608446651
  .ai-press-aee9jbkxbduk3axdlaaigenblock0c692c7vjjc9n__heading {
    font-size: 30px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    color: #000000 !important;
  }
}

  /* Plus d'espace sous la section "Vu dans" sur mobile */
@media screen and (max-width: 749px) {
  #shopify-section-template--30685790536027__179132457608446651
  .ai-press-aee9jbkxbduk3axdlaaigenblock0c692c7vjjc9n {
    padding-bottom: 30px !important;
  }
  }

  @media screen and (max-width: 749px) {
  .text-block--AL2Q2ZmV2d2VIZUR6Q__text_gYdqGj h2 {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }
}
  
 /* ================================
   MARLOW ART CHEZ VOUS 🤎
   ================================ */

/* ORDINATEUR */
@media screen and (min-width: 750px) {
  .text-block--AL2Q2ZmV2d2VIZUR6Q__text_gYdqGj h2 {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
} 

@media screen and (min-width: 750px) {
  .text-block--AZWQ4QTdYNW80ZGx3M__text_cbcgyb h3 {
    font-size: 34px !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 749px) {
  media-gallery .slideshow-controls__thumbnails-container {
    padding: 4px;                       /* laisse la place au contour de sélection */
    scroll-padding-inline: 4px;
    -webkit-mask-image: none !important; /* supprime le fondu à droite */
    mask-image: none !important;
  }

  media-gallery .slideshow-controls__thumbnails {
    gap: 8px;
    width: max-content;
  }

@media screen and (max-width: 749px) {
  media-gallery .media-gallery__mobile-controls
  .slideshow-controls__thumbnails-container
  .slideshow-controls__thumbnails {
    padding: 8px 14px 8px !important;  /* haut | côtés | bas */
    gap: 8px !important;
    margin: 0 !important;
  }
}

  media-gallery .slideshow-controls__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media screen and (max-width: 749px) {
  media-gallery slideshow-controls[thumbnails]
  .slideshow-controls__thumbnail[aria-selected="true"] {
    outline: 2px solid #000 !important;
    outline-offset: -2px !important;
  }
}

@media screen and (max-width: 749px) {
  media-gallery slideshow-controls[thumbnails] button.slideshow-controls__thumbnail {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    height: 84px !important;
    flex: 0 0 84px !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* Titre "Vu dans" légèrement plus épais */
.ai-press-abtzhcg5aveplswhimaigenblock0c692c7bvykpa__heading {
  font-weight: 600 !important;
}

@media screen and (min-width: 750px) {
  #shopify-section-template--30685790536027__custom_liquid_fQNAKC {
    padding-top: 30px !important;
  }
}

@media screen and (max-width: 749px) {
  #shopify-section-template--30685790536027__179132457608446651 {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  #shopify-section-template--30685790536027__179132457608446651 .ai-press-aee9jbkxbduk3axdlaaigenblock0c692c7vjjc9n {
    padding-bottom: 0 !important;
  }
}

/* Desktop : texte à gauche, image à droite */
@media screen and (min-width: 750px) {
  #shopify-section-template--30685790536027__section_VhDBVP [data-testid="section-content"] > .image-block {
    order: 2;
  }

  #shopify-section-template--30685790536027__section_VhDBVP [data-testid="section-content"] > .group-block {
    order: 1;
  }
}

/* Mobile : image d'abord, texte ensuite */
@media screen and (max-width: 749px) {
  #shopify-section-template--30685790536027__section_VhDBVP [data-testid="section-content"] > .image-block {
    order: 1;
  }

  #shopify-section-template--30685790536027__section_VhDBVP [data-testid="section-content"] > .group-block {
    order: 2;
  }
}

/* Titres des options de variantes */
variant-picker .variant-option > label {
  font-weight: 600 !important;
}

/* Valeurs sélectionnées dans les menus déroulants */
variant-picker .variant-option__select {
  font-weight: 600 !important;
}

/* Valeurs à l'intérieur des menus déroulants */
variant-picker .variant-option__select option {
  font-weight: 600 !important;
}

variant-picker .frame-swatch-btn {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  cursor: pointer;
  box-sizing: border-box;
}

variant-picker .frame-swatch-btn input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

/* Cadre sélectionné */
variant-picker .frame-swatch-btn:has(input:checked) {
  border: 2px solid #1a1a1a;
}

/* Supprime le ":" que ta règle ajoute après chaque label */
variant-picker .variant-option .frame-swatch-btn::before,
variant-picker .variant-option .frame-swatch-btn::after {
  content: none !important;
  display: none !important;
}

/* Espace entre la grille des tailles et les cadres */
variant-picker .variant-option--dimension-grid + .variant-option--frame {
  margin-top: 28px !important;
}

@media screen and (max-width: 749px) {

  variant-picker .dimension-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 22px !important;
  }

  variant-picker .dimension-grid__label {
    height: 45px !important;
    padding: 6px 4px !important;
  }

  variant-picker .dimension-grid__text {
    font-size: 11px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }
}

/* The Pop Gallery — agrandir le logo sur mobile sans agrandir le header */
@media screen and (max-width: 749px) {
  .header-logo img.header-logo__image {
    transform: scale(1.25) !important;
    transform-origin: center center;
  }
}

/* The Pop Gallery — Image à droite, texte à gauche */
@media screen and (min-width: 750px) {
  #shopify-section-template--30925661471103__section_VhDBVP
  .section-content-wrapper {
    flex-direction: row-reverse !important;
  }
}

/* The Pop Gallery — Titres des accordéons */
.accordion--ARXRLOGpDMSticm5QR__accordion_iyA9HC .details__header {
  font-weight: 650 !important;
}

/* The Pop Gallery — Position des titres et boutons des collections */
@media screen and (min-width: 750px) {
  .ai-gallery-aoxu5sdnkmwthsk9zbaigenblock4c49e93pa8hmm__content {
    transform: translate(-24px, 28px);
  }
}

/* The Pop Gallery — Marges latérales des collections */
@media screen and (min-width: 750px) {
  .ai-gallery-aoxu5sdnkmwthsk9zbaigenblock4c49e93pa8hmm__inner {
    padding-left: clamp(20px, 4vw, 64px);
    padding-right: clamp(20px, 4vw, 64px);
    box-sizing: border-box;
  }
}

/* The Pop Gallery — Alignement des cartes sur ordinateur */
@media screen and (min-width: 750px) {
  .ai-gallery-aoxu5sdnkmwthsk9zbaigenblock4c49e93pa8hmm__grid {
    grid-template-rows: 350px 350px !important;
    align-items: start !important;
  }

  .ai-gallery-aoxu5sdnkmwthsk9zbaigenblock4c49e93pa8hmm__card--1 {
    height: 712px !important;
    align-self: start !important;
    top: auto !important;
    margin-top: 0 !important;
  }

  .ai-gallery-aoxu5sdnkmwthsk9zbaigenblock4c49e93pa8hmm__card--2,
  .ai-gallery-aoxu5sdnkmwthsk9zbaigenblock4c49e93pa8hmm__card--3 {
    height: 350px !important;
    align-self: start !important;
    top: auto !important;
    margin-top: 0 !important;
  }
}

/* The Pop Gallery — Section professionnels */
#shopify-section-template--30925661176191__section_hDJakA {
  background: #fff !important;
  padding-inline: 16px;
  box-sizing: border-box;
}

/* Fond extérieur blanc */
#shopify-section-template--30925661176191__section_hDJakA > .section-background {
  background: #fff !important;
}

/* Bloc noir avec coins arrondis */
#shopify-section-template--30925661176191__section_hDJakA > .section {
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
  background: #000 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Conserve les coins arrondis du contenu */
#shopify-section-template--30925661176191__section_hDJakA
.custom-section-content {
  border-radius: 6px !important;
  overflow: hidden !important;
}

/* Marges latérales plus larges sur ordinateur */
@media screen and (min-width: 750px) {
  #shopify-section-template--30925661176191__section_hDJakA {
    padding-inline: 40px;
  }
}

/* The Pop Gallery — Coins arrondis des cards */
#shopify-section-template--30925661176191__179131341073028220
.ai-gallery__card {
  border-radius: 6px !important;
  overflow: hidden !important;
}

/* The Pop Gallery — Announcement bar desktop */
@media screen and (min-width: 750px) {
  #shopify-section-sections--30925661569407__header_announcements_9jGBFp
  .announcement-bar__text {
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }

  #shopify-section-sections--30925661569407__header_announcements_9jGBFp
  .announcement-bar__text strong {
    font-weight: 600 !important;
  }
}

/* The Pop Gallery — Section Our Story */
#shopify-section-template--30925661176191__section_ebQeh9 {
  background: #fff !important;
  padding-inline: 16px;
  box-sizing: border-box;
}

/* Fond extérieur blanc */
#shopify-section-template--30925661176191__section_ebQeh9
> .section-background {
  background: #fff !important;
}

/* Bloc image + texte */
#shopify-section-template--30925661176191__section_ebQeh9 > .section {
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: #000 !important;
}

/* Coins arrondis sur l'ensemble du contenu */
#shopify-section-template--30925661176191__section_ebQeh9
.custom-section-content {
  border-radius: 6px !important;
  overflow: hidden !important;
}

/* Marges plus généreuses sur ordinateur */
@media screen and (min-width: 750px) {
  #shopify-section-template--30925661176191__section_ebQeh9 {
    padding-inline: 40px;
  }
}

/* The Pop Gallery — Titres des sections */
.section-resource-list__header .text-block h2 {
  font-size: 36px !important;
  line-height: 1.2 !important;
}

/* Mobile */
@media screen and (max-width: 749px) {
  .section-resource-list__header .text-block h2 {
    font-size: 30px !important;
  }
}

/* The Pop Gallery — Image à droite, texte à gauche */
@media screen and (min-width: 750px) {
  .section-content-wrapper:has(
    .image-block--ATkhiaWdWOUtiaXEwY__image_hcmh7y
  ) {
    flex-direction: row-reverse !important;
  }
}

/* The Pop Gallery — Image à droite, texte à gauche */
@media screen and (min-width: 750px) {
  #shopify-section-template--30925661307263__section_yJxtdc
  .section-content-wrapper {
    flex-direction: row-reverse !important;
  }
}

/* Autorise la languette à dépasser au-dessus de la pill */
.dimension-grid,
.dimension-grid__label,
variant-picker .variant-option--dimension-grid {
  overflow: visible !important;
}

.dimension-grid__label {
  position: relative !important;
}

/* Badge BESTSELLER sur la 4ème taille */
.dimension-grid__label:nth-child(4)::after {
  content: "BESTSELLER" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translate(-50%, -100%) !important;
  background: #111 !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
  padding: 4px 10px !important;
  border-radius: 6px 6px 0 0 !important;
  white-space: nowrap !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

/* The Pop Gallery — Espacement du menu desktop */
@media screen and (min-width: 990px) {
  .header-menu .menu-list > overflow-list > .menu-list__list-item {
    margin-inline: 8px !important;
  }
}