/** Shopify CDN: Minification failed

Line 6492:1 Unexpected ","
Line 6498:1 Unexpected ","
Line 6503:1 Unexpected ","
Line 6508:1 Unexpected ","
Line 6513:1 Unexpected ","
Line 6518:1 Unexpected ","
Line 6523:1 Unexpected ","
Line 6528:1 Unexpected ","
Line 6533:1 Unexpected ","
Line 6538:1 Unexpected ","
... and 9 more hidden warnings

**/
:root {
  --alpha-button-background: 1;
  --alpha-button-border: 1;
  --alpha-link: 0.85;
  --alpha-badge-border: 0.1;
  --focused-base-outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  --focused-base-outline-offset: 0.3rem;
  --focused-base-box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.product-card-wrapper .card,
.contains-card--product {
  --border-radius: var(--product-card-corner-radius);
  --border-width: var(--product-card-border-width);
  --border-opacity: var(--product-card-border-opacity);
  --shadow-horizontal-offset: var(--product-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--product-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--product-card-shadow-blur-radius);
  --shadow-opacity: var(--product-card-shadow-opacity);
  --shadow-visible: var(--product-card-shadow-visible);
  --image-padding: var(--product-card-image-padding);
  --text-alignment: var(--product-card-text-alignment);
}

.collection-card-wrapper .card,
.contains-card--collection {
  --border-radius: var(--collection-card-corner-radius);
  --border-width: var(--collection-card-border-width);
  --border-opacity: var(--collection-card-border-opacity);
  --shadow-horizontal-offset: var(--collection-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--collection-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--collection-card-shadow-blur-radius);
  --shadow-opacity: var(--collection-card-shadow-opacity);
  --shadow-visible: var(--collection-card-shadow-visible);
  --image-padding: var(--collection-card-image-padding);
  --text-alignment: var(--collection-card-text-alignment);
}

.article-card-wrapper .card,
.contains-card--article {
  --border-radius: var(--blog-card-corner-radius);
  --border-width: var(--blog-card-border-width);
  --border-opacity: var(--blog-card-border-opacity);
  --shadow-horizontal-offset: var(--blog-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--blog-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--blog-card-shadow-blur-radius);
  --shadow-opacity: var(--blog-card-shadow-opacity);
  --shadow-visible: var(--blog-card-shadow-visible);
  --image-padding: var(--blog-card-image-padding);
  --text-alignment: var(--blog-card-text-alignment);
}

.contains-content-container,
.content-container {
  --border-radius: var(--text-boxes-radius);
  --border-width: var(--text-boxes-border-width);
  --border-opacity: var(--text-boxes-border-opacity);
  --shadow-horizontal-offset: var(--text-boxes-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--text-boxes-shadow-vertical-offset);
  --shadow-blur-radius: var(--text-boxes-shadow-blur-radius);
  --shadow-opacity: var(--text-boxes-shadow-opacity);
  --shadow-visible: var(--text-boxes-shadow-visible);
}

.contains-media,
.global-media-settings {
  --border-radius: var(--media-radius);
  --border-width: var(--media-border-width);
  --border-opacity: var(--media-border-opacity);
  --shadow-horizontal-offset: var(--media-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--media-shadow-vertical-offset);
  --shadow-blur-radius: var(--media-shadow-blur-radius);
  --shadow-opacity: var(--media-shadow-opacity);
  --shadow-visible: var(--media-shadow-visible);
}

/* base */

.page-width {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

body:has(.section-header .drawer-menu) .announcement-bar-section .page-width {
  max-width: 100%;
}

.page-width.drawer-menu {
  max-width: 100%;
}

.page-width-desktop {
  padding: 0;
  margin: 0 auto;
}

.utility-bar__grid.page-width {
  padding-left: 3rem;
  padding-right: 3rem;
}

@media screen and (min-width: 750px) {
  .page-width {
    padding: 0 5rem;
  }

  .header.page-width,
  .utility-bar__grid.page-width {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }

  .page-width--narrow {
    padding: 0 9rem;
  }

  .page-width-desktop {
    padding: 0;
  }

  .page-width-tablet {
    padding: 0 5rem;
  }
}

@media screen and (min-width: 990px) {
  .header:not(.drawer-menu).page-width {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .page-width--narrow {
    max-width: 72.6rem;
    padding: 0;
  }

  .page-width-desktop {
    max-width: var(--page-width);
    padding: 0 5rem;
  }
}

.isolate {
  position: relative;
  z-index: 0;
}

.section + .section {
  margin-top: var(--spacing-sections-mobile);
}

@media screen and (min-width: 750px) {
  .section + .section {
    margin-top: var(--spacing-sections-desktop);
  }
}

.element-margin-top {
  margin-top: 5rem;
}

@media screen and (min-width: 750px) {
  .element-margin {
    margin-top: calc(5rem + var(--page-width-margin));
  }
}

.background-secondary {
  background-color: rgba(var(--color-foreground), 0.04);
}

.grid-auto-flow {
  display: grid;
  grid-auto-flow: column;
}

.page-margin,
.shopify-challenge__container {
  margin: 7rem auto;
}

.rte-width {
  max-width: 82rem;
  margin: 0 auto 2rem;
}

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

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  word-wrap: normal !important;
}

.visually-hidden--inline {
  margin: 0;
  height: 1em;
}

.overflow-hidden {
  overflow: hidden;
}

.skip-to-content-link:focus {
  z-index: 9999;
  position: inherit;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

.full-width-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

::selection {
  background-color: rgba(var(--color-foreground), 0.2);
}

.text-body {
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
}

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  letter-spacing: calc(var(--font-heading-scale) * 0.06rem);
  color: rgb(var(--color-foreground));
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
  word-break: break-word;
}

.hxxl {
  font-size: clamp(calc(var(--font-heading-scale) * 5.6rem), 14vw, calc(var(--font-heading-scale) * 7.2rem));
  line-height: 1.1;
}

.hxl {
  font-size: calc(var(--font-heading-scale) * 5rem);
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
}

@media only screen and (min-width: 750px) {
  .hxl {
    font-size: calc(var(--font-heading-scale) * 6.2rem);
  }
}

.h0 {
  font-size: calc(var(--font-heading-scale) * 4rem);
}

@media only screen and (min-width: 750px) {
  .h0 {
    font-size: calc(var(--font-heading-scale) * 5.2rem);
  }
}

h1,
.h1 {
  font-size: calc(var(--font-heading-scale) * 3rem);
}

@media only screen and (min-width: 750px) {
  h1,
  .h1 {
    font-size: calc(var(--font-heading-scale) * 4rem);
  }
}

h2,
.h2 {
  font-size: calc(var(--font-heading-scale) * 2rem);
}

@media only screen and (min-width: 750px) {
  h2,
  .h2 {
    font-size: calc(var(--font-heading-scale) * 2.4rem);
  }
}

h3,
.h3 {
  font-size: calc(var(--font-heading-scale) * 1.7rem);
}

@media only screen and (min-width: 750px) {
  h3,
  .h3 {
    font-size: calc(var(--font-heading-scale) * 1.8rem);
  }
}

h4,
.h4 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-size: calc(var(--font-heading-scale) * 1.5rem);
}

h5,
.h5 {
  font-size: calc(var(--font-heading-scale) * 1.2rem);
}

@media only screen and (min-width: 750px) {
  h5,
  .h5 {
    font-size: calc(var(--font-heading-scale) * 1.3rem);
  }
}

h6,
.h6 {
  color: rgba(var(--color-foreground), 0.75);
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
}

blockquote {
  font-style: italic;
  color: rgba(var(--color-foreground), 0.75);
  border-left: 0.2rem solid rgba(var(--color-foreground), 0.2);
  padding-left: 1rem;
}

@media screen and (min-width: 750px) {
  blockquote {
    padding-left: 1.5rem;
  }
}

.caption {
  font-size: 1rem;
  letter-spacing: 0.07rem;
  line-height: calc(1 + 0.7 / var(--font-body-scale));
}

@media screen and (min-width: 750px) {
  .caption {
    font-size: 1.2rem;
  }
}

.caption-with-letter-spacing {
  font-size: 1rem;
  letter-spacing: 0.13rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
  text-transform: uppercase;
}

.caption-with-letter-spacing--medium {
  font-size: 1.2rem;
  letter-spacing: 0.16rem;
}

.caption-with-letter-spacing--large {
  font-size: 1.4rem;
  letter-spacing: 0.18rem;
}

.caption-large,
.customer .field input,
.customer select,
.field__input,
.form__label,
.select__select {
  font-size: 1.3rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  letter-spacing: 0.04rem;
}

.color-foreground {
  color: rgb(var(--color-foreground));
}

table:not([class]) {
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 1.4rem;
  border-style: hidden;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2);
  /* draws the table border  */
}

table:not([class]) td,
table:not([class]) th {
  padding: 1em;
  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
}

@media screen and (max-width: 749px) {
  .small-hide {
    display: none !important;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .medium-hide {
    display: none !important;
  }
}

@media screen and (min-width: 990px) {
  .large-up-hide {
    display: none !important;
  }
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.uppercase {
  text-transform: uppercase;
}

.light {
  opacity: 0.7;
}

a:empty,
ul:empty,
dl:empty,
div:empty,
section:empty,
article:empty,
p:empty,
h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty,
h6:empty {
  display: none;
}

.link,
.customer a {
  cursor: pointer;
  display: inline-block;
  border: none;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  color: rgb(var(--color-link));
  background-color: transparent;
  font-size: 1.4rem;
  font-family: inherit;
}

.link--text {
  color: rgb(var(--color-foreground));
}

.link--text:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.link-with-icon {
  display: inline-flex;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-decoration: none;
  margin-bottom: 4.5rem;
  white-space: nowrap;
}

.link-with-icon .icon {
  width: 1.5rem;
  margin-left: 1rem;
}

a:not([href]) {
  cursor: not-allowed;
}

.circle-divider::after {
  content: '\2022';
  margin: 0 1.3rem 0 1.5rem;
}

.circle-divider:last-of-type::after {
  display: none;
}

hr {
  border: none;
  height: 0.1rem;
  background-color: rgba(var(--color-foreground), 0.2);
  display: block;
  margin: 5rem 0;
}

@media screen and (min-width: 750px) {
  hr {
    margin: 7rem 0;
  }
}

.full-unstyled-link {
  text-decoration: none;
  color: currentColor;
  display: block;
}

.placeholder {
  background-color: rgba(var(--color-foreground), 0.04);
  color: rgba(var(--color-foreground), 0.55);
  fill: rgba(var(--color-foreground), 0.55);
}

details > * {
  box-sizing: border-box;
}

.break {
  word-break: break-word;
}

.visibility-hidden {
  visibility: hidden;
}

@media (prefers-reduced-motion) {
  .motion-reduce {
    transition: none !important;
    animation: none !important;
  }
}

:root {
  --duration-short: 100ms;
  --duration-default: 200ms;
  --duration-announcement-bar: 250ms;
  --duration-medium: 300ms;
  --duration-long: 500ms;
  --duration-extra-long: 600ms;
  --duration-extra-longer: 750ms;
  --duration-extended: 3s;
  --ease-out-slow: cubic-bezier(0, 0, 0.3, 1);
  --animation-slide-in: slideIn var(--duration-extra-long) var(--ease-out-slow) forwards;
  --animation-fade-in: fadeIn var(--duration-extra-long) var(--ease-out-slow);
}

.underlined-link,
.customer a,
.inline-richtext a {
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness ease 100ms;
}

.underlined-link,
.customer a {
  color: rgba(var(--color-link), var(--alpha-link));
}

.inline-richtext a,
.rte.inline-richtext a {
  color: currentColor;
}

.underlined-link:hover,
.customer a:hover,
.inline-richtext a:hover {
  color: rgb(var(--color-link));
  text-decoration-thickness: 0.2rem;
}

.icon-arrow {
  width: 1.5rem;
}

h3 .icon-arrow,
.h3 .icon-arrow {
  width: calc(var(--font-heading-scale) * 1.5rem);
}

/* arrow animation */
.animate-arrow .icon-arrow path {
  transform: translateX(-0.25rem);
  transition: transform var(--duration-short) ease;
}

.animate-arrow:hover .icon-arrow path {
  transform: translateX(-0.05rem);
}

.svg-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}

.svg-wrapper > svg {
  height: 100%;
  width: 100%;
}

/* base-details-summary */
summary {
  cursor: pointer;
  list-style: none;
  position: relative;
}

summary .icon-caret {
  position: absolute;
  height: 0.6rem;
  right: 1.5rem;
  top: calc(50% - 0.2rem);
}

summary::-webkit-details-marker {
  display: none;
}

.disclosure-has-popup {
  position: relative;
}

.disclosure-has-popup[open] > summary::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: block;
  cursor: default;
  content: ' ';
  background: transparent;
}

.disclosure-has-popup > summary::before {
  display: none;
}

.disclosure-has-popup[open] > summary + * {
  z-index: 100;
}

@media screen and (min-width: 750px) {
  .disclosure-has-popup[open] > summary + * {
    z-index: 4;
  }

  .facets .disclosure-has-popup[open] > summary + * {
    z-index: 2;
  }
}

.placeholder-svg {
  height: 100%;
  width: 100%;
}

/* base-focus */
/*
  Focus ring - default (with offset)
*/

*:focus {
  outline: 0;
  box-shadow: none;
}

*:focus-visible {
  outline: var(--focused-base-outline);
  outline-offset: var(--focused-base-outline-offset);
  box-shadow: var(--focused-base-box-shadow);
}

/* Fallback - for browsers that don't support :focus-visible, a fallback is set for :focus */
.focused {
  outline: var(--focused-base-outline);
  outline-offset: var(--focused-base-outline-offset);
  box-shadow: var(--focused-base-box-shadow);
}

/*
  Focus ring - inset
*/

.focus-inset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

.focused.focus-inset {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

/*
  Focus ring - none
*/

/* Dangerous for a11y - Use with care */
.focus-none {
  box-shadow: none !important;
  outline: 0 !important;
}

.focus-offset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.focus-offset.focused {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

/* component-title */
.title,
.title-wrapper-with-link {
  margin: 3rem 0 2rem;
}

.title-wrapper-with-link .title {
  margin: 0;
}

.title .link {
  font-size: inherit;
}

.title-wrapper {
  margin-bottom: 3rem;
}

.title-wrapper-with-link {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.title--primary {
  margin: 4rem 0;
}

.title-wrapper--self-padded-tablet-down,
.title-wrapper--self-padded-mobile {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media screen and (min-width: 750px) {
  .title-wrapper--self-padded-mobile {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 990px) {
  .title,
  .title-wrapper-with-link {
    margin: 5rem 0 3rem;
  }

  .title--primary {
    margin: 2rem 0;
  }

  .title-wrapper-with-link {
    align-items: center;
  }

  .title-wrapper-with-link .title {
    margin-bottom: 0;
  }

  .title-wrapper--self-padded-tablet-down {
    padding-left: 0;
    padding-right: 0;
  }
}

.title-wrapper-with-link .link-with-icon {
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.title-wrapper-with-link .link-with-icon .svg-wrapper {
  width: 1.5rem;
}

.title-wrapper-with-link a {
  margin-top: 0;
  flex-shrink: 0;
}

.title-wrapper--no-top-margin {
  margin-top: 0;
}

.title-wrapper--no-top-margin > .title {
  margin-top: 0;
}

.subtitle {
  font-size: 1.8rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  letter-spacing: 0.06rem;
  color: rgba(var(--color-foreground), 0.7);
}

.subtitle--small {
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
}

.subtitle--medium {
  font-size: 1.6rem;
  letter-spacing: 0.08rem;
}

/* component-grid */
.grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding: 0;
  list-style: none;
  column-gap: var(--grid-mobile-horizontal-spacing);
  row-gap: var(--grid-mobile-vertical-spacing);
}

@media screen and (min-width: 750px) {
  .grid {
    column-gap: var(--grid-desktop-horizontal-spacing);
    row-gap: var(--grid-desktop-vertical-spacing);
  }
}

.grid:last-child {
  margin-bottom: 0;
}

.grid__item {
  width: calc(25% - var(--grid-mobile-horizontal-spacing) * 3 / 4);
  max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  flex-grow: 1;
  flex-shrink: 0;
}

@media screen and (min-width: 750px) {
  .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

.grid--gapless.grid {
  column-gap: 0;
  row-gap: 0;
}

@media screen and (max-width: 749px) {
  .grid__item.slider__slide--full-width {
    width: 100%;
    max-width: none;
  }
}

.grid--1-col .grid__item {
  max-width: 100%;
  width: 100%;
}

.grid--3-col .grid__item {
  width: calc(33.33% - var(--grid-mobile-horizontal-spacing) * 2 / 3);
}

@media screen and (min-width: 750px) {
  .grid--3-col .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }
}

.grid--2-col .grid__item {
  width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
}

@media screen and (min-width: 750px) {
  .grid--2-col .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .grid--4-col-tablet .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }

  .grid--3-col-tablet .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }

  .grid--2-col-tablet .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

@media screen and (max-width: 989px) {
  .grid--1-col-tablet-down .grid__item {
    width: 100%;
    max-width: 100%;
  }

  .slider--tablet.grid--peek {
    margin: 0;
    width: 100%;
  }

  .slider--tablet.grid--peek .grid__item {
    box-sizing: content-box;
    margin: 0;
  }

  .slider.slider--tablet .scroll-trigger.animate--slide-in,
  .slider.slider--mobile .scroll-trigger.animate--slide-in {
    animation: none;
    opacity: 1;
    transform: inherit;
  }

  .scroll-trigger:not(.scroll-trigger--offscreen) .slider--tablet {
    animation: var(--animation-slide-in);
  }
}

@media screen and (min-width: 990px) {
  .grid--6-col-desktop .grid__item {
    width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
    max-width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
  }

  .grid--5-col-desktop .grid__item {
    width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
    max-width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
  }

  .grid--4-col-desktop .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }

  .grid--3-col-desktop .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
    max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }

  .grid--2-col-desktop .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .slider.slider--desktop .scroll-trigger.animate--slide-in {
    animation: none;
    opacity: 1;
    transform: inherit;
  }

  .scroll-trigger:not(.scroll-trigger--offscreen) .slider--desktop {
    animation: var(--animation-slide-in);
  }
}

@media screen and (min-width: 990px) {
  .grid--1-col-desktop {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .grid--1-col-desktop .grid__item {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 749px) {
  .grid--peek.slider--mobile {
    margin: 0;
    width: 100%;
  }

  .grid--peek.slider--mobile .grid__item {
    box-sizing: content-box;
    margin: 0;
  }

  .grid--peek .grid__item {
    min-width: 35%;
  }

  .grid--peek.slider .grid__item:first-of-type {
    margin-left: 1.5rem;
  }

  /* Fix to show some space at the end of our sliders in all browsers */
  .grid--peek.slider:after {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
  }

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  }

  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item,
  .grid--peek .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item,
  .slider--mobile.grid--peek.grid--1-col-tablet-down .grid__item {
    width: calc(100% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .slider--tablet.grid--peek .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--3-col-tablet .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--2-col-tablet .grid__item,
  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek .grid__item:first-of-type {
    margin-left: 1.5rem;
  }

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .grid--1-col-tablet-down.grid--peek .grid__item {
    width: calc(100% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }
}

/* component-media */
.media {
  display: block;
  background-color: rgba(var(--color-foreground), 0.1);
  position: relative;
  overflow: hidden;
}

.media--transparent {
  background-color: transparent;
}

.media > *:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.media > img {
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.media--square {
  padding-bottom: 100%;
}

.media--portrait {
  padding-bottom: 125%;
}

.media--landscape {
  padding-bottom: 66.6%;
}

.media--cropped {
  padding-bottom: 56%;
}

.media--16-9 {
  padding-bottom: 56.25%;
}

.media--circle {
  padding-bottom: 100%;
  border-radius: 50%;
}

.media.media--hover-effect > img + img {
  opacity: 0;
}

@media screen and (min-width: 990px) {
  .media--cropped {
    padding-bottom: 63%;
  }
}

deferred-media {
  display: block;
}

/* component-button */
/* Button - default */

.button--secondary,
.button--tertiary {
  --color-button: var(--color-secondary-button);
  --color-button-text: var(--color-secondary-button-text);
}

.button--tertiary {
  --alpha-button-background: 0;
  --alpha-button-border: 0.2;
}

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded {
  --shadow-horizontal-offset: var(--buttons-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--buttons-shadow-vertical-offset);
  --shadow-blur-radius: var(--buttons-shadow-blur-radius);
  --shadow-opacity: var(--buttons-shadow-opacity);
  --shadow-visible: var(--buttons-shadow-visible);
  --border-offset: var(--buttons-border-offset); /* reduce radius edge artifacts */
  --border-opacity: calc(1 - var(--buttons-border-opacity));
  border-radius: var(--buttons-radius-outset);
  position: relative;
}

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded {
  min-width: calc(12rem + var(--buttons-border-width) * 2);
  min-height: calc(4.5rem + var(--buttons-border-width) * 2);
}

.button,
.shopify-challenge__button,
.customer button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  padding: 0 3rem;
  cursor: pointer;
  font: inherit;
  font-size: 1.5rem;
  text-decoration: none;
  color: rgb(var(--color-button-text));
  transition: box-shadow var(--duration-short) ease;
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(var(--color-button), var(--alpha-button-background));
}

.button:before,
.shopify-challenge__button:before,
.customer button:before,
.shopify-payment-button__button--unbranded:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: var(--buttons-radius-outset);
  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
    rgba(var(--color-shadow), var(--shadow-opacity));
}

.button:after,
.shopify-challenge__button:after,
.customer button:after,
.shopify-payment-button__button--unbranded:after {
  content: '';
  position: absolute;
  top: var(--buttons-border-width);
  right: var(--buttons-border-width);
  bottom: var(--buttons-border-width);
  left: var(--buttons-border-width);
  z-index: 1;
  border-radius: var(--buttons-radius);
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
  transition: box-shadow var(--duration-short) ease;
}

.button:not([disabled]):hover::after,
.shopify-challenge__button:hover::after,
.customer button:hover::after,
.shopify-payment-button__button--unbranded:hover::after {
  --border-offset: 1.3px;
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 calc(var(--buttons-border-width) + 1px) rgba(var(--color-button), var(--alpha-button-background));
}

.button--secondary:after {
  --border-opacity: var(--buttons-border-opacity);
}

.button:focus-visible,
.button:focus,
.button.focused,
.shopify-payment-button__button--unbranded:focus-visible,
.shopify-payment-button__button--unbranded:focus {
  outline: 0;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.5),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.button:focus:not(:focus-visible):not(.focused),
.shopify-payment-button__button--unbranded:focus:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
}

.button::selection,
.shopify-challenge__button::selection,
.customer button::selection {
  background-color: rgba(var(--color-button-text), 0.3);
}

.button,
.button-label,
.shopify-challenge__button,
.customer button {
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
}

.button--tertiary {
  font-size: 1.2rem;
  padding: 1rem 1.5rem;
  min-width: calc(9rem + var(--buttons-border-width) * 2);
  min-height: calc(3.5rem + var(--buttons-border-width) * 2);
}

.button--small {
  padding: 1.2rem 2.6rem;
}

/* Shopify Accelerated Checkout */

shopify-accelerated-checkout {
  --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset);
  --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
  rgba(var(--color-shadow), var(--shadow-opacity));
}
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset);
  --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
  rgba(var(--color-shadow), var(--shadow-opacity));
}


/* Button - other */

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

.button--full-width {
  display: flex;
  width: 100%;
}

.button.loading {
  color: transparent;
  position: relative;
}

@media screen and (forced-colors: active) {
  .button.loading {
    color: rgb(var(--color-foreground));
  }
}

.button.loading > .loading__spinner {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
}

.button.loading > .loading__spinner .spinner {
  width: fit-content;
}

.button.loading > .loading__spinner .path {
  stroke: rgb(var(--color-button-text));
}

/* Button - social share */

.share-button {
  display: block;
  position: relative;
}

.share-button details {
  width: fit-content;
}

.share-button__button {
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  color: rgb(var(--color-link));
  margin-left: 0;
  padding-left: 0;
  min-height: 4.4rem;
}

details[open] > .share-button__fallback {
  animation: animateMenuOpen var(--duration-default) ease;
}

.share-button__button:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.share-button__button,
.share-button__fallback button {
  cursor: pointer;
  background-color: transparent;
  border: none;
}

.share-button__button .icon-share {
  height: 1.2rem;
  margin-right: 1rem;
  min-width: 1.3rem;
}

.share-button__fallback {
  display: flex;
  align-items: center;
  position: absolute;
  top: 3rem;
  left: 0.1rem;
  z-index: 3;
  width: 100%;
  min-width: max-content;
  border-radius: var(--inputs-radius);
  border: 0;
}

.share-button__fallback:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.share-button__fallback:before {
  background: rgb(var(--color-background));
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.share-button__fallback button {
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  right: var(--inputs-border-width);
}

.share-button__fallback button:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.share-button__fallback button:hover .svg-wrapper {
  transform: scale(1.07);
}

.share-button__close:not(.hidden) + .share-button__copy {
  display: none;
}

.share-button__close,
.share-button__copy {
  background-color: transparent;
  color: rgb(var(--color-foreground));
}

.share-button__copy:focus-visible,
.share-button__close:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.share-button__copy:focus,
.share-button__close:focus {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.field:not(:focus-visible):not(.focused) + .share-button__copy:not(:focus-visible):not(.focused),
.field:not(:focus-visible):not(.focused) + .share-button__close:not(:focus-visible):not(.focused) {
  background-color: inherit;
}

.share-button__fallback .field:after,
.share-button__fallback .field:before {
  content: none;
}

.share-button__fallback .field {
  border-radius: 0;
  min-width: auto;
  min-height: auto;
  transition: none;
}

.share-button__fallback .field__input:focus,
.share-button__fallback .field__input:-webkit-autofill {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.1rem;
  box-shadow: 0 0 0 0.1rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.share-button__fallback .field__input {
  box-shadow: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  filter: none;
  min-width: auto;
  min-height: auto;
}

.share-button__fallback .field__input:hover {
  box-shadow: none;
}

.share-button__fallback .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.share-button__message:not(:empty) {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top: 0;
  padding: 0.8rem 0 0.8rem 1.5rem;
  margin: var(--inputs-border-width);
}

.share-button__message:not(:empty):not(.hidden) ~ * {
  display: none;
}

/* component-form */
.field__input,
.select__select,
.customer .field input,
.customer select {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.6rem;
  width: 100%;
  box-sizing: border-box;
  transition: box-shadow var(--duration-short) ease;
  border-radius: var(--inputs-radius);
  height: 4.5rem;
  min-height: calc(var(--inputs-border-width) * 2);
  min-width: calc(7rem + (var(--inputs-border-width) * 2));
  position: relative;
  border: 0;
}

.field:before,
.select:before,
.customer .field:before,
.customer select:before,
.localization-form__select:before {
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.field:after,
.select:after,
.customer .field:after,
.customer select:after,
.localization-form__select:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.select__select {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.2rem;
  color: rgba(var(--color-foreground), 0.75);
}

.field:hover.field:after,
.select:hover.select:after,
.select__select:hover.select__select:after,
.customer .field:hover.field:after,
.customer select:hover.select:after,
.localization-form__select:hover.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width))
    rgba(var(--color-foreground), var(--inputs-border-opacity));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.field__input:focus-visible,
.select__select:focus-visible,
.customer .field input:focus-visible,
.customer select:focus-visible,
.localization-form__select:focus-visible.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.field__input:focus,
.select__select:focus,
.customer .field input:focus,
.customer select:focus,
.localization-form__select:focus.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.localization-form__select:focus {
  outline: 0;
  box-shadow: none;
}

.text-area,
.select {
  display: flex;
  position: relative;
  width: 100%;
}

/* Select */

.select .svg-wrapper,
.customer select + .svg-wrapper {
  height: 0.6rem;
  width: 1rem;
  pointer-events: none;
  position: absolute;
  top: calc(50% - 0.2rem);
  right: 0;
}

.select__select,
.customer select {
  cursor: pointer;
  line-height: calc(1 + 0.6 / var(--font-body-scale));
  padding: 0 calc(var(--inputs-border-width) + 3rem) 0 2rem;
  margin: var(--inputs-border-width);
  min-height: calc(var(--inputs-border-width) * 2);
}

/* Field */

.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--duration-short) ease;
}

.customer .field {
  display: flex;
}

.field--with-error {
  flex-wrap: wrap;
}

.field__input,
.customer .field input {
  flex-grow: 1;
  text-align: left;
  padding: 1.5rem;
  margin: var(--inputs-border-width);
  transition: box-shadow var(--duration-short) ease;
}

.field__label,
.customer .field label {
  font-size: 1.6rem;
  left: calc(var(--inputs-border-width) + 2rem);
  top: calc(1rem + var(--inputs-border-width));
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--duration-short) ease, font-size var(--duration-short) ease;
  color: rgba(var(--color-foreground), 0.75);
  letter-spacing: 0.1rem;
  line-height: 1.5;
}

.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:focus ~ label,
.customer .field input:not(:placeholder-shown) ~ label,
.customer .field input:-webkit-autofill ~ label {
  font-size: 1rem;
  top: calc(var(--inputs-border-width) + 0.5rem);
  left: calc(var(--inputs-border-width) + 2rem);
  letter-spacing: 0.04rem;
}

.field__input:focus,
.field__input:not(:placeholder-shown),
.field__input:-webkit-autofill,
.customer .field input:focus,
.customer .field input:not(:placeholder-shown),
.customer .field input:-webkit-autofill {
  padding: 2.2rem 1.5rem 0.8rem 2rem;
  margin: var(--inputs-border-width);
}

.field__input::-webkit-search-cancel-button,
.customer .field input::-webkit-search-cancel-button {
  display: none;
}

.field__input::placeholder,
.customer .field input::placeholder {
  opacity: 0;
}

.field__button {
  align-items: center;
  background-color: transparent;
  border: 0;
  color: currentColor;
  cursor: pointer;
  display: flex;
  height: 4.4rem;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 4.4rem;
}

.field__button > .svg-wrapper {
  height: 2.5rem;
  width: 2.5rem;
}

.field__input:-webkit-autofill ~ .field__button,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:-webkit-autofill ~ label {
  color: rgb(0, 0, 0);
}

/* Text area */

.text-area {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  min-height: 10rem;
  resize: none;
}

input[type='checkbox'] {
  display: inline-block;
  width: auto;
  margin-right: 0.5rem;
}

/* Form global */

.form__label {
  display: block;
  margin-bottom: 0.6rem;
}

.form__message {
  align-items: center;
  display: flex;
  font-size: 1.4rem;
  line-height: 1;
  margin-top: 1rem;
}

.form__message--large {
  font-size: 1.6rem;
}

.customer .field .form__message {
  font-size: 1.4rem;
  text-align: left;
}

.form__message .icon,
.customer .form__message .svg-wrapper {
  flex-shrink: 0;
  height: 1.3rem;
  margin-right: 0.5rem;
  width: 1.3rem;
}

.form__message--large .icon,
.customer .form__message .svg-wrapper {
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 1rem;
}

.customer .field .form__message .svg-wrapper {
  align-self: start;
}

.form-status {
  margin: 0;
  font-size: 1.6rem;
}

.form-status-list {
  padding: 0;
  margin: 2rem 0 4rem;
}

.form-status-list li {
  list-style-position: inside;
}

.form-status-list .link::first-letter {
  text-transform: capitalize;
}

/* component-quantity */
.quantity {
  color: rgba(var(--color-foreground));
  position: relative;
  width: calc(14rem / var(--font-body-scale) + var(--inputs-border-width) * 2);
  display: flex;
  border-radius: var(--inputs-radius);
  min-height: calc((var(--inputs-border-width) * 2) + 4.5rem);
}

.quantity:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.quantity:before {
  background: rgb(var(--color-background));
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.quantity__input {
  color: currentColor;
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.6rem;
  font-weight: 500;
  opacity: 0.85;
  text-align: center;
  background-color: transparent;
  border: 0;
  padding: 0 0.5rem;
  width: 100%;
  flex-grow: 1;
  -webkit-appearance: none;
  appearance: none;
}

.quantity__button {
  width: calc(4.5rem / var(--font-body-scale));
  flex-shrink: 0;
  font-size: 1.8rem;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-foreground));
  padding: 0;
}

.quantity__button:first-child {
  margin-left: calc(var(--inputs-border-width));
}

.quantity__button:last-child {
  margin-right: calc(var(--inputs-border-width));
}

.quantity__button .svg-wrapper {
  width: 1rem;
  pointer-events: none;
}

.quantity__button:focus-visible,
.quantity__input:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.quantity__button:focus,
.quantity__input:focus {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.quantity__button:not(:focus-visible):not(.focused),
.quantity__input:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
  background-color: inherit;
}

.quantity__input:-webkit-autofill,
.quantity__input:-webkit-autofill:hover,
.quantity__input:-webkit-autofill:active {
  box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
  -webkit-box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
}

.quantity__input::-webkit-outer-spin-button,
.quantity__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity__input[type='number'] {
  -moz-appearance: textfield;
}

.quantity__rules {
  margin-top: 0.5rem;
  position: relative;
  font-size: 1.2rem;
}

.quantity__rules .caption {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
}

.quantity__rules .divider + .divider::before {
  content: '\2022';
  margin: 0 0.5rem;
}

.quantity__rules-cart {
  position: relative;
}

.product__info-container .loading__spinner:not(.hidden) ~ *,
.quantity__rules-cart .loading__spinner:not(.hidden) ~ * {
  visibility: hidden;
}

/* component-modal */
.modal__toggle {
  list-style-type: none;
}

.modal__toggle-close {
  display: none;
}

.modal__toggle-open {
  display: flex;
}

.modal__close-button.link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0rem;
  height: 4.4rem;
  width: 4.4rem;
  background-color: transparent;
}

.modal__close-button .icon {
  width: 1.7rem;
  height: 1.7rem;
}

.modal__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(var(--color-background));
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.media-modal {
  cursor: zoom-out;
}

.media-modal .deferred-media {
  cursor: initial;
}

/* component-cart-count-bubble */
.cart-count-bubble:empty {
  display: none;
}

.cart-count-bubble {
  position: absolute;
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  height: 1.7rem;
  width: 1.7rem;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  bottom: 0.8rem;
  left: 2.2rem;
  line-height: calc(1 + 0.1 / var(--font-body-scale));
}

/* utility-bar */
.utility-bar {
  height: 100%;
}

.utility-bar--bottom-border {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

@media screen and (min-width: 990px) {
  .utility-bar--bottom-border-social-only {
    border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  }
}

.utility-bar__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 'announcements';
}

.utility-bar__grid .list-social {
  justify-content: flex-start;
  align-content: center;
  margin-left: -1.2rem;
  grid-area: social-icons;
}

@media screen and (max-width: 989px) {
  .utility-bar .utility-bar__grid .list-social {
    display: none;
  }
}

.utility-bar .list-social__item .icon {
  scale: 0.9;
}

@media screen and (min-width: 990px) {
  .utility-bar__grid--3-col {
    grid-template-columns: 3fr 4fr 3fr;
    grid-template-areas: 'social-icons announcements language-currency';
  }

  .utility-bar__grid--2-col {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'social-icons language-currency';
  }

  .announcement-bar.announcement-bar--one-announcement,
  .announcement-bar--one-announcement .announcement-bar__link {
    width: fit-content;
    margin: auto;
  }
}

.announcement-bar,
.announcement-bar__announcement {
  color: rgb(var(--color-foreground));
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  grid-area: announcements;
}

.announcement-bar .slider--everywhere {
  margin-bottom: 0;
  scroll-behavior: auto;
}

.utility-bar__grid .announcement-bar-slider {
  width: 100%;
}

.utility-bar__grid .announcement-bar-slider {
  width: 100%;
}

.announcement-bar-slider,
.announcement-bar-slider .slider {
  width: 100%;
}

.announcement-bar .slider-button--next {
  margin-right: -1.5rem;
  min-width: 44px;
}

.announcement-bar .slider-button--prev {
  margin-left: -1.5rem;
  min-width: 44px;
}

.announcement-bar .slider-button--next:focus-visible,
.announcement-bar .slider-button--prev:focus-visible,
.utility-bar .list-social__link:focus-visible {
  outline-offset: -0.3rem;
  box-shadow: 0 0 0 -0.2rem rgb(var(--color-foreground));
}

.localization-wrapper {
  grid-area: language-currency;
  align-self: center;
  display: flex;
  justify-content: flex-end;
}

.localization-wrapper .localization-selector + .disclosure__list-wrapper {
  animation: animateMenuOpen var(--duration-default) ease;
}

.utility-bar .localization-wrapper .disclosure .localization-form__select,
.utility-bar .localization-wrapper .disclosure__link {
  font-size: calc(var(--font-heading-scale) * 1.3rem);
}

@media screen and (min-width: 990px) {
  body:has(.section-header .header:not(.drawer-menu)) .utility-bar .page-width {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .announcement-bar-slider {
    width: 60%;
  }

  .announcement-bar .slider-button {
    height: 3.8rem;
  }
}

.announcement-bar__link {
  display: flex;
  width: 100%;
  text-decoration: none;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.announcement-bar__link:hover {
  text-decoration: underline;
}

.announcement-bar__link .icon-arrow {
  display: inline-block;
  pointer-events: none;
  margin-left: 0.8rem;
  vertical-align: middle;
  margin-bottom: 0.2rem;
}

.announcement-bar__message {
  text-align: center;
  padding: 1rem 0;
  margin: 0;
  letter-spacing: 0.1rem;
  min-height: 3.8rem;
}

.announcement-bar-slider--fade-in-next .announcement-bar__message,
.announcement-bar-slider--fade-in-previous .announcement-bar__message,
.announcement-bar-slider--fade-out-next .announcement-bar__message,
.announcement-bar-slider--fade-out-previous .announcement-bar__message {
  animation-duration: var(--duration-announcement-bar);
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.announcement-bar-slider--fade-in-next .announcement-bar__message {
  --announcement-translate-from: -1.5rem;
  /* Prevent flicker */
  opacity: 0;
  animation-name: translateAnnouncementSlideIn;
  animation-delay: var(--duration-announcement-bar);
}

.announcement-bar-slider--fade-in-previous .announcement-bar__message {
  --announcement-translate-from: 1.5rem;
  /* Prevent flicker */
  opacity: 0;
  animation-name: translateAnnouncementSlideIn;
  animation-delay: var(--duration-announcement-bar);
}

.announcement-bar-slider--fade-out-next .announcement-bar__message {
  --announcement-translate-to: 1.5rem;
  animation-name: translateAnnouncementSlideOut;
}

.announcement-bar-slider--fade-out-previous .announcement-bar__message {
  --announcement-translate-to: -1.5rem;
  animation-name: translateAnnouncementSlideOut;
}

@keyframes translateAnnouncementSlideIn {
  0% {
    opacity: 0;
    transform: translateX(var(--announcement-translate-from));
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes translateAnnouncementSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(var(--announcement-translate-to));
  }
}

/* section-header */
.section-header.shopify-section-group-header-group {
  z-index: 3;
}

.shopify-section-header-sticky {
  position: sticky;
  top: 0;
}

.shopify-section-header-hidden {
  top: calc(-1 * var(--header-height));
}

.shopify-section-header-hidden.menu-open {
  top: 0;
}

.section-header.animate {
  transition: top 0.15s ease-out;
}

.shopify-section-group-header-group {
  z-index: 4;
}

.section-header ~ .shopify-section-group-header-group {
  z-index: initial;
}

/* Main Header Layout */
.header-wrapper {
  display: block;
  position: relative;
  background-color: rgb(var(--color-background));
}

.header-wrapper--border-bottom {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.header {
  display: grid;
  grid-template-areas: 'left-icons heading icons';
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
}

@media screen and (max-width: 749px) {
  .header--has-app {
    grid-template-columns: auto 1fr auto;
  }
}

@media screen and (min-width: 990px) {
  .header {
    grid-template-columns: 1fr auto 1fr;
  }

  .header--top-left,
  .header--middle-left:not(.header--has-menu) {
    grid-template-areas:
      'heading icons'
      'navigation navigation';
    grid-template-columns: 1fr auto;
  }

  .header--top-left.drawer-menu,
  .header--middle-left.drawer-menu {
    grid-template-areas: 'navigation heading icons';
    grid-template-columns: auto 1fr auto;
    column-gap: 1rem;
  }

  .header--middle-left {
    grid-template-areas: 'heading navigation icons';
    grid-template-columns: auto auto 1fr;
    column-gap: 2rem;
  }

  .header--middle-center:not(.drawer-menu) {
    grid-template-areas: 'navigation heading icons';
    grid-template-columns: 1fr auto 1fr;
    column-gap: 2rem;
  }

  .header--middle-center a.header__heading-link {
    text-align: center;
  }

  .header--top-center {
    grid-template-areas:
      'left-icons heading icons'
      'navigation navigation navigation';
  }

  .header--top-center.drawer-menu {
    grid-template-areas: 'left-icons heading icons';
    grid-template-columns: 1fr auto 1fr;
  }

  .header:not(.header--middle-left, .header--middle-center) .header__inline-menu {
    margin-top: 1.05rem;
  }
}

.header *[tabindex='-1']:focus {
  outline: none;
}

.header__heading {
  margin: 0;
  line-height: 0;
}

.header > .header__heading-link {
  line-height: 0;
}

.header__heading,
.header__heading-link {
  grid-area: heading;
  justify-self: center;
}

.header__heading-link {
  display: inline-block;
  padding: 0.75rem;
  text-decoration: none;
  word-break: break-word;
}

.header__heading-link:hover .h2 {
  color: rgb(var(--color-foreground));
}

.header__heading-link .h2 {
  line-height: 1;
  color: rgba(var(--color-foreground), 0.75);
}

.header__heading-logo {
  height: auto;
  max-width: 100%;
}

.header__heading-logo-wrapper {
  width: 100%;
  display: inline-block;
  transition: width 0.3s cubic-bezier(0.52, 0, 0.61, 0.99);
}

@media screen and (max-width: 989px) {
  .header__heading,
  .header__heading-link {
    text-align: center;
  }

  .header--mobile-left .header__heading,
  .header--mobile-left .header__heading-link {
    text-align: left;
    justify-self: start;
  }

  .header--mobile-left {
    grid-template-columns: auto 2fr 1fr;
  }
}

@media screen and (min-width: 990px) {
  .header--middle-left .header__heading-link,
  .header--top-left .header__heading-link {
    margin-left: -0.75rem;
  }

  .header__heading,
  .header__heading-link {
    justify-self: start;
  }

  .header--middle-center .header__heading-link,
  .header--middle-center .header__heading {
    justify-self: center;
    text-align: center;
  }

  .header--top-center .header__heading-link,
  .header--top-center .header__heading {
    justify-self: center;
    text-align: center;
  }
}

/* Header icons */
.header__icons {
  display: flex;
  grid-area: icons;
  justify-self: end;
  padding-right: 0.8rem;
}

.header__icons .shopify-app-block {
  max-width: 4.4rem;
  max-height: 4.4rem;
  overflow: hidden;
}

.header__icon:not(.header__icon--summary),
.header__icon span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__icon {
  color: rgb(var(--color-foreground));
}

.header__icon span {
  height: 100%;
}

.header__icon .svg-wrapper {
  width: 44px;
  height: 44px;
}

.header__icon::after {
  content: none;
}

.header__icon:hover .icon,
.modal__close-button:hover .icon {
  transform: scale(1.07);
}

.header__icon .icon {
  height: 2rem;
  width: 2rem;
  fill: none;
  vertical-align: middle;
}

.header__icon,
.header__icon--cart .icon {
  height: 4.4rem;
  width: 4.4rem;
  padding: 0;
}

.header__icon--cart {
  position: relative;
  margin-right: -1.2rem;
}

.header__icon--menu[aria-expanded='true']::before {
  content: '';
  top: 100%;
  left: 0;
  height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)));
  width: 100%;
  display: block;
  position: absolute;
  background: rgba(var(--color-foreground), 0.5);
}

.header__icon--account shop-user-avatar {
  --shop-avatar-size: 2.8rem;
}

details .header__icon-close {
  display: none;
}

details[open] .header__icon-close {
  display: inline-block;
}

account-icon {
  display: flex;
}

/* Search */
menu-drawer + .header__search {
  display: none;
}

.header > .header__search {
  grid-area: left-icons;
  justify-self: start;
}

.header--top-center.drawer-menu > .header__search {
  margin-left: 3.2rem;
}

.header--top-center header-drawer {
  grid-area: left-icons;
}

.header:not(.header--has-menu) * > .header__search {
  display: none;
}

.header__search {
  display: inline-flex;
  line-height: 0;
}

.header--top-center > .header__search {
  display: none;
}

.header--top-center * > .header__search {
  display: inline-flex;
}

@media screen and (min-width: 990px) {
  .header:not(.header--top-center) * > .header__search,
  .header--top-center > .header__search {
    display: inline-flex;
  }

  .header:not(.header--top-center) > .header__search,
  .header--top-center * > .header__search {
    display: none;
  }
}

details[open] > .search-modal {
  opacity: 1;
  animation: animateMenuOpen var(--duration-default) ease;
}

details[open] .modal-overlay {
  display: block;
}

details[open] .modal-overlay::after {
  position: absolute;
  content: '';
  background-color: rgb(var(--color-foreground), 0.5);
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
}

.search-modal {
  opacity: 0;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  min-height: calc(100% + var(--inputs-margin-offset) + (2 * var(--inputs-border-width)));
  height: 100%;
}

.search-modal__content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 5rem 0 1rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  position: relative;
}

.search-modal__content-bottom {
  bottom: calc((var(--inputs-margin-offset) / 2));
}

.search-modal__content-top {
  top: calc((var(--inputs-margin-offset) / 2));
}

.search-modal__form {
  width: 100%;
}

.search-modal__close-button {
  position: absolute;
  right: 0.3rem;
}

@media screen and (min-width: 750px) {
  .search-modal__close-button {
    right: 1rem;
  }

  .search-modal__content {
    padding: 0 6rem;
  }
}

@media screen and (min-width: 990px) {
  .search-modal__form {
    max-width: 74.2rem;
  }

  .search-modal__close-button {
    position: initial;
    margin-left: 0.5rem;
  }
}

/* Header menu drawer */
.header__icon--menu .icon {
  display: block;
  position: absolute;
  opacity: 1;
  transform: scale(1);
  transition: transform 150ms ease, opacity 150ms ease;
}

details:not([open]) > .header__icon--menu .icon-close,
details[open] > .header__icon--menu .icon-hamburger {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-close {
  visibility: hidden;
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-hamburger {
  visibility: visible;
  opacity: 1;
  transform: scale(1.07);
}

.js details > .header__submenu {
  opacity: 0;
  transform: translateY(-1.5rem);
}

details[open] > .header__submenu {
  animation: animateMenuOpen var(--duration-default) ease;
  animation-fill-mode: forwards;
  z-index: 1;
}

@media (prefers-reduced-motion) {
  details[open] > .header__submenu {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header menu */
.header__inline-menu {
  margin-left: -1.2rem;
  grid-area: navigation;
  display: none;
}

.header--top-center .header__inline-menu,
.header--top-center .header__heading-link {
  margin-left: 0;
}

@media screen and (min-width: 990px) {
  .header__inline-menu {
    display: block;
  }

  .header--top-center .header__inline-menu {
    justify-self: center;
  }

  .header--top-center .header__inline-menu > .list-menu--inline {
    justify-content: center;
  }

  .header--middle-left .header__inline-menu {
    margin-left: 0;
  }
}

.header__menu {
  padding: 0 1rem;
}

.header__menu-item {
  padding: 1.2rem;
  text-decoration: none;
  color: rgba(var(--color-foreground), 0.75);
}

.header__menu-item:hover {
  color: rgb(var(--color-foreground));
}

.header__menu-item span {
  transition: text-decoration var(--duration-short) ease;
}

.header__menu-item:hover span {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

details[open] > .header__menu-item {
  text-decoration: underline;
}

details[open]:hover > .header__menu-item {
  text-decoration-thickness: 0.2rem;
}

details[open] > .header__menu-item .icon-caret {
  transform: rotate(180deg);
}

.header__active-menu-item {
  transition: text-decoration-thickness var(--duration-short) ease;
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.header__menu-item:hover .header__active-menu-item {
  text-decoration-thickness: 0.2rem;
}

.header__submenu {
  transition: opacity var(--duration-default) ease, transform var(--duration-default) ease;
}

.global-settings-popup,
.header__submenu.global-settings-popup {
  border-radius: var(--popup-corner-radius);
  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
  border-style: solid;
  border-width: var(--popup-border-width);
  box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
    rgba(var(--color-shadow), var(--popup-shadow-opacity));
  z-index: -1;
}

.header__submenu.list-menu {
  padding: 1rem 0;
}

.header__submenu .header__submenu {
  background-color: rgba(var(--color-foreground), 0.03);
  padding: 1rem 0;
  margin: 1rem 0;
}

.header__submenu .header__menu-item:after {
  right: 2rem;
}

.header__submenu .header__menu-item {
  justify-content: space-between;
  padding: 0.8rem 2rem;
}

.header__submenu .header__menu-item:hover {
  text-decoration-line: underline;
}

.header__menu-item .icon-caret {
  right: 0.8rem;
}

.header__submenu .icon-caret {
  flex-shrink: 0;
  margin-left: 1rem;
  position: static;
}

header-menu > details,
details-disclosure > details {
  position: relative;
}

@keyframes animateMenuOpen {
  0% {
    opacity: 0;
    transform: translateY(-1.5rem);
  }

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

.overflow-hidden-mobile,
.overflow-hidden-tablet,
.overflow-hidden-desktop {
  overflow: hidden;
}

@media screen and (min-width: 750px) {
  .overflow-hidden-mobile {
    overflow: auto;
  }
}

@media screen and (min-width: 990px) {
  .overflow-hidden-tablet {
    overflow: auto;
  }
}

.badge {
  border: 1px solid transparent;
  border-radius: var(--badge-corner-radius);
  display: inline-block;
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  padding: 0.5rem 1.3rem 0.6rem 1.3rem;
  text-align: center;
  background-color: rgb(var(--color-badge-background));
  border-color: rgba(var(--color-badge-border), var(--alpha-badge-border));
  color: rgb(var(--color-badge-foreground));
  word-break: break-word;
}

.gradient {
  background: rgb(var(--color-background));
  background: var(--gradient-background);
  background-attachment: fixed;
}

@media screen and (forced-colors: active) {
  .icon {
    color: CanvasText;
    fill: CanvasText !important;
  }

  .icon-close-small path {
    stroke: CanvasText;
  }
}

.ratio {
  display: flex;
  position: relative;
  align-items: stretch;
}

.ratio::before {
  content: '';
  width: 0;
  height: 0;
  padding-bottom: var(--ratio-percent);
}

.content-container {
  border-radius: var(--text-boxes-radius);
  border: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
  position: relative;
}

.content-container:after {
  content: '';
  position: absolute;
  top: calc(var(--text-boxes-border-width) * -1);
  right: calc(var(--text-boxes-border-width) * -1);
  bottom: calc(var(--text-boxes-border-width) * -1);
  left: calc(var(--text-boxes-border-width) * -1);
  border-radius: var(--text-boxes-radius);
  box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset)
    var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
  z-index: -1;
}

.content-container--full-width:after {
  left: 0;
  right: 0;
  border-radius: 0;
}

@media screen and (max-width: 749px) {
  .content-container--full-width-mobile {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .content-container--full-width-mobile:after {
    display: none;
  }
}

.global-media-settings {
  position: relative;
  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
  border-radius: var(--media-radius);
  overflow: visible !important;
  background-color: rgb(var(--color-background));
}

.global-media-settings:after {
  content: '';
  position: absolute;
  top: calc(var(--media-border-width) * -1);
  right: calc(var(--media-border-width) * -1);
  bottom: calc(var(--media-border-width) * -1);
  left: calc(var(--media-border-width) * -1);
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
  z-index: -1;
  pointer-events: none;
}

.global-media-settings--no-shadow {
  overflow: hidden !important;
}

.global-media-settings--no-shadow:after {
  content: none;
}

.global-media-settings img,
.global-media-settings iframe,
.global-media-settings model-viewer,
.global-media-settings video,
.global-media-settings .placeholder-svg {
  border-radius: calc(var(--media-radius) - var(--media-border-width));
}

.content-container--full-width,
.global-media-settings--full-width,
.global-media-settings--full-width img,
.global-media-settings--full-width video,
.global-media-settings--full-width iframe,
.global-media-settings--full-width .placeholder-svg {
  border-radius: 0;
  border-left: none;
  border-right: none;
}

/* check for flexbox gap in older Safari versions */
@supports not (inset: 10px) {
  .grid {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
  }

  .grid__item {
    padding-left: var(--grid-mobile-horizontal-spacing);
    padding-bottom: var(--grid-mobile-vertical-spacing);
  }

  @media screen and (min-width: 750px) {
    .grid {
      margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
    }

    .grid__item {
      padding-left: var(--grid-desktop-horizontal-spacing);
      padding-bottom: var(--grid-desktop-vertical-spacing);
    }
  }

  .grid--gapless .grid__item {
    padding-left: 0;
    padding-bottom: 0;
  }

  @media screen and (min-width: 749px) {
    .grid--peek .grid__item {
      padding-left: var(--grid-mobile-horizontal-spacing);
    }
  }

  .product-grid .grid__item {
    padding-bottom: var(--grid-mobile-vertical-spacing);
  }

  @media screen and (min-width: 750px) {
    .product-grid .grid__item {
      padding-bottom: var(--grid-desktop-vertical-spacing);
    }
  }
}

.font-body-bold {
  font-weight: var(--font-body-weight-bold);
}

/* outline and border styling for Windows High Contrast Mode */
@media (forced-colors: active) {
  .button,
  .shopify-challenge__button,
  .customer button {
    border: transparent solid 1px;
  }

  .button:focus-visible,
  .button:focus,
  .button.focused,
  .shopify-payment-button__button--unbranded:focus-visible,
  .shopify-payment-button [role='button']:focus-visible,
  .shopify-payment-button__button--unbranded:focus,
  .shopify-payment-button [role='button']:focus {
    outline: solid transparent 1px;
  }

  .field__input:focus,
  .select__select:focus,
  .customer .field input:focus,
  .customer select:focus,
  .localization-form__select:focus.localization-form__select:after {
    outline: transparent solid 1px;
  }

  .localization-form__select:focus {
    outline: transparent solid 1px;
  }
}

.rte:after {
  clear: both;
  content: '';
  display: block;
}

.rte > *:first-child {
  margin-top: 0;
}

.rte > *:last-child {
  margin-bottom: 0;
}

.rte table {
  table-layout: fixed;
}

@media screen and (min-width: 750px) {
  .rte table td {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
}

.rte img {
  height: auto;
  max-width: 100%;
  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
  margin-bottom: var(--media-shadow-vertical-offset);
}

.rte ul,
.rte ol {
  list-style-position: inside;
  padding-left: 2rem;
}

.rte li {
  list-style: inherit;
}

.rte li:last-child {
  margin-bottom: 0;
}

.rte a {
  color: rgba(var(--color-link), var(--alpha-link));
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness var(--duration-short) ease;
}

.rte a:hover {
  color: rgb(var(--color-link));
  text-decoration-thickness: 0.2rem;
}

.rte blockquote {
  display: inline-flex;
}

.rte blockquote > * {
  margin: -0.5rem 0 -0.5rem 0;
}

/* Image mask global styles */

.shape--mask {
  display: block;
  height: 0;
  width: 0;
}

.shape--arch {
  clip-path: url('#Shape-Arch');
}

.shape--blob {
  clip-path: polygon(var(--shape--blob-1));
}

.shape--chevronleft {
  clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 15% 100%, 0% 50%, 15% 0%);
}

.shape--chevronright {
  clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 0% 100%, 15% 50%, 0% 0%);
}

.shape--circle {
  clip-path: circle(closest-side);
}

.shape--diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.shape--parallelogram {
  clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
}

.shape--round {
  clip-path: ellipse(45% 45% at 50% 50%);
}

/* Fixed background */
.animate--fixed {
  clip-path: inset(0);
}

.animate--fixed > img:not(.zoom):not(.deferred-media__poster-button),
.animate--fixed > svg:not(.zoom):not(.deferred-media__poster-button) {
  position: fixed;
  height: 100vh;
}

/* Zoom in image on scroll */
.animate--zoom-in {
  --zoom-in-ratio: 1;
}

.animate--zoom-in > img,
.animate--zoom-in > .svg-wrapper {
  transition: scale var(--duration-short) linear;
  scale: var(--zoom-in-ratio);
}

/* Animations */

@media (prefers-reduced-motion: no-preference) {
  .animate--ambient > img,
  .animate--ambient > .svg-wrapper {
    animation: animateAmbient 30s linear infinite;
  }

  @keyframes animateAmbient {
    0% {
      transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2);
    }
    100% {
      transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2);
    }
  }

  .scroll-trigger.animate--fade-in,
  .scroll-trigger.animate--slide-in {
    opacity: 0.01;
  }

  .scroll-trigger.animate--slide-in {
    transform: translateY(2rem);
  }

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--fade-in {
    opacity: 1;
    animation: var(--animation-fade-in);
  }

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
    animation: var(--animation-slide-in);
    animation-delay: calc(var(--animation-order) * 75ms);
  }

  .scroll-trigger.scroll-trigger--design-mode.animate--fade-in,
  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in,
  .scroll-trigger.scroll-trigger--design-mode .slider,
  .scroll-trigger:not(.scroll-trigger--offscreen).scroll-trigger--cancel {
    opacity: 1;
    animation: none;
    transition: none;
    transform: none;
  }

  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in {
    transform: translateY(0);
  }

  @keyframes slideIn {
    from {
      transform: translateY(2rem);
      opacity: 0.01;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0.01;
    }
    to {
      opacity: 1;
    }
  }
}

/* Element Hovers: Vertical Lift, 3d Lift */

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .animate--hover-3d-lift .card-wrapper .card--card,
  .animate--hover-3d-lift .card-wrapper .card--standard .card__inner,
  .animate--hover-3d-lift .button:not(.button--tertiary),
  .animate--hover-3d-lift .shopify-challenge__button,
  .animate--hover-3d-lift .customer button,
  .animate--hover-3d-lift .shopify-payment-button__button,
  .animate--hover-3d-lift .deferred-media .deferred-media__poster-button {
    transition: transform var(--duration-long) ease, box-shadow var(--duration-long) ease;
    transform-origin: center;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner,
  .animate--hover-3d-lift .button:not(.button--tertiary):not([disabled]):hover,
  .animate--hover-3d-lift .shopify-challenge__button:not([disabled]):hover,
  .animate--hover-3d-lift .customer button:not([disabled]):hover,
  .animate--hover-3d-lift .shopify-payment-button__button:hover,
  .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
    transition: transform var(--duration-extended) ease, box-shadow var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
    transform: rotate(1deg);
    box-shadow: -1rem -1rem 1rem -1rem rgba(0, 0, 0, 0.05), 1rem 1rem 1rem -1rem rgba(0, 0, 0, 0.05),
      0 0 0.5rem 0 rgba(255, 255, 255, 0), 0 2rem 3.5rem -2rem rgba(0, 0, 0, 0.5);
  }

  .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
    transform: translate(-50%, -50%) scale(1.05); /* Apply a specialized transform to the video play button. */
  }

  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--card,
  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--standard .card__inner {
    transform: rotate(0.5deg); /* Less intense rotation for collage items. */
  }

  .animate--hover-3d-lift .product-grid .grid__item:hover,
  .animate--hover-3d-lift .collection-list .grid__item:hover,
  .animate--hover-3d-lift .collage__item:hover,
  .animate--hover-3d-lift .blog-articles .article:hover,
  .animate--hover-3d-lift .complementary-slide li:hover {
    z-index: 2; /* Make sure the hovered card is the topmost card. */
  }

  .animate--hover-3d-lift .product-grid {
    isolation: isolate; /* Ensure z-index changes here don't negatively effect other UI stacking. */
  }

  .animate--hover-3d-lift .card-wrapper .card--shape.card--standard:not(.card--text) .card__inner {
    box-shadow: none;
    transition: transform var(--duration-long) ease, filter var(--duration-long) ease;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner {
    transition: transform calc(2 * var(--duration-extended)) ease, filter var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
    filter: drop-shadow(0rem 2rem 2rem rgba(0, 0, 0, 0.15)) drop-shadow(0rem 1rem 1rem rgba(0, 0, 0, 0.15));
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card:after,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner:after,
  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--shape.card--standard:not(.card--text)
    .card__inner
    .card__media:before {
    background-image: var(--easter-egg);
    background-size: 250px 250px;
    mix-blend-mode: color-dodge;
    pointer-events: none;
    z-index: 2;
  }

  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--shape.card--standard:not(.card--text)
    .card__inner
    .card__media:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .animate--hover-3d-lift .card-wrapper .card--card:before,
  .animate--hover-3d-lift .card-wrapper .card--standard .card__media:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: background-position calc(2 * var(--duration-extended)) ease, opacity var(--duration-default) ease;
    mix-blend-mode: overlay;
    background-size: 400% 100%;
    background-position: 90% 0;
    background-repeat: no-repeat;
    background-image: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0) 45%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0) 55%
    );
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card:before,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__media:after {
    opacity: 0.2;
    transition: background-position 6s ease, opacity var(--duration-long) ease;
    background-position: left;
    z-index: 2;
  }

  :root {
    --easter-egg: none;
    --sparkle: url('./sparkle.gif');
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary),
  .animate--hover-vertical-lift .shopify-challenge__button,
  .animate--hover-vertical-lift .customer button,
  .animate--hover-vertical-lift .shopify-payment-button__button {
    transition: transform var(--duration-default) var(--ease-out-slow);
  }

  .animate--hover-vertical-lift .card-wrapper .card--card,
  .animate--hover-vertical-lift .card-wrapper .card--standard .card__inner {
    transition: transform var(--duration-medium) var(--ease-out-slow);
  }

  .animate--hover-vertical-lift .card-wrapper:hover .card--card,
  .animate--hover-vertical-lift .card-wrapper:hover .card--standard .card__inner {
    transform: translateY(-0.75rem);
  }

  .animate--hover-vertical-lift .card-wrapper:active .card--card,
  .animate--hover-vertical-lift .card-wrapper:active .card--standard .card__inner {
    transform: translateY(-0.5rem);
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):hover,
  .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):hover,
  .animate--hover-vertical-lift .customer button:not([disabled]):hover,
  .animate--hover-vertical-lift .shopify-payment-button__button:hover {
    transform: translateY(-0.25rem);
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):active,
  .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):active,
  .animate--hover-vertical-lift .customer button:not([disabled]):active,
  .animate--hover-vertical-lift .shopify-payment-button__button:active {
    transform: translateY(0);
  }

  .animate--hover-vertical-lift .button:not([disabled]):hover:after,
  .animate--hover-vertical-lift .customer button:not([disabled]):hover:after,
  .animate--hover-vertical-lift .shopify-payment-button__button:not([disabled]):hover:after {
    --border-offset: 0.3px; /* Default is 1.3px as defined above in this file. This removes 1px to prevent the border from growing on buttons when this effect is on.  */
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
        rgba(var(--color-button-text), var(--border-opacity)),
      0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
  }

  .animate--hover-vertical-lift .button:not([disabled]).button--secondary:hover:after {
    --border-offset: 0px; /* Prevent the border from growing on buttons when this effect is on. */
  }
}

/* Loading spinner */
.loading__spinner {
  position: absolute;
  z-index: 1;
  width: 1.8rem;
}

.loading__spinner {
  width: 1.8rem;
  display: inline-block;
}

.spinner {
  animation: rotator 1.4s linear infinite;
}

@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}

.path {
  stroke-dasharray: 280;
  stroke-dashoffset: 0;
  transform-origin: center;
  stroke: rgb(var(--color-foreground));
  animation: dash 1.4s ease-in-out infinite;
}

@media screen and (forced-colors: active) {
  .path {
    stroke: CanvasText;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 280;
  }
  50% {
    stroke-dashoffset: 75;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 280;
    transform: rotate(450deg);
  }
}

.loading__spinner:not(.hidden) + .cart-item__price-wrapper,
.loading__spinner:not(.hidden) ~ cart-remove-button {
  opacity: 50%;
}

.loading__spinner:not(.hidden) ~ cart-remove-button {
  pointer-events: none;
  cursor: default;
}

/* Progress bar */
.progress-bar-container {
  width: 100%;
  margin: auto;
}

.progress-bar {
  height: 0.13rem;
  width: 100%;
}

.progress-bar-value {
  width: 100%;
  height: 100%;
  background-color: rgb(var(--color-foreground));
  animation: indeterminateAnimation var(--duration-extra-longer) infinite ease-in-out;
  transform-origin: 0;
}

.progress-bar .progress-bar-value {
  display: block;
}

@keyframes indeterminateAnimation {
  0% {
    transform: translateX(-20%) scaleX(0);
  }
  40% {
    transform: translateX(30%) scaleX(0.7);
  }
  100% {
    transform: translateX(100%) scaleX(0);
  }
}
/* Style bouton aperçu rapide */
.card__content .button {
  background:#1f1f1f!important;
  color:#fff!important;
  border:none!important;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:12px;
  /* 44px : cible tactile minimale */
  min-height:44px;
}

.card__content .button:hover{
  opacity:.9;
}

/* Remplace le texte */
.card__content .button span{
  font-size:0;
}

.card__content .button span:before{
  content:"Aperçu rapide";
  font-size:12px;
}


/* Swatches couleurs */

.card-swatches{
  display:flex;
  gap:8px;
  margin-top:12px;
  align-items:center;
}

.color-swatch,
a.color-swatch {
  width:16px;
  height:16px;
  border-radius:50%;
  border:1px solid #ddd;
  display:block;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
}

a.color-swatch:hover {
  transform: scale(1.25);
  transition: transform 0.15s ease;
  border-color: #111;
}

/* Card swatch: réutilise le CSS pill de la page produit */
a.card-swatch-link {
  display: inline-block;
  text-decoration: none;
  line-height: 0;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: none !important;
  border-radius: 50% !important;
  background: none !important;
  /* Etait overflow:hidden, pour arrondir le contenu. Mais la bulle qui donne le
     nom du coloris est un pseudo-element de ce lien : elle se retrouvait rognee
     dans un disque de 16 px, donc invisible. Le contenu est deja rond par son
     propre border-radius, ce rognage ne servait plus a rien. */
  overflow: visible;
}

a.card-swatch-link:hover {
  transform: scale(1.1);
  transition: transform 0.15s ease;
  background: none !important;
  border: none !important;
  outline: 2px solid #111;
  outline-offset: 2px;
  border-radius: 50% !important;
}

.card-swatch-pill {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

.card-swatch-pill input { display: none; }

/* ------------------------------------------------------------------
   Fiche produit
   ------------------------------------------------------------------ */

/* Meme coeur nu que sur les cartes, un peu plus grand pour tenir face a une
   photo pleine largeur. Pas de pastille blanche : coherent avec la grille.

   Le parent est .product-media-container (deja en position: relative cote Dawn),
   pas la colonne : Dawn centre la photo dans une colonne plus large, avec une
   marge laterale qui depend du format de l image. Accroche a la colonne, le coeur
   flottait dans le vide a droite de la photo, et le decalage aurait ete different
   pour chaque produit. */
.product-media-wishlist {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.product-media-wishlist:hover {
  transform: scale(1.1);
}

.product-media-wishlist__icon {
  color: rgb(var(--color-foreground));
  transition: color 0.2s ease, fill 0.2s ease;
}

.product-media-wishlist.is-active .product-media-wishlist__icon {
  fill: var(--wishlist-accent);
  color: var(--wishlist-accent);
}

.product-media-wishlist.is-added .product-media-wishlist__icon {
  animation: wishlist-pop 560ms cubic-bezier(0.33, 1, 0.68, 1);
}

@media (prefers-reduced-motion: reduce) {
  .product-media-wishlist.is-added .product-media-wishlist__icon {
    animation: none;
  }
}

/* Pastilles de coloris sur la fiche produit : memes pastilles que la grille,
   posees au-dessus du selecteur de taille avec le meme intitule que lui. */
/* L etiquette de survol est en absolu sous la rangee. Mesure faite dans le
   navigateur : elle descend 22px sous les pastilles, il faut donc reserver
   plus que ca, sinon elle recouvre le libelle « Taille » des qu on survole
   la premiere pastille (les suivantes sont decalees vers la droite et
   passaient a cote, ce qui masquait le probleme). */
/* Selecteur volontairement plus specifique que le ".product__info-container > * + *"
   de section-main-product.css, qui impose "margin: 1.5rem 0" a tous les blocs de la
   colonne — et qui gagnait, sa feuille se chargeant apres base.css. */
.product__info-container > .product-siblings {
  margin-bottom: 1.6rem; /* etait 4.8rem : l ecart avec « Taille » sautait aux yeux */
}

.product-siblings__label {
  margin-bottom: 0.6rem;
}

.card-swatches--product {
  margin-top: 0;
  gap: 10px;
}

.card-swatches--product .color-swatch {
  width: 22px;
  height: 22px;
}

/* Le coloris actuellement affiche par la carte */
a.color-swatch.is-current {
  outline: 1.5px solid #111;
  outline-offset: 2px;
}

.facet-checkbox .color-swatch {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  width: 20px;
  height: 20px;
}

.facet-checkbox input:checked + .color-swatch {
  outline: 2px solid #111;
  outline-offset: 2px;
}

.facet-checkbox:hover .color-swatch {
  transform: scale(1.15);
  transition: transform 0.15s ease;
}
.color-swatch[data-color="Ciel"]{
  background:#b9dff2!important;
}

.color-swatch[data-color="Sable"]{
  background:#d8c2a0!important;
}

.color-swatch[data-color="Chocolat"]{
  background:#6b3e2e!important;
}
.color-swatch[data-color="SAUGE"]{background:#A8B79E!important;}
.color-swatch[data-color="BLEU"]{background:#5B7DB1!important;}
.color-swatch[data-color="OLIVE"]{background:#6B704C!important;}
.color-swatch[data-color="BEIGE"]{background:#D8C2A0!important;}
.color-swatch[data-color="NOIR"]{background:#111!important;}
.color-swatch[data-color="CAMEL"]{background:#B88752!important;}
.color-swatch[data-color="KAKI"]{background:#6E7151!important;}
.color-swatch[data-color="CIEL"]{background:#B9DFF2!important;}
.color-swatch[data-color="ROSE"]{background:#E7A9B3!important;}
.color-swatch[data-color="ECRU"]{background:#F4EBDD!important;}
.color-swatch[data-color="DENIM"]{background:#35597F!important;}
.color-swatch[data-color="CHOCOLAT"]{background:#5B3924!important;}
.color-swatch[data-color="SABLE"]{background:#D4B48C!important;}
.color-swatch[data-color="CHAMBRAY"]{background:#8FA9C4!important;}
.color-swatch[data-color="GRIS"]{background:#9A9A9A!important;}
.color-swatch[data-color="BLANC"]{background:#FFFFFF!important;border:1px solid #ddd;}
.color-swatch[data-color="CHATAIGNE"]{background:#7B4A2E!important;}
.color-swatch[data-color="MARRON"]{background:#6B3E2E!important;}
.color-swatch[data-color="TAUPE"]{background:#8A7B70!important;}
.color-swatch[data-color="VERT"]{background:#4F7C59!important;}
.color-swatch[data-color="NAVY"]{background:#1D2B4F!important;}
.color-swatch[data-color="ORANGE"]{background:#E8873A!important;}
.color-swatch[data-color="JAUNE"]{background:#E7C94F!important;}
.color-swatch[data-color="TURQUOISE"]{background:#53C5C7!important;}
.color-swatch[data-color="ROUGE"]{background:#B63838!important;}
.color-swatch[data-color="CERISE"]{background:#A1263D!important;}
.color-swatch[data-color="PECHE"]{background:#F2B28D!important;}
.color-swatch[data-color="AQUA"]{background:#7ED6D1!important;}
.color-swatch[data-color="POUSSIN"]{background:#F3DD6D!important;}
.color-swatch[data-color="BONBON"]{background:#F48FB1!important;}
.color-swatch[data-color="ANIS"]{background:#B7D63D!important;}
.color-swatch[data-color="FICELLE"]{background:#C8B38B!important;}
.color-swatch[data-color="AMBRE"]{background:#C8872F!important;}
.color-swatch[data-color="NOISETTE"]{background:#A36A3C!important;}
.color-swatch[data-color="BRUT"]{background:#7A8AA0!important;}
.color-swatch[data-color="CARBONE"]{background:#3B3B3B!important;}
.color-swatch[data-color="CARBONNE"]{background:#3B3B3B!important;}
.color-swatch[data-color="FRAISE"]{background:#D94B70!important;}
.color-swatch[data-color="SAFRAN"]{background:#D89B2B!important;}
.color-swatch[data-color="FUSCHIA"]{background:#D63384!important;}
.color-swatch[data-color="FRAMBOISE"]{background:#C72C61!important;}
.color-swatch[data-color="CURRY"]{background:#B7852A!important;}
.color-swatch[data-color="EMERAUDE"]{background:#008A68!important;}
.color-swatch[data-color="VIOLET"]{background:#7B4FA3!important;}
.color-swatch[data-color="BYZANTIN"]{background:#7A3D8A!important;}
.color-swatch[data-color="CHAMPAGNE"]{background:#E5D0A2!important;}
.color-swatch[data-color="CACAO"]{background:#6A4128!important;}
.color-swatch[data-color="AZUR"]{background:#4FA3D9!important;}
.color-swatch[data-color="BEURRE"]{background:#F3E5A0!important;}
.color-swatch[data-color="BLEU ROI"]{background:#224D9C!important;}
.color-swatch[data-color="BLEU ELECTRIQUE"]{background:#0066FF!important;}
.color-swatch[data-color="BLEU TURQUIN"]{background:#4A6FA5!important;}
.color-swatch[data-color="DUSTY PINK"]{background:#D8A39D!important;}
.color-swatch[data-color="CHOCO"]{background:#5B3924!important;}


.color-swatch[data-color="CAJUN"],
.color-swatch[data-color="Cajun"] {
  background: #B5521B !important;
}

/* Motifs / imprimés */
.color-swatch[data-color="RAYURES BLEUES"]{
background:repeating-linear-gradient(90deg, #005BD3 0px, #005BD3 6px, #FFFFFF 6px, #FFFFFF 12px)!important;
}

.color-swatch[data-color="RAYURES ROSES"]{
background:repeating-linear-gradient(90deg, #FFC0CB 0px, #FFC0CB 6px, #FFFFFF 6px, #FFFFFF 12px)!important;
}

.swatch-rayures-ocres,
.color-swatch[data-color="RAYURES OCRES"],
.color-swatch[data-color="Rayures Ocres"] {
  background: repeating-linear-gradient(
    90deg,
    #C8872F 0px, #C8872F 3px,
    #D4A055 3px, #D4A055 4.5px,
    #F5EDD8 4.5px, #F5EDD8 8px,
    #B8742A 8px, #B8742A 10px,
    #F5EDD8 10px, #F5EDD8 14px
  ) !important;
}



.color-swatch[data-color="CARREAUX"],
.color-swatch[data-color="Carreaux"] {
  background:
    repeating-conic-gradient(
      #D4B87A 0% 25%,
      #F5EDD8 0% 50%
    ) 0 0/10px 10px,
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 4px,
      rgba(120, 40, 40, 0.4) 4px, rgba(120, 40, 40, 0.4) 6px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 4px,
      rgba(120, 40, 40, 0.4) 4px, rgba(120, 40, 40, 0.4) 6px
    ) !important;
}

.color-swatch[data-color="RAYURES ORANGES"]{
background:repeating-linear-gradient(90deg, #FFA500 0px, #FFA500 6px, #FFFFFF 6px, #FFFFFF 12px)!important;
}

.color-swatch[data-color="RAYURES NOIRES"]{
background:repeating-linear-gradient(90deg, #1A1A1A 0px, #1A1A1A 6px, #FFFFFF 6px, #FFFFFF 12px)!important;
}

.color-swatch[data-color="RAYURES TURQUOISES"]{
background:repeating-linear-gradient(
      90deg,
      #5AAEE0 0px, #5AAEE0 4px,
      #FFFFFF 4px, #FFFFFF 6px,
      #5AAEE0 6px, #5AAEE0 10px,
      #7EC4F0 10px, #7EC4F0 11px,
      #5AAEE0 11px, #5AAEE0 16px
    )!important;
}

.color-swatch[data-color="RAYURES GRISES"]{
background:repeating-linear-gradient(90deg, #9A9A9A 0px, #9A9A9A 6px, #FFFFFF 6px, #FFFFFF 12px)!important;
}

.color-swatch[data-color="RAYURES VIOLET"]{
background:repeating-linear-gradient(
45deg,
#7B4FA3 0 6px,
#fff 6px 12px)!important;
}

.color-swatch[data-color="CARREAUX BLEUS"]{
background:repeating-conic-gradient(#005BD3 0% 25%, #A7C2EB 0% 50%) 0 0/12px 12px!important;
background-size:12px 12px!important;
}

.color-swatch[data-color="CARREAUX ROSES"]{
background:repeating-conic-gradient(#FFC0CB 0% 25%, #FF8FA0 0% 50%) 0 0/12px 12px!important;
background-size:12px 12px!important;
}

.color-swatch[data-color="CARREAUX VERTS"]{
background:repeating-conic-gradient(#3BBF9C 0% 25%, #1A8060 0% 50%) 0 0/12px 12px!important;
background-size:12px 12px!important;
}

.color-swatch[data-color="CARREAUX BEIGES"]{
background:
linear-gradient(90deg,#D8C2A0 50%,#fff 50%),
linear-gradient(#D8C2A0 50%,#fff 50%)!important;
background-size:12px 12px!important;
}

.color-swatch[data-color="CARREAUX CHOCOLAT"]{
background:repeating-conic-gradient(#6B3E2E 0% 25%, #A07060 0% 50%) 0 0/12px 12px!important;
background-size:12px 12px!important;
}
.color-swatch[data-color="CHOCO"]{
background:
linear-gradient(90deg,#5B3924 50%,#fff 50%),
linear-gradient(#5B3924 50%,#fff 50%)!important;
background-size:12px 12px!important;
}
/* Doubles couleurs */
.color-swatch[data-color="ECRU ET CIEL"],
.color-swatch[data-color="ECRU & CIEL"]{
background:linear-gradient(90deg,#F4EBDD 50%,#B9DFF2 50%)!important;
}

.color-swatch[data-color="ECRU ET NOIR"],
.color-swatch[data-color="ECRU & NOIR"],
.color-swatch[data-color="NOIR ECRU"]{
background:repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 4px,
      rgba(30, 28, 26, 0.8) 4px, rgba(30, 28, 26, 0.8) 6px,
      transparent 6px, transparent 10px,
      rgba(30, 28, 26, 0.4) 10px, rgba(30, 28, 26, 0.4) 11px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 4px,
      rgba(30, 28, 26, 0.8) 4px, rgba(30, 28, 26, 0.8) 6px,
      transparent 6px, transparent 10px,
      rgba(30, 28, 26, 0.4) 10px, rgba(30, 28, 26, 0.4) 11px
    ),
    #F0EBE0!important;
}

/* Collections imprimées */
.color-swatch[data-color="RETRO BLOOM"]{
background:linear-gradient(45deg,#E7A9B3,#D8C2A0,#4F7C59)!important;
}

.color-swatch[data-color="HIPPIE TWIST"]{background:conic-gradient(#05783F,#3A4F9E,#C2417A,#F0A868,#05783F)!important;}

.color-swatch[data-color="IMAGINARY STREET"]{background:repeating-linear-gradient(90deg,#DC9E3D 0px,#DC9E3D 3px,#E8DCC0 3px,#E8DCC0 6px,#8C9FA0 6px,#8C9FA0 9px)!important;}

.color-swatch[data-color="ORIGINE"]{background:repeating-linear-gradient(45deg,#372C26 0px,#372C26 3px,#5A4A3C 3px,#5A4A3C 6px)!important;}

.color-swatch[data-color="SHINY"]{
background:linear-gradient(45deg,#ddd,#999)!important;
}

/* ── Retro Bloom swatch ── */
.swatch-retro-bloom,
.color-swatch[data-color="RETRO BLOOM"],
.color-swatch[data-color="Retro Bloom"],
.color-swatch[data-color="retro bloom"] {
  background:
    /* fleur 1 – centre gauche */
    radial-gradient(circle at 22% 38%, #D45A45 0%, #D45A45 14%, transparent 15%),
    radial-gradient(ellipse 30% 50% at 22% 22%, #F5C842 0%, #F5C842 100%),
    radial-gradient(ellipse 30% 50% at 22% 54%, #F5C842 0%, #F5C842 100%),
    radial-gradient(ellipse 50% 30% at 6%  38%, #F5C842 0%, #F5C842 100%),
    radial-gradient(ellipse 50% 30% at 38% 38%, #F5C842 0%, #F5C842 100%),
    /* fleur 2 – centre droit */
    radial-gradient(circle at 75% 65%, #D45A45 0%, #D45A45 14%, transparent 15%),
    radial-gradient(ellipse 30% 50% at 75% 50%, #F5C842 0%, #F5C842 100%),
    radial-gradient(ellipse 30% 50% at 75% 80%, #F5C842 0%, #F5C842 100%),
    radial-gradient(ellipse 50% 30% at 60% 65%, #F5C842 0%, #F5C842 100%),
    radial-gradient(ellipse 50% 30% at 90% 65%, #F5C842 0%, #F5C842 100%),
    /* taches olive (feuilles) */
    radial-gradient(ellipse 35% 55% at 55% 20%, #7A8A2A 0%, transparent 70%),
    radial-gradient(ellipse 30% 45% at 10% 80%, #7A8A2A 0%, transparent 70%),
    /* fond cobalt */
    #2F6BAD !important;
}

/* ── Mangue swatch ── */
.swatch-mangue,
.color-swatch[data-color="MANGUE"],
.color-swatch[data-color="Mangue"],
.color-swatch[data-color="mangue"] {
  background: #E8A820 !important;
}

/* ── Terracota swatch ── */
.swatch-terracota,
.color-swatch[data-color="TERRACOTA"],
.color-swatch[data-color="Terracota"],
.color-swatch[data-color="terracota"] {
  background: #C4703A !important;
}

/* ── Fuchsia swatch ── */
.swatch-fuchsia,
.color-swatch[data-color="FUCHSIA"],
.color-swatch[data-color="Fuchsia"],
.color-swatch[data-color="fuchsia"],
.color-swatch[data-color="FUSCHIA"],
.color-swatch[data-color="Fuschia"] {
  background: #C8284A !important;
}

/* ── Rayures Multico swatch ── */
.swatch-rayures-multico,
.color-swatch[data-color="RAYURES MULTICO"],
.color-swatch[data-color="Rayures Multico"],
.color-swatch[data-color="rayures multico"] {
  background:
    repeating-linear-gradient(
      180deg,
      #C8D8B0 0px,  #C8D8B0 11px,
      #D4C4A0 11px, #D4C4A0 19px,
      #A8C0CC 19px, #A8C0CC 32px,
      #C0D4A8 32px, #C0D4A8 41px,
      #D8C8B4 41px, #D8C8B4 53px,
      #B4CAD8 53px, #B4CAD8 61px,
      #C4D4A4 61px, #C4D4A4 76px
    ) !important;
}

/* ── Mousse swatch ── */
.swatch-mousse,
.color-swatch[data-color="MOUSSE"],
.color-swatch[data-color="Mousse"],
.color-swatch[data-color="mousse"] {
  background: #A8A820 !important;
}

/* ── Ivoire swatch ── */
.swatch-ivoire,
.color-swatch[data-color="IVOIRE"],
.color-swatch[data-color="Ivoire"],
.color-swatch[data-color="ivoire"] {
  background: #F0EAD6 !important;
}

/* ── Khaki swatch ── */
.swatch-khaki,
.color-swatch[data-color="KHAKI"],
.color-swatch[data-color="Khaki"],
.color-swatch[data-color="khaki"] {
  background: #5A5E48 !important;
}

.swatch-studio-54,
.color-swatch[data-color="STUDIO 54"],
.color-swatch[data-color="Studio 54"] {
  background:
    conic-gradient(
      from 0deg,
      #F6F0E6 0deg 60deg,
      #E97A4D 60deg 120deg,
      #B86B3C 120deg 180deg,
      #8A5ACB 180deg 240deg,
      #4A5CB8 240deg 300deg,
      #C7D88A 300deg 360deg
    ) !important;
}

.swatch-floral,
.color-swatch[data-color="FLORAL"],
.color-swatch[data-color="Floral"] {
  background:
    radial-gradient(ellipse 4px 5px at 25% 30%, #D4A8B8 0%, transparent 100%),
    radial-gradient(ellipse 3px 4px at 70% 20%, #B8CEC4 0%, transparent 100%),
    radial-gradient(ellipse 4px 5px at 50% 65%, #C9A0B4 0%, transparent 100%),
    radial-gradient(ellipse 3px 4px at 80% 70%, #D4B8C4 0%, transparent 100%),
    radial-gradient(ellipse 3px 4px at 15% 75%, #B8C8C0 0%, transparent 100%),
    radial-gradient(ellipse 2px 3px at 60% 45%, #E8C8A0 0%, transparent 100%),
    #F5EEE8 !important;
}

.color-swatch[data-color="CALIENTE CLUB"]{background:conic-gradient(#8DC8D8,#E3D6C8,#C24A3A,#E8C34A,#8DC8D8)!important;}

.color-swatch[data-color="SOLSTICE PASTEL"]{background:linear-gradient(135deg,#EDDCCF,#C67554,#A9BFCB)!important;}

.color-swatch[data-color="OASIS CHROMATIQUE"]{
background:conic-gradient(#13E2EC, #B2FC85, #FFE500, #FFA500, #13E2EC)!important;
}

.color-swatch[data-color="VICHY BLEU"]{
background:
linear-gradient(90deg,#B9DFF2 50%,#fff 50%),
linear-gradient(#B9DFF2 50%,#fff 50%)!important;
background-size:10px 10px!important;
}

.color-swatch[data-color="VICHY ROSE JAUNE"]{
background:repeating-conic-gradient(#FFC0CB 0% 25%, #FFE500 0% 50%) 0 0/12px 12px!important;
}
/* Couleurs personnalisées */

.color-swatch[data-color="ECRU"]{background:#F4EBDD!important;}
.color-swatch[data-color="KAKI"]{background:#6E7151!important;}
.color-swatch[data-color="CAMEL"]{background:#B88752!important;}
.color-swatch[data-color="SAUGE"]{background:#A8B79E!important;}
.color-swatch[data-color="CHOCOLAT"]{background:#5B3924!important;}
.color-swatch[data-color="CHOCO"]{background:#5B3924!important;}
.color-swatch[data-color="DENIM"]{background:#35597F!important;}
.color-swatch[data-color="BEIGE"]{background:#D8C2A0!important;}
.color-swatch[data-color="NOIR"]{background:#111!important;}
.color-swatch[data-color="ROSE"]{background:#E7A9B3!important;}
.color-swatch[data-color="BLEU"]{background:#5B7DB1!important;}
.color-swatch[data-color="OLIVE"]{background:#6B704C!important;}
.color-swatch[data-color="SABLE"]{background:#D4B48C!important;}
.color-swatch[data-color="CIEL"]{background:#B9DFF2!important;}
.color-swatch[data-color="BLANC"]{
  background:#fff!important;
  border:1px solid #ddd;
}
/* Swatches */

.card-swatches{
  display:flex;
  gap:8px;
  margin-top:10px;
}

.color-swatch{
  width:18px;
  height:18px;
  border-radius:50%;
  border:1px solid #d9d9d9;
  display:block;
  background:#eee!important;
}
/* Swatches */

.card-swatches{
  display:flex;
  gap:8px;
  margin-top:10px;
}

.color-swatch{
  width:18px;
  height:18px;
  border-radius:50%;
  border:1px solid #d9d9d9;
  display:block;
  background:#eee!important;
}

/* Couleurs */

.color-swatch[data-color="ECRU"]{background:#F4EBDD!important;}
.color-swatch[data-color="KAKI"]{background:#6E7151!important;}
.color-swatch[data-color="CAMEL"]{background:#B88752!important;}
.color-swatch[data-color="SAUGE"]{background:#A8B79E!important;}
.color-swatch[data-color="CHOCOLAT"]{background:#5B3924!important;}
.color-swatch[data-color="CHOCO"]{background:#5B3924!important;}
.color-swatch[data-color="DENIM"]{background:#35597F!important;}
.color-swatch[data-color="BEIGE"]{background:#D8C2A0!important;}
.color-swatch[data-color="NOIR"]{background:#111!important;}
.color-swatch[data-color="ROSE"]{background:#E7A9B3!important;}
.color-swatch[data-color="BLEU"]{background:#5B7DB1!important;}
.color-swatch[data-color="OLIVE"]{background:#6B704C!important;}
.color-swatch[data-color="SABLE"]{background:#D4B48C!important;}
.color-swatch[data-color="CIEL"]{background:#B9DFF2!important;}
.color-swatch[data-color="BLANC"]{
  background:#fff!important;
  border:1px solid #ccc;
}
/* Swatches */

.card-swatches{
  display:flex;
  gap:8px;
  margin-top:10px;
}

.color-swatch{
  width:18px;
  height:18px;
  border-radius:50%;
  border:1px solid #d9d9d9;
  display:block;
  background:#eee;
}

/* Couleurs */

.swatch-ecru{background:#F4EBDD!important;}
.swatch-kaki{background:#6E7151!important;}
.swatch-camel{background:#B88752!important;}
.swatch-sauge{background:#A8B79E!important;}
.swatch-chocolat{background:#5B3924!important;}
.swatch-choco{background:#5B3924!important;}
.swatch-denim{background:#476C9B!important;}
.swatch-beige{background:#D8C2A0!important;}
.swatch-noir{background:#111!important;}
.swatch-rose{background:#E7A9B3!important;}
.swatch-bleu{background:#5B7DB1!important;}
.swatch-olive{background:#6B704C!important;}
.swatch-sable{background:#D4B48C!important;}
.swatch-ciel{background:#B9DFF2!important;}
.swatch-blanc{
  background:#fff!important;
  border:1px solid #ccc;
}
/* Couleurs simples */

.swatch-ecru{background:#F4EBDD!important;}
.swatch-kaki{background:#6E7151!important;}
.swatch-camel{background:#B88752!important;}
.swatch-sauge{background:#A8B79E!important;}
.swatch-chocolat{background:#5B3924!important;}
.swatch-choco{background:#5B3924!important;}
.swatch-denim{background:#476C9B!important;}
.swatch-beige{background:#D8C2A0!important;}
.swatch-noir{background:#111!important;}
.swatch-rose{background:#E7A9B3!important;}
.swatch-bleu{background:#5B7DB1!important;}
.swatch-olive{background:#6B704C!important;}
.swatch-sable{background:#D4B48C!important;}
.swatch-ciel{background:#B9DFF2!important;}
.swatch-blanc{
  background:#fff!important;
  border:1px solid #ccc;
}

/* Variantes composées */

.swatch-bleu-roi{background:#224D9C!important;}
.swatch-bleu-electrique{background:#0066FF!important;}
.swatch-bleu-turquin{background:#4A6FA5!important;}
.swatch-vert{background:#4F7C59!important;}
.swatch-gris{background:#9A9A9A!important;}
.swatch-taupe{background:#8A7B70!important;}
.swatch-orange{background:#E8873A!important;}
.swatch-rouge{background:#B63838!important;}
.swatch-jaune{background:#E7C94F!important;}
.swatch-turquoise{background:#53C5C7!important;}
.swatch-aqua{background:#7ED6D1!important;}
.swatch-ambre{background:#C8872F!important;}
.swatch-fuchsia{background:#D63384!important;}
.swatch-framboise{background:#C72C61!important;}
.swatch-emeraude{background:#008A68!important;}
.swatch-violet{background:#7B4FA3!important;}
.swatch-navy{background:#1D2B4F!important;}
.swatch-cacao{background:#6A4128!important;}
.swatch-chataigne{background:#7B4A2E!important;}
.swatch-noisette{background:#A36A3C!important;}
.swatch-curry{background:#B7852A!important;}
.swatch-safran{background:#D89B2B!important;}
.swatch-champagne{background:#E5D0A2!important;}
.swatch-beurre{background:#F3E5A0!important;}

/* Rayures */

.swatch-rayures-bleues{
background:repeating-linear-gradient(
45deg,
#5B7DB1 0 6px,
#fff 6px 12px)!important;
}

.swatch-rayure-bleue{
background:repeating-linear-gradient(
45deg,
#5B7DB1 0 6px,
#fff 6px 12px)!important;
}

.swatch-rayures-roses{
background:repeating-linear-gradient(
45deg,
#E7A9B3 0 6px,
#fff 6px 12px)!important;
}

.swatch-rayures-oranges{
background:repeating-linear-gradient(
45deg,
#E8873A 0 6px,
#fff 6px 12px)!important;
}

.swatch-rayure-orange{
background:repeating-linear-gradient(
45deg,
#E8873A 0 6px,
#fff 6px 12px)!important;
}

.swatch-rayures-noires{
background:repeating-linear-gradient(
45deg,
#111 0 6px,
#fff 6px 12px)!important;
}

/* Doubles couleurs */

.swatch-ecru-ciel{
background:linear-gradient(
90deg,
#F4EBDD 50%,
#B9DFF2 50%)!important;
}

.swatch-ecru-noir{
background:linear-gradient(
90deg,
#F4EBDD 50%,
#111 50%)!important;
}
/* Variantes supplémentaires */

.swatch-azur{background:#4FA3D9!important;}
.swatch-beurre-e26{background:#F3E5A0!important;}
.swatch-rose-e26{background:#E7A9B3!important;}
.swatch-vert-e26{background:#4F7C59!important;}
.swatch-chocolat-e26{background:#5B3924!important;}
.swatch-choco-e26{background:#5B3924!important;}
.swatch-ecru-chine{background:#E8E0D4!important;}
.swatch-poussin{background:#F3DD6D!important;}
.swatch-bonbon{background:#F48FB1!important;}
.swatch-anis{background:#B7D63D!important;}
.swatch-vert-anis{background:#A8D84E!important;}
.swatch-ficelle{background:#C8B38B!important;}
.swatch-brut{background:#7A8AA0!important;}
.swatch-carbone{background:#3B3B3B!important;}
.swatch-carbonne{background:#3B3B3B!important;}
.swatch-fraise{background:#D94B70!important;}
.swatch-cerise{background:#A1263D!important;}
.swatch-peche{background:#F2B28D!important;}
.swatch-dusty-pink{background:#D8A39D!important;}
.swatch-byzantin{background:#7A3D8A!important;}
.swatch-caliente-club{
background:linear-gradient(45deg,#E8873A,#D94B70)!important;
}

.swatch-solstice-pastel{
background:linear-gradient(45deg,#F3E5A0,#B9DFF2,#E7A9B3)!important;
}

.swatch-oasis-chromatique{
background:linear-gradient(45deg,#53C5C7,#B7D63D,#4FA3D9)!important;
}

.swatch-retro-bloom{
background:linear-gradient(45deg,#E7A9B3,#D8C2A0,#4F7C59)!important;
}

.swatch-hippie-twist{
background:linear-gradient(45deg,#E8873A,#D63384,#53C5C7)!important;
}

.swatch-imaginary-street{
background:linear-gradient(45deg,#111,#5B7DB1,#999)!important;
}

.swatch-origine{
background:linear-gradient(45deg,#D8C2A0,#6B3E2E)!important;
}

.swatch-shiny,
.color-swatch[data-color="SHINY"],
.color-swatch[data-color="Shiny"] {
  background: repeating-linear-gradient(
    90deg,
    #E8873A 0px, #E8873A 3px,
    #8BBF5A 3px, #8BBF5A 6px
  ) !important;
}

/* Vichy */

.swatch-vichy-bleu{
background:
linear-gradient(90deg,#B9DFF2 50%,#fff 50%),
linear-gradient(#B9DFF2 50%,#fff 50%)!important;
background-size:10px 10px!important;
}

.swatch-vichy-cafe{
background:
linear-gradient(90deg,#8B5A3C 50%,#fff 50%),
linear-gradient(#8B5A3C 50%,#fff 50%)!important;
background-size:10px 10px!important;
}

.swatch-vichy-rose-jaune{
background:linear-gradient(90deg,#E7A9B3 50%,#F3DD6D 50%)!important;
}

/* Carreaux */

.swatch-carreaux-beiges{
background:
linear-gradient(90deg,#D8C2A0 50%,#fff 50%),
linear-gradient(#D8C2A0 50%,#fff 50%)!important;
background-size:12px 12px!important;
}

.swatch-carreaux-bleus{
background:
linear-gradient(90deg,#5B7DB1 50%,#fff 50%),
linear-gradient(#5B7DB1 50%,#fff 50%)!important;
background-size:12px 12px!important;
}

.swatch-carreaux-roses{
background:
linear-gradient(90deg,#E7A9B3 50%,#fff 50%),
linear-gradient(#E7A9B3 50%,#fff 50%)!important;
background-size:12px 12px!important;
}

.swatch-carreaux-verts{
background:
linear-gradient(90deg,#4F7C59 50%,#fff 50%),
linear-gradient(#4F7C59 50%,#fff 50%)!important;
background-size:12px 12px!important;
}

.swatch-carreaux-chocolat{
background:
linear-gradient(90deg,#5B3924 50%,#fff 50%),
linear-gradient(#5B3924 50%,#fff 50%)!important;
background-size:12px 12px!important;
}

.swatch-carreaux-oranges,
.color-swatch[data-color="CARREAUX ORANGES"],
.color-swatch[data-color="Carreaux Oranges"] {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 4px,
      rgba(210, 80, 40, 0.5) 4px, rgba(210, 80, 40, 0.5) 6px,
      transparent 6px, transparent 9px,
      rgba(180, 50, 20, 0.3) 9px, rgba(180, 50, 20, 0.3) 10px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 4px,
      rgba(210, 80, 40, 0.5) 4px, rgba(210, 80, 40, 0.5) 6px,
      transparent 6px, transparent 9px,
      rgba(180, 50, 20, 0.3) 9px, rgba(180, 50, 20, 0.3) 10px
    ),
    #E8936A !important;
}

.swatch-carnet-de-riviera,
.color-swatch[data-color="CARNET DE RIVIERA"],
.color-swatch[data-color="Carnet de Riviera"] {
  background:
    radial-gradient(ellipse 4px 5px at 20% 25%, #00B4C8 0%, transparent 100%),
    radial-gradient(ellipse 3px 4px at 70% 15%, #E8D94A 0%, transparent 100%),
    radial-gradient(ellipse 4px 4px at 45% 55%, #5BC85A 0%, transparent 100%),
    radial-gradient(ellipse 3px 4px at 15% 70%, #E83A2A 0%, transparent 100%),
    radial-gradient(ellipse 4px 3px at 80% 65%, #00B4C8 0%, transparent 100%),
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 7px,
      rgba(0, 180, 200, 0.3) 7px, rgba(0, 180, 200, 0.3) 8px,
      transparent 8px, transparent 13px,
      rgba(91, 200, 90, 0.3) 13px, rgba(91, 200, 90, 0.3) 14px
    ),
    #F5F0DC !important;
}

.swatch-dune-de-silva,
.color-swatch[data-color="DUNE DE SILVA"],
.color-swatch[data-color="Dune De Silva"] {
  background:
    /* Palmiers bruns */
    radial-gradient(ellipse 5px 3px at 25% 35%, #6B4A2E 0%, transparent 100%),
    radial-gradient(ellipse 4px 2px at 20% 30%, #6B4A2E 0%, transparent 100%),
    radial-gradient(ellipse 4px 2px at 30% 30%, #6B4A2E 0%, transparent 100%),
    radial-gradient(ellipse 1px 6px at 25% 42%, #3B2A1A 0%, transparent 100%),

    radial-gradient(ellipse 5px 3px at 70% 65%, #6B4A2E 0%, transparent 100%),
    radial-gradient(ellipse 4px 2px at 65% 60%, #6B4A2E 0%, transparent 100%),
    radial-gradient(ellipse 4px 2px at 75% 60%, #6B4A2E 0%, transparent 100%),
    radial-gradient(ellipse 1px 6px at 70% 72%, #3B2A1A 0%, transparent 100%),

    radial-gradient(ellipse 4px 2px at 50% 15%, #6B4A2E 0%, transparent 100%),
    radial-gradient(ellipse 1px 5px at 50% 22%, #3B2A1A 0%, transparent 100%),

    #F5EDE0 !important;
}

.swatch-rayures-roses,
.color-swatch[data-color="RAYURES ROSES"],
.color-swatch[data-color="Rayures Roses"] {
  background: repeating-linear-gradient(
    90deg,
    #F2A8C0 0px, #F2A8C0 3px,
    #F9D0E0 3px, #F9D0E0 7px
  ) !important;
}

.swatch-rayure-rose,
.color-swatch[data-color="RAYURE ROSE"],
.color-swatch[data-color="Rayure Rose"] {
  background: repeating-linear-gradient(
    90deg,
    #F2A8C0 0px, #F2A8C0 3px,
    #F9D0E0 3px, #F9D0E0 7px
  ) !important;
}

/* Rayures supplémentaires */

.swatch-rayures-grises{
background:repeating-linear-gradient(
45deg,
#999 0 6px,
#fff 6px 12px)!important;
}

.swatch-rayures-turquoises{
background:repeating-linear-gradient(
45deg,
#53C5C7 0 6px,
#fff 6px 12px)!important;
}

.swatch-rayures-violet{
background:repeating-linear-gradient(
45deg,
#7B4FA3 0 6px,
#fff 6px 12px)!important;
}

.swatch-rayure-violet{
background:repeating-linear-gradient(
45deg,
#7B4FA3 0 6px,
#fff 6px 12px)!important;
}
/* Patchwork */

.swatch-patchwork{
background:linear-gradient(
45deg,
#E7A9B3,
#D8C2A0,
#5B7DB1,
#4F7C59)!important;
}

/* Noir Écru */

.swatch-noir-ecru{
background:linear-gradient(
90deg,
#111 50%,
#F4EBDD 50%)!important;
}

/* Noir */

.swatch-noir{
background:#111!important;
}

/* Rayonne */

.swatch-rayonne{
background:linear-gradient(
45deg,
#D8C2A0,
#F4EBDD)!important;
}

/* Rayure Oranges */

.swatch-rayure-oranges,
.swatch-rayures-oranges{
background:repeating-linear-gradient(
45deg,
#E8873A 0 6px,
#fff 6px 12px)!important;
}
.swatch-noir-rayonne{
background:#111!important;
}
.swatch-jardin-nomade{
background:linear-gradient(
45deg,
#6E8B5B,
#C9B458,
#4F7C74,
#D08A4E,
#B8C97A,
#6A7FB8
)!important;
}
.swatch-patchwork-andalou{
background:linear-gradient(
45deg,
#E7B3C8,
#D8C95F,
#9FCF9A,
#7EC7D8,
#B97AC9,
#E6A34D
)!important;
}
.swatch-ecru-brode{
background:linear-gradient(
45deg,
#F4EBDD,
#E8DDC8,
#D8C2A0
)!important;
}
.swatch-boho-medina{
background:linear-gradient(
45deg,
#D1B15C,
#8A5B3E,
#A7B77A,
#E9E1D2,
#6F8C6B
)!important;
}
.swatch-choco{
background:#5B3924!important;
}
.swatch-leopard{
background:linear-gradient(
45deg,
#D2A56D,
#8B5A3C,
#111,
#C98B4A,
#6B3E2E
)!important;
}
.swatch-soleil-deze{
background:linear-gradient(
45deg,
#E2C15B,
#F08C4A,
#6E8B5B,
#4F7C74,
#E8E0CF
)!important;
}
/* Orfeo — pastilles couleur Couleur */
.product-form__input--pill input[value="Chocolat"] + label {
  background-color: #6B3E2E !important;
  color: transparent !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: none !important;
}
.product-form__input--pill input[value="Denim"] + label {
  background-color: #476C9B !important;
  color: transparent !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: none !important;
}
.product-form__input--pill input[value="Gris"] + label {
  background-color: #9A9A9A !important;
  color: transparent !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: none !important;
}
.product-form__input--pill input[value="Chocolat"]:checked + label,
.product-form__input--pill input[value="Denim"]:checked + label,
.product-form__input--pill input[value="Gris"]:checked + label {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
}
.product-form__input--pill input[value="Choco"] + label {
  background-color: #6B3E2E !important;
  color: transparent !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: none !important;
}
/* ===================================================
   Orfeo — Pastilles couleur (toutes variantes)
   À ajouter dans base.css
   =================================================== */

/* ---- Macro helper : tous les coloris partagent le même style de pastille ---- */
.product-form__input--pill input[type="radio"] + label {
  /* les overrides spécifiques ci-dessous écrasent uniquement les coloris couleur */
}

/* ---- Mixin réutilisable : appliqué à chaque sélecteur ---- */
/* (répété par coloris pour compatibilité max avec Shopify Dawn) */

/* BEIGE */
.product-form__input--pill input[value="Beige"] + label,
.product-form__input--pill input[value="BEIGE"] + label {
  background-color: #DCC78F !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* BLEU */
.product-form__input--pill input[value="Bleu"] + label,
.product-form__input--pill input[value="BLEU"] + label {
  background-color: #2762B0 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* GRIS */
.product-form__input--pill input[value="Gris"] + label,
.product-form__input--pill input[value="GRIS"] + label {
  background-color: #9A9A9A !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* NOIR */
.product-form__input--pill input[value="Noir"] + label,
.product-form__input--pill input[value="NOIR"] + label {
  background-color: #1A1A1A !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* JAUNE */
.product-form__input--pill input[value="Jaune"] + label,
.product-form__input--pill input[value="JAUNE"] + label {
  background-color: #FFE500 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* KAKI */
.product-form__input--pill input[value="Khaki"] + label,
.product-form__input--pill input[value="KHAKI"] + label,
.product-form__input--pill input[value="Kaki"] + label,
.product-form__input--pill input[value="KAKI"] + label {
  background-color: #4A7866 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* PATCHWORK */
.product-form__input--pill input[value="Patchwork"] + label,
.product-form__input--pill input[value="PATCHWORK"] + label {
  background:
    /* Formes géométriques colorées */
    linear-gradient(135deg, #FF6B35 0%, #FF6B35 25%, #7BC67E 25%, #7BC67E 50%, #F7D94C 50%, #F7D94C 75%, #5BC8D4 75%, #5BC8D4 100%),
    radial-gradient(ellipse 8px 10px at 20% 30%, #FF85A1 0%, transparent 100%),
    radial-gradient(ellipse 6px 8px at 75% 20%, #1A1A1A 0%, transparent 100%),
    radial-gradient(ellipse 9px 6px at 50% 65%, #FF6B35 0%, transparent 100%),
    radial-gradient(ellipse 7px 9px at 80% 75%, #7BC67E 0%, transparent 100%),
    radial-gradient(ellipse 5px 7px at 30% 80%, #F7D94C 0%, transparent 100%) !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* LÉOPARD / LEOPARD */
.product-form__input--pill input[value="Léopard"] + label,
.product-form__input--pill input[value="Leopard"] + label {
  background-color: #B76C10 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* MARINE */
.product-form__input--pill input[value="Marine"] + label,
.product-form__input--pill input[value="MARINE"] + label {
  background-color: #282099 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* MARRON */
.product-form__input--pill input[value="Marron"] + label,
.product-form__input--pill input[value="MARRON"] + label {
  background-color: #6A4E23 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* MULTICOLORE / MULTICOLORED */
.product-form__input--pill input[value="Multicolore"] + label,
.product-form__input--pill input[value="Multicolored"] + label {
  background: conic-gradient(#FF0000, #FF7700, #FFFF00, #00AA00, #0000FF, #8B00FF, #FF0000) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* ORANGE */
.product-form__input--pill input[value="Orange"] + label,
.product-form__input--pill input[value="ORANGE"] + label {
  background-color: #FFA500 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* ROSE */
.product-form__input--pill input[value="Rose"] + label,
.product-form__input--pill input[value="ROSE"] + label {
  background-color: #FFC0CB !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CARREAUX */
.product-form__input--pill input[value="Carreaux"] + label,
.product-form__input--pill input[value="CARREAUX"] + label {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 6px,
      rgba(160, 120, 80, 0.5) 6px, rgba(160, 120, 80, 0.5) 10px,
      transparent 10px, transparent 14px,
      rgba(180, 160, 60, 0.4) 14px, rgba(180, 160, 60, 0.4) 18px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 6px,
      rgba(160, 120, 80, 0.5) 6px, rgba(160, 120, 80, 0.5) 10px,
      transparent 10px, transparent 14px,
      rgba(180, 160, 60, 0.4) 14px, rgba(180, 160, 60, 0.4) 18px
    ),
    #D8C8A8 !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* ROUGE */
.product-form__input--pill input[value="Rouge"] + label,
.product-form__input--pill input[value="ROUGE"] + label {
  background-color: #FF0000 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* VERT */
.product-form__input--pill input[value="Vert"] + label,
.product-form__input--pill input[value="VERT"] + label {
  background-color: #05AA3D !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* VIOLET */
.product-form__input--pill input[value="Violet"] + label,
.product-form__input--pill input[value="VIOLET"] + label {
  background-color: #800080 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* HORIZON */
.product-form__input--pill input[value="Horizon"] + label {
  background-color: #6087C2 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* BLEU CIEL / CIEL */
.product-form__input--pill input[value="Bleu ciel"] + label,
.product-form__input--pill input[value="Ciel"] + label,
.product-form__input--pill input[value="CIEL"] + label {
  background-color: #A7C2EB !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* BLANC */
.product-form__input--pill input[value="Blanc"] + label,
.product-form__input--pill input[value="BLANC"] + label {
  background-color: #FFFFFF !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important;
  border: 1px solid #CCCCCC !important;
}

/* DENIM */
.product-form__input--pill input[value="Denim"] + label,
.product-form__input--pill input[value="DENIM"] + label {
  background-color: #476C9B !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CHOCOLAT */
.product-form__input--pill input[value="Chocolat"] + label,
.product-form__input--pill input[value="CHOCOLAT"] + label {
  background-color: #6B3E2E !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CHOCO */
.product-form__input--pill input[value="Choco"] + label,
.product-form__input--pill input[value="CHOCO"] + label {
  background-color: #6B3E2E !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* FRAMBOISE */
.product-form__input--pill input[value="Framboise"] + label,
.product-form__input--pill input[value="FRAMBOISE"] + label {
  background-color: #DB4059 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* DENIM VIOLINE */
.product-form__input--pill input[value="Denim Violine"] + label {
  background-color: #5B2F5F !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* ANIS / VERT ANIS */
.product-form__input--pill input[value="Anis"] + label,
.product-form__input--pill input[value="ANIS"] + label,
.product-form__input--pill input[value="Vert Anis"] + label,
.product-form__input--pill input[value="VERT ANIS"] + label {
  background-color: #B2FC85 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* BALLE DE CITRON */
.product-form__input--pill input[value="Balle de citron"] + label {
  background-color: #2A85DF !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* BEIGE ET CHOCOLAT */
.product-form__input--pill input[value="Beige et Chocolat"] + label {
  background: linear-gradient(135deg, #EAD8AB 50%, #6B3E2E 50%) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* BEIGE MIX */
.product-form__input--pill input[value="Beige mix"] + label {
  background-color: #EAD8AB !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* BLACK DENIM */
.product-form__input--pill input[value="Black Denim"] + label {
  background-color: #0A0A0A !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* BLANC ET NAVY */
.product-form__input--pill input[value="Blanc et Navy"] + label {
  background: linear-gradient(135deg, #FFFFFF 50%, #000080 50%) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important;
  border: 1px solid #CCCCCC !important;
}

/* BLEU ET IVOIRE */
.product-form__input--pill input[value="Bleu et Ivoire"] + label {
  background: linear-gradient(135deg, #005BD3 50%, #FFFFD4 50%) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* BLEU ROI */
.product-form__input--pill input[value="Bleu Roi"] + label,
.product-form__input--pill input[value="BLEU ROI"] + label,
.product-form__input--pill input[value="BLEUR ROI"] + label {
  background-color: #4169E1 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* BORDEAUX */
.product-form__input--pill input[value="Bordeaux"] + label {
  background-color: #BA2424 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* BRIQUE */
.product-form__input--pill input[value="Brique"] + label {
  background-color: #C04028 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* BRUN ET ECRU */
.product-form__input--pill input[value="Brun et Ecru"] + label {
  background: linear-gradient(135deg, #A5772A 50%, #F1F3E7 50%) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* BUBBLE */
.product-form__input--pill input[value="Bubble"] + label {
  background-color: #E18ED3 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* BURGUNDY */
.product-form__input--pill input[value="Burgundy"] + label {
  background-color: #810F22 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CAMAIEU BLEU */
.product-form__input--pill input[value="Camaieu bleu"] + label {
  background: linear-gradient(135deg, #A7C2EB 33%, #2762B0 33% 66%, #0A1F5C 66%) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CAMEL */
.product-form__input--pill input[value="Camel"] + label,
.product-form__input--pill input[value="CAMEL"] + label {
  background-color: #DFA511 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CAMOUFLAGE */
.product-form__input--pill input[value="Camouflage"] + label {
  background-color: #2F7041 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CANARD */
.product-form__input--pill input[value="Canard"] + label {
  background-color: #4ABA9A !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CAPPUCCINO */
.product-form__input--pill input[value="Cappuccino"] + label {
  background-color: #CC952E !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CARBONE / CARBONNE */
.product-form__input--pill input[value="Carbone"] + label,
.product-form__input--pill input[value="CARBONE"] + label,
.product-form__input--pill input[value="Carbonne"] + label,
.product-form__input--pill input[value="CARBONNE"] + label {
  background-color: #2B353E !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CARREAUX BEIGES */
.product-form__input--pill input[value="Carreaux beiges"] + label,
.product-form__input--pill input[value="CARREAUX BEIGES"] + label {
  background: repeating-conic-gradient(#EAD8AB 0% 25%, #D4BC8A 0% 50%) 0 0/12px 12px !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CARREAUX BLEUS */
.product-form__input--pill input[value="Carreaux bleus"] + label,
.product-form__input--pill input[value="CARREAUX BLEUS"] + label {
  background: repeating-conic-gradient(#005BD3 0% 25%, #A7C2EB 0% 50%) 0 0/12px 12px !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CARREAUX BRUNS */
.product-form__input--pill input[value="Carreaux bruns"] + label {
  background: repeating-conic-gradient(#AE8A17 0% 25%, #D4B87A 0% 50%) 0 0/12px 12px !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CARREAUX CHOCOLAT */
.product-form__input--pill input[value="Carreaux Chocolat"] + label,
.product-form__input--pill input[value="CARREAUX CHOCOLAT"] + label {
  background: repeating-conic-gradient(#6B3E2E 0% 25%, #A07060 0% 50%) 0 0/12px 12px !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CARREAUX CHOCOLATS ET VERTS */
.product-form__input--pill input[value="Carreaux Chocolats et Verts"] + label {
  background: repeating-conic-gradient(#6B3E2E 0% 25%, #05AA3D 0% 50%) 0 0/12px 12px !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CARREAUX CHOCOLAT ET NOIR */
.product-form__input--pill input[value="Carreaux chocolat et noir"] + label {
  background: repeating-conic-gradient(#6B3E2E 0% 25%, #1A1A1A 0% 50%) 0 0/12px 12px !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CARREAUX FUCHSIA */
.product-form__input--pill input[value="Carreaux fuchsia"] + label {
  background: repeating-conic-gradient(#F1508B 0% 25%, #FBBAD4 0% 50%) 0 0/12px 12px !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CARREAUX JAUNES ET CHOCOLATS */
.product-form__input--pill input[value="Carreaux Jaunes et Chocolats"] + label {
  background: repeating-conic-gradient(#FFE500 0% 25%, #6B3E2E 0% 50%) 0 0/12px 12px !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CARREAUX JAUNES ET BLEUS */
.product-form__input--pill input[value="Carreaux Jaunes et Bleus"] + label {
  background: repeating-conic-gradient(#FFE500 0% 25%, #2762B0 0% 50%) 0 0/12px 12px !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CARREAUX JAUNE ET CIEL */
.product-form__input--pill input[value="Carreaux Jaune et Ciel"] + label {
  background: repeating-conic-gradient(#FFE500 0% 25%, #A7C2EB 0% 50%) 0 0/12px 12px !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CARREAUX MARINE */
.product-form__input--pill input[value="Carreaux Marine"] + label {
  background: repeating-conic-gradient(#282099 0% 25%, #6070CC 0% 50%) 0 0/12px 12px !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CARREAUX MOUTARDE */
.product-form__input--pill input[value="Carreaux moutarde"] + label {
  background: repeating-conic-gradient(#E1DC47 0% 25%, #BFB520 0% 50%) 0 0/12px 12px !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CARREAUX ROSES */
.product-form__input--pill input[value="Carreaux roses"] + label,
.product-form__input--pill input[value="CARREAUX ROSES"] + label,
.product-form__input--pill input[value="Carreaux Roses"] + label {
  background: repeating-conic-gradient(#FFC0CB 0% 25%, #FF8FA0 0% 50%) 0 0/12px 12px !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CARREAUX VERTS */
.product-form__input--pill input[value="Carreaux Verts"] + label,
.product-form__input--pill input[value="CARREAUX VERTS"] + label {
  background: repeating-conic-gradient(#3BBF9C 0% 25%, #1A8060 0% 50%) 0 0/12px 12px !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CARREAUX VERTS ET VIOLET */
.product-form__input--pill input[value="Carreaux verts et violet"] + label {
  background: repeating-conic-gradient(#79A4A4 0% 25%, #800080 0% 50%) 0 0/12px 12px !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CERISE */
.product-form__input--pill input[value="Cerise"] + label,
.product-form__input--pill input[value="CERISE"] + label {
  background-color: #CC2424 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CHAMBRAY */
.product-form__input--pill input[value="Chambray"] + label,
.product-form__input--pill input[value="CHAMBRAY"] + label {
  background-color: #388CD6 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* COWBOY */
.product-form__input--pill input[value="cowboy"] + label {
  background-color: #B47E50 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* ECRU CHINÉ / ECRU CHINE */
.product-form__input--pill input[value="Ecru Chiné"] + label,
.product-form__input--pill input[value="ECRU CHINE"] + label,
.product-form__input--pill input[value="Ecru chiné"] + label {
  background-color: #FEFEE0 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important;
  border: 1px solid #CCCCCC !important;
}

/* ECRU ET NOISETTE */
.product-form__input--pill input[value="Ecru et Noisette"] + label {
  background: linear-gradient(135deg, #FEFEE0 50%, #A15E5E 50%) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* ECRU */
.product-form__input--pill input[value="Ecru"] + label,
.product-form__input--pill input[value="ECRU"] + label {
  background-color: #F7F4E8 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important;
  border: 1px solid #CCCCCC !important;
}

/* ECRU ET CIEL / ECRU & CIEL */
.product-form__input--pill input[value="Ecru et Ciel"] + label,
.product-form__input--pill input[value="ECRU ET CIEL"] + label,
.product-form__input--pill input[value="Ecru & Ciel"] + label,
.product-form__input--pill input[value="ECRU & CIEL"] + label {
  background: linear-gradient(135deg, #F7F4E8 50%, #A7C2EB 50%) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* ECRU ET NOIR / ECRU & NOIR */
.product-form__input--pill input[value="Ecru et Noir"] + label,
.product-form__input--pill input[value="ECRU ET NOIR"] + label,
.product-form__input--pill input[value="Ecru & Noir"] + label,
.product-form__input--pill input[value="ECRU & NOIR"] + label,
.product-form__input--pill input[value="NOIR ECRU"] + label {
  background: linear-gradient(135deg, #F7F4E8 50%, #1A1A1A 50%) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* EMERAUDE */
.product-form__input--pill input[value="Emeraude"] + label,
.product-form__input--pill input[value="EMERAUDE"] + label {
  background-color: #53B29B !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* EPICEA */
.product-form__input--pill input[value="Epicea"] + label {
  background-color: #C8E0CC !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* FUCHSIA / FUSCHIA */
.product-form__input--pill input[value="Fuchsia"] + label,
.product-form__input--pill input[value="FUCHSIA"] + label,
.product-form__input--pill input[value="Fuschia"] + label,
.product-form__input--pill input[value="FUSCHIA"] + label {
  background-color: #FF00FF !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* GAZON */
.product-form__input--pill input[value="Gazon"] + label {
  background-color: #35D663 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* GREIGE */
.product-form__input--pill input[value="Greige"] + label {
  background-color: #BBAE98 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* GRIS CADET / GRIS CHINÉ */
.product-form__input--pill input[value="Gris cadet"] + label,
.product-form__input--pill input[value="gris chiné"] + label,
.product-form__input--pill input[value="GRIS MULTICO"] + label {
  background-color: #9A9A9A !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* IVOIRE */
.product-form__input--pill input[value="Ivoire"] + label {
  background-color: #FFFFD4 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important;
  border: 1px solid #CCCCCC !important;
}

/* LICHE / LICHEN */
.product-form__input--pill input[value="Liche"] + label,
.product-form__input--pill input[value="Lichen"] + label {
  background-color: #8FB474 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* MALLOW */
.product-form__input--pill input[value="Mallow"] + label {
  background-color: #E74659 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* MARINE FONCÉ */
.product-form__input--pill input[value="Marine foncé"] + label {
  background-color: #171F64 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* NAVY */
.product-form__input--pill input[value="Navy"] + label,
.product-form__input--pill input[value="NAVY"] + label {
  background-color: #282099 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* OLIVE */
.product-form__input--pill input[value="Olive"] + label,
.product-form__input--pill input[value="OLIVE"] + label {
  background-color: #808000 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* PERLE */
.product-form__input--pill input[value="Perle"] + label {
  background-color: #CECECE !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* SABLE */
.product-form__input--pill input[value="sable"] + label,
.product-form__input--pill input[value="Sable"] + label,
.product-form__input--pill input[value="SABLE"] + label {
  background-color: #DABF5D !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* SAUGE */
.product-form__input--pill input[value="Sauge"] + label,
.product-form__input--pill input[value="SAUGE"] + label {
  background-color: #7D9E7E !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* TAUPE */
.product-form__input--pill input[value="Taupe"] + label,
.product-form__input--pill input[value="TAUPE"] + label {
  background-color: #8B7355 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* LÉOPARD */
.product-form__input--pill input[value="Leopard"] + label,
.product-form__input--pill input[value="LEOPARD"] + label,
.product-form__input--pill input[value="Léopard"] + label {
  background-color: #F5F0E8 !important;
  background-image:
    /* taches fauves */
    radial-gradient(ellipse 10px 7px at 27% 34%, #B8956A 100%, transparent 100%),
    radial-gradient(ellipse  9px 6px at 55% 24%, #B8956A 100%, transparent 100%),
    radial-gradient(ellipse 11px 7px at 34% 58%, #B8956A 100%, transparent 100%),
    radial-gradient(ellipse  9px 6px at 68% 55%, #B8956A 100%, transparent 100%),
    radial-gradient(ellipse 10px 6px at 47% 80%, #B8956A 100%, transparent 100%),
    /* arcs noirs autour des taches */
    radial-gradient(ellipse 14px 10px at 27% 34%, #1A1208 100%, transparent 100%),
    radial-gradient(ellipse 13px  9px at 55% 24%, #1A1208 100%, transparent 100%),
    radial-gradient(ellipse 15px 10px at 34% 58%, #1A1208 100%, transparent 100%),
    radial-gradient(ellipse 13px  9px at 68% 55%, #1A1208 100%, transparent 100%),
    radial-gradient(ellipse 14px  9px at 47% 80%, #1A1208 100%, transparent 100%),
    /* points noirs isolés */
    radial-gradient(circle 3px at 72% 30%, #1A1208 100%, transparent 100%),
    radial-gradient(circle 3px at 18% 65%, #1A1208 100%, transparent 100%),
    radial-gradient(circle 2.5px at 80% 72%, #1A1208 100%, transparent 100%),
    radial-gradient(circle 3px at 42% 14%, #1A1208 100%, transparent 100%) !important;
  color: transparent !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1.5px solid #D4C9B5 !important;
}

/* RAYURES TURQUOISES */
.product-form__input--pill input[value="Rayures Turquoises"] + label,
.product-form__input--pill input[value="RAYURES TURQUOISES"] + label,
.product-form__input--pill input[value="rayures turquoises"] + label {
  background-color: #F5F2EE !important;
  background-image: repeating-linear-gradient(
    45deg,
    #3BBFBF 0px,
    #3BBFBF 7px,
    #F5F2EE 7px,
    #F5F2EE 14px
  ) !important;
  color: transparent !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1.5px solid #D4D0CB !important;
}

/* JARDIN NOMADE */
.product-form__input--pill input[value="Jardin Nomade"] + label,
.product-form__input--pill input[value="JARDIN NOMADE"] + label {
  background:
    /* Grandes zones de couleur en blocs */
    linear-gradient(
      135deg,
      #B8C8E0 0%, #B8C8E0 25%,
      #E8C840 25%, #E8C840 45%,
      #E87830 45%, #E87830 65%,
      #A8C850 65%, #A8C850 80%,
      #E8D890 80%, #E8D890 100%
    ),
    /* Grandes fleurs blanches par-dessus */
    radial-gradient(ellipse 12px 14px at 15% 70%, rgba(255,245,220,0.85) 0%, transparent 100%),
    radial-gradient(ellipse 10px 12px at 80% 20%, rgba(255,245,220,0.85) 0%, transparent 100%),
    radial-gradient(ellipse 8px 10px at 55% 55%, rgba(255,245,220,0.7) 0%, transparent 100%),
    /* Feuilles vertes */
    radial-gradient(ellipse 6px 10px at 70% 75%, rgba(100,160,60,0.6) 0%, transparent 100%),
    radial-gradient(ellipse 5px 8px at 30% 30%, rgba(100,160,60,0.5) 0%, transparent 100%) !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* DUNE DE SILVA */
.product-form__input--pill input[value="Dune De Silva"] + label,
.product-form__input--pill input[value="DUNE DE SILVA"] + label,
.product-form__input--pill input[value="dune de silva"] + label {
  background-color: #F0EBE0 !important;
  background-image:
    /* troncs */
    linear-gradient(175deg, #7A5248 0%, #7A5248 100%),
    linear-gradient(168deg, #7A5248 0%, #7A5248 100%),
    /* palmes gauche */
    radial-gradient(ellipse 12px 5px at 22% 28%, #7A5248 100%, transparent 100%),
    radial-gradient(ellipse 11px 4px at 32% 22%, #7A5248 100%, transparent 100%),
    radial-gradient(ellipse 10px 4px at 18% 36%, #6A4238 100%, transparent 100%),
    /* palmes droite */
    radial-gradient(ellipse 12px 5px at 58% 24%, #7A5248 100%, transparent 100%),
    radial-gradient(ellipse 11px 4px at 68% 20%, #7A5248 100%, transparent 100%),
    radial-gradient(ellipse 10px 4px at 72% 32%, #6A4238 100%, transparent 100%) !important;
  color: transparent !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1.5px solid #C8BFB0 !important;
}

/* PATCHWORK ANDALOU */
.product-form__input--pill input[value="Patchwork Andalou"] + label,
.product-form__input--pill input[value="PATCHWORK ANDALOU"] + label,
.product-form__input--pill input[value="patchwork andalou"] + label {
  background-color: #F5EDD8 !important;
  background-image:
    /* carrés patchwork fond */
    linear-gradient(90deg, #E8C4A0 0%, #E8C4A0 25%, #D4E8C2 25%, #D4E8C2 50%, #F5D0C8 50%, #F5D0C8 75%, #C8D8E8 75%, #C8D8E8 100%),
    /* fleur rose haut-gauche */
    radial-gradient(ellipse 7px 7px at 25% 30%, transparent 40%, #E05080 40%, #E05080 55%, transparent 55%),
    radial-gradient(ellipse 7px 7px at 25% 30%, transparent 30%, #E05080 30%, #E05080 45%, transparent 45%) !important;
  background-size: 16px 16px, 32px 32px, 32px 32px !important;
  color: transparent !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1.5px solid #C8BFB0 !important;
}

/* TISSAGE BLEU */
.product-form__input--pill input[value="Tissage Bleu"] + label {
  background-color: #005BD3 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* TURQUOISE */
.product-form__input--pill input[value="Turquoise"] + label,
.product-form__input--pill input[value="TURQUOISE"] + label {
  background-color: #6ECFBE !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}


/* VIEUX ROSE */
.product-form__input--pill input[value="Vieux Rose"] + label {
  background-color: #DCAE96 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* VICHY NOIR ET BLANC */
.product-form__input--pill input[value="Vichy Noir et Blanc"] + label,
.product-form__input--pill input[value="VICHY CAFE"] + label {
  background: repeating-conic-gradient(#1A1A1A 0% 25%, #FFFFFF 0% 50%) 0 0/12px 12px !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* VICHY TIE AND DYE */
.product-form__input--pill input[value="Vichy tie and dye"] + label {
  background-color: #80C0CB !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* VICHY BLEU */
.product-form__input--pill input[value="VICHY BLEU"] + label {
  background: repeating-conic-gradient(#2762B0 0% 25%, #FFFFFF 0% 50%) 0 0/12px 12px !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* VICHY ROSE JAUNE */
.product-form__input--pill input[value="VICHY ROSE JAUNE"] + label {
  background: repeating-conic-gradient(#FFC0CB 0% 25%, #FFE500 0% 50%) 0 0/12px 12px !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* ZÈBRE DENIM */
.product-form__input--pill input[value="Zèbre Denim"] + label {
  background: repeating-linear-gradient(45deg, #376FA4 0px, #376FA4 4px, #FFFFFF 4px, #FFFFFF 8px) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* BRUN */
.product-form__input--pill input[value="Brun"] + label {
  background-color: #A5772A !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* BRUT */
.product-form__input--pill input[value="Brut"] + label,
.product-form__input--pill input[value="BRUT"] + label {
  background-color: #C8B89A !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* NOISETTE */
.product-form__input--pill input[value="Noisette"] + label,
.product-form__input--pill input[value="NOISETTE"] + label {
  background-color: #9A5630 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* MARRON GLACÉ */
.product-form__input--pill input[value="Marron Glace"] + label,
.product-form__input--pill input[value="MARRON GLACE"] + label {
  background-color: #C8906A !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CHÂTAIGNE */
.product-form__input--pill input[value="Chataigne"] + label,
.product-form__input--pill input[value="CHATAIGNE"] + label {
  background-color: #6F3A2C !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CURRY */
.product-form__input--pill input[value="Curry"] + label,
.product-form__input--pill input[value="CURRY"] + label {
  background-color: #C8860A !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* SAFRAN */
.product-form__input--pill input[value="Safran"] + label,
.product-form__input--pill input[value="SAFRAN"] + label {
  background-color: #F08030 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* FRAISE */
.product-form__input--pill input[value="Fraise"] + label,
.product-form__input--pill input[value="FRAISE"] + label {
  background-color: #E8264A !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CHAMPAGNE */
.product-form__input--pill input[value="Champagne"] + label,
.product-form__input--pill input[value="CHAMPAGNE"] + label {
  background-color: #F7E7CE !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important;
  border: 1px solid #CCCCCC !important;
}

/* BYZANTIN */
.product-form__input--pill input[value="Byzantin"] + label,
.product-form__input--pill input[value="BYZANTIN"] + label {
  background-color: #702963 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* AQUA */
.product-form__input--pill input[value="Aqua"] + label,
.product-form__input--pill input[value="AQUA"] + label {
  background-color: #00CED1 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* AZUR */
.product-form__input--pill input[value="Azur"] + label,
.product-form__input--pill input[value="AZUR"] + label {
  background-color: #007FFF !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* BEURRE */
.product-form__input--pill input[value="Beurre"] + label,
.product-form__input--pill input[value="BEURRE"] + label {
  background-color: #F5E090 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important;
  border: 1px solid #CCCCCC !important;
}

/* POUSSIN */
.product-form__input--pill input[value="Poussin"] + label,
.product-form__input--pill input[value="POUSSIN"] + label {
  background-color: #FFE066 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* PÊCHE */
.product-form__input--pill input[value="Peche"] + label,
.product-form__input--pill input[value="PECHE"] + label {
  background-color: #FFBE98 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* FICELLE */
.product-form__input--pill input[value="Ficelle"] + label,
.product-form__input--pill input[value="FICELLE"] + label {
  background-color: #D4C48A !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* BONBON */
.product-form__input--pill input[value="Bonbon"] + label,
.product-form__input--pill input[value="BONBON"] + label {
  background-color: #FF69B4 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* BLEU ÉLECTRIQUE */
.product-form__input--pill input[value="Bleu Electrique"] + label,
.product-form__input--pill input[value="BLEU ELECTRIQUE"] + label {
  background-color: #0033FF !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* BLEU TURQUIN */
.product-form__input--pill input[value="Bleu Turquin"] + label,
.product-form__input--pill input[value="BLEU TURQUIN"] + label {
  background-color: #2B5FA5 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* AMBRE */
.product-form__input--pill input[value="Ambre"] + label,
.product-form__input--pill input[value="AMBRE"] + label {
  background-color: #D4860A !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* DUSTY PINK */
.product-form__input--pill input[value="Dusty Pink"] + label {
  background-color: #D4968A !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CACAO */
.product-form__input--pill input[value="Cacao"] + label,
.product-form__input--pill input[value="CACAO"] + label {
  background-color: #4A2010 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* ---- Rayures ---- */

/* RAYURES BEIGES */
.product-form__input--pill input[value="Rayures Beiges"] + label {
  background: repeating-linear-gradient(90deg, #EAD8AB 0px, #EAD8AB 6px, #FFFFFF 6px, #FFFFFF 12px) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* RAYURES BLEUES */
.product-form__input--pill input[value="Rayures Bleues"] + label,
.product-form__input--pill input[value="RAYURES BLEUES"] + label {
  background: repeating-linear-gradient(90deg, #005BD3 0px, #005BD3 6px, #FFFFFF 6px, #FFFFFF 12px) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* RAYURES BLEUES ET JAUNES */
.product-form__input--pill input[value="Rayures Bleues et Jaunes"] + label {
  background: repeating-linear-gradient(90deg, #005BD3 0px, #005BD3 6px, #E5DC61 6px, #E5DC61 12px) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* RAYURES BRUNES */
.product-form__input--pill input[value="Rayures Brunes"] + label {
  background: repeating-linear-gradient(90deg, #BF943C 0px, #BF943C 6px, #FFFFFF 6px, #FFFFFF 12px) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* RAYURES CAMEL */
.product-form__input--pill input[value="Rayures Camel"] + label {
  background: repeating-linear-gradient(90deg, #D2AC2D 0px, #D2AC2D 6px, #FFFFFF 6px, #FFFFFF 12px) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* RAYURES CIEL */
.product-form__input--pill input[value="Rayures ciel"] + label,
.product-form__input--pill input[value="RAYURES CIEL"] + label {
  background: repeating-linear-gradient(90deg, #A4E7F4 0px, #A4E7F4 6px, #FFFFFF 6px, #FFFFFF 12px) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* RAYURES CIEL ET ORANGE */
.product-form__input--pill input[value="Rayures Ciel et Orange"] + label {
  background: repeating-linear-gradient(90deg, #A4E7F4 0px, #A4E7F4 6px, #FFA500 6px, #FFA500 12px) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* RAYURES FUCHSIA */
.product-form__input--pill input[value="Rayures Fuchsia"] + label {
  background: repeating-linear-gradient(90deg, #FF00FF 0px, #FF00FF 6px, #FFFFFF 6px, #FFFFFF 12px) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* RAYURES GRISES */
.product-form__input--pill input[value="Rayures Grises"] + label,
.product-form__input--pill input[value="RAYURES GRISES"] + label {
  background: repeating-linear-gradient(90deg, #9A9A9A 0px, #9A9A9A 6px, #FFFFFF 6px, #FFFFFF 12px) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* RAYURES MARINES */
.product-form__input--pill input[value="Rayures Marines"] + label {
  background: repeating-linear-gradient(90deg, #282099 0px, #282099 6px, #FFFFFF 6px, #FFFFFF 12px) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* RAYURES ORANGES */
.product-form__input--pill input[value="Rayures Oranges"] + label,
.product-form__input--pill input[value="RAYURES ORANGES"] + label {
  background: repeating-linear-gradient(90deg, #FFA500 0px, #FFA500 6px, #FFFFFF 6px, #FFFFFF 12px) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* RAYURES ROSES */
.product-form__input--pill input[value="Rayures roses"] + label,
.product-form__input--pill input[value="RAYURES ROSES"] + label {
  background: repeating-linear-gradient(90deg, #FFC0CB 0px, #FFC0CB 6px, #FFFFFF 6px, #FFFFFF 12px) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* RAYURES TURQUOISES */
.product-form__input--pill input[value="Rayures Turquoises"] + label,
.product-form__input--pill input[value="RAYURES TURQUOISES"] + label {
  background:
    repeating-linear-gradient(
      90deg,
      #5AAEE0 0px, #5AAEE0 4px,
      #FFFFFF 4px, #FFFFFF 6px,
      #5AAEE0 6px, #5AAEE0 10px,
      #7EC4F0 10px, #7EC4F0 11px,
      #5AAEE0 11px, #5AAEE0 16px
    ) !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* RAYURES VERTES */
.product-form__input--pill input[value="Rayures Vertes"] + label {
  background: repeating-linear-gradient(90deg, #05AA3D 0px, #05AA3D 6px, #FFFFFF 6px, #FFFFFF 12px) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* RAYURES VIOLETTES / RAYURE VIOLET */
.product-form__input--pill input[value="Rayures violettes"] + label,
.product-form__input--pill input[value="RAYURES VIOLET"] + label,
.product-form__input--pill input[value="Rayure Violet"] + label {
  background: repeating-linear-gradient(90deg, #800080 0px, #800080 6px, #FFFFFF 6px, #FFFFFF 12px) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* RAYURES NOIRES */
.product-form__input--pill input[value="RAYURES NOIRES"] + label {
  background: repeating-linear-gradient(90deg, #1A1A1A 0px, #1A1A1A 6px, #FFFFFF 6px, #FFFFFF 12px) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* ---- Prints / Coloris spéciaux (pastille représentative) ---- */

/* ROLAND GARROS */
.product-form__input--pill input[value="Roland Garros"] + label {
  background-color: #17965D !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* SHINY */
.product-form__input--pill input[value="Shiny"] + label,
.product-form__input--pill input[value="SHINY"] + label {
  background: linear-gradient(135deg, #E8D5A0, #C0A060, #F0E0B0, #A08040) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CALIENTE CLUB */
.product-form__input--pill input[value="Caliente Club"] + label,
.product-form__input--pill input[value="CALIENTE CLUB"] + label {
  background-color: #C03020 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* SOLSTICE PASTEL */
.product-form__input--pill input[value="Solstice Pastel"] + label,
.product-form__input--pill input[value="SOLSTICE PASTEL"] + label {
  background: conic-gradient(#FFC0CB, #B2FC85, #A7C2EB, #FFBE98, #FFC0CB) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* HIPPIE TWIST */
.product-form__input--pill input[value="Hippie Twist"] + label,
.product-form__input--pill input[value="HIPPIE TWIST"] + label {
  background: conic-gradient(#FF8FA0, #FFE500, #05AA3D, #800080, #FF8FA0) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* IMAGINARY STREET */
.product-form__input--pill input[value="Imaginary Street"] + label,
.product-form__input--pill input[value="IMAGINARY STREET"] + label {
  background:
    /* Diagonales turquoise */
    repeating-linear-gradient(
      45deg,
      transparent 0px, transparent 5px,
      rgba(40, 180, 200, 0.6) 5px, rgba(40, 180, 200, 0.6) 7px,
      transparent 7px, transparent 12px
    ),
    /* Diagonales bordeaux */
    repeating-linear-gradient(
      -45deg,
      transparent 0px, transparent 5px,
      rgba(120, 20, 40, 0.5) 5px, rgba(120, 20, 40, 0.5) 7px,
      transparent 7px, transparent 12px
    ),
    /* Petits motifs géométriques jaune/ocre */
    radial-gradient(circle at 25% 25%, #D4A020 0px, #D4A020 2px, transparent 3px),
    radial-gradient(circle at 75% 25%, #D4A020 0px, #D4A020 2px, transparent 3px),
    radial-gradient(circle at 25% 75%, #8B1A1A 0px, #8B1A1A 2px, transparent 3px),
    radial-gradient(circle at 75% 75%, #D4A020 0px, #D4A020 2px, transparent 3px),
    radial-gradient(circle at 50% 50%, #2A8CA0 0px, #2A8CA0 2px, transparent 3px),
    #F0E8C8 !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CARREAUX ECRUS BRODES */
.product-form__input--pill input[value="Carreaux Écrus Brodés"] + label,
.product-form__input--pill input[value="Carreaux Ecrus Brodes"] + label,
.product-form__input--pill input[value="CARREAUX ECRUS BRODE"] + label,
.product-form__input--pill input[value="CARREAUX ECRUS BRODES"] + label {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 9px,
      rgba(180, 140, 100, 0.4) 9px, rgba(180, 140, 100, 0.4) 11px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 9px,
      rgba(180, 140, 100, 0.4) 9px, rgba(180, 140, 100, 0.4) 11px
    ),
    #F2EDE3 !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* NOIR ECRU */
.product-form__input--pill input[value="Noir Ecru"] + label,
.product-form__input--pill input[value="NOIR ECRU"] + label,
.product-form__input--pill input[value="Noir Écru"] + label {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 4px,
      rgba(30, 28, 26, 0.8) 4px, rgba(30, 28, 26, 0.8) 6px,
      transparent 6px, transparent 10px,
      rgba(30, 28, 26, 0.4) 10px, rgba(30, 28, 26, 0.4) 11px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 4px,
      rgba(30, 28, 26, 0.8) 4px, rgba(30, 28, 26, 0.8) 6px,
      transparent 6px, transparent 10px,
      rgba(30, 28, 26, 0.4) 10px, rgba(30, 28, 26, 0.4) 11px
    ),
    #F0EBE0 !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* ORIGINE */
.product-form__input--pill input[value="Origine"] + label,
.product-form__input--pill input[value="ORIGINE"] + label {
  background-color: #8C7B6A !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* RETRO BLOOM */
.product-form__input--pill input[value="Retro Bloom"] + label,
.product-form__input--pill input[value="RETRO BLOOM"] + label {
  background: conic-gradient(#DB4059, #FFC0CB, #FFE500, #05AA3D, #DB4059) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* OASIS CHROMATIQUE */
.product-form__input--pill input[value="Oasis Chromatique"] + label,
.product-form__input--pill input[value="OASIS CHROMATIQUE"] + label {
  background: conic-gradient(#13E2EC, #B2FC85, #FFE500, #FFA500, #13E2EC) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* JUNGLE CHROMA */
.product-form__input--pill input[value="Jungle chroma"] + label {
  background-color: #DCCA98 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* FAIENCE BOTANIQUE */
.product-form__input--pill input[value="Faience Botanique"] + label {
  background-color: #2D8F63 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* FRIDA */
.product-form__input--pill input[value="Frida"] + label {
  background: conic-gradient(#FF0000, #FFFF00, #008000, #FF8C00, #FF0000) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* MEXICAN STRIPES */
.product-form__input--pill input[value="Mexican stripes"] + label {
  background: repeating-linear-gradient(90deg,
    #FF0000 0px, #FF0000 4px,
    #FFE500 4px, #FFE500 8px,
    #008000 8px, #008000 12px,
    #FF8C00 12px, #FF8C00 16px) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* MIAMI VICE */
.product-form__input--pill input[value="Miami vice"] + label {
  background: linear-gradient(135deg, #F69C1E, #FF69B4) !important;
  color: transparent !important; width: 32px !important; height: 32px !important;
  min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* MOTEL DREAM */
.product-form__input--pill input[value="Motel dream"] + label {
  background-color: #E8D9D9 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* IVOIRE */
.product-form__input--pill input[value="IVOIRE"] + label {
  background-color: #FFFFF0 !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* SOLEIL D'EZE */
.product-form__input--pill input[value="SOLEIL D'EZE"] + label {
  background: conic-gradient(
    #E8A87C 0deg 60deg,
    #6B9E8A 60deg 130deg,
    #F2D06B 130deg 190deg,
    #8B9EC7 190deg 250deg,
    #C4795A 250deg 310deg,
    #A8C4A2 310deg 360deg
  ) !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CARREAUX ORANGES */
.product-form__input--pill input[value="CARREAUX ORANGES"] + label {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 4px,
      rgba(210, 80, 40, 0.4) 4px, rgba(210, 80, 40, 0.4) 6px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 4px,
      rgba(210, 80, 40, 0.4) 4px, rgba(210, 80, 40, 0.4) 6px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 9px,
      rgba(180, 50, 20, 0.6) 9px, rgba(180, 50, 20, 0.6) 11px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 9px,
      rgba(180, 50, 20, 0.6) 9px, rgba(180, 50, 20, 0.6) 11px
    ),
    #E8936A !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* FLORAL */
.product-form__input--pill input[value="FLORAL"] + label {
  background: 
    radial-gradient(circle at 25% 30%, #D4A8B8 0px, #D4A8B8 4px, transparent 5px),
    radial-gradient(circle at 70% 20%, #B8CEC4 0px, #B8CEC4 3px, transparent 4px),
    radial-gradient(circle at 50% 65%, #C9A0B4 0px, #C9A0B4 4px, transparent 5px),
    radial-gradient(circle at 80% 70%, #D4B8C4 0px, #D4B8C4 3px, transparent 4px),
    radial-gradient(circle at 15% 75%, #B8C8C0 0px, #B8C8C0 3px, transparent 4px),
    radial-gradient(circle at 60% 45%, #E8C8A0 0px, #E8C8A0 2px, transparent 3px),
    #F5EEE8 !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* RAYURES ROSES */
.product-form__input--pill input[value="RAYURES ROSES"] + label,
.product-form__input--pill input[value="Rayures Roses"] + label {
  background:
    repeating-linear-gradient(
      90deg,
      #F2A8B0 0px, #F2A8B0 2px,
      #FAE8EA 2px, #FAE8EA 6px
    ) !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* RAYURE ROSE */
.product-form__input--pill input[value="RAYURE ROSE"] + label,
.product-form__input--pill input[value="Rayure Rose"] + label {
  background:
    repeating-linear-gradient(
      90deg,
      #F2A8B0 0px, #F2A8B0 2px,
      #FAE8EA 2px, #FAE8EA 6px
    ) !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* RAYURES ORANGES */
.product-form__input--pill input[value="Rayures Oranges"] + label,
.product-form__input--pill input[value="RAYURES ORANGES"] + label {
  background:
    repeating-linear-gradient(
      90deg,
      #E8956D 0px, #E8956D 2px,
      #F5C4A8 2px, #F5C4A8 5px,
      #F5EDE0 5px, #F5EDE0 8px,
      #C8A882 8px, #C8A882 10px,
      #F5EDE0 10px, #F5EDE0 14px
    ) !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* RAYURE ORANGE */
.product-form__input--pill input[value="Rayure Orange"] + label,
.product-form__input--pill input[value="RAYURE ORANGE"] + label {
  background:
    repeating-linear-gradient(
      90deg,
      #E8956D 0px, #E8956D 2px,
      #F5C4A8 2px, #F5C4A8 5px,
      #F5EDE0 5px, #F5EDE0 8px,
      #C8A882 8px, #C8A882 10px,
      #F5EDE0 10px, #F5EDE0 14px
    ) !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* STUDIO 54 */
.product-form__input--pill input[value="Studio 54"] + label,
.product-form__input--pill input[value="STUDIO 54"] + label {
  background:
    radial-gradient(ellipse 9px 13px at 20% 30%, #9B59B6 0%, transparent 100%),
    radial-gradient(ellipse 11px 8px at 65% 20%, #E8956D 0%, transparent 100%),
    radial-gradient(ellipse 8px 11px at 45% 60%, #C0392B 0%, transparent 100%),
    radial-gradient(ellipse 10px 7px at 80% 65%, #8E44AD 0%, transparent 100%),
    radial-gradient(ellipse 7px 10px at 15% 75%, #D4A843 0%, transparent 100%),
    radial-gradient(ellipse 9px 6px at 75% 85%, #5B8C5A 0%, transparent 100%),
    radial-gradient(ellipse 6px 9px at 50% 90%, #C0392B 0%, transparent 100%),
    #F5E8D8 !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CARNET DE RIVIERA */
.product-form__input--pill input[value="Carnet de Riviera"] + label,
.product-form__input--pill input[value="CARNET DE RIVIERA"] + label {
  background:
    radial-gradient(ellipse 8px 10px at 20% 20%, #00B4C8 0%, transparent 100%),
    radial-gradient(ellipse 6px 8px at 75% 15%, #E8D94A 0%, transparent 100%),
    radial-gradient(ellipse 9px 6px at 50% 45%, #5BC85A 0%, transparent 100%),
    radial-gradient(ellipse 7px 9px at 15% 65%, #E83A2A 0%, transparent 100%),
    radial-gradient(ellipse 8px 6px at 80% 60%, #00B4C8 0%, transparent 100%),
    radial-gradient(ellipse 6px 8px at 40% 80%, #E8D94A 0%, transparent 100%),
    radial-gradient(ellipse 5px 7px at 85% 85%, #5BC85A 0%, transparent 100%),
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 14px,
      rgba(0, 180, 200, 0.15) 14px, rgba(0, 180, 200, 0.15) 16px
    ),
    #F5F0DC !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* RAYURES BLEUES */
.product-form__input--pill input[value="Rayures Bleues"] + label,
.product-form__input--pill input[value="RAYURES BLEUES"] + label {
  background:
    repeating-linear-gradient(
      90deg,
      #A8C8D4 0px, #A8C8D4 2px,
      #F0EDE8 2px, #F0EDE8 5px,
      #C8DDE4 5px, #C8DDE4 7px,
      #F0EDE8 7px, #F0EDE8 11px
    ) !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* CAJUN */
.product-form__input--pill input[value="Cajun"] + label,
.product-form__input--pill input[value="CAJUN"] + label {
  background-color: #B5521B !important; color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* RAYURE BLEUE */
.product-form__input--pill input[value="Rayure Bleue"] + label,
.product-form__input--pill input[value="RAYURE BLEUE"] + label {
  background:
    repeating-linear-gradient(
      90deg,
      #A8C8D4 0px, #A8C8D4 2px,
      #F0EDE8 2px, #F0EDE8 5px,
      #C8DDE4 5px, #C8DDE4 7px,
      #F0EDE8 7px, #F0EDE8 11px
    ) !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* RAYURES OCRES */
.product-form__input--pill input[value="Rayures Ocres"] + label,
.product-form__input--pill input[value="Rayure Ocre"] + label,
.product-form__input--pill input[value="RAYURE OCRE"] + label,
.product-form__input--pill input[value="RAYURES OCRES"] + label {
  background: repeating-linear-gradient(
    90deg,
    #C8872F 0px, #C8872F 3px,
    #D4A055 3px, #D4A055 4.5px,
    #F5EDD8 4.5px, #F5EDD8 8px,
    #B8742A 8px, #B8742A 10px,
    #F5EDD8 10px, #F5EDD8 14px
  ) !important;
  color: transparent !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: none !important;
}

/* STUDIO 54 */
.product-form__input--pill input[value="Studio 54"] + label,
.product-form__input--pill input[value="STUDIO 54"] + label {
  background: conic-gradient(
    #F6F0E6 0deg 60deg,
    #E97A4D 60deg 120deg,
    #B86B3C 120deg 180deg,
    #8A5ACB 180deg 240deg,
    #3E4FA8 240deg 300deg,
    #C9D98A 300deg 360deg
  ) !important;
  color: transparent !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: none !important;
}

/* ECRU BRODE */
.product-form__input--pill input[value="Ecru Brodé"] + label,
.product-form__input--pill input[value="ECRU BRODE"] + label,
.product-form__input--pill input[value="Écru Brodé"] + label {
  background:
    radial-gradient(circle at 20% 25%, transparent 2px, #E8E0D0 2px, #E8E0D0 4px, transparent 4px),
    radial-gradient(circle at 50% 20%, transparent 2px, #E8E0D0 2px, #E8E0D0 4px, transparent 4px),
    radial-gradient(circle at 80% 30%, transparent 2px, #E8E0D0 2px, #E8E0D0 4px, transparent 4px),
    radial-gradient(circle at 30% 60%, transparent 2px, #E8E0D0 2px, #E8E0D0 4px, transparent 4px),
    radial-gradient(circle at 65% 65%, transparent 2px, #E8E0D0 2px, #E8E0D0 4px, transparent 4px),
    radial-gradient(circle at 20% 85%, transparent 2px, #E8E0D0 2px, #E8E0D0 4px, transparent 4px),
    radial-gradient(circle at 75% 85%, transparent 2px, #E8E0D0 2px, #E8E0D0 4px, transparent 4px),
    radial-gradient(circle at 20% 25%, #D4C8B4 0px, #D4C8B4 2px, transparent 2px),
    radial-gradient(circle at 50% 20%, #D4C8B4 0px, #D4C8B4 2px, transparent 2px),
    radial-gradient(circle at 80% 30%, #D4C8B4 0px, #D4C8B4 2px, transparent 2px),
    radial-gradient(circle at 30% 60%, #D4C8B4 0px, #D4C8B4 2px, transparent 2px),
    radial-gradient(circle at 65% 65%, #D4C8B4 0px, #D4C8B4 2px, transparent 2px),
    radial-gradient(circle at 20% 85%, #D4C8B4 0px, #D4C8B4 2px, transparent 2px),
    radial-gradient(circle at 75% 85%, #D4C8B4 0px, #D4C8B4 2px, transparent 2px),
    #F2EDE3 !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* BOHO MEDINA */
.product-form__input--pill input[value="Boho Medina"] + label,
.product-form__input--pill input[value="BOHO MEDINA"] + label {
  background:
    /* Grandes fleurs jaunes */
    radial-gradient(ellipse 10px 10px at 22% 28%, #D4A820 0%, #D4A820 60%, #6B4210 60%, #6B4210 75%, transparent 76%),
    radial-gradient(ellipse 9px 9px at 72% 65%, #D4A820 0%, #D4A820 60%, #6B4210 60%, #6B4210 75%, transparent 76%),
    radial-gradient(ellipse 7px 7px at 50% 15%, #D4A820 0%, #D4A820 60%, #6B4210 60%, #6B4210 75%, transparent 76%),
    /* Feuilles brunes */
    radial-gradient(ellipse 5px 8px at 40% 55%, #8B5E20 0%, #8B5E20 70%, transparent 71%),
    radial-gradient(ellipse 5px 7px at 80% 35%, #8B5E20 0%, #8B5E20 70%, transparent 71%),
    /* Rayures verticales fond */
    repeating-linear-gradient(
      90deg,
      #F5F0E8 0px, #F5F0E8 3px,
      #C8D8A0 3px, #C8D8A0 4px,
      #F5F0E8 4px, #F5F0E8 6px,
      #E8C8D4 6px, #E8C8D4 7px,
      #F5F0E8 7px, #F5F0E8 10px
    ) !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* ── MOUSSE ── */
.product-form__input--pill input[value="Mousse"] + label,
.product-form__input--pill input[value="MOUSSE"] + label {
  background: #A8A820 !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}



/* ---- Pastilles couleur : outline noire (hover + checked) ---- */
.product-form__input--color input[type="radio"] + label:hover {
  outline: 2px solid #111 !important;
  outline-offset: 2px !important;
}

.product-form__input--color input[type="radio"]:checked + label {
  outline: 2px solid #111 !important;
  outline-offset: 2px !important;
}

/* ---- Tailles : style minimal sans capsule ---- */
.product-form__input--size input[type="radio"] + label {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0.8rem 0.4rem !important;
}

.product-form__input--size input[type="radio"] + label::before {
  display: none !important;
}

.product-form__input--size input[type="radio"] + label:hover {
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  font-weight: 700 !important;
  border: none !important;
}

.product-form__input--size input[type="radio"]:checked + label {
  background: transparent !important;
  color: rgb(var(--color-foreground)) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  border: none !important;
}

/* ---- Legacy checked outlines ---- */
.product-form__input--pill input[type="radio"]:checked + label[style*="border-radius: 50%"],
.product-form__input--pill input[value="Rayures Bleues"]:checked + label,
.product-form__input--pill input[value="RAYURES BLEUES"]:checked + label {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
},
.product-form__input--pill input[value="Ecru Brodé"]:checked + label,
.product-form__input--pill input[value="ECRU BRODE"]:checked + label,
.product-form__input--pill input[value="Écru Brodé"]:checked + label {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
},
.product-form__input--pill input[value="Mousse"]:checked + label,
.product-form__input--pill input[value="MOUSSE"]:checked + label {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
},
.product-form__input--pill input[value="Boho Medina"]:checked + label,
.product-form__input--pill input[value="BOHO MEDINA"]:checked + label {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
},
.product-form__input--pill input[value="Rayure Bleue"]:checked + label,
.product-form__input--pill input[value="RAYURE BLEUE"]:checked + label {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
},
.product-form__input--pill input[value="Rayures Oranges"]:checked + label,
.product-form__input--pill input[value="RAYURES ORANGES"]:checked + label {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
},
.product-form__input--pill input[value="Studio 54"]:checked + label,
.product-form__input--pill input[value="STUDIO 54"]:checked + label {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
},
.product-form__input--pill input[value="Rayure Orange"]:checked + label,
.product-form__input--pill input[value="RAYURE ORANGE"]:checked + label {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
},
.product-form__input--pill input[value="Carnet de Riviera"]:checked + label,
.product-form__input--pill input[value="CARNET DE RIVIERA"]:checked + label {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
},
.product-form__input--pill input[value="Studio 54"]:checked + label,
.product-form__input--pill input[value="STUDIO 54"]:checked + label {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
},
.product-form__input--pill input[value="Patchwork"]:checked + label,
.product-form__input--pill input[value="PATCHWORK"]:checked + label {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
},
.product-form__input--pill input[value="RAYURES ROSES"]:checked + label,
.product-form__input--pill input[value="RAYURE ROSE"]:checked + label,
.product-form__input--pill input[value="Rayures Roses"]:checked + label,
.product-form__input--pill input[value="Rayure Rose"]:checked + label,
.product-form__input--pill input[value="Bleu"]:checked + label,
.product-form__input--pill input[value="BLEU"]:checked + label,
.product-form__input--pill input[value="Gris"]:checked + label,
.product-form__input--pill input[value="GRIS"]:checked + label,
.product-form__input--pill input[value="Noir"]:checked + label,
.product-form__input--pill input[value="NOIR"]:checked + label,
.product-form__input--pill input[value="IVOIRE"]:checked + label,
.product-form__input--pill input[value="SOLEIL D'EZE"]:checked + label {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
},
.product-form__input--pill input[value="FLORAL"]:checked + label {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
},
.product-form__input--pill input[value="Rayures ocres"] + label,
.product-form__input--pill input[value="rayures ocres"] + label,
  background: repeating-linear-gradient(
    90deg,
    #C8872F 0px, #C8872F 3px,
    #D4A055 3px, #D4A055 4.5px,
    #F5EDD8 4.5px, #F5EDD8 8px,
    #B8742A 8px, #B8742A 10px,
    #F5EDD8 10px, #F5EDD8 14px
  ) !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
},

.product-form__input--pill input[value="Carreaux"]:checked + label,
.product-form__input--pill input[value="CARREAUX"]:checked + label {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
},
.product-form__input--pill input[value="Carreaux Écrus Brodés"]:checked + label,
.product-form__input--pill input[value="Carreaux Ecrus Brodes"]:checked + label,
.product-form__input--pill input[value="CARREAUX ECRUS BRODE"]:checked + label,
.product-form__input--pill input[value="CARREAUX ECRUS BRODES"]:checked + label {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
},
.product-form__input--pill input[value="Jaune"]:checked + label,
.product-form__input--pill input[value="JAUNE"]:checked + label,
.product-form__input--pill input[value="Kaki"]:checked + label,
.product-form__input--pill input[value="KAKI"]:checked + label,
.product-form__input--pill input[value="Khaki"]:checked + label,
.product-form__input--pill input[value="KHAKI"]:checked + label,
.product-form__input--pill input[value="Léopard"]:checked + label,
.product-form__input--pill input[value="Leopard"]:checked + label,
.product-form__input--pill input[value="Marine"]:checked + label,
.product-form__input--pill input[value="MARINE"]:checked + label,
.product-form__input--pill input[value="Marron"]:checked + label,
.product-form__input--pill input[value="MARRON"]:checked + label,
.product-form__input--pill input[value="Multicolore"]:checked + label,
.product-form__input--pill input[value="Multicolored"]:checked + label,
.product-form__input--pill input[value="Orange"]:checked + label,
.product-form__input--pill input[value="ORANGE"]:checked + label,
.product-form__input--pill input[value="Rose"]:checked + label,
.product-form__input--pill input[value="ROSE"]:checked + label,
.product-form__input--pill input[value="Rouge"]:checked + label,
.product-form__input--pill input[value="ROUGE"]:checked + label,
.product-form__input--pill input[value="Vert"]:checked + label,
.product-form__input--pill input[value="VERT"]:checked + label,
.product-form__input--pill input[value="Violet"]:checked + label,
.product-form__input--pill input[value="VIOLET"]:checked + label,
.product-form__input--pill input[value="Horizon"]:checked + label,
.product-form__input--pill input[value="Bleu ciel"]:checked + label,
.product-form__input--pill input[value="Ciel"]:checked + label,
.product-form__input--pill input[value="CIEL"]:checked + label,
.product-form__input--pill input[value="Blanc"]:checked + label,
.product-form__input--pill input[value="BLANC"]:checked + label,
.product-form__input--pill input[value="Denim"]:checked + label,
.product-form__input--pill input[value="DENIM"]:checked + label,
.product-form__input--pill input[value="Chocolat"]:checked + label,
.product-form__input--pill input[value="CHOCOLAT"]:checked + label,
.product-form__input--pill input[value="Framboise"]:checked + label,
.product-form__input--pill input[value="FRAMBOISE"]:checked + label,
.product-form__input--pill input[value="Denim Violine"]:checked + label,
.product-form__input--pill input[value="Anis"]:checked + label,
.product-form__input--pill input[value="ANIS"]:checked + label,
.product-form__input--pill input[value="Vert Anis"]:checked + label,
.product-form__input--pill input[value="VERT ANIS"]:checked + label,
.product-form__input--pill input[value="Balle de citron"]:checked + label,
.product-form__input--pill input[value="Beige et Chocolat"]:checked + label,
.product-form__input--pill input[value="Beige mix"]:checked + label,
.product-form__input--pill input[value="Black Denim"]:checked + label,
.product-form__input--pill input[value="Blanc et Navy"]:checked + label,
.product-form__input--pill input[value="Bleu et Ivoire"]:checked + label,
.product-form__input--pill input[value="Bleu Roi"]:checked + label,
.product-form__input--pill input[value="BLEU ROI"]:checked + label,
.product-form__input--pill input[value="BLEUR ROI"]:checked + label,
.product-form__input--pill input[value="Bordeaux"]:checked + label,
.product-form__input--pill input[value="Brique"]:checked + label,
.product-form__input--pill input[value="Brun et Ecru"]:checked + label,
.product-form__input--pill input[value="Bubble"]:checked + label,
.product-form__input--pill input[value="Burgundy"]:checked + label,
.product-form__input--pill input[value="Camaieu bleu"]:checked + label,
.product-form__input--pill input[value="Camel"]:checked + label,
.product-form__input--pill input[value="CAMEL"]:checked + label,
.product-form__input--pill input[value="Camouflage"]:checked + label,
.product-form__input--pill input[value="Canard"]:checked + label,
.product-form__input--pill input[value="Cappuccino"]:checked + label,
.product-form__input--pill input[value="Carbone"]:checked + label,
.product-form__input--pill input[value="CARBONE"]:checked + label,
.product-form__input--pill input[value="Carbonne"]:checked + label,
.product-form__input--pill input[value="CARBONNE"]:checked + label,
.product-form__input--pill input[value="Carreaux beiges"]:checked + label,
.product-form__input--pill input[value="CARREAUX BEIGES"]:checked + label,
.product-form__input--pill input[value="Carreaux bleus"]:checked + label,
.product-form__input--pill input[value="CARREAUX BLEUS"]:checked + label,
.product-form__input--pill input[value="Carreaux bruns"]:checked + label,
.product-form__input--pill input[value="Carreaux Chocolat"]:checked + label,
.product-form__input--pill input[value="CARREAUX CHOCOLAT"]:checked + label,
.product-form__input--pill input[value="Carreaux Chocolats et Verts"]:checked + label,
.product-form__input--pill input[value="Carreaux chocolat et noir"]:checked + label,
.product-form__input--pill input[value="Carreaux fuchsia"]:checked + label,
.product-form__input--pill input[value="Carreaux Jaunes et Chocolats"]:checked + label,
.product-form__input--pill input[value="Carreaux Jaunes et Bleus"]:checked + label,
.product-form__input--pill input[value="Carreaux Jaune et Ciel"]:checked + label,
.product-form__input--pill input[value="Carreaux Marine"]:checked + label,
.product-form__input--pill input[value="Carreaux moutarde"]:checked + label,
.product-form__input--pill input[value="Carreaux roses"]:checked + label,
.product-form__input--pill input[value="CARREAUX ROSES"]:checked + label,
.product-form__input--pill input[value="Carreaux Roses"]:checked + label,
.product-form__input--pill input[value="Carreaux Verts"]:checked + label,
.product-form__input--pill input[value="CARREAUX VERTS"]:checked + label,
.product-form__input--pill input[value="Carreaux verts et violet"]:checked + label,
.product-form__input--pill input[value="Cerise"]:checked + label,
.product-form__input--pill input[value="CERISE"]:checked + label,
.product-form__input--pill input[value="Chambray"]:checked + label,
.product-form__input--pill input[value="CHAMBRAY"]:checked + label,
.product-form__input--pill input[value="cowboy"]:checked + label,
.product-form__input--pill input[value="Ecru Chiné"]:checked + label,
.product-form__input--pill input[value="ECRU CHINE"]:checked + label,
.product-form__input--pill input[value="Ecru et Noisette"]:checked + label,
.product-form__input--pill input[value="Ecru"]:checked + label,
.product-form__input--pill input[value="ECRU"]:checked + label,
.product-form__input--pill input[value="Ecru et Ciel"]:checked + label,
.product-form__input--pill input[value="ECRU ET CIEL"]:checked + label,
.product-form__input--pill input[value="Ecru & Ciel"]:checked + label,
.product-form__input--pill input[value="ECRU & CIEL"]:checked + label,
.product-form__input--pill input[value="Ecru et Noir"]:checked + label,
.product-form__input--pill input[value="ECRU ET NOIR"]:checked + label,
.product-form__input--pill input[value="Ecru & Noir"]:checked + label,
.product-form__input--pill input[value="ECRU & NOIR"]:checked + label,
.product-form__input--pill input[value="NOIR ECRU"]:checked + label,
.product-form__input--pill input[value="Emeraude"]:checked + label,
.product-form__input--pill input[value="EMERAUDE"]:checked + label,
.product-form__input--pill input[value="Epicea"]:checked + label,
.product-form__input--pill input[value="Fuchsia"]:checked + label,
.product-form__input--pill input[value="FUCHSIA"]:checked + label,
.product-form__input--pill input[value="Fuschia"]:checked + label,
.product-form__input--pill input[value="FUSCHIA"]:checked + label,
.product-form__input--pill input[value="Gazon"]:checked + label,
.product-form__input--pill input[value="Greige"]:checked + label,
.product-form__input--pill input[value="Gris cadet"]:checked + label,
.product-form__input--pill input[value="gris chiné"]:checked + label,
.product-form__input--pill input[value="GRIS MULTICO"]:checked + label,
.product-form__input--pill input[value="Ivoire"]:checked + label,
.product-form__input--pill input[value="Liche"]:checked + label,
.product-form__input--pill input[value="Lichen"]:checked + label,
.product-form__input--pill input[value="Mallow"]:checked + label,
.product-form__input--pill input[value="Marine foncé"]:checked + label,
.product-form__input--pill input[value="Navy"]:checked + label,
.product-form__input--pill input[value="NAVY"]:checked + label,
.product-form__input--pill input[value="Olive"]:checked + label,
.product-form__input--pill input[value="OLIVE"]:checked + label,
.product-form__input--pill input[value="Perle"]:checked + label,
.product-form__input--pill input[value="sable"]:checked + label,
.product-form__input--pill input[value="Sable"]:checked + label,
.product-form__input--pill input[value="SABLE"]:checked + label,
.product-form__input--pill input[value="Sauge"]:checked + label,
.product-form__input--pill input[value="SAUGE"]:checked + label,
.product-form__input--pill input[value="Taupe"]:checked + label,
.product-form__input--pill input[value="TAUPE"]:checked + label,
.product-form__input--pill input[value="Tissage Bleu"]:checked + label,
.product-form__input--pill input[value="Turquoise"]:checked + label,
.product-form__input--pill input[value="TURQUOISE"]:checked + label {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
},
.product-form__input--pill input[value="Vieux Rose"]:checked + label,
.product-form__input--pill input[value="Vichy Noir et Blanc"]:checked + label,
.product-form__input--pill input[value="VICHY CAFE"]:checked + label,
.product-form__input--pill input[value="Vichy tie and dye"]:checked + label,
.product-form__input--pill input[value="Noir Ecru"]:checked + label,
.product-form__input--pill input[value="NOIR ECRU"]:checked + label,
.product-form__input--pill input[value="Noir Écru"]:checked + label {
  outline: 2px solid #6B6B6B !important;
  outline-offset: 2px !important;
},
.product-form__input--pill input[value="VICHY BLEU"]:checked + label,
.product-form__input--pill input[value="VICHY ROSE JAUNE"]:checked + label,
.product-form__input--pill input[value="Zèbre Denim"]:checked + label,
.product-form__input--pill input[value="Brun"]:checked + label,
.product-form__input--pill input[value="Brut"]:checked + label,
.product-form__input--pill input[value="BRUT"]:checked + label,
.product-form__input--pill input[value="Noisette"]:checked + label,
.product-form__input--pill input[value="NOISETTE"]:checked + label,
.product-form__input--pill input[value="Marron Glace"]:checked + label,
.product-form__input--pill input[value="MARRON GLACE"]:checked + label,
.product-form__input--pill input[value="Chataigne"]:checked + label,
.product-form__input--pill input[value="CHATAIGNE"]:checked + label,
.product-form__input--pill input[value="Curry"]:checked + label,
.product-form__input--pill input[value="CURRY"]:checked + label,
.product-form__input--pill input[value="Safran"]:checked + label,
.product-form__input--pill input[value="SAFRAN"]:checked + label,
.product-form__input--pill input[value="Fraise"]:checked + label,
.product-form__input--pill input[value="FRAISE"]:checked + label,
.product-form__input--pill input[value="Champagne"]:checked + label,
.product-form__input--pill input[value="CHAMPAGNE"]:checked + label,
.product-form__input--pill input[value="Byzantin"]:checked + label,
.product-form__input--pill input[value="BYZANTIN"]:checked + label,
.product-form__input--pill input[value="Aqua"]:checked + label,
.product-form__input--pill input[value="AQUA"]:checked + label,
.product-form__input--pill input[value="Azur"]:checked + label,
.product-form__input--pill input[value="AZUR"]:checked + label,
.product-form__input--pill input[value="Beurre"]:checked + label,
.product-form__input--pill input[value="BEURRE"]:checked + label,
.product-form__input--pill input[value="Poussin"]:checked + label,
.product-form__input--pill input[value="POUSSIN"]:checked + label,
.product-form__input--pill input[value="Peche"]:checked + label,
.product-form__input--pill input[value="PECHE"]:checked + label,
.product-form__input--pill input[value="Ficelle"]:checked + label,
.product-form__input--pill input[value="FICELLE"]:checked + label,
.product-form__input--pill input[value="Bonbon"]:checked + label,
.product-form__input--pill input[value="BONBON"]:checked + label,
.product-form__input--pill input[value="Bleu Electrique"]:checked + label,
.product-form__input--pill input[value="BLEU ELECTRIQUE"]:checked + label,
.product-form__input--pill input[value="Bleu Turquin"]:checked + label,
.product-form__input--pill input[value="BLEU TURQUIN"]:checked + label,
.product-form__input--pill input[value="Ambre"]:checked + label,
.product-form__input--pill input[value="AMBRE"]:checked + label,
.product-form__input--pill input[value="Dusty Pink"]:checked + label,
.product-form__input--pill input[value="Cacao"]:checked + label,
.product-form__input--pill input[value="CACAO"]:checked + label,
.product-form__input--pill input[value="Rayures Beiges"]:checked + label,
.product-form__input--pill input[value="Rayures Bleues"]:checked + label,
.product-form__input--pill input[value="RAYURES BLEUES"]:checked + label,
.product-form__input--pill input[value="Rayures Bleues et Jaunes"]:checked + label,
.product-form__input--pill input[value="Rayures Brunes"]:checked + label,
.product-form__input--pill input[value="Rayures Camel"]:checked + label,
.product-form__input--pill input[value="Rayures ciel"]:checked + label,
.product-form__input--pill input[value="RAYURES CIEL"]:checked + label,
.product-form__input--pill input[value="Rayures Ciel et Orange"]:checked + label,
.product-form__input--pill input[value="Rayures Fuchsia"]:checked + label,
.product-form__input--pill input[value="Rayures Grises"]:checked + label,
.product-form__input--pill input[value="RAYURES GRISES"]:checked + label,
.product-form__input--pill input[value="Rayures Marines"]:checked + label,
.product-form__input--pill input[value="Rayures Oranges"]:checked + label,
.product-form__input--pill input[value="RAYURES ORANGES"]:checked + label,
.product-form__input--pill input[value="Rayures roses"]:checked + label,
.product-form__input--pill input[value="RAYURES ROSES"]:checked + label,
.product-form__input--pill input[value="Rayures Turquoises"]:checked + label,
.product-form__input--pill input[value="RAYURES TURQUOISES"]:checked + label {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
},
.product-form__input--pill input[value="Cajun"]:checked + label,
.product-form__input--pill input[value="CAJUN"]:checked + label {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
},
.product-form__input--pill input[value="Rayures Vertes"]:checked + label,
.product-form__input--pill input[value="Rayures violettes"]:checked + label,
.product-form__input--pill input[value="RAYURES VIOLET"]:checked + label,
.product-form__input--pill input[value="Rayure Violet"]:checked + label,
.product-form__input--pill input[value="RAYURES NOIRES"]:checked + label,
.product-form__input--pill input[value="Roland Garros"]:checked + label,
.product-form__input--pill input[value="Shiny"]:checked + label,
.product-form__input--pill input[value="SHINY"]:checked + label,
.product-form__input--pill input[value="Caliente Club"]:checked + label,
.product-form__input--pill input[value="CALIENTE CLUB"]:checked + label,
.product-form__input--pill input[value="Solstice Pastel"]:checked + label,
.product-form__input--pill input[value="SOLSTICE PASTEL"]:checked + label,
.product-form__input--pill input[value="Hippie Twist"]:checked + label,
.product-form__input--pill input[value="HIPPIE TWIST"]:checked + label,
.product-form__input--pill input[value="Imaginary Street"]:checked + label,
.product-form__input--pill input[value="IMAGINARY STREET"]:checked + label,
.product-form__input--pill input[value="Origine"]:checked + label,
.product-form__input--pill input[value="ORIGINE"]:checked + label,
.product-form__input--pill input[value="Retro Bloom"]:checked + label,
.product-form__input--pill input[value="RETRO BLOOM"]:checked + label,
.product-form__input--pill input[value="Oasis Chromatique"]:checked + label,
.product-form__input--pill input[value="OASIS CHROMATIQUE"]:checked + label,
.product-form__input--pill input[value="Jungle chroma"]:checked + label,
.product-form__input--pill input[value="Faience Botanique"]:checked + label,
.product-form__input--pill input[value="Frida"]:checked + label,
.product-form__input--pill input[value="Mexican stripes"]:checked + label,
.product-form__input--pill input[value="Miami vice"]:checked + label,
.product-form__input--pill input[value="Motel dream"]:checked + label {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
}
/* Fix alignement des swatches de variants */
.variant-input-wrapper,
.product-form__input .color-swatch-wrapper,
fieldset.product-form__input {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.color-swatch,
.variant-input {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === 16 couleurs manquantes (pill + swatch) === */
.product-form__input--pill input[value="ARLEQUIN"] + label,
.product-form__input--pill input[value="Arlequin"] + label {
  background: conic-gradient(#E74C3C, #F1C40F, #2ECC71, #3498DB, #9B59B6, #E74C3C) !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}
.product-form__input--pill input[value="BAMBI"] + label,
.product-form__input--pill input[value="Bambi"] + label {
  background: #D2B48C !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}
.product-form__input--pill input[value="BOHO CHIC"] + label,
.product-form__input--pill input[value="Boho Chic"] + label {
  background: linear-gradient(135deg, #D4A820, #8B5E20, #C8D8A0) !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}
.product-form__input--pill input[value="GRIS CHINE"] + label,
.product-form__input--pill input[value="Gris Chiné"] + label,
.product-form__input--pill input[value="gris chiné"] + label {
  background: #B0AFAB !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}
.product-form__input--pill input[value="LILAS"] + label,
.product-form__input--pill input[value="Lilas"] + label {
  background: #C8A2C8 !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}
.product-form__input--pill input[value="MANGUE"] + label,
.product-form__input--pill input[value="Mangue"] + label {
  background: #FFB347 !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}
.product-form__input--pill input[value="MENTHE"] + label,
.product-form__input--pill input[value="Menthe"] + label {
  background: #98E8C8 !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}
.product-form__input--pill input[value="NOIR RAYONNE"] + label,
.product-form__input--pill input[value="Noir Rayonne"] + label {
  background: repeating-linear-gradient(45deg, #111 0px, #111 2px, #555 2px, #555 4px) !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}
.product-form__input--pill input[value="NYMPHEA"] + label,
.product-form__input--pill input[value="Nymphea"] + label {
  background: linear-gradient(135deg, #E7A9B3, #C8A2C8) !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}
.product-form__input--pill input[value="PALM MIRAGE"] + label,
.product-form__input--pill input[value="Palm Mirage"] + label {
  background: linear-gradient(135deg, #4A8C5C, #87CEEB) !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}
.product-form__input--pill input[value="PICASSO"] + label,
.product-form__input--pill input[value="Picasso"] + label {
  background: linear-gradient(135deg, #3498DB, #E74C3C, #F1C40F, #2ECC71) !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}
.product-form__input--pill input[value="RAYURE ORANGES"] + label,
.product-form__input--pill input[value="Rayure Oranges"] + label {
  background: repeating-linear-gradient(90deg, #E8873A 0px, #E8873A 3px, #fff 3px, #fff 6px) !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}
.product-form__input--pill input[value="RAYURE VIOLET"] + label,
.product-form__input--pill input[value="Rayure Violet"] + label {
  background: repeating-linear-gradient(90deg, #800080 0px, #800080 3px, #fff 3px, #fff 6px) !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}
.product-form__input--pill input[value="RAYURES MULTICO"] + label,
.product-form__input--pill input[value="Rayures Multico"] + label {
  background: repeating-linear-gradient(90deg, #E74C3C 0px, #E74C3C 3px, #F1C40F 3px, #F1C40F 6px, #2ECC71 6px, #2ECC71 9px, #3498DB 9px, #3498DB 12px) !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}
.product-form__input--pill input[value="SOLE MARE"] + label,
.product-form__input--pill input[value="Sole Mare"] + label {
  background: linear-gradient(135deg, #E7C94F, #4FA3D9) !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}
.product-form__input--pill input[value="TERRACOTA"] + label,
.product-form__input--pill input[value="Terracota"] + label {
  background: #C86432 !important;
  color: transparent !important;
  width: 32px !important; height: 32px !important; min-width: 0 !important;
  padding: 0 !important; border-radius: 50% !important; border: none !important;
}

/* Tooltip fiche produit — couleurs seulement */
.product-form__input--pill label {
  position: relative;
}

.product-form__input--pill label::before {
  display: none !important;
  content: none !important;
}

.product-form__input--pill label::after {
  display: none !important;
}

.product-form__input--color label::after {
  display: block !important;
  content: attr(data-value);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  color: #fff;
  font-size: 11px;
  white-space: nowrap;
  padding: 4px 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.product-form__input--color label:hover::after {
  opacity: 1;
}

/* Couleurs manquantes pour pastilles cards + filtres */
.color-swatch[data-color="LILAS"]{background:#C8A2C8!important;}
.color-swatch[data-color="MENTHE"]{background:#98E8C8!important;}
.color-swatch[data-color="VERT ANIS"]{background:#A4C639!important;}
.color-swatch[data-color="GRIS CHINE"]{background:#B0AFAB!important;}
.color-swatch[data-color="GRIS MULTICO"]{background:linear-gradient(135deg,#9A9A9A,#C8A8B8,#8BAAC4)!important;}
.color-swatch[data-color="NOISETTE"]{background:#A36A3C!important;}
.color-swatch[data-color="LEOPARD"]{background:radial-gradient(circle 3px,#3B2410 30%,#D4A45C 31%)!important;}
.color-swatch[data-color="PATCHWORK"]{background:linear-gradient(135deg,#E07040,#4A8C5C,#D4A820,#7B4FA3)!important;}
.color-swatch[data-color="PATCHWORK ANDALOU"]{background:linear-gradient(135deg,#E07040,#4A8C5C,#D4A820,#7B4FA3)!important;}
.color-swatch[data-color="ARLEQUIN"]{background:conic-gradient(#8B2927,#DB7553,#2E5A8C,#3E7A4A,#8B2927)!important;}
.color-swatch[data-color="BAMBI"]{background:#D2B48C!important;}
.color-swatch[data-color="PICASSO"]{background:linear-gradient(135deg,#3498DB,#E74C3C,#F1C40F,#2ECC71)!important;}
.color-swatch[data-color="BOHO CHIC"]{background:linear-gradient(135deg,#D4A820,#8B5E20,#C8D8A0)!important;}
.color-swatch[data-color="BOHO MEDINA"]{background:linear-gradient(135deg,#D4A820,#8B5E20,#C8D8A0)!important;}
.color-swatch[data-color="JARDIN NOMADE"]{background:linear-gradient(135deg,#4A8C5C,#E8873A,#F1C40F)!important;}
.color-swatch[data-color="NOIR RAYONNE"]{background:repeating-linear-gradient(45deg,#111 0px,#111 2px,#555 2px,#555 4px)!important;}
.color-swatch[data-color="NYMPHEA"]{background:linear-gradient(135deg,#E7A9B3,#C8A2C8)!important;}
.color-swatch[data-color="PALM MIRAGE"]{background:linear-gradient(135deg,#4A8C5C,#87CEEB)!important;}
.color-swatch[data-color="SOLE MARE"]{background:linear-gradient(135deg,#E8DFC4,#D9BE5A,#A389A0)!important;}
.color-swatch[data-color="SOLEIL D'EZE"]{background:linear-gradient(135deg,#E7C94F,#E8873A)!important;}
.color-swatch[data-color="VICHY CAFE"]{background:repeating-linear-gradient(45deg,#8B6914 0px,#8B6914 3px,#F4EBDD 3px,#F4EBDD 6px)!important;}
.color-swatch[data-color="ECRU BRODE"]{background:#F4EBDD!important;border:1px dashed #C8B38B!important;}
.color-swatch[data-color="CARREAUX ECRUS BRODE"]{background:repeating-linear-gradient(45deg,#F4EBDD 0px,#F4EBDD 4px,#D8C2A0 4px,#D8C2A0 5px)!important;}
.color-swatch[data-color="RAYURE BLEUE"]{background:repeating-linear-gradient(90deg,#5B7DB1 0px,#5B7DB1 3px,#fff 3px,#fff 6px)!important;}
.color-swatch[data-color="RAYURE ORANGE"]{background:repeating-linear-gradient(
      90deg,
      #E8956D 0px, #E8956D 2px,
      #F5C4A8 2px, #F5C4A8 5px,
      #F5EDE0 5px, #F5EDE0 8px,
      #C8A882 8px, #C8A882 10px,
      #F5EDE0 10px, #F5EDE0 14px
    )!important;}
.color-swatch[data-color="RAYURE ORANGES"]{background:repeating-linear-gradient(90deg,#E8873A 0px,#E8873A 3px,#fff 3px,#fff 6px)!important;}


/* === Sync pill backgrounds → .color-swatch (auto-generated) === */
.color-swatch[data-color="BEIGE ET CHOCOLAT"]{background:linear-gradient(135deg, #EAD8AB 50%, #6B3E2E 50%)!important;}
.color-swatch[data-color="BLANC ET NAVY"]{background:linear-gradient(135deg, #FFFFFF 50%, #000080 50%)!important;}
.color-swatch[data-color="BLEU ET IVOIRE"]{background:linear-gradient(135deg, #005BD3 50%, #FFFFD4 50%)!important;}
.color-swatch[data-color="BRUN ET ECRU"]{background:linear-gradient(135deg, #A5772A 50%, #F1F3E7 50%)!important;}
.color-swatch[data-color="CAMAIEU BLEU"]{background:linear-gradient(135deg, #A7C2EB 33%, #2762B0 33% 66%, #0A1F5C 66%)!important;}
.color-swatch[data-color="CARREAUX BRUNS"]{background:repeating-conic-gradient(#AE8A17 0% 25%, #D4B87A 0% 50%) 0 0/12px 12px!important;}
.color-swatch[data-color="CARREAUX CHOCOLAT ET NOIR"]{background:repeating-conic-gradient(#6B3E2E 0% 25%, #1A1A1A 0% 50%) 0 0/12px 12px!important;}
.color-swatch[data-color="CARREAUX CHOCOLATS ET VERTS"]{background:repeating-conic-gradient(#6B3E2E 0% 25%, #05AA3D 0% 50%) 0 0/12px 12px!important;}
.color-swatch[data-color="CARREAUX ECRUS BRODES"]{background:repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 9px,
      rgba(180, 140, 100, 0.4) 9px, rgba(180, 140, 100, 0.4) 11px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 9px,
      rgba(180, 140, 100, 0.4) 9px, rgba(180, 140, 100, 0.4) 11px
    ),
    #F2EDE3!important;}
.color-swatch[data-color="CARREAUX FUCHSIA"]{background:repeating-conic-gradient(#F1508B 0% 25%, #FBBAD4 0% 50%) 0 0/12px 12px!important;}
.color-swatch[data-color="CARREAUX JAUNE ET CIEL"]{background:repeating-conic-gradient(#FFE500 0% 25%, #A7C2EB 0% 50%) 0 0/12px 12px!important;}
.color-swatch[data-color="CARREAUX JAUNES ET BLEUS"]{background:repeating-conic-gradient(#FFE500 0% 25%, #2762B0 0% 50%) 0 0/12px 12px!important;}
.color-swatch[data-color="CARREAUX JAUNES ET CHOCOLATS"]{background:repeating-conic-gradient(#FFE500 0% 25%, #6B3E2E 0% 50%) 0 0/12px 12px!important;}
.color-swatch[data-color="CARREAUX MARINE"]{background:repeating-conic-gradient(#282099 0% 25%, #6070CC 0% 50%) 0 0/12px 12px!important;}
.color-swatch[data-color="CARREAUX MOUTARDE"]{background:repeating-conic-gradient(#E1DC47 0% 25%, #BFB520 0% 50%) 0 0/12px 12px!important;}
.color-swatch[data-color="CARREAUX VERTS ET VIOLET"]{background:repeating-conic-gradient(#79A4A4 0% 25%, #800080 0% 50%) 0 0/12px 12px!important;}
.color-swatch[data-color="ECRU ET NOISETTE"]{background:linear-gradient(135deg, #FEFEE0 50%, #A15E5E 50%)!important;}
.color-swatch[data-color="FRIDA"]{background:conic-gradient(#FF0000, #FFFF00, #008000, #FF8C00, #FF0000)!important;}
.color-swatch[data-color="MEXICAN STRIPES"]{background:repeating-linear-gradient(90deg,
    #FF0000 0px, #FF0000 4px,
    #FFE500 4px, #FFE500 8px,
    #008000 8px, #008000 12px,
    #FF8C00 12px, #FF8C00 16px)!important;}
.color-swatch[data-color="MIAMI VICE"]{background:linear-gradient(135deg, #F69C1E, #FF69B4)!important;}
.color-swatch[data-color="MULTICOLORED"]{background:conic-gradient(#FF0000, #FF7700, #FFFF00, #00AA00, #0000FF, #8B00FF, #FF0000)!important;}
.color-swatch[data-color="NOIR ÉCRU"]{background:repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 4px,
      rgba(30, 28, 26, 0.8) 4px, rgba(30, 28, 26, 0.8) 6px,
      transparent 6px, transparent 10px,
      rgba(30, 28, 26, 0.4) 10px, rgba(30, 28, 26, 0.4) 11px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 4px,
      rgba(30, 28, 26, 0.8) 4px, rgba(30, 28, 26, 0.8) 6px,
      transparent 6px, transparent 10px,
      rgba(30, 28, 26, 0.4) 10px, rgba(30, 28, 26, 0.4) 11px
    ),
    #F0EBE0!important;}
.color-swatch[data-color="RAYURE VIOLET"]{background:repeating-linear-gradient(90deg, #800080 0px, #800080 6px, #FFFFFF 6px, #FFFFFF 12px)!important;}
.color-swatch[data-color="RAYURES BEIGES"]{background:repeating-linear-gradient(90deg, #EAD8AB 0px, #EAD8AB 6px, #FFFFFF 6px, #FFFFFF 12px)!important;}
.color-swatch[data-color="RAYURES BLEUES ET JAUNES"]{background:repeating-linear-gradient(90deg, #005BD3 0px, #005BD3 6px, #E5DC61 6px, #E5DC61 12px)!important;}
.color-swatch[data-color="RAYURES BRUNES"]{background:repeating-linear-gradient(90deg, #BF943C 0px, #BF943C 6px, #FFFFFF 6px, #FFFFFF 12px)!important;}
.color-swatch[data-color="RAYURES CAMEL"]{background:repeating-linear-gradient(90deg, #D2AC2D 0px, #D2AC2D 6px, #FFFFFF 6px, #FFFFFF 12px)!important;}
.color-swatch[data-color="RAYURES CIEL ET ORANGE"]{background:repeating-linear-gradient(90deg, #A4E7F4 0px, #A4E7F4 6px, #FFA500 6px, #FFA500 12px)!important;}
.color-swatch[data-color="RAYURES CIEL"]{background:repeating-linear-gradient(90deg, #A4E7F4 0px, #A4E7F4 6px, #FFFFFF 6px, #FFFFFF 12px)!important;}
.color-swatch[data-color="RAYURES FUCHSIA"]{background:repeating-linear-gradient(90deg, #FF00FF 0px, #FF00FF 6px, #FFFFFF 6px, #FFFFFF 12px)!important;}
.color-swatch[data-color="RAYURES MARINES"]{background:repeating-linear-gradient(90deg, #282099 0px, #282099 6px, #FFFFFF 6px, #FFFFFF 12px)!important;}
.color-swatch[data-color="RAYURES VERTES"]{background:repeating-linear-gradient(90deg, #05AA3D 0px, #05AA3D 6px, #FFFFFF 6px, #FFFFFF 12px)!important;}
.color-swatch[data-color="ZÈBRE DENIM"]{background:repeating-linear-gradient(45deg, #376FA4 0px, #376FA4 4px, #FFFFFF 4px, #FFFFFF 8px)!important;}
.color-swatch[data-color="ÉCRU BRODÉ"]{background:radial-gradient(circle at 20% 25%, transparent 2px, #E8E0D0 2px, #E8E0D0 4px, transparent 4px),
    radial-gradient(circle at 50% 20%, transparent 2px, #E8E0D0 2px, #E8E0D0 4px, transparent 4px),
    radial-gradient(circle at 80% 30%, transparent 2px, #E8E0D0 2px, #E8E0D0 4px, transparent 4px),
    radial-gradient(circle at 30% 60%, transparent 2px, #E8E0D0 2px, #E8E0D0 4px, transparent 4px),
    radial-gradient(circle at 65% 65%, transparent 2px, #E8E0D0 2px, #E8E0D0 4px, transparent 4px),
    radial-gradient(circle at 20% 85%, transparent 2px, #E8E0D0 2px, #E8E0D0 4px, transparent 4px),
    radial-gradient(circle at 75% 85%, transparent 2px, #E8E0D0 2px, #E8E0D0 4px, transparent 4px),
    radial-gradient(circle at 20% 25%, #D4C8B4 0px, #D4C8B4 2px, transparent 2px),
    radial-gradient(circle at 50% 20%, #D4C8B4 0px, #D4C8B4 2px, transparent 2px),
    radial-gradient(circle at 80% 30%, #D4C8B4 0px, #D4C8B4 2px, transparent 2px),
    radial-gradient(circle at 30% 60%, #D4C8B4 0px, #D4C8B4 2px, transparent 2px),
    radial-gradient(circle at 65% 65%, #D4C8B4 0px, #D4C8B4 2px, transparent 2px),
    radial-gradient(circle at 20% 85%, #D4C8B4 0px, #D4C8B4 2px, transparent 2px),
    radial-gradient(circle at 75% 85%, #D4C8B4 0px, #D4C8B4 2px, transparent 2px),
    #F2EDE3!important;}


/* ------------------------------------------------------------------
   Coloris des fiches soeurs (« Pull Leila - Brume », « - Kaki »...)

   Ces 19 coloris n'existaient pas au nuancier : ils ne vivent que dans le
   SUFFIXE DU TITRE de fiches separees, jamais dans une option de variante.

   Les valeurs ne sont pas devinees d'apres le nom — plusieurs l'auraient
   ete a contresens : « Pollen » est un velours caramel et non un jaune,
   « Baie » une brique et non un violet, « Vigne » un vieux rose et non un
   pourpre sombre. Chaque teinte est la mediane des pixels du vetement sur
   sa photo produit, fond studio et carnation exclus, eclaircie d'environ
   15% pour rester lisible dans une pastille de 16px.

   Verification : la mediane echantillonnee pour OCRE tombe sur #C97225,
   la valeur exacte que la cliente avait notee sur sa maquette.
   ------------------------------------------------------------------ */

/* Unis */
.color-swatch[data-color="BURGUNDY"]{background:#5E2A3A!important;}
.color-swatch[data-color="BORDEAUX"]{background:#8A2434!important;}
.color-swatch[data-color="VIGNE"]{background:#8E4B5C!important;}
.color-swatch[data-color="RUBIS"]{background:#C4192B!important;}
.color-swatch[data-color="BAIE"]{background:#8C3A38!important;}
.color-swatch[data-color="OCRE"]{background:#C97225!important;}
.color-swatch[data-color="POLLEN"]{background:#A0602E!important;}
.color-swatch[data-color="PETROLE"]{background:#2E5A6D!important;}
.color-swatch[data-color="MINUIT"]{background:#2B3040!important;}
.color-swatch[data-color="BRUME"]{background:#78837E!important;}

/* Rayures — meme grammaire que RAYURES BEIGES / RAYURES CIEL plus haut.
   Attention : « RAYURES OCRE » (singulier) n'est pas « Rayures Ocres »
   (pluriel, plus haut). L'un est ocre sur creme, l'autre ocre sur brun
   fonce. Deux impressions differentes, deux entrees. */
.color-swatch[data-color="RAYURES OCRE"]{background:repeating-linear-gradient(90deg,#B08424 0px,#B08424 5px,#2E2A20 5px,#2E2A20 10px)!important;}
.color-swatch[data-color="RAYURES KHAKI"]{background:repeating-linear-gradient(90deg,#6E7151 0px,#6E7151 5px,#33371F 5px,#33371F 10px)!important;}
.color-swatch[data-color="RAYURES CAFE"]{background:repeating-linear-gradient(90deg,#9A7248 0px,#9A7248 3px,#EDE5D5 3px,#EDE5D5 9px)!important;}
/* Alias : le titre de la fiche dit « Rayures beige » au singulier, le
   nuancier historique « RAYURES BEIGES ». Meme impression, meme rendu. */
.color-swatch[data-color="RAYURES BEIGE"]{background:repeating-linear-gradient(90deg,#EAD8AB 0px,#EAD8AB 6px,#FFFFFF 6px,#FFFFFF 12px)!important;}

/* Carreaux — meme grammaire que CARREAUX BRUNS / CARREAUX MARINE plus haut */
.color-swatch[data-color="CARREAUX CHOCO"]{background:repeating-conic-gradient(#4A3E30 0% 25%,#7A6E5C 0% 50%) 0 0/12px 12px!important;}
.color-swatch[data-color="CARREAUX ROUGES"]{background:repeating-conic-gradient(#A83B3B 0% 25%,#D9C9A8 0% 50%) 0 0/12px 12px!important;}

/* Losanges facon jacquard */
.color-swatch[data-color="LOSANGE CHOCOLAT"]{background:repeating-linear-gradient(45deg,#3A2C22 0px,#3A2C22 4px,#5A4536 4px,#5A4536 8px)!important;}

/* Imprimes — aucune couleur unie ne les represente, on garde les tons
   dominants releves sur la photo, comme PATCHWORK ou JARDIN NOMADE. */
.color-swatch[data-color="FLEUR DE TRIESTE"]{background:linear-gradient(135deg,#E8DCC4,#6B2A2E,#4A4A2E)!important;}
.color-swatch[data-color="FOND DE TOILE"]{background:linear-gradient(135deg,#E0CDB4,#A8352C)!important;}
.color-swatch[data-color="ECO NOMADE"]{background:linear-gradient(135deg,#A83B3B,#4A7C4E,#C89A2E,#7B4FA3)!important;}

/* Deux coloris de VARIANTE qui n avaient aucune couleur (audit du catalogue :
   107 valeurs utilisees, 105 couvertes). Leur nom decrit le motif sans ambiguite,
   on reprend les teintes deja definies pour BLEU et TURQUOISE. */
.color-swatch[data-color="BLUE STRIPES"]{background:repeating-linear-gradient(90deg,#5B7DB1 0px,#5B7DB1 6px,#FFFFFF 6px,#FFFFFF 12px)!important;}
.color-swatch[data-color="RAYURE TURQUOISE"]{background:repeating-linear-gradient(90deg,#53C5C7 0px,#53C5C7 6px,#FFFFFF 6px,#FFFFFF 12px)!important;}

/* Guide des tailles */
.product-form__pill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.product-form__pill-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.size-guide-link {
  font-size: 12px;
  text-decoration: underline;
  color: #555;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
}

.size-guide-link:hover {
  color: #111;
}

.size-guide-modal {
  border: none;
  border-radius: 0;
  padding: 0;
  max-width: 700px;
  width: 90vw;
  max-height: 85vh;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.size-guide-modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.size-guide-modal__content {
  padding: 24px;
}

.size-guide-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.size-guide-modal__header h2 {
  margin: 0;
  font-size: 18px;
}

.size-guide-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #555;
}

.size-guide-modal__close:hover {
  color: #111;
}

.size-guide-modal__body {
  overflow-y: auto;
  max-height: 65vh;
}

.size-guide-modal__body table {
  width: 100%;
  border-collapse: collapse;
}

.size-guide-modal__body th,
.size-guide-modal__body td {
  padding: 8px 12px;
  border: 1px solid #ddd;
  text-align: center;
  font-size: 13px;
}

.size-guide-modal__body th {
  background: #f5f5f5;
  font-weight: 600;
}

/* Wishlist coeur */
/* Pas de pastille blanche derriere le coeur : demande cliente, pour coller a
   Minuit Douze. On garde une zone de 32px pour rester confortable au doigt,
   mais elle est transparente. */
.card-wishlist {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  background: transparent;
  border: none;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.card-wishlist:hover {
  transform: scale(1.1);
}

.card-wishlist:hover .card-wishlist__icon {
  color: #e74c3c;
}

.card-wishlist.is-active .card-wishlist__icon {
  fill: #e74c3c;
  color: #e74c3c;
}

.card-wishlist__icon {
  color: rgb(var(--color-foreground));
  transition: color 0.2s ease;
}

/* ------------------------------------------------------------------
   Wishlist — animation d'ajout
   Volontairement asymetrique : l'ajout est celebre (pop + remplissage
   + onde), le retrait se contente d'un fondu. On ne fete pas un retrait.
   Tout passe par transform / opacity, compositables par le GPU.
   ------------------------------------------------------------------ */
:root {
  /* Etait #e74c3c. La cliente veut le coeur plein en noir. On passe par la
     couleur de texte du schema courant plutot que par un noir fige : la valeur
     est substituee la ou la variable est lue, donc a l interieur de la section,
     et le coeur suivra si un jour un schema sombre est utilise. */
  --wishlist-accent: rgb(var(--color-foreground));
  --wishlist-repos: #555;
}

/* Le remplissage monte en douceur au lieu de claquer d'un coup. */
.card-wishlist__icon path,
.product-wishlist__icon path {
  fill: var(--wishlist-accent);
  fill-opacity: 0;
  transition: fill-opacity 320ms cubic-bezier(0.33, 1, 0.68, 1);
}

.card-wishlist.is-active .card-wishlist__icon path,
.product-wishlist.is-active .product-wishlist__icon path {
  fill-opacity: 1;
}

.card-wishlist.is-active .card-wishlist__icon,
.product-wishlist.is-active .product-wishlist__icon {
  color: var(--wishlist-accent);
}

/* Retrait : simple retour au calme, sans rebond. */
.card-wishlist__icon,
.product-wishlist__icon {
  transition: color 280ms cubic-bezier(0.33, 1, 0.68, 1),
    transform 280ms cubic-bezier(0.33, 1, 0.68, 1);
}

/* Ajout : le coeur s'ecrase puis depasse legerement avant de se poser. */
@keyframes wishlist-pop {
  0% {
    transform: scale(1);
  }
  22% {
    transform: scale(0.86);
  }
  52% {
    transform: scale(1.14);
  }
  76% {
    transform: scale(0.97);
  }
  100% {
    transform: scale(1);
  }
}

.card-wishlist.is-added .card-wishlist__icon,
.product-wishlist.is-added .product-wishlist__icon {
  animation: wishlist-pop 560ms cubic-bezier(0.33, 1, 0.68, 1);
}

/* Onde qui s'echappe du bouton rond de la carte. */
.card-wishlist::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--wishlist-accent);
  opacity: 0;
  pointer-events: none;
}

@keyframes wishlist-ring {
  0% {
    opacity: 0.45;
    transform: scale(0.75);
  }
  100% {
    opacity: 0;
    transform: scale(2.1);
  }
}

.card-wishlist.is-added::after {
  animation: wishlist-ring 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Le badge du header accuse reception. */
@keyframes wishlist-badge-pop {
  0% {
    transform: scale(1);
  }
  38% {
    transform: scale(1.32);
  }
  100% {
    transform: scale(1);
  }
}

.wishlist-count-bubble.is-bumped {
  animation: wishlist-badge-pop 420ms cubic-bezier(0.33, 1, 0.68, 1);
}

/* Respect du reglage systeme : on garde le changement de couleur,
   qui porte l'information d'etat, on supprime tout le mouvement. */
@media (prefers-reduced-motion: reduce) {
  .card-wishlist.is-added .card-wishlist__icon,
  .product-wishlist.is-added .product-wishlist__icon,
  .card-wishlist.is-added::after,
  .wishlist-count-bubble.is-bumped {
    animation: none;
  }
}

/* Jeton « +1 » qui rejoint le coeur du header.
   position: fixed + coordonnees viewport : insensible au defilement pendant
   le vol. pointer-events: none pour ne jamais gener un clic. */
.wishlist-fly {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 100%;
  background: var(--wishlist-accent);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity;
}

/* Retrait : le badge accuse le coup sans le celebrer.
   Creux bref, sans depassement — a distinguer du pop d'ajout. */
@keyframes wishlist-badge-dip {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.82);
  }
  100% {
    transform: scale(1);
  }
}

.wishlist-count-bubble.is-dipped {
  animation: wishlist-badge-dip 300ms cubic-bezier(0.33, 1, 0.68, 1);
}

@media (prefers-reduced-motion: reduce) {
  .wishlist-count-bubble.is-dipped {
    animation: none;
  }
}

/* Tooltip page catégorie */
.card-swatches {
  overflow: visible !important;
  position: relative;
  z-index: 2;
}

/* Nom du coloris au survol d une pastille. Cree par assets/card-swatch-hover.js,
   pose en absolu pour ne pas decaler la carte quand il apparait — sans ca les
   titres des cartes voisines sauteraient d une ligne au passage de la souris. */
.card-swatches__nom {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 4;
  padding: 0.2rem 0.6rem;
  background: rgb(var(--color-background));
  border: 1px solid rgba(var(--color-foreground), 0.18);
  font-size: 1.1rem;
  line-height: 1.5;
  white-space: nowrap;
  color: rgb(var(--color-foreground));
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.card-swatches__nom.is-visible {
  opacity: 1;
}

/* Les coloris de variante sont saisis en capitales dans la boutique (« NOIR »),
   les suffixes de titre en casse normale (« Chocolat »). On uniformise a
   l affichage en casse de phrase, sans toucher aux donnees. */
.card-swatches__nom {
  text-transform: lowercase;
}

.card-swatches__nom::first-letter {
  text-transform: uppercase;
}

.card__information {
  overflow: visible !important;
}

.card-swatches .color-swatch {
  position: relative;
}

.card-swatches .color-swatch::before {
  content: attr(data-color);
  /* Les pastilles des fiches a variantes portent line-height:0, pour que le lien
     de 16 px ne prenne pas la hauteur d une ligne de texte. La bulle en heritait :
     son fond noir se reduisait aux 8 px du padding pendant que le texte debordait
     dessus et dessous, laissant le prix apparaitre au travers. */
  line-height: 1.4;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  color: #fff;
  font-size: 11px;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0 !important;
  transition: opacity 0.2s ease;
  z-index: 10;
}

.card-swatches .color-swatch:hover::before {
  opacity: 1 !important;
}

@media screen and (min-width: 990px) {
  .card-wrapper.swatch-hover-active .media.media--hover-effect > img:first-child:not(:only-child) {
    opacity: 1 !important;
  }
  .card-wrapper.swatch-hover-active .media.media--hover-effect > img + img {
    opacity: 0 !important;
  }
}

/* Tailles au hover sur la card image */
.card__media {
  position: relative;
}

.card-sizes {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: flex-start;
  padding: 10px;
  z-index: 2;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.08));
}

@media screen and (min-width: 990px) {
  .card-sizes:not(.card-sizes--below) {
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    background: none;
  }

  .card-wrapper:hover .card-sizes:not(.card-sizes--below) {
    opacity: 1;
    pointer-events: auto;
  }
}

.card-sizes ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: flex-start;
}

.card-sizes li a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 30px;
  padding: 0 6px;
  background: #fff;
  border: 1px solid #ddd;
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  color: #111;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, color 0.2s ease;
}

.card-sizes li a:hover {
  background: #111;
  color: #fff;
  border-color: #111;
}

.card-sizes li.is-disabled a {
  opacity: 0.35;
  pointer-events: none;
  text-decoration: line-through;
}

/* Dawn souligne tous les liens de la carte au survol (.underline-links-hover:hover a,
   dans component-card.css). Les tailles doivent rester des pastilles, pas des liens
   soulignes : on remonte la specificite pour annuler la regle du theme. */
.card-wrapper:hover .card-sizes li a {
  text-decoration: none;
}

.card-wrapper:hover .card-sizes li.is-disabled a {
  text-decoration: line-through;
}

/* Variante mobile : la meme rangee, posee sous l image au lieu d etre en
   incrustation. Une incrustation revelee au survol n a pas de sens sans souris,
   donc en dessous de 990px les tailles sont toujours visibles, sous la photo et
   alignees sur le titre. Le basculement entre les deux se fait par les classes
   small-hide/medium-hide/large-up-hide posees dans snippets/card-sizes.liquid. */
.card-sizes--below {
  position: static;
  padding: 0.8rem 0 0;
  background: none;
}

.card-sizes--below ul {
  gap: 0.4rem;
}

.card-sizes--below li a {
  min-width: 0;
  height: auto;
  padding: 0.5rem;
  font-size: 1.1rem;
}

/* Wishlist — icone header desktop */
.header__icon--wishlist {
  position: relative;
}

.header__icon--wishlist .icon-wishlist {
  height: 2rem;
  width: 2rem;
}

.header__icon--wishlist:hover .icon-wishlist {
  transform: scale(1.07);
}

.wishlist-count-bubble {
  position: absolute;
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  height: 1.7rem;
  width: 1.7rem;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  bottom: 0.8rem;
  left: 2.2rem;
  line-height: calc(1 + 0.1 / var(--font-body-scale));
}

.wishlist-count-bubble[hidden] {
  display: none;
}

/* Wishlist — bouton fiche produit */
.product-wishlist {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 100%;
  margin-top: 1.6rem;
  padding: 0.6rem 0;
  background: none;
  border: none;
  cursor: pointer;
  color: rgb(var(--color-foreground));
  font-family: inherit;
  font-size: 1.4rem;
}

.product-wishlist__label {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.product-wishlist:hover .product-wishlist__icon,
.product-wishlist.is-active .product-wishlist__icon {
  color: #e74c3c;
}

.product-wishlist.is-active .product-wishlist__icon {
  fill: #e74c3c;
}

.product-wishlist__icon {
  transition: color 0.2s ease, fill 0.2s ease;
}

/* Wishlist — page Mes favoris */
.wishlist-page__title {
  margin-top: 0;
  margin-bottom: 3rem;
}

.wishlist-page__loading,
.wishlist-page__empty {
  padding: 4rem 0;
  text-align: center;
}

.wishlist-page__empty p {
  margin-top: 0;
  margin-bottom: 2.4rem;
}

.wishlist-page__loading[hidden],
.wishlist-page__empty[hidden],
.wishlist-page [data-wishlist-grid][hidden] {
  display: none;
}

/* ------------------------------------------------------------------
   Bandeau de réassurance (sections/reassurance.liquid)
   ------------------------------------------------------------------ */
.reassurance--divider {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.12);
}

.reassurance__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem 1.5rem;
  margin: 0;
  padding: 0;
}

@media screen and (min-width: 990px) {
  .reassurance__grid {
    grid-template-columns: repeat(var(--reassurance-cols, 4), 1fr);
    gap: 2rem;
  }
}

.reassurance__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
}

.reassurance__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-decoration: none;
  color: inherit;
}

.reassurance__link:hover .reassurance__text {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.reassurance__icon .svg-wrapper,
.reassurance__icon svg {
  width: 3.2rem;
  height: 3.2rem;
}

.reassurance__icon svg {
  color: rgb(var(--color-foreground));
}

.reassurance__text {
  font-size: 1.1rem;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  line-height: 1.4;
  color: rgba(var(--color-foreground), 0.85);
}

/* ------------------------------------------------------------------
   Pied de page — colonne Newsletter (bloc de la grille)
   ------------------------------------------------------------------ */

/* Titres de colonnes soulignés, comme sur la maquette. */
.footer-block__heading {
  text-decoration: underline;
  text-underline-offset: 0.4rem;
  text-decoration-thickness: 0.1rem;
}

/* Champ e-mail réduit à un trait, avec le bouton texte sur la même ligne. */
.field--newsletter-inline {
  display: flex;
  align-items: center;
  border: none;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.35);
  border-radius: 0;
  min-height: auto;
  transition: border-color 0.2s ease;
}

.field--newsletter-inline::before,
.field--newsletter-inline::after {
  content: none;
}

.field--newsletter-inline:focus-within {
  border-bottom-color: rgb(var(--color-foreground));
}

.field--newsletter-inline .field__input {
  flex: 1 1 auto;
  min-width: 0;
  box-shadow: none;
  border: none;
  background: transparent;
  padding: 0.8rem 0;
  font-size: 1.4rem;
}

.field--newsletter-inline .field__input:focus {
  box-shadow: none;
  outline: none;
}

/* Le libellé flottant de Dawn n'a pas de place dans un champ d'une ligne. */
.field--newsletter-inline .field__label {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Dawn masque les placeholders (opacity: 0) au profit d'un label flottant.
   Ce champ d'une seule ligne n'a pas la place d'un label flottant : sans cette
   regle, le visiteur voit un trait vide sans savoir quoi y mettre. */
.field--newsletter-inline .field__input::placeholder {
  opacity: 1;
  color: rgba(var(--color-foreground), 0.55);
}

.newsletter-form__button--text {
  flex: 0 0 auto;
  background: none;
  border: none;
  padding: 0.8rem 0 0.8rem 1.2rem;
  cursor: pointer;
  color: rgb(var(--color-foreground));
  font-family: inherit;
  font-size: 1.4rem;
  min-width: auto;
  min-height: auto;
}

.newsletter-form__button--text:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}
/* Colonne Newsletter : les quatre lignes — titre, accroche, champ, message de
   confirmation — doivent partir du meme bord.
   Deux ecarts s y opposaient. Le champ heritait d un pixel de marge de Dawn.
   Le message, lui, poussait son texte de 20 px : sa pastille de validation
   occupe le debut de la ligne, si bien que « Merci de votre inscription »
   commencait plus a droite que tout le reste. La pastille est donc retiree —
   le message reste vert et explicite sans elle. */
.footer-block--newsletter-col .field--newsletter-inline .field__input {
  margin-left: 0;
}

.footer-block--newsletter-col .newsletter-form__message .svg-wrapper {
  display: none;
}


.footer__list-social--block {
  justify-content: flex-start;
  margin-top: 2rem;
}

/* ------------------------------------------------------------------
   Pied de page mobile — newsletter en tête, menus en accordéon
   ------------------------------------------------------------------ */

/* Le <summary> ne doit jamais montrer le marqueur natif du navigateur. */
.footer-block__summary {
  list-style: none;
  cursor: pointer;
}

.footer-block__summary::-webkit-details-marker,
.footer-block__summary::marker {
  display: none;
  content: '';
}

.footer-block__summary .footer-block__heading {
  margin: 0;
}

/* icon-caret.svg a un viewBox 10x6 : le forcer dans un carre le decentrait,
   et la rotation le faisait sauter. Boite carree fixe + svg au bon ratio. */
.footer-block__chevron {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  transform-origin: 50% 50%;
  transition: transform 0.25s ease;
}

.footer-block__chevron svg {
  width: 1rem;
  height: 0.6rem;
}

@media screen and (max-width: 749px) {
  /* Dawn empile les blocs en `display: block`, ce qui rend `order` inopérant.
     On repasse en flex pour pouvoir remonter la newsletter en premier. */
  /* section-footer.css impose `.footer .grid { display: block }` et sa feuille
     est chargee APRES base.css : a specificite egale il gagnait, et `order`
     restait sans effet. On ajoute la classe du conteneur pour passer devant. */
  .footer .footer__blocks-wrapper.grid {
    display: flex;
    flex-direction: column;
  }

  .footer-block--newsletter-col {
    order: -1;
    align-items: flex-start;
    text-align: left;
  }

  /* Les menus se resserrent : en accordéon ils n'ont plus besoin d'air. */
  .footer-block.footer-block--menu.grid__item {
    margin: 0;
    border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.12);
  }

  .footer-block__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.6rem 0;
  }

  .footer-block__chevron {
    display: flex;
  }

  .footer-block__details[open] .footer-block__chevron {
    transform: rotate(180deg);
  }

  .footer-block__details .footer-block__details-content {
    padding-bottom: 1.6rem;
  }

  /* La newsletter est centrée par Dawn sur mobile : la maquette l'aligne à gauche. */
  .footer-block--newsletter-col .footer__list-social {
    justify-content: flex-start;
  }
}

@media screen and (min-width: 750px) {
  /* Sur ordinateur l'accordéon est neutralisé : titre simple, pas de curseur. */
  .footer-block__summary {
    cursor: default;
    pointer-events: none;
  }
}

/* ------------------------------------------------------------------
   Pied de page — allègement typographique
   ------------------------------------------------------------------ */
.footer-block__heading {
  font-size: 1.5rem;
  margin-bottom: 1.6rem;
}

/* Les trois colonnes de menu portent leur titre dans un <summary> — l accordeon
   mobile — et « .footer-block__summary .footer-block__heading { margin: 0 } »
   plus haut y annulait la marge du titre. Resultat : zero pixel entre le titre
   et le premier lien, alors que la colonne Newsletter, dont le titre n est pas
   dans un summary, en gardait vingt. Le souligne du titre, decale de 4 px,
   venait mordre dans ce vide.
   La marge est donc posee sur le CONTENU, la ou aucune regle ne l annule. Elle
   se fond avec celle du titre de la Newsletter au lieu de s y ajouter, donc les
   quatre colonnes retombent sur le meme ecart. */
.footer-block__details-content {
  margin-top: 2.4rem;
}

@media screen and (min-width: 990px) {
  .footer-block__heading {
    font-size: 1.5rem;
  }
}

.footer .footer-block__details-content,
.footer .list-menu__item--link {
  font-size: 1.3rem;
}

@media screen and (max-width: 749px) {
  .footer-block__summary {
    padding: 1.4rem 0;
  }

  /* Dawn pose `margin-bottom: 4rem` sur .footer-block__details-content et ne le
     remet a zero qu'au-dessus de 750px : dans un accordeon ca laissait 40px de
     vide mort sous chaque liste ouverte. */
  .footer-block__details .footer-block__details-content {
    margin-bottom: 0;
    padding-bottom: 1.2rem;
  }

  .footer-block__details .footer-block__details-content li {
    margin-bottom: 0.4rem;
  }

  /* Les liens d'un accordeon sont la cible principale du doigt : ils meritent
     plus que la taille reduite utilisee dans les colonnes de bureau. */
  .footer-block__details .footer-block__details-content,
  .footer-block__details .list-menu__item--link {
    font-size: 1.7rem;
  }

  /* Le titre suit, sinon les liens deviendraient plus gros que leur propre
     rubrique et la hierarchie s'inverserait. */
  .footer-block__summary .footer-block__heading {
    font-size: 1.7rem;
  }
}

/* Coloris presents au catalogue mais absents du nuancier : leur pastille
   restait vide. Chaque valeur vient de la photo de la variante concernee. */
.color-swatch[data-color="KHAKI"]{background:#6E7151!important;}
.color-swatch[data-color="MOUSSE"]{background:#6F7F2E!important;}
.color-swatch[data-color="MANGUE"]{background:#D0B41F!important;}
.color-swatch[data-color="TERRACOTA"]{background:#C0703A!important;}
.color-swatch[data-color="CORAIL LUREX"]{background:#E4552F!important;}
.color-swatch[data-color="PALM MIRAGE"]{background:linear-gradient(135deg,#7FA0D8,#FFFFFF,#4E6FB5)!important;}
.color-swatch[data-color="RETRO BLOOM"]{background:conic-gradient(#3A5DA8,#6E7151,#C4453A,#E8DCC0,#3A5DA8)!important;}
.color-swatch[data-color="OASIS CHROMATIQUE"]{background:conic-gradient(#E86A3A,#4FA85C,#F0C93A,#E86AA8,#E86A3A)!important;}
.color-swatch[data-color="SHINY"]{background:conic-gradient(#C4712E,#4F7C59,#B05A6A,#8E6BA0,#C4712E)!important;}

/* ------------------------------------------------------------------
   Cloisonnement des empilements

   Les surcouches d une carte — coeur, etiquette de coloris, rangee de
   tailles, pastilles — portent des z-index qui n ont de sens QUE dans la
   carte. Sans contexte d empilement pour les retenir, ils se comparent a
   ceux de la page entiere : le coeur (3) passait ainsi par-dessus le
   panneau de filtres (2), et l infobulle d une pastille (10) serait passee
   par-dessus l entete (3).

   isolation: isolate cree ce contexte sans rien positionner ni rogner. Les
   z-index internes gardent leur ordre relatif, mais ne peuvent plus sortir.
   C est l outil que Dawn emploie deja sur .product-grid pour la meme raison.

   Ne pas remplacer par une surenchere de z-index sur les filtres et
   l entete : ce serait a refaire a chaque nouvelle surcouche. */
.card-wrapper {
  isolation: isolate;
}

/* Le coeur de la fiche produit, lui, vit dans la photo et non dans une
   carte. Son z-index 3 egalait celui de l entete, que seul l ordre du DOM
   departageait en sa faveur — il serait passe devant des que la boutique
   activerait l entete collante. */
.product-media-container {
  isolation: isolate;
}

/* Meme raison pour les pastilles de coloris de la fiche produit : elles
   sont hors carte, et leur infobulle monte a 10. */
.product-siblings {
  isolation: isolate;
}

/* Guide des tailles : les tableaux font quatre colonnes, ce qui deborde d un
   telephone. Le debordement doit rester dans la fenetre et defiler la, sinon
   c est la page entiere qui glisse lateralement. */
.size-guide-modal__body {
  overflow-x: auto;
}

@media screen and (max-width: 480px) {
  .size-guide-modal__content {
    padding: 16px;
  }

  .size-guide-modal__body th,
  .size-guide-modal__body td {
    padding: 6px 8px;
    font-size: 1.3rem;
  }
}

/* ------------------------------------------------------------------
   Cibles tactiles : 44 px au doigt

   Les valeurs mesurees avant correction, sur la page reelle :
   coeur de carte 32, coeur de fiche 40, pastille de coloris 16,
   taille sous une carte 39x30, taille sur la fiche 45x30,
   lien du guide des tailles 114x22, bouton d apercu rapide 290x42,
   ligne de filtre 308x38, agrandissement de la photo 40x39.

   La regle est d agrandir la ZONE et non le dessin : le coeur reste un
   coeur de 20 px, la pastille un point de 16 px. On etire donc la boite
   cliquable, pas l icone.
   ------------------------------------------------------------------ */

/* Coeurs */
.card-wishlist {
  width: 44px;
  height: 44px;
  /* la boite grandit de 12 px : on la recentre pour que le coeur ne bouge
     pas d un pixel par rapport au coin de la photo */
  top: 4px;
  right: 4px;
}

.product-media-wishlist {
  width: 44px;
  height: 44px;
  top: 1.4rem;
  right: 1.4rem;
}

/* Tailles : sous une carte, et sur la fiche produit */
@media screen and (max-width: 989px) {
  .card-sizes--below li a {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Uniquement les TAILLES : la meme regle sur les coloris etirait les
   pastilles rondes en ovales, le fieldset portant les deux classes. */
.product-form__input--size label {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Coloris : la pastille reste un rond de 32 px, on ajoute une zone
   invisible de 44 px. Le pas entre deux pastilles vaut justement 44 px,
   les zones se touchent donc sans jamais se recouvrir. ::after est deja
   pris par l infobulle du nom de coloris. */
.product-form__input--color label {
  position: relative;
  /* le pas entre deux pastilles valait 32 + 5 de marge + 4 d ecart = 41 px,
     soit 3 px de moins que la zone de 44 : les deux zones se recouvraient et
     un doigt pose entre deux pastilles pouvait choisir la mauvaise. On porte
     la marge a 8 px pour que le pas fasse exactement 44. */
}

/* La marge vient de component-product-variant-picker.css, chargee apres
   base.css et a specificite superieure : il faut viser plus precis pour la
   depasser, sinon la valeur reste a 5 px. */
.product-form__input--pill.product-form__input--color input[type='radio'] + label {
  margin-right: 8px;
}

.product-form__input--color label::before {
  /* Ce pseudo-element sert deja au theme : une regle le neutralise pour tous
     les --pill, une autre le place a -1px avec z-index -1 pour dessiner
     l anneau de selection. Chaque propriete doit donc etre reprise en
     !important, sinon la zone se retrouve derriere la pastille et decalee
     vers la gauche — elle deborde alors sur la voisine d un cote et ne
     couvre rien de l autre. */
  display: block !important;
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  /* La zone prend toute la hauteur utile et tout le pas entre deux pastilles,
     jamais plus : 44 px de large sur un pas de 36 empieterait sur la voisine et
     selectionnerait le mauvais coloris. Meme parti pris que sur les cartes. */
  width: calc(100% + 8px) !important;
  height: 44px !important;
  z-index: 0 !important;
  background: none !important;
  border: none !important;
}

/* Les pastilles de la fiche produit mesuraient 32 px depuis l installation du
   theme, alors que celles des fiches a coloris separes en font 28. Deux tailles
   pour la meme chose, selon que le coloris est une variante ou une fiche a part
   — ce qui ne se voit pas d un ecran a l autre, mais donne l impression que
   certaines pastilles ont grossi. On aligne sur 28. */
.product-form__input--pill.product-form__input--color input[type='radio'] + label {
  width: 28px !important;
  height: 28px !important;
}

/* Liens et boutons trop plats */
.size-guide-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.quick-add__submit,
.product-sticky-bar__add,
.product-sticky-bar__buy {
  min-height: 44px;
}

product-modal .product-media-modal__toggle {
  width: 44px;
  height: 44px;
}

.shopify-payment-button__more-options {
  min-height: 44px;
}

/* Filtres : la ligne entiere est cliquable, elle doit etre assez haute */
.facets__label,
.mobile-facets__label {
  min-height: 44px;
}

.facets__summary {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Pastilles de coloris : 44 px chacune est impossible ici — sept coloris
   feraient 308 px de large sur un telephone de 390 px, marges comprises.
   On prend donc toute la hauteur disponible et toute la largeur du pas
   entre deux pastilles, sans jamais empieter sur la voisine : la zone
   atteint 44 px en hauteur et le pas complet en largeur, ce qui vaut
   mieux que les 16 px actuels et ne peut pas selectionner le mauvais
   coloris. */
.card-swatches .color-swatch,
.card-swatches--product .color-swatch {
  position: relative;
}

.card-swatches .color-swatch::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 44px;
  /* la moitie de l ecart de chaque cote, jamais plus */
  width: calc(100% + var(--ecart-pastilles, 10px));
}

/* Reliquat du balayage : boutons et liens encore trop plats ou trop etroits */
.cart-notification__links .link,
.facets__reset {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* quick-add.css et section-main-product.css sont chargees APRES base.css et
   fixent ces largeurs a 4rem avec la meme specificite. On remonte d un cran en
   passant par l element parent, sinon la regle ci-dessous serait ignoree. */
quick-add-modal .quick-add-modal__toggle {
  width: 44px;
  height: 44px;
}

.search-modal__close-button {
  min-width: 44px;
}

/* ==== DEBUT bloc genere : accord des deux tables de couleurs ==== */
/* Genere par scripts/unify-color-swatches.js — ne pas editer a la main.
   107 coloris en vitrine mis d accord entre les deux tables. */

.color-swatch[data-color="AMBRE"],
.product-form__input--pill input[value="AMBRE"] + label,
.color-swatch[data-color="Ambre"],
.product-form__input--pill input[value="Ambre"] + label {
  background: #C8872F !important;
}

.color-swatch[data-color="ANIS"],
.product-form__input--pill input[value="ANIS"] + label,
.color-swatch[data-color="Anis"],
.product-form__input--pill input[value="Anis"] + label {
  background: #B7D63D !important;
}

.color-swatch[data-color="AQUA"],
.product-form__input--pill input[value="AQUA"] + label,
.color-swatch[data-color="Aqua"],
.product-form__input--pill input[value="Aqua"] + label {
  background: #7ED6D1 !important;
}

.color-swatch[data-color="ARLEQUIN"],
.product-form__input--pill input[value="ARLEQUIN"] + label,
.color-swatch[data-color="Arlequin"],
.product-form__input--pill input[value="Arlequin"] + label {
  background: conic-gradient(#E74C3C, #F1C40F, #2ECC71, #3498DB, #9B59B6, #E74C3C) !important;
}

.color-swatch[data-color="BAIE"],
.product-form__input--pill input[value="BAIE"] + label {
  background: #8C3A38 !important;
}

.color-swatch[data-color="BEIGE"],
.product-form__input--pill input[value="BEIGE"] + label,
.color-swatch[data-color="Beige"],
.product-form__input--pill input[value="Beige"] + label {
  background: #D8C2A0 !important;
}

.color-swatch[data-color="BEURRE"],
.product-form__input--pill input[value="BEURRE"] + label,
.color-swatch[data-color="Beurre"],
.product-form__input--pill input[value="Beurre"] + label {
  background: #F3E5A0 !important;
}

.color-swatch[data-color="BLEU"],
.product-form__input--pill input[value="BLEU"] + label,
.color-swatch[data-color="Bleu"],
.product-form__input--pill input[value="Bleu"] + label {
  background: #5B7DB1 !important;
}

.color-swatch[data-color="BLEU ELECTRIQUE"],
.product-form__input--pill input[value="BLEU ELECTRIQUE"] + label,
.color-swatch[data-color="Bleu Electrique"],
.product-form__input--pill input[value="Bleu Electrique"] + label {
  background: #0066FF !important;
}

.color-swatch[data-color="BLEU ROI"],
.product-form__input--pill input[value="BLEU ROI"] + label,
.color-swatch[data-color="Bleu Roi"],
.product-form__input--pill input[value="Bleu Roi"] + label {
  background: #224D9C !important;
}

.color-swatch[data-color="BLUE STRIPES"],
.product-form__input--pill input[value="BLUE STRIPES"] + label {
  background: repeating-linear-gradient(90deg,#5B7DB1 0px,#5B7DB1 6px,#FFFFFF 6px,#FFFFFF 12px) !important;
}

.color-swatch[data-color="BOHO MEDINA"],
.product-form__input--pill input[value="BOHO MEDINA"] + label,
.color-swatch[data-color="Boho Medina"],
.product-form__input--pill input[value="Boho Medina"] + label {
  background: radial-gradient(ellipse 10px 10px at 22% 28%, #D4A820 0%, #D4A820 60%, #6B4210 60%, #6B4210 75%, transparent 76%),
    radial-gradient(ellipse 9px 9px at 72% 65%, #D4A820 0%, #D4A820 60%, #6B4210 60%, #6B4210 75%, transparent 76%),
    radial-gradient(ellipse 7px 7px at 50% 15%, #D4A820 0%, #D4A820 60%, #6B4210 60%, #6B4210 75%, transparent 76%),
     
    radial-gradient(ellipse 5px 8px at 40% 55%, #8B5E20 0%, #8B5E20 70%, transparent 71%),
    radial-gradient(ellipse 5px 7px at 80% 35%, #8B5E20 0%, #8B5E20 70%, transparent 71%),
     
    repeating-linear-gradient(
      90deg,
      #F5F0E8 0px, #F5F0E8 3px,
      #C8D8A0 3px, #C8D8A0 4px,
      #F5F0E8 4px, #F5F0E8 6px,
      #E8C8D4 6px, #E8C8D4 7px,
      #F5F0E8 7px, #F5F0E8 10px
    ) !important;
}

.color-swatch[data-color="BORDEAUX"],
.product-form__input--pill input[value="BORDEAUX"] + label,
.color-swatch[data-color="Bordeaux"],
.product-form__input--pill input[value="Bordeaux"] + label {
  background: #8A2434 !important;
}

.color-swatch[data-color="BRUME"],
.product-form__input--pill input[value="BRUME"] + label {
  background: #78837E !important;
}

.color-swatch[data-color="BRUT"],
.product-form__input--pill input[value="BRUT"] + label,
.color-swatch[data-color="Brut"],
.product-form__input--pill input[value="Brut"] + label {
  background: #7A8AA0 !important;
}

.color-swatch[data-color="BURGUNDY"],
.product-form__input--pill input[value="BURGUNDY"] + label,
.color-swatch[data-color="Burgundy"],
.product-form__input--pill input[value="Burgundy"] + label {
  background: #5E2A3A !important;
}

.color-swatch[data-color="CACAO"],
.product-form__input--pill input[value="CACAO"] + label,
.color-swatch[data-color="Cacao"],
.product-form__input--pill input[value="Cacao"] + label {
  background: #6A4128 !important;
}

.color-swatch[data-color="CALIENTE CLUB"],
.product-form__input--pill input[value="CALIENTE CLUB"] + label,
.color-swatch[data-color="Caliente Club"],
.product-form__input--pill input[value="Caliente Club"] + label {
  background: conic-gradient(#8DC8D8,#E3D6C8,#C24A3A,#E8C34A,#8DC8D8) !important;
}

.color-swatch[data-color="CAMEL"],
.product-form__input--pill input[value="CAMEL"] + label,
.color-swatch[data-color="Camel"],
.product-form__input--pill input[value="Camel"] + label {
  background: #B88752 !important;
}

.color-swatch[data-color="CARBONE"],
.product-form__input--pill input[value="CARBONE"] + label,
.color-swatch[data-color="Carbone"],
.product-form__input--pill input[value="Carbone"] + label {
  background: #3B3B3B !important;
}

.color-swatch[data-color="CARBONNE"],
.product-form__input--pill input[value="CARBONNE"] + label,
.color-swatch[data-color="Carbonne"],
.product-form__input--pill input[value="Carbonne"] + label {
  background: #3B3B3B !important;
}

.color-swatch[data-color="CARNET DE RIVIERA"],
.product-form__input--pill input[value="CARNET DE RIVIERA"] + label,
.color-swatch[data-color="Carnet de Riviera"],
.product-form__input--pill input[value="Carnet de Riviera"] + label {
  background: radial-gradient(ellipse 8px 10px at 20% 20%, #00B4C8 0%, transparent 100%),
    radial-gradient(ellipse 6px 8px at 75% 15%, #E8D94A 0%, transparent 100%),
    radial-gradient(ellipse 9px 6px at 50% 45%, #5BC85A 0%, transparent 100%),
    radial-gradient(ellipse 7px 9px at 15% 65%, #E83A2A 0%, transparent 100%),
    radial-gradient(ellipse 8px 6px at 80% 60%, #00B4C8 0%, transparent 100%),
    radial-gradient(ellipse 6px 8px at 40% 80%, #E8D94A 0%, transparent 100%),
    radial-gradient(ellipse 5px 7px at 85% 85%, #5BC85A 0%, transparent 100%),
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 14px,
      rgba(0, 180, 200, 0.15) 14px, rgba(0, 180, 200, 0.15) 16px
    ),
    #F5F0DC !important;
}

.color-swatch[data-color="CARREAUX BEIGES"],
.product-form__input--pill input[value="CARREAUX BEIGES"] + label,
.color-swatch[data-color="Carreaux beiges"],
.product-form__input--pill input[value="Carreaux beiges"] + label {
  background: linear-gradient(90deg,#D8C2A0 50%,#fff 50%),
linear-gradient(#D8C2A0 50%,#fff 50%) !important;
}

.color-swatch[data-color="CARREAUX CHOCO"],
.product-form__input--pill input[value="CARREAUX CHOCO"] + label {
  background: repeating-conic-gradient(#4A3E30 0% 25%,#7A6E5C 0% 50%) 0 0/12px 12px !important;
}

.color-swatch[data-color="CARREAUX ECRUS BRODE"],
.product-form__input--pill input[value="CARREAUX ECRUS BRODE"] + label {
  background: repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 9px,
      rgba(180, 140, 100, 0.4) 9px, rgba(180, 140, 100, 0.4) 11px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 9px,
      rgba(180, 140, 100, 0.4) 9px, rgba(180, 140, 100, 0.4) 11px
    ),
    #F2EDE3 !important;
}

.color-swatch[data-color="CARREAUX ORANGES"],
.product-form__input--pill input[value="CARREAUX ORANGES"] + label,
.color-swatch[data-color="Carreaux Oranges"],
.product-form__input--pill input[value="Carreaux Oranges"] + label {
  background: repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 4px,
      rgba(210, 80, 40, 0.4) 4px, rgba(210, 80, 40, 0.4) 6px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 4px,
      rgba(210, 80, 40, 0.4) 4px, rgba(210, 80, 40, 0.4) 6px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 9px,
      rgba(180, 50, 20, 0.6) 9px, rgba(180, 50, 20, 0.6) 11px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 9px,
      rgba(180, 50, 20, 0.6) 9px, rgba(180, 50, 20, 0.6) 11px
    ),
    #E8936A !important;
}

.color-swatch[data-color="CARREAUX ROUGES"],
.product-form__input--pill input[value="CARREAUX ROUGES"] + label {
  background: repeating-conic-gradient(#A83B3B 0% 25%,#D9C9A8 0% 50%) 0 0/12px 12px !important;
}

.color-swatch[data-color="CERISE"],
.product-form__input--pill input[value="CERISE"] + label,
.color-swatch[data-color="Cerise"],
.product-form__input--pill input[value="Cerise"] + label {
  background: #A1263D !important;
}

.color-swatch[data-color="CHAMBRAY"],
.product-form__input--pill input[value="CHAMBRAY"] + label,
.color-swatch[data-color="Chambray"],
.product-form__input--pill input[value="Chambray"] + label {
  background: #8FA9C4 !important;
}

.color-swatch[data-color="CHATAIGNE"],
.product-form__input--pill input[value="CHATAIGNE"] + label,
.color-swatch[data-color="Chataigne"],
.product-form__input--pill input[value="Chataigne"] + label {
  background: #7B4A2E !important;
}

.color-swatch[data-color="CHOCO"],
.product-form__input--pill input[value="CHOCO"] + label,
.color-swatch[data-color="Choco"],
.product-form__input--pill input[value="Choco"] + label {
  background: #5B3924 !important;
}

.color-swatch[data-color="CHOCOLAT"],
.product-form__input--pill input[value="CHOCOLAT"] + label,
.color-swatch[data-color="Chocolat"],
.product-form__input--pill input[value="Chocolat"] + label {
  background: #5B3924 !important;
}

.color-swatch[data-color="CIEL"],
.product-form__input--pill input[value="CIEL"] + label,
.color-swatch[data-color="Ciel"],
.product-form__input--pill input[value="Ciel"] + label {
  background: #B9DFF2 !important;
}

.color-swatch[data-color="CURRY"],
.product-form__input--pill input[value="CURRY"] + label,
.color-swatch[data-color="Curry"],
.product-form__input--pill input[value="Curry"] + label {
  background: #B7852A !important;
}

.color-swatch[data-color="DENIM"],
.product-form__input--pill input[value="DENIM"] + label,
.color-swatch[data-color="Denim"],
.product-form__input--pill input[value="Denim"] + label {
  background: #35597F !important;
}

.color-swatch[data-color="DUNE DE SILVA"],
.product-form__input--pill input[value="DUNE DE SILVA"] + label,
.color-swatch[data-color="Dune De Silva"],
.product-form__input--pill input[value="Dune De Silva"] + label,
.color-swatch[data-color="dune de silva"],
.product-form__input--pill input[value="dune de silva"] + label {
  background: radial-gradient(ellipse 5px 3px at 25% 35%, #6B4A2E 0%, transparent 100%),
    radial-gradient(ellipse 4px 2px at 20% 30%, #6B4A2E 0%, transparent 100%),
    radial-gradient(ellipse 4px 2px at 30% 30%, #6B4A2E 0%, transparent 100%),
    radial-gradient(ellipse 1px 6px at 25% 42%, #3B2A1A 0%, transparent 100%),

    radial-gradient(ellipse 5px 3px at 70% 65%, #6B4A2E 0%, transparent 100%),
    radial-gradient(ellipse 4px 2px at 65% 60%, #6B4A2E 0%, transparent 100%),
    radial-gradient(ellipse 4px 2px at 75% 60%, #6B4A2E 0%, transparent 100%),
    radial-gradient(ellipse 1px 6px at 70% 72%, #3B2A1A 0%, transparent 100%),

    radial-gradient(ellipse 4px 2px at 50% 15%, #6B4A2E 0%, transparent 100%),
    radial-gradient(ellipse 1px 5px at 50% 22%, #3B2A1A 0%, transparent 100%),

    #F5EDE0 !important;
}

.color-swatch[data-color="ECO NOMADE"],
.product-form__input--pill input[value="ECO NOMADE"] + label {
  background: linear-gradient(135deg,#A83B3B,#4A7C4E,#C89A2E,#7B4FA3) !important;
}

.color-swatch[data-color="ECRU"],
.product-form__input--pill input[value="ECRU"] + label,
.color-swatch[data-color="Ecru"],
.product-form__input--pill input[value="Ecru"] + label {
  background: #F4EBDD !important;
}

.color-swatch[data-color="ECRU BRODE"],
.product-form__input--pill input[value="ECRU BRODE"] + label {
  background: radial-gradient(circle at 20% 25%, transparent 2px, #E8E0D0 2px, #E8E0D0 4px, transparent 4px),
    radial-gradient(circle at 50% 20%, transparent 2px, #E8E0D0 2px, #E8E0D0 4px, transparent 4px),
    radial-gradient(circle at 80% 30%, transparent 2px, #E8E0D0 2px, #E8E0D0 4px, transparent 4px),
    radial-gradient(circle at 30% 60%, transparent 2px, #E8E0D0 2px, #E8E0D0 4px, transparent 4px),
    radial-gradient(circle at 65% 65%, transparent 2px, #E8E0D0 2px, #E8E0D0 4px, transparent 4px),
    radial-gradient(circle at 20% 85%, transparent 2px, #E8E0D0 2px, #E8E0D0 4px, transparent 4px),
    radial-gradient(circle at 75% 85%, transparent 2px, #E8E0D0 2px, #E8E0D0 4px, transparent 4px),
    radial-gradient(circle at 20% 25%, #D4C8B4 0px, #D4C8B4 2px, transparent 2px),
    radial-gradient(circle at 50% 20%, #D4C8B4 0px, #D4C8B4 2px, transparent 2px),
    radial-gradient(circle at 80% 30%, #D4C8B4 0px, #D4C8B4 2px, transparent 2px),
    radial-gradient(circle at 30% 60%, #D4C8B4 0px, #D4C8B4 2px, transparent 2px),
    radial-gradient(circle at 65% 65%, #D4C8B4 0px, #D4C8B4 2px, transparent 2px),
    radial-gradient(circle at 20% 85%, #D4C8B4 0px, #D4C8B4 2px, transparent 2px),
    radial-gradient(circle at 75% 85%, #D4C8B4 0px, #D4C8B4 2px, transparent 2px),
    #F2EDE3 !important;
}

.color-swatch[data-color="ECRU ET CIEL"],
.product-form__input--pill input[value="ECRU ET CIEL"] + label,
.color-swatch[data-color="Ecru et Ciel"],
.product-form__input--pill input[value="Ecru et Ciel"] + label {
  background: linear-gradient(135deg, #F7F4E8 50%, #A7C2EB 50%) !important;
}

.color-swatch[data-color="ECRU ET NOIR"],
.product-form__input--pill input[value="ECRU ET NOIR"] + label,
.color-swatch[data-color="Ecru et Noir"],
.product-form__input--pill input[value="Ecru et Noir"] + label {
  background: linear-gradient(135deg, #F7F4E8 50%, #1A1A1A 50%) !important;
}

.color-swatch[data-color="EMERAUDE"],
.product-form__input--pill input[value="EMERAUDE"] + label,
.color-swatch[data-color="Emeraude"],
.product-form__input--pill input[value="Emeraude"] + label {
  background: #008A68 !important;
}

.color-swatch[data-color="FICELLE"],
.product-form__input--pill input[value="FICELLE"] + label,
.color-swatch[data-color="Ficelle"],
.product-form__input--pill input[value="Ficelle"] + label {
  background: #C8B38B !important;
}

.color-swatch[data-color="FLEUR DE TRIESTE"],
.product-form__input--pill input[value="FLEUR DE TRIESTE"] + label {
  background: linear-gradient(135deg,#E8DCC4,#6B2A2E,#4A4A2E) !important;
}

.color-swatch[data-color="FLORAL"],
.product-form__input--pill input[value="FLORAL"] + label,
.color-swatch[data-color="Floral"],
.product-form__input--pill input[value="Floral"] + label {
  background: radial-gradient(circle at 25% 30%, #D4A8B8 0px, #D4A8B8 4px, transparent 5px),
    radial-gradient(circle at 70% 20%, #B8CEC4 0px, #B8CEC4 3px, transparent 4px),
    radial-gradient(circle at 50% 65%, #C9A0B4 0px, #C9A0B4 4px, transparent 5px),
    radial-gradient(circle at 80% 70%, #D4B8C4 0px, #D4B8C4 3px, transparent 4px),
    radial-gradient(circle at 15% 75%, #B8C8C0 0px, #B8C8C0 3px, transparent 4px),
    radial-gradient(circle at 60% 45%, #E8C8A0 0px, #E8C8A0 2px, transparent 3px),
    #F5EEE8 !important;
}

.color-swatch[data-color="FOND DE TOILE"],
.product-form__input--pill input[value="FOND DE TOILE"] + label {
  background: linear-gradient(135deg,#E0CDB4,#A8352C) !important;
}

.color-swatch[data-color="FRAISE"],
.product-form__input--pill input[value="FRAISE"] + label,
.color-swatch[data-color="Fraise"],
.product-form__input--pill input[value="Fraise"] + label {
  background: #D94B70 !important;
}

.color-swatch[data-color="FRAMBOISE"],
.product-form__input--pill input[value="FRAMBOISE"] + label,
.color-swatch[data-color="Framboise"],
.product-form__input--pill input[value="Framboise"] + label {
  background: #C72C61 !important;
}

.color-swatch[data-color="FUSCHIA"],
.product-form__input--pill input[value="FUSCHIA"] + label,
.color-swatch[data-color="Fuschia"],
.product-form__input--pill input[value="Fuschia"] + label {
  background: #C8284A !important;
}

.color-swatch[data-color="GRIS MULTICO"],
.product-form__input--pill input[value="GRIS MULTICO"] + label {
  background: linear-gradient(135deg,#9A9A9A,#C8A8B8,#8BAAC4) !important;
}

.color-swatch[data-color="HIPPIE TWIST"],
.product-form__input--pill input[value="HIPPIE TWIST"] + label,
.color-swatch[data-color="Hippie Twist"],
.product-form__input--pill input[value="Hippie Twist"] + label {
  background: conic-gradient(#05783F,#3A4F9E,#C2417A,#F0A868,#05783F) !important;
}

.color-swatch[data-color="IMAGINARY STREET"],
.product-form__input--pill input[value="IMAGINARY STREET"] + label,
.color-swatch[data-color="Imaginary Street"],
.product-form__input--pill input[value="Imaginary Street"] + label {
  background: repeating-linear-gradient(
      45deg,
      transparent 0px, transparent 5px,
      rgba(40, 180, 200, 0.6) 5px, rgba(40, 180, 200, 0.6) 7px,
      transparent 7px, transparent 12px
    ),
     
    repeating-linear-gradient(
      -45deg,
      transparent 0px, transparent 5px,
      rgba(120, 20, 40, 0.5) 5px, rgba(120, 20, 40, 0.5) 7px,
      transparent 7px, transparent 12px
    ),
     
    radial-gradient(circle at 25% 25%, #D4A020 0px, #D4A020 2px, transparent 3px),
    radial-gradient(circle at 75% 25%, #D4A020 0px, #D4A020 2px, transparent 3px),
    radial-gradient(circle at 25% 75%, #8B1A1A 0px, #8B1A1A 2px, transparent 3px),
    radial-gradient(circle at 75% 75%, #D4A020 0px, #D4A020 2px, transparent 3px),
    radial-gradient(circle at 50% 50%, #2A8CA0 0px, #2A8CA0 2px, transparent 3px),
    #F0E8C8 !important;
}

.color-swatch[data-color="IVOIRE"],
.product-form__input--pill input[value="IVOIRE"] + label,
.color-swatch[data-color="Ivoire"],
.product-form__input--pill input[value="Ivoire"] + label,
.color-swatch[data-color="ivoire"],
.product-form__input--pill input[value="ivoire"] + label {
  background: #F0EAD6 !important;
}

.color-swatch[data-color="JARDIN NOMADE"],
.product-form__input--pill input[value="JARDIN NOMADE"] + label,
.color-swatch[data-color="Jardin Nomade"],
.product-form__input--pill input[value="Jardin Nomade"] + label {
  background: linear-gradient(
      135deg,
      #B8C8E0 0%, #B8C8E0 25%,
      #E8C840 25%, #E8C840 45%,
      #E87830 45%, #E87830 65%,
      #A8C850 65%, #A8C850 80%,
      #E8D890 80%, #E8D890 100%
    ),
     
    radial-gradient(ellipse 12px 14px at 15% 70%, rgba(255,245,220,0.85) 0%, transparent 100%),
    radial-gradient(ellipse 10px 12px at 80% 20%, rgba(255,245,220,0.85) 0%, transparent 100%),
    radial-gradient(ellipse 8px 10px at 55% 55%, rgba(255,245,220,0.7) 0%, transparent 100%),
     
    radial-gradient(ellipse 6px 10px at 70% 75%, rgba(100,160,60,0.6) 0%, transparent 100%),
    radial-gradient(ellipse 5px 8px at 30% 30%, rgba(100,160,60,0.5) 0%, transparent 100%) !important;
}

.color-swatch[data-color="JAUNE"],
.product-form__input--pill input[value="JAUNE"] + label,
.color-swatch[data-color="Jaune"],
.product-form__input--pill input[value="Jaune"] + label {
  background: #E7C94F !important;
}

.color-swatch[data-color="KAKI"],
.product-form__input--pill input[value="KAKI"] + label,
.color-swatch[data-color="Kaki"],
.product-form__input--pill input[value="Kaki"] + label {
  background: #6E7151 !important;
}

.color-swatch[data-color="KHAKI"],
.product-form__input--pill input[value="KHAKI"] + label,
.color-swatch[data-color="Khaki"],
.product-form__input--pill input[value="Khaki"] + label,
.color-swatch[data-color="khaki"],
.product-form__input--pill input[value="khaki"] + label {
  background: #6E7151 !important;
}

.color-swatch[data-color="LEOPARD"],
.product-form__input--pill input[value="LEOPARD"] + label,
.color-swatch[data-color="Leopard"],
.product-form__input--pill input[value="Leopard"] + label {
  background: radial-gradient(circle 3px,#3B2410 30%,#D4A45C 31%) !important;
}

.color-swatch[data-color="LOSANGE CHOCOLAT"],
.product-form__input--pill input[value="LOSANGE CHOCOLAT"] + label {
  background: repeating-linear-gradient(45deg,#3A2C22 0px,#3A2C22 4px,#5A4536 4px,#5A4536 8px) !important;
}

.color-swatch[data-color="MANGUE"],
.product-form__input--pill input[value="MANGUE"] + label,
.color-swatch[data-color="Mangue"],
.product-form__input--pill input[value="Mangue"] + label,
.color-swatch[data-color="mangue"],
.product-form__input--pill input[value="mangue"] + label {
  background: #D0B41F !important;
}

.color-swatch[data-color="MINUIT"],
.product-form__input--pill input[value="MINUIT"] + label {
  background: #2B3040 !important;
}

.color-swatch[data-color="MOUSSE"],
.product-form__input--pill input[value="MOUSSE"] + label,
.color-swatch[data-color="Mousse"],
.product-form__input--pill input[value="Mousse"] + label,
.color-swatch[data-color="mousse"],
.product-form__input--pill input[value="mousse"] + label {
  background: #6F7F2E !important;
}

.color-swatch[data-color="NAVY"],
.product-form__input--pill input[value="NAVY"] + label,
.color-swatch[data-color="Navy"],
.product-form__input--pill input[value="Navy"] + label {
  background: #1D2B4F !important;
}

.color-swatch[data-color="NOIR"],
.product-form__input--pill input[value="NOIR"] + label,
.color-swatch[data-color="Noir"],
.product-form__input--pill input[value="Noir"] + label {
  background: #111 !important;
}

.color-swatch[data-color="NOISETTE"],
.product-form__input--pill input[value="NOISETTE"] + label,
.color-swatch[data-color="Noisette"],
.product-form__input--pill input[value="Noisette"] + label {
  background: #A36A3C !important;
}

.color-swatch[data-color="OASIS CHROMATIQUE"],
.product-form__input--pill input[value="OASIS CHROMATIQUE"] + label,
.color-swatch[data-color="Oasis Chromatique"],
.product-form__input--pill input[value="Oasis Chromatique"] + label {
  background: conic-gradient(#E86A3A,#4FA85C,#F0C93A,#E86AA8,#E86A3A) !important;
}

.color-swatch[data-color="OCRE"],
.product-form__input--pill input[value="OCRE"] + label {
  background: #C97225 !important;
}

.color-swatch[data-color="OLIVE"],
.product-form__input--pill input[value="OLIVE"] + label,
.color-swatch[data-color="Olive"],
.product-form__input--pill input[value="Olive"] + label {
  background: #6B704C !important;
}

.color-swatch[data-color="ORANGE"],
.product-form__input--pill input[value="ORANGE"] + label,
.color-swatch[data-color="Orange"],
.product-form__input--pill input[value="Orange"] + label {
  background: #E8873A !important;
}

.color-swatch[data-color="ORIGINE"],
.product-form__input--pill input[value="ORIGINE"] + label,
.color-swatch[data-color="Origine"],
.product-form__input--pill input[value="Origine"] + label {
  background: repeating-linear-gradient(45deg,#372C26 0px,#372C26 3px,#5A4A3C 3px,#5A4A3C 6px) !important;
}

.color-swatch[data-color="PALM MIRAGE"],
.product-form__input--pill input[value="PALM MIRAGE"] + label,
.color-swatch[data-color="Palm Mirage"],
.product-form__input--pill input[value="Palm Mirage"] + label {
  background: linear-gradient(135deg,#7FA0D8,#FFFFFF,#4E6FB5) !important;
}

.color-swatch[data-color="PATCHWORK"],
.product-form__input--pill input[value="PATCHWORK"] + label,
.color-swatch[data-color="Patchwork"],
.product-form__input--pill input[value="Patchwork"] + label {
  background: linear-gradient(135deg, #FF6B35 0%, #FF6B35 25%, #7BC67E 25%, #7BC67E 50%, #F7D94C 50%, #F7D94C 75%, #5BC8D4 75%, #5BC8D4 100%),
    radial-gradient(ellipse 8px 10px at 20% 30%, #FF85A1 0%, transparent 100%),
    radial-gradient(ellipse 6px 8px at 75% 20%, #1A1A1A 0%, transparent 100%),
    radial-gradient(ellipse 9px 6px at 50% 65%, #FF6B35 0%, transparent 100%),
    radial-gradient(ellipse 7px 9px at 80% 75%, #7BC67E 0%, transparent 100%),
    radial-gradient(ellipse 5px 7px at 30% 80%, #F7D94C 0%, transparent 100%) !important;
}

.color-swatch[data-color="PATCHWORK ANDALOU"],
.product-form__input--pill input[value="PATCHWORK ANDALOU"] + label,
.color-swatch[data-color="Patchwork Andalou"],
.product-form__input--pill input[value="Patchwork Andalou"] + label,
.color-swatch[data-color="patchwork andalou"],
.product-form__input--pill input[value="patchwork andalou"] + label {
  background: linear-gradient(135deg,#E07040,#4A8C5C,#D4A820,#7B4FA3) !important;
}

.color-swatch[data-color="PETROLE"],
.product-form__input--pill input[value="PETROLE"] + label {
  background: #2E5A6D !important;
}

.color-swatch[data-color="POLLEN"],
.product-form__input--pill input[value="POLLEN"] + label {
  background: #A0602E !important;
}

.color-swatch[data-color="POUSSIN"],
.product-form__input--pill input[value="POUSSIN"] + label,
.color-swatch[data-color="Poussin"],
.product-form__input--pill input[value="Poussin"] + label {
  background: #F3DD6D !important;
}

.color-swatch[data-color="RAYURE BLEUE"],
.product-form__input--pill input[value="RAYURE BLEUE"] + label,
.color-swatch[data-color="Rayure Bleue"],
.product-form__input--pill input[value="Rayure Bleue"] + label {
  background: repeating-linear-gradient(
      90deg,
      #A8C8D4 0px, #A8C8D4 2px,
      #F0EDE8 2px, #F0EDE8 5px,
      #C8DDE4 5px, #C8DDE4 7px,
      #F0EDE8 7px, #F0EDE8 11px
    ) !important;
}

.color-swatch[data-color="RAYURE ROSE"],
.product-form__input--pill input[value="RAYURE ROSE"] + label,
.color-swatch[data-color="Rayure Rose"],
.product-form__input--pill input[value="Rayure Rose"] + label {
  background: repeating-linear-gradient(
    90deg,
    #F2A8C0 0px, #F2A8C0 3px,
    #F9D0E0 3px, #F9D0E0 7px
  ) !important;
}

.color-swatch[data-color="RAYURE TURQUOISE"],
.product-form__input--pill input[value="RAYURE TURQUOISE"] + label {
  background: repeating-linear-gradient(90deg,#53C5C7 0px,#53C5C7 6px,#FFFFFF 6px,#FFFFFF 12px) !important;
}

.color-swatch[data-color="RAYURE VIOLET"],
.product-form__input--pill input[value="RAYURE VIOLET"] + label,
.color-swatch[data-color="Rayure Violet"],
.product-form__input--pill input[value="Rayure Violet"] + label {
  background: repeating-linear-gradient(90deg, #800080 0px, #800080 6px, #FFFFFF 6px, #FFFFFF 12px) !important;
}

.color-swatch[data-color="RAYURES BEIGE"],
.product-form__input--pill input[value="RAYURES BEIGE"] + label {
  background: repeating-linear-gradient(90deg,#EAD8AB 0px,#EAD8AB 6px,#FFFFFF 6px,#FFFFFF 12px) !important;
}

.color-swatch[data-color="RAYURES BLEUES"],
.product-form__input--pill input[value="RAYURES BLEUES"] + label,
.color-swatch[data-color="Rayures Bleues"],
.product-form__input--pill input[value="Rayures Bleues"] + label {
  background: repeating-linear-gradient(
      90deg,
      #A8C8D4 0px, #A8C8D4 2px,
      #F0EDE8 2px, #F0EDE8 5px,
      #C8DDE4 5px, #C8DDE4 7px,
      #F0EDE8 7px, #F0EDE8 11px
    ) !important;
}

.color-swatch[data-color="RAYURES CAFE"],
.product-form__input--pill input[value="RAYURES CAFE"] + label {
  background: repeating-linear-gradient(90deg,#9A7248 0px,#9A7248 3px,#EDE5D5 3px,#EDE5D5 9px) !important;
}

.color-swatch[data-color="RAYURES KHAKI"],
.product-form__input--pill input[value="RAYURES KHAKI"] + label {
  background: repeating-linear-gradient(90deg,#6E7151 0px,#6E7151 5px,#33371F 5px,#33371F 10px) !important;
}

.color-swatch[data-color="RAYURES MULTICO"],
.product-form__input--pill input[value="RAYURES MULTICO"] + label,
.color-swatch[data-color="Rayures Multico"],
.product-form__input--pill input[value="Rayures Multico"] + label,
.color-swatch[data-color="rayures multico"],
.product-form__input--pill input[value="rayures multico"] + label {
  background: repeating-linear-gradient(
      180deg,
      #C8D8B0 0px,  #C8D8B0 11px,
      #D4C4A0 11px, #D4C4A0 19px,
      #A8C0CC 19px, #A8C0CC 32px,
      #C0D4A8 32px, #C0D4A8 41px,
      #D8C8B4 41px, #D8C8B4 53px,
      #B4CAD8 53px, #B4CAD8 61px,
      #C4D4A4 61px, #C4D4A4 76px
    ) !important;
}

.color-swatch[data-color="RAYURES OCRE"],
.product-form__input--pill input[value="RAYURES OCRE"] + label {
  background: repeating-linear-gradient(90deg,#B08424 0px,#B08424 5px,#2E2A20 5px,#2E2A20 10px) !important;
}

.color-swatch[data-color="RAYURES ORANGES"],
.product-form__input--pill input[value="RAYURES ORANGES"] + label,
.color-swatch[data-color="Rayures Oranges"],
.product-form__input--pill input[value="Rayures Oranges"] + label {
  background: repeating-linear-gradient(
      90deg,
      #E8956D 0px, #E8956D 2px,
      #F5C4A8 2px, #F5C4A8 5px,
      #F5EDE0 5px, #F5EDE0 8px,
      #C8A882 8px, #C8A882 10px,
      #F5EDE0 10px, #F5EDE0 14px
    ) !important;
}

.color-swatch[data-color="RAYURES ROSES"],
.product-form__input--pill input[value="RAYURES ROSES"] + label,
.color-swatch[data-color="Rayures Roses"],
.product-form__input--pill input[value="Rayures Roses"] + label,
.color-swatch[data-color="Rayures roses"],
.product-form__input--pill input[value="Rayures roses"] + label {
  background: repeating-linear-gradient(
    90deg,
    #F2A8C0 0px, #F2A8C0 3px,
    #F9D0E0 3px, #F9D0E0 7px
  ) !important;
}

.color-swatch[data-color="RETRO BLOOM"],
.product-form__input--pill input[value="RETRO BLOOM"] + label,
.color-swatch[data-color="Retro Bloom"],
.product-form__input--pill input[value="Retro Bloom"] + label,
.color-swatch[data-color="retro bloom"],
.product-form__input--pill input[value="retro bloom"] + label {
  background: conic-gradient(#3A5DA8,#6E7151,#C4453A,#E8DCC0,#3A5DA8) !important;
}

.color-swatch[data-color="ROSE"],
.product-form__input--pill input[value="ROSE"] + label,
.color-swatch[data-color="Rose"],
.product-form__input--pill input[value="Rose"] + label {
  background: #E7A9B3 !important;
}

.color-swatch[data-color="ROUGE"],
.product-form__input--pill input[value="ROUGE"] + label,
.color-swatch[data-color="Rouge"],
.product-form__input--pill input[value="Rouge"] + label {
  background: #B63838 !important;
}

.color-swatch[data-color="RUBIS"],
.product-form__input--pill input[value="RUBIS"] + label {
  background: #C4192B !important;
}

.color-swatch[data-color="SABLE"],
.product-form__input--pill input[value="SABLE"] + label,
.color-swatch[data-color="Sable"],
.product-form__input--pill input[value="Sable"] + label,
.color-swatch[data-color="sable"],
.product-form__input--pill input[value="sable"] + label {
  background: #D4B48C !important;
}

.color-swatch[data-color="SAUGE"],
.product-form__input--pill input[value="SAUGE"] + label,
.color-swatch[data-color="Sauge"],
.product-form__input--pill input[value="Sauge"] + label {
  background: #A8B79E !important;
}

.color-swatch[data-color="SHINY"],
.product-form__input--pill input[value="SHINY"] + label,
.color-swatch[data-color="Shiny"],
.product-form__input--pill input[value="Shiny"] + label {
  background: conic-gradient(#C4712E,#4F7C59,#B05A6A,#8E6BA0,#C4712E) !important;
}

.color-swatch[data-color="SOLE MARE"],
.product-form__input--pill input[value="SOLE MARE"] + label,
.color-swatch[data-color="Sole Mare"],
.product-form__input--pill input[value="Sole Mare"] + label {
  background: linear-gradient(135deg,#E8DFC4,#D9BE5A,#A389A0) !important;
}

.color-swatch[data-color="SOLEIL D'EZE"],
.product-form__input--pill input[value="SOLEIL D'EZE"] + label {
  background: conic-gradient(
    #E8A87C 0deg 60deg,
    #6B9E8A 60deg 130deg,
    #F2D06B 130deg 190deg,
    #8B9EC7 190deg 250deg,
    #C4795A 250deg 310deg,
    #A8C4A2 310deg 360deg
  ) !important;
}

.color-swatch[data-color="SOLSTICE PASTEL"],
.product-form__input--pill input[value="SOLSTICE PASTEL"] + label,
.color-swatch[data-color="Solstice Pastel"],
.product-form__input--pill input[value="Solstice Pastel"] + label {
  background: conic-gradient(#FFC0CB, #B2FC85, #A7C2EB, #FFBE98, #FFC0CB) !important;
}

.color-swatch[data-color="STUDIO 54"],
.product-form__input--pill input[value="STUDIO 54"] + label,
.color-swatch[data-color="Studio 54"],
.product-form__input--pill input[value="Studio 54"] + label {
  background: conic-gradient(
      from 0deg,
      #F6F0E6 0deg 60deg,
      #E97A4D 60deg 120deg,
      #B86B3C 120deg 180deg,
      #8A5ACB 180deg 240deg,
      #4A5CB8 240deg 300deg,
      #C7D88A 300deg 360deg
    ) !important;
}

.color-swatch[data-color="TAUPE"],
.product-form__input--pill input[value="TAUPE"] + label,
.color-swatch[data-color="Taupe"],
.product-form__input--pill input[value="Taupe"] + label {
  background: #8A7B70 !important;
}

.color-swatch[data-color="TERRACOTA"],
.product-form__input--pill input[value="TERRACOTA"] + label,
.color-swatch[data-color="Terracota"],
.product-form__input--pill input[value="Terracota"] + label,
.color-swatch[data-color="terracota"],
.product-form__input--pill input[value="terracota"] + label {
  background: #C0703A !important;
}

.color-swatch[data-color="TURQUOISE"],
.product-form__input--pill input[value="TURQUOISE"] + label,
.color-swatch[data-color="Turquoise"],
.product-form__input--pill input[value="Turquoise"] + label {
  background: #53C5C7 !important;
}

.color-swatch[data-color="VERT"],
.product-form__input--pill input[value="VERT"] + label,
.color-swatch[data-color="Vert"],
.product-form__input--pill input[value="Vert"] + label {
  background: #4F7C59 !important;
}

.color-swatch[data-color="VERT ANIS"],
.product-form__input--pill input[value="VERT ANIS"] + label,
.color-swatch[data-color="Vert Anis"],
.product-form__input--pill input[value="Vert Anis"] + label {
  background: #A4C639 !important;
}

.color-swatch[data-color="VICHY CAFE"],
.product-form__input--pill input[value="VICHY CAFE"] + label {
  background: repeating-linear-gradient(45deg,#8B6914 0px,#8B6914 3px,#F4EBDD 3px,#F4EBDD 6px) !important;
}

.color-swatch[data-color="VIGNE"],
.product-form__input--pill input[value="VIGNE"] + label {
  background: #8E4B5C !important;
}

.color-swatch[data-color="VIOLET"],
.product-form__input--pill input[value="VIOLET"] + label,
.color-swatch[data-color="Violet"],
.product-form__input--pill input[value="Violet"] + label {
  background: #7B4FA3 !important;
}

/* ==== FIN bloc genere ==== */

/* ------------------------------------------------------------------
   Chevrons sur la photo principale de la fiche produit
   ------------------------------------------------------------------
   La galerie du bureau n a pas de fleches : on passe d une photo a l autre par
   les vignettes, sous la photo. Sur l ancien site, deux chevrons posees sur
   l image faisaient le meme travail sans quitter la photo des yeux. On les
   remet, en laissant Dawn faire le changement — voir product-media-gallery.

   Chevron nue, sans pastille, posee contre le bord de la photo. La zone de clic
   garde ses 44 px : elle est simplement devenue invisible. */
.product__media-wrapper slider-component:not(.thumbnail-slider) {
  position: relative;
}

.galerie-chevron {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: rgb(var(--color-foreground));
  cursor: pointer;
  opacity: 0.75;
  transition: opacity var(--duration-short) ease;
}

.galerie-chevron:hover {
  opacity: 1;
}

.galerie-chevron svg {
  width: 11px;
  height: 18px;
}

/* Position calee sur la photo, pas sur la colonne. Les deux ne coincident pas :
   la colonne fait 45 % de la page, la photo est bien plus etroite des que sa
   hauteur est contrainte, et Dawn la centre. Poser les chevrons a gauche et a
   droite de la colonne les laissait flotter a 80 px du cliche. Les valeurs
   exactes sont donc calculees a l affichage — voir product-media-gallery. Ce qui
   suit n est que le repli avant ce calcul. */
.galerie-chevron--prec {
  left: 0;
}

.galerie-chevron--suiv {
  right: 0;
}

/* La rangee « ‹ 1/5 › » sous la photo faisait double emploi avec les chevrons,
   et prenait 44 px entre le cliche et les vignettes — de quoi repousser
   celles-ci sous la ligne de flottaison a elle seule. Sur telephone elle reste :
   il n y a pas de chevrons la-bas. */
@media screen and (min-width: 750px) {
  .product__media-wrapper slider-component:not(.thumbnail-slider) > .slider-buttons {
    display: none;
  }
}