/** Shopify CDN: Minification failed

Line 4660:0 Unexpected "<"
Line 4666:208 Unterminated string token

**/


: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);
  }
}
/* --- Correction bandeau annonce pleine largeur --- */
.announcement-bar {
  width: 100vw !important;      /* prend toute la largeur de la fenêtre */
  margin-left: calc(-50vw + 50%); /* élimine la marge centrale du conteneur */
  background-color: #636B2F !important; /* ton vert olive */
  color: white;
}

.announcement-bar__message {
  text-align: center;
  justify-content: center;
}
/* --- Menu fixe + effet de survol olive --- */

/* Rendre le menu fixe en haut */
.shopify-section-header-sticky,
.header,
.header-wrapper {
  position: sticky !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

body {
  scroll-padding-top: 80px;
}


/* Apparence et transition du texte du menu */
.header__menu-item a {
  position: relative;
  color: #333333; /* couleur actuelle du texte */
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Ligne animée vert olive au survol */
.header__menu-item a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: #636B2F; /* ton vert olive */
  transition: width 0.3s ease;
}

/* Effet au survol : texte olive + ligne fluide */
.header__menu-item a:hover {
  color: #636B2F;
}

.header__menu-item a:hover::after {
  width: 100%;
}
/* --- Effet fondu du menu Campagne Urbaine --- */
.shopify-section-header-sticky,
.header,
.header-wrapper {
  position: sticky !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background-color: rgba(255, 255, 255, 0.95); /* blanc semi-transp. */
  backdrop-filter: blur(8px); /* effet doux verre dépoli */
  transition: background-color 0.4s ease, box-shadow 0.3s ease;
}

/* --- Quand on défile : effet beige et ombre subtile --- */
.header-wrapper.is-sticky,
.shopify-section-header-sticky.is-sticky {
  background-color: rgba(247, 243, 236, 0.98); /* beige chaud */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* --- Évite que la bannière monte sous le menu --- */
body {
  scroll-padding-top: 80px;
}
/* --- Ajustement du menu sur mobile (iPhone et petits écrans) --- */
@media screen and (max-width: 768px) {
  .header-wrapper {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .header__heading-logo {
    max-width: 110px; /* réduit légèrement le logo */
  }

  .header__menu-item {
    padding: 4px 8px !important; /* rapproche les liens */
  }

  .header__icons {
    gap: 6px !important; /* rapproche les icônes panier, recherche, etc. */
  }

  .header__menu {
    justify-content: center !important; /* centre les liens horizontalement */
  }
}


/* --- Ajustement des 3 boutons de la bannière --- */
.banner__buttons {
  position: relative !important;
  top: -45px !important;       /* 🔹 monte ou descend tous les boutons ensemble */
  display: flex !important;
  justify-content: center !important;  /* garde les boutons centrés horizontalement */
  gap: 14px !important;                 /* espace entre les boutons */
}
/* --- Ajustement individuel du bouton "Obtenir mon rabais" --- */
.banner__buttons .button:nth-child(2) {
  position: relative !important;
  left: 12px !important;   /* ➡️ déplace ce bouton seul vers la droite (valeur positive) ou vers la gauche (valeur négative) */
}
/* --- Ajustement du bouton "Créez votre coffret" --- */
.banner__buttons > div:nth-child(3) .button {
  position: relative !important;
  margin-left: -100px !important;  /* 🔹 vers la gauche */
  top: 2px !important;            /* 🔹 léger ajustement vertical */
}
/* --- Ajustement direct des 3 boutons de la bannière --- */
.banner__buttons button {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}

/* Bouton 1 : Obtenir mon rabais */
.banner__buttons button:nth-of-type(1) {
  transform: translate(0px, 0px); /* ne bouge pas */
}

/* Bouton 2 : Créez votre coffret */
.banner__buttons button:nth-of-type(2) {
  transform: translate(25px, -2px) !important; /* ➜ pousse légèrement à droite + descend un peu */
}

/* Bouton 3 : Nos coffrets coup de cœur */
.banner__buttons button:nth-of-type(3) {
  transform: translate(-20px, 2px) !important; /* ➜ ramène un peu à gauche + monte un peu */
}
/* --- Réglage final : alignement précis des 3 boutons de la bannière --- */
.banner__buttons button,
.banner__buttons .button,
.banner__buttons .button-wrapper button {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}

/* 1️⃣ Bouton "Obtenir mon rabais" */
.banner__buttons button:nth-of-type(1),
.banner__buttons .button-wrapper:nth-of-type(1) button {
  transform: translate(0px, 0px) !important;
}

/* 2️⃣ Bouton "Créez votre coffret" */
.banner__buttons button:nth-of-type(2),
.banner__buttons .button-wrapper:nth-of-type(2) button {
  transform: translate(25px, -2px) !important;  /* ➜ vers la droite et un peu plus haut */
}

/* 3️⃣ Bouton "Nos coffrets coup de cœur" */
.banner__buttons button:nth-of-type(3),
.banner__buttons .button-wrapper:nth-of-type(3) button {
  transform: translate(-25px, 2px) !important;  /* ➜ vers la gauche et un peu plus bas */
}
/* --- Alignement et style final des 3 boutons de la bannière --- */
.banner__buttons * {
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
}

/* Ajuste tous les boutons ensemble (verticalement) */
.banner__buttons {
  position: relative !important;
  top: -75px !important; /* ↑ monte ou ↓ descend les 3 boutons ensemble */
}

/* 1️⃣ "Obtenir mon rabais" */
.banner__buttons *:nth-of-type(3) {
  transform: translate(0px, 0px) !important;
}

/* 2️⃣ "Créez votre coffret" */
.banner__buttons *:nth-of-type(1) {
  transform: translate(20px, -2px) !important; /* ➜ droite + un peu plus haut */
}

/* 3️⃣ "Nos coffrets coup de cœur" */
.banner__buttons *:nth-of-type(2) {
  transform: translate(-25px, 2px) !important; /* ➜ gauche + un peu plus bas */
}
/* "Créez votre coffret" — descend un peu plus et pousse à droite */
.banner__buttons *:nth-of-type(1) {
  transform: translate(45px, 22px) !important;
}

/* "Nos coffrets coup de cœur" — descend davantage et pousse aussi à droite */
.banner__buttons *:nth-of-type(2) {
  transform: translate(10px, 36px) !important;
}
/* --- Amélioration de la typographie dans les 3 boutons de la bannière --- */
.banner__buttons a,
.banner__buttons button {
  font-size: 18px !important;       /* augmente la taille (ajuste 16–20 selon ton goût) */
  font-weight: 500 !important;      /* rend le texte plus soutenu (mais pas trop gras) */
  letter-spacing: 0.5px !important; /* ajoute un léger espacement pour plus d'élégance */
  text-transform: none !important;  /* garde les majuscules normales, enlève le tout majuscule */
}
/* --- Agrandir et styliser la typographie à l'intérieur des 3 boutons de la bannière --- */
.banner__buttons .button,
.banner__buttons a,
.banner__buttons button {
  font-size: 18px !important;       /* taille du texte augmentée */
  font-weight: 600 !important;      /* texte plus soutenu */
  letter-spacing: 0.5px !important; /* un peu d'espace entre les lettres */
  color: #4b4b2a !important;        /* couleur vert olive foncé harmonisée */
  text-transform: none !important;  /* enlève le tout majuscule si présent */
}
/* --- Force la taille et le style du texte dans les boutons de la bannière --- */
.banner__buttons .button,
.banner__buttons .button-label,
.banner__buttons a,
.banner__buttons button {
  font-size: 18px !important;       /* taille du texte */
  font-weight: 600 !important;      /* épaisseur */
  letter-spacing: 0.5px !important; /* espacement élégant */
  text-transform: none !important;  /* garde le texte naturel */
  color: #4b4b2a !important;        /* vert olive foncé */
}

/* --- Effet subtil au survol --- */
.banner__buttons .button:hover,
.banner__buttons a:hover,
.banner__buttons button:hover {
  background-color: #636B2F !important;  /* vert olive foncé du logo */
  color: #fff !important;                /* texte blanc au survol */
  transition: all 0.3s ease !important;  /* animation douce */
}
/* --- Effet d’apparition fluide des 3 boutons de la bannière --- */
.banner__buttons {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInButtons 1.5s ease-out forwards;
  animation-delay: 0.3s; /* délai avant l’apparition */
}

@keyframes fadeInButtons {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* --- Phrase élégante corrigée et réalignée --- */
.banner__buttons::before {
  content: "Coffrets pour faire plaisir et se faire plaisir !";
  display: block;
  position: relative;
  width: 100%;
  text-align: right; /* aligne la 2e ligne à droite */
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 40px;
  font-weight: 500;
  color: #f8f4ec;
  white-space: pre-line;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  line-height: 1.25;
  margin-top: -180px; /* monte la phrase légèrement */
  margin-right: 160px; /* pousse un peu vers la gauche */
  letter-spacing: 0.5px;
  opacity: 0;
  animation: fadeInText 1.2s ease-out forwards;
  animation-delay: 0.5s;
}

/* Animation douce */
@keyframes fadeInText {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Version mobile --- */
@media screen and (max-width: 768px) {
  .banner__buttons::before {
    font-size: 26px;
    margin-top: -70px;
    margin-right: 30px;
    line-height: 1.3;
    text-align: center;
  }
}
/* --- Animation fondu douce --- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Effet d’apparition pour tous les éléments de la bannière --- */
.banner__buttons button,
.banner__heading {
  opacity: 0;
  animation: fadeIn 1.2s ease-out forwards;
}

/* --- Délai pour un effet séquencé --- */
.banner__buttons button:nth-child(1) { animation-delay: 0.2s; }
.banner__buttons button:nth-child(2) { animation-delay: 0.5s; }
.banner__buttons button:nth-child(3) { animation-delay: 0.8s; }
.banner__heading { animation-delay: 1.1s; }

/* --- Bouton “Obtenir mon rabais” à gauche sous le texte promo --- */
.banner__buttons button:nth-child(1) {
  position: absolute !important;
  top: 430px !important;   /* ajuste la hauteur sous "(Valide...)" */
  left: 170px !important;  /* déplace vers les feuilles vertes */
}

/* --- Les deux boutons de coffrets près de la tasse --- */
.banner__buttons button:nth-child(2),
.banner__buttons button:nth-child(3) {
  position: absolute !important;
  top: 540px !important;   /* ajuste la hauteur pour être au niveau de la tasse */
}

.banner__buttons button:nth-child(2) { left: 850px !important; }  /* “Créez votre coffret” */
.banner__buttons button:nth-child(3) { left: 1030px !important; } /* “Nos coffrets coup de cœur” */

/* --- Ajustement du texte “Coffrets pour faire plaisir...” --- */
.banner__heading {
  position: absolute !important;
  top: 480px !important;  /* monte légèrement le texte */
  left: 760px !important; /* ajuste vers la droite, proche du cadeau rose */
  font-family: "Playfair Display", serif !important;
  font-size: 26px !important;
  color: white !important;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
}
/* Masque les anciens boutons Shopify */
.banner__buttons { display: none !important; }

/* Crée un nouveau bloc libre par-dessus la bannière */
.custom-banner-overlay {
  position: absolute;
  top: 420px;    /* hauteur à ajuster */
  left: 180px;   /* position horizontale */
  color: white;
  font-family: "Playfair Display", serif;
  font-size: 26px;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.25);
  opacity: 0;
  animation: fadeIn 1.5s ease forwards;
}

/* Petits boutons élégants */
.custom-banner-overlay .btn {
  display: inline-block;
  margin: 10px 8px;
  padding: 10px 20px;
  background: #e7dfcf;
  color: #3a3a3a;
  border-radius: 4px;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.custom-banner-overlay .btn:hover {
  background: #f2f0e9;
  transform: scale(1.05);
}

/* Animation d’apparition */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 🌿 Campagne Urbaine - Position corrigée */
.custom-banner-overlay {
  position: absolute;
  top: 61%; /* descend la phrase et les boutons coffrets dans la zone du cadeau rose */
  left: 72%; /* ajuste pour que ce soit bien sous ton logo */
  transform: translate(-50%, -50%);
  text-align: left;
  color: #fff;
  font-family: "Playfair Display", serif;
  font-size: 2.3rem;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0;
  animation: fadeIn 2s ease forwards 0.4s;
}

.custom-banner-overlay p {
  margin-bottom: 2rem;
}

/* --- Style général des boutons --- */
.custom-banner-overlay a.btn {
  display: inline-block;
  margin: 0.8rem 0.8rem;
  background-color: #d6cfb2;
  color: #3c3b36;
  padding: 1rem 2rem;
  border-radius: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  transition: all 0.35s ease;
  opacity: 0;
  animation: fadeInUp 1.6s ease forwards;
}

/* apparition douce et séquencée */
.custom-banner-overlay a.btn:nth-child(2) { animation-delay: 0.9s; }
.custom-banner-overlay a.btn:nth-child(3) { animation-delay: 1.2s; }
.custom-banner-overlay a.btn:nth-child(4) { animation-delay: 1.5s; }

.custom-banner-overlay a.btn:hover {
  background-color: #b9b18e;
  color: #fff;
  transform: scale(1.09);
}

/* 🕊️ Bouton "Obtenir mon rabais" : sous la phrase (Valide jusqu’à la fin novembre) */
.custom-banner-overlay a.btn:nth-of-type(2) {
  position: absolute;
  top: 36%;  /* hauteur sous la phrase de rabais */
  left: 47%; /* centre légèrement vers la gauche */
  transform: translate(-50%, 0);
}

/* 🎁 Boutons “Coffrets” : sous la phrase "Coffrets pour se faire plaisir" */
.custom-banner-overlay a.btn:nth-of-type(3),
.custom-banner-overlay a.btn:nth-of-type(4) {
  position: relative;
  top: 10px;   /* un léger décalage vers le bas */
  left: 40px;  /* un peu vers la droite */
}

/* --- Animations --- */
@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -55%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 🌿 Campagne Urbaine — Ajustement bannière Black Friday */
.custom-banner-overlay {
  position: absolute;
  top: 58%;
  left: 71%;
  transform: translate(-50%, -50%);
  text-align: left;
  color: #fff;
  font-family: "Playfair Display", serif;
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.4;
  animation: fadeIn 1.5s ease forwards;
  opacity: 0;
}

.custom-banner-overlay p {
  margin-bottom: 1.5rem;
}

/* Style global boutons */
.custom-banner-overlay a.btn {
  display: inline-block;
  background-color: #d6cfb2;
  color: #3c3b36;
  padding: 1.2rem 2.4rem;
  border-radius: 10px;
  font-family: "Poppins", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin: 0.6rem;
  text-decoration: none;
  transition: all 0.3s ease;
  opacity: 0;
  animation: fadeInUp 1.2s ease forwards;
}

/* ordre d'apparition fluide */
.custom-banner-overlay a.btn:nth-child(2) { animation-delay: 0.6s; }
.custom-banner-overlay a.btn:nth-child(3) { animation-delay: 0.9s; }
.custom-banner-overlay a.btn:nth-child(4) { animation-delay: 1.2s; }

.custom-banner-overlay a.btn:hover {
  background-color: #b9b18e;
  color: #fff;
  transform: scale(1.05);
}

/* "Obtenir mon rabais" sous la phrase de rabais */
.custom-banner-overlay a[href="#rabais"] {
  position: absolute;
  top: 37%;
  left: 45%;
  transform: translate(-50%, -50%);
}

/* Phrase + 2 boutons coffrets descendent sous le logo */
.custom-banner-overlay a[href="#coffrets"],
.custom-banner-overlay a[href="#coupdecoeur"],
.custom-banner-overlay p {
  position: relative;
  top: 90px; /* zone du cadeau rose */
  left: 60px;
}

/* Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -55%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 🌸 Style chic et harmonieux des boutons Campagne Urbaine */
.custom-banner-overlay a.btn {
  background-color: #E9E5DA !important; /* Beige doux assorti à ton visuel */
  color: #4A4A2F !important; /* Vert olive foncé du logo */
  font-family: 'Georgia', serif !important;
  font-size: 1.7rem !important;
  padding: 1rem 2.5rem !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.15) !important;
  letter-spacing: 0.5px;
  transition: all 0.4s ease-in-out;
}

.custom-banner-overlay a.btn:hover {
  background-color: #dcd6c0 !important; /* Ton plus chaud au survol */
  transform: translateY(-3px);
  box-shadow: 4px 6px 15px rgba(0, 0, 0, 0.25);
}

/* Animation douce d'apparition */
.custom-banner-overlay a.btn {
  opacity: 0;
  animation: fadeInUp 1.4s ease forwards;
}
.custom-banner-overlay a.btn:nth-child(2) { animation-delay: 0.4s; }
.custom-banner-overlay a.btn:nth-child(3) { animation-delay: 0.8s; }
.custom-banner-overlay a.btn:nth-child(4) { animation-delay: 1.2s; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ---- Header personnalisé Campagne Urbaine ---- */

.cu-header-logo-img {
  display: block;
  margin: 0 auto;
  width: 140px;
  max-width: 100%;
  height: auto;
}

.cu-header-text {
  font-size: 17px;
  text-align: center;
  padding: 10px 0;
  max-width: 900px;
  margin: 0 auto 20px auto;
}

.cu-header-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.cu-btn {
  background-color: #445e2a;
  color: white;
  padding: 10px 18px;
  border-radius: 5px;
  text-decoration: none;
}

.cu-btn-outline {
  border: 2px solid #445e2a;
  color: #445e2a;
  padding: 10px 18px;
}

.cu-btn-outline:hover {
  background-color: #445e2a;
  color: white;
}

/* ---- Version mobile ---- */
@media (max-width: 768px) {

  .cu-header-logo-img {
    width: 95px !important;
    margin-bottom: 10px;
  }

  .cu-header-text {
    font-size: 15px;
    padding: 5px 0;
    margin-bottom: 10px;
  }

  .cu-header-buttons {
    flex-direction: column;
    align-items: center;
  }

  .cu-btn {
    width: 100%;
    text-align: center;
  }
}
/* ----- Optimisation mobile iPhone ----- */
@media (max-width: 768px) {

  /* Bande du haut (header Dawn) — plus compact */
  .header {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Titre Campagne Urbaine */
  .header__heading-link {
    font-size: 20px !important;
    line-height: 1.1 !important;
  }

  /* Section du logo + texte */
  .cu-header-wrap {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Logo plus petit */
  .cu-header-logo-img {
    width: 75px !important;
    margin-bottom: 6px !important;
  }

  /* Texte compact */
  .cu-header-text {
    font-size: 14px !important;
    line-height: 1.3 !important;
    padding: 0 10px !important;
    margin-bottom: 10px !important;
  }

  /* Boutons */
  .cu-header-buttons {
    width: 100%;
    padding: 0 20px !important;
    gap: 10px !important;
  }

  .cu-btn {
    width: 85% !important;
    font-size: 15px !important;
    padding: 10px 14px !important;
  }
}
/* ---- LOGO desktop ---- */
.cu-header-logo-img {
  display:block;
  margin:0 auto;
  width:140px;
  max-width:100%;
  height:auto;
}

/* ---- TEXTE desktop ---- */
.cu-header-text {
  font-size:17px;
  text-align:center;
  padding:10px 0;
  max-width:900px;
  margin:0 auto 20px auto;
}

/* ---- BOUTONS desktop ---- */
.cu-header-buttons {
  display:flex;
  justify-content:center;
  gap:15px;
}
.cu-btn {
  background-color:#445e2a;
  color:white;
  padding:10px 18px;
  border-radius:5px;
  text-decoration:none;
}
.cu-btn-outline {
  border:2px solid #445e2a;
  color:#445e2a;
  padding:10px 18px;
}
.cu-btn-outline:hover {
  background-color:#445e2a;
  color:white;
}

/* ---- MOBILE ---- */
@media(max-width:768px){
  .cu-header-logo-img{
    width:75px !important;
    margin:5px auto 10px auto !important;
  }

  .cu-header-text{
    font-size:14px !important;
    line-height:18px !important;
    margin:0 auto 10px auto !important;
    padding:0 12px !important;
  }

  .cu-btn{
    width:85% !important;
    padding:10px 12px !important;
    font-size:15px !important;
    margin-bottom:8px !important;
  }
}
/* ==== STYLES MOBILE POUR LE HEADER PERSONNALISÉ ==== */

@media (max-width: 768px) {

  /* Logo plus petit */
  .cu-header-logo-img {
    width: 70px !important;
    margin-bottom: 8px !important;
  }

  /* Texte beaucoup plus compact */
  .cu-header-text {
    font-size: 13px !important;
    line-height: 17px !important;
    padding: 0 10px !important;
    margin: 0 auto 8px auto !important;
  }

  /* Boutons moins larges */
  .cu-header-buttons .cu-btn {
    width: 85% !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }

  /* Réduction de la hauteur de la barre verte "Livraison rapide…" */
  .announcement-bar {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  /* Réduction de la hauteur du header de base Dawn */
  header.header {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  /* Typographie Campagne Urbaine plus petite */
  .header__heading-link span {
    font-size: 18px !important;
    line-height: 20px !important;
  }
}
/* ---- MOBILE HEADER CUSTOM POUR LOGO, TEXTE, BOUTONS ---- */
@media (max-width: 768px) {

  /* Logo plus petit */
  .cu-header-logo-img {
    width: 70px !important;
    margin-bottom: 6px !important;
  }

  /* Texte sous le logo */
  .cu-header-text {
    font-size: 13px !important;
    line-height: 18px !important;
    margin: 0 auto 10px auto !important;
    padding: 0 !important;
  }

  /* Boutons */
  .cu-btn {
    width: 80% !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    margin-bottom: 6px !important;
  }

  /* Espacement global */
  .cu-header-inner {
    padding-top: 5px !important;
    padding-bottom: 10px !important;
  }
}
/* ---- MOBILE : ajustements logo + boutons ---- */
@media (max-width: 768px) {

  /* Logo plus petit */
  #shopify-section-sections--17514858872895__custom_liquid_k4rf98 .cu-header-logo-img {
    width: 70px !important;
    margin-bottom: 6px !important;
  }

  /* Texte plus petit */
  #shopify-section-sections--17514858872895__custom_liquid_k4rf98 .cu-header-text {
    font-size: 13px !important;
    line-height: 18px !important;
    margin: 0 auto 10px auto !important;
    padding: 0 !important;
  }

  /* Boutons plus étroits + plus petits */
  #shopify-section-sections--17514858872895__custom_liquid_k4rf98 .cu-btn {
    width: 80% !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    margin-bottom: 6px !important;
  }

  /* Réduire la hauteur totale du bloc */
  #shopify-section-sections--17514858872895__custom_liquid_k4rf98 .cu-header-inner {
    padding-top: 5px !important;
    padding-bottom: 10px !important;
  }
}
/* --- FIX FINAL : LOGO + BOUTONS section Custom Liquid --- */
@media (max-width: 768px) {

  #shopify-section-sections--17514858872895__custom_liquid_k4rf98 .cu-header-logo-img {
    width: 70px !important;
    margin-bottom: 8px !important;
  }

  #shopify-section-sections--17514858872895__custom_liquid_k4rf98 .cu-header-text {
    font-size: 13px !important;
    line-height: 17px !important;
    margin: 0 auto 10px auto !important;
    padding: 0 !important;
    max-width: 280px !important;
  }

  #shopify-section-sections--17514858872895__custom_liquid_k4rf98 .cu-btn {
    width: 80% !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    margin-bottom: 6px !important;
  }

  #shopify-section-sections--17514858872895__custom_liquid_k4rf98 .cu-header-inner {
    padding-top: 6px !important;
    padding-bottom: 10px !important;
  }
}
/* --- Ajustement simple : logo légèrement plus grand sur mobile --- */
@media (max-width: 768px) {
  #shopify-section-sections--17514858872895__custom_liquid_k4rf98 .cu-header-logo-img {
    width: 100px !important;
  }
}
/* --- Logo légèrement plus grand en version ordinateur --- */
@media (min-width: 769px) {
  .cu-header-logo-img {
    width: 180px !important;   /* Ajuste ici : 160 / 170 / 180 */
  }
}
/* --- iPhone : rétrécir la largeur des 3 boutons du header personnalisé --- */
@media (max-width: 768px) {
  .cu-header-buttons .cu-btn {
    width: 60% !important;     /* 🔹 était 80–100% — ici on réduit */
    padding: 10px 12px !important;
    font-size: 15px !important;
    margin-bottom: 10px !important;
  }
}
/* ==== STYLE DU FORMULAIRE NEWSLETTER COFFRET ==== */

.cu-newsletter-wrap {
  margin-top: 20px;
  text-align: center;
}

.cu-newsletter-input {
  padding: 10px 14px;
  width: 85%;
  max-width: 320px;
  border-radius: 6px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.cu-newsletter-btn {
  background-color: #445e2a;
  color: white;
  padding: 10px 18px;
  border-radius: 6px;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

.cu-newsletter-btn:hover {
  background-color: #5e7a36;
}
/* --- Centrer la phrase promo sous le logo --- */
.cu-texte-promo {
  text-align: center !important;
  display: block;
  margin: 10px auto 20px auto !important; /* espace au-dessus et en dessous */
  width: 100%;
}

/* --- Espacer le champ courriel des deux boutons --- */
.cu-newsletter-wrap {
  margin-bottom: 25px !important; /* augmente l’espace sous le formulaire */
}

/* --- Centrer horizontalement tous les éléments du header custom --- */
.cu-header-inner {
  text-align: center !important;
}

/* --- Centrer les 2 boutons --- */
.cu-header-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
}
/* --- Corriger menu du header : tout sur une seule ligne --- */
.header__inline-menu {
  display: flex;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 28px !important; /* Ajuste l'espace entre les items */
}

/* Empêcher les items de sauter sur 2 lignes */
.header__inline-menu .list-menu__item {
  white-space: nowrap !important;
}
/* === FIX – Garder le menu sur une seule ligne === */
.header {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Conteneur interne du header */
.header__heading {
  margin: 0 !important;
  padding: 0 !important;
}

/* Ligne du menu (navigation + logo + icônes) */
.header__inline-menu {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important; /* empêche de tomber sur deux lignes */
}

/* Items du menu */
.header__inline-menu .header__menu-item {
  white-space: nowrap !important;  /* empêche les mots de se couper */
  padding: 0 14px !important;
}

/* Centrer les 2 boutons sous ton formulaire promo */
.cu-header-buttons {
  display: flex !important;
  justify-content: center !important;
  gap: 20px !important;
}

/* Un peu plus d’espace entre le formulaire et les boutons */
.cu-newsletter-wrap {
  margin-bottom: 25px !important;
}

/* Centre bien la phrase promo */
.cu-texte-promo {
  text-align: center !important;
}
/* --- Revenir à un espacement normal dans le menu --- */
.header__inline-menu .header__menu-item {
    padding: 0 14px !important;
    white-space: nowrap !important; /* Empêche le retour à la ligne */
}

/* Empêcher le titre "Campagne urbaine" de se couper */
.header__heading, 
.header__heading-link {
    white-space: nowrap !important;
}

/* --- Centrer la phrase promo --- */
.cu-texte-promo {
  text-align: center !important;
  font-weight: 400 !important;
  margin-top: 10px !important;
  margin-bottom: 20px !important;
}

/* --- Espacer davantage le formulaire des boutons --- */
.cu-newsletter-wrap {
  margin-bottom: 30px !important;
}

/* --- Centrer les deux boutons ensemble --- */
.cu-header-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}
<div class="cu-creator-wrapper">

  <h1>Créez votre coffret cadeau personnalisé</h1>

  <h2>Un coffret cadeau qui vous ressemble.</h2>

  <p>Que vous souhaitiez <strong>offrir un cadeau</strong> ou simplement <strong>vous faire plaisir</strong>, composez un coffret rempli d'essentiels appréciés autant par les adultes que par les jeunes.</p>

  <p>Explorez nos ambiances soigneusement sélectionnées ou créez un coffret totalement libre, selon vos goûts et votre budget.</p>

  <div class="cu-creator-buttons">
    <a href="/pages/nos-ambiances" class="cu-btn-main">Voir toutes nos ambiances</a>
    <a href="/collections/cree-ton-coffret---tous-nos-produits" class="cu-btn-secondary">Composer un coffret avec tous nos produits</a>
  </div>

</div>
/* === STYLE TITRE PAGE CRÉEZ VOTRE COFFRET === */

/* Conteneur du titre */
.cu-creator-wrapper h1 {
  font-size: 56px;              /* même taille que “Nos coffrets prêts à offrir” */
  font-weight: 700;             /* même épaisseur */
  line-height: 1.1;             
  text-align: center;
  margin-top: 40px;
  margin-bottom: 20px;
  color: #1a1a1a;               /* couleur standard du thème */
}

/* Sous-titre */
.cu-creator-wrapper h2 {
  font-size: 26px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 25px;
  color: #333;
}

/* Paragraphes */
.cu-creator-wrapper p {
  font-size: 18px;
  line-height: 1.6;
  text-align: center;
  color: #444;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 12px;
}

/* Responsive mobile */
@media screen and (max-width: 768px) {
  .cu-creator-wrapper h1 {
    font-size: 36px;
    margin-top: 20px;
    margin-bottom: 16px;
  }

  .cu-creator-wrapper h2 {
    font-size: 20px;
    margin-bottom: 18px;
  }

  .cu-creator-wrapper p {
    font-size: 16px;
    line-height: 1.5;
  }
}
/* --------------------------------------------- */
/* CAMPAGNE URBAINE — STYLE PREMIUM DU PANIER    */
/* --------------------------------------------- */

/* Espacement général */
.cart__items {
  padding: 40px 0;
}

/* Carte du panier */
.cart-item {
  padding: 25px 0;
  border-bottom: 1px solid #e5e5e5;
}

/* Image produit plus élégante */
.cart-item__image {
  border-radius: 12px;
  overflow: hidden;
}

/* Titre du coffret */
.cart-item__details .cart-item__name {
  font-size: 20px;
  font-weight: 600;
  color: #2b2b2b;
  margin-bottom: 10px;
}

/* Texte des items listés dans le coffret */
.cart-item__details p,
.cart-item__details li {
  line-height: 1.55;
  margin-bottom: 5px;
  font-size: 14px;
  color: #444;
}

/* Améliorer les prix */
.cart-item__price-wrapper {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

/* Prix barré */
.price--compare {
  color: #9a9a9a;
}

/* Quantité styling */
.quantity__button {
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* Section total */
.totals {
  border-top: 2px solid #eee;
  padding-top: 30px;
  margin-top: 20px;
}

.totals__subtotal-value {
  font-size: 22px;
  font-weight: 700;
  color: #2b2b2b;
}

/* Bouton Procéder au paiement */
button.cart__checkout-button,
.cart__checkout-button {
  background-color: #000 !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 16px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: .5px;
}

/* Bouton PayPal */
.shopify-cleanslate ._1fragemnt {
  border-radius: 8px !important;
}

/* Améliorer l'apparence des listes du coffret */
.cart-item__details ul {
  margin-left: 15px;
  padding-left: 10px;
}
/* ------------------------------------------------------ */
/*  CAMPAGNE URBAINE — PANIER VERSION LUXE MOODBOARD      */
/* ------------------------------------------------------ */

/* Bloc du coffret en style "boîte cadeau" */
.cart-item {
  background: #faf7f3; /* crème très doux */
  border-radius: 12px;
  padding: 30px !important;
  margin-bottom: 25px;
  border: 1px solid #ebe4dc; /* léger beige */
}

/* Survol élégant */
.cart-item:hover {
  background: #f7f3ef;
  transition: 0.2s ease-in-out;
}

/* Séparation plus chic */
.cart-item + .cart-item {
  border-top: none !important;
}

/* Titre du coffret */
.cart-item__details .cart-item__name {
  font-family: "Georgia", serif;
  font-size: 24px;
  letter-spacing: 0.3px;
  font-weight: 600;
  color: #1c1c1c;
  margin-bottom: 15px;
}

/* Style du sous-texte des items */
.cart-item__details p,
.cart-item__details li {
  color: #4d493f !important;
  font-size: 15px;
  margin-bottom: 8px;
  line-height: 1.55;
}

/* Petit icône / puce pour chaque item */
.cart-item__details ul li::before {
  content: "•";
  margin-right: 6px;
  color: #c9a47b; /* beige doré chic */
}

/* Encadré autour de la liste */
.cart-item__details ul {
  padding: 15px;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #e6ded4;
  margin-top: 15px;
}

/* Prix du coffret */
.cart-item__price-wrapper {
  background: #ffffff;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #e4dccf;
  width: max-content;
  margin-top: 10px;
}

/* Bouton checkout noir premium */
button.cart__checkout-button,
.cart__checkout-button {
  background-color: #1a1a1a !important;
  border-radius: 10px !important;
  padding: 18px 22px !important;
  font-size: 17px !important;
  font-weight: 600 !important;
}

/* Sous-total plus premium */
.totals__subtotal-value {
  font-size: 24px !important;
  font-weight: 700;
  color: #1a1a1a !important;
}

/* Titre "Total estimé" */
.totals__subtotal-label {
  font-size: 18px;
  color: #444 !important;
}

/* Réduction affichée (ex : -25%) */
.cart-item__discount {
  background: #fdeee8;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #b0583d;
  display: inline-block;
  margin-top: 8px;
}
/* 1. Adoucir les ombres */
.cart-item {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  background: #fffaf7 !important; /* ton beige ultra doux */
}

/* 2. Espacer les coffrets les uns des autres */
.cart-items .cart-item {
  margin-bottom: 35px !important;
}

/* 3. Alignement photo + texte plus élégant */
.cart-item__media {
  border-radius: 12px !important;
  overflow: hidden;
}

/* 4. Prix mis en valeur */
.cart-item__price-wrapper {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #000 !important;
}
.cu-cart-badge {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 25px;
  padding: 10px 18px;
  border: 2px solid #d6c7b8;
  border-radius: 50px;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: #4a3f35;
  background: #fdfaf7;
  font-weight: 500;
}
/* ================================
   CAMPAGNE URBAINE – MOODBOARD + CARTES
================================ */

/* ---- CONTAINER GÉNÉRAL ---- */
#cu-card-selector {
  margin-top: 35px;
  padding: 28px;
  background: #faf7f3;
  border: 1px solid #e2d8cc;
  border-radius: 14px;
}

/* ---- MOODBOARD ---- */
.cu-moodboard-block {
  text-align: center;
  margin-bottom: 25px;
}

.cu-moodboard-img {
  width: 100%;
  max-width: 480px;
  border-radius: 12px;
  margin: 0 auto 12px auto;
  display: block;
  border: 1px solid #e3d8c9;
}

.cu-moodboard-text {
  font-size: 16px;
  color: #4a3f35;
  font-weight: 500;
  line-height: 1.4;
}

/* ---- TITRE ---- */
.cu-card-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #4a3f35;
  text-align: left;
}

/* ---- OPTIONS / LISTE ---- */
.cu-card-options {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ---- OPTION ---- */
.cu-card-option {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 15px;
  border: 1px solid #e3d7c8;
  border-radius: 10px;
  background: #ffffff;
  transition: 0.25s ease;
}

.cu-card-option:hover {
  border-color: #cdbda9;
  background: #fdfbf8;
}

/* ---- IMAGE CARTE ---- */
.cu-card-option img {
  width: 95px;
  border-radius: 8px;
  border: 1px solid #e4dbcf;
}

/* ---- INFO CARTE ---- */
.cu-card-info {
  flex: 1;
}

.cu-card-name {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #4a3f35;
}

/* ---- LABEL ---- */
.cu-label {
  font-size: 14px;
  font-weight: 600;
  margin-top: 10px;
  display: block;
  color: #4a3f35;
}

/* ---- INPUT ---- */
.cu-input,
.cu-textarea {
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  border: 1px solid #d9cec0;
  border-radius: 6px;
  font-size: 15px;
  color: #4a3f35;
  background: #ffffff;
}

.cu-input:focus,
.cu-textarea:focus {
  outline: none;
  border-color: #bba892;
  box-shadow: 0 0 3px rgba(200,175,150,0.4);
}

/* ---- TEXTAREA ---- */
.cu-textarea {
  min-height: 85px;
  resize: none;
}

/* ---- BOUTON AJOUTER ---- */
.cu-add-btn {
  margin-top: 14px;
  background: #39442d;
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: 0.25s ease;
  width: 100%;
}

.cu-add-btn:hover {
  background: #2c3423;
}

/* ---- MESSAGE FEEDBACK ---- */
.cu-feedback {
  margin-top: 18px;
  font-size: 15px;
  font-weight: 600;
  color: #39442d;
  text-align: center;
}

/* ---- MOBILE ---- */
@media (max-width: 749px) {
  .cu-card-option {
    flex-direction: column;
    align-items: center;
  }

  .cu-card-option img {
    width: 140px;
  }

  .cu-card-info {
    width: 100%;
  }

  .cu-moodboard-img {
    max-width: 350px;
  }
}


/* --- BYOB QuickView : rendre la description scrollable --- */
.byob-quickview-desc {
  max-height: 300px !important;
  overflow-y: auto !important;
  padding-right: 10px;
}

/* Style de défilement agréable */
.byob-quickview-desc::-webkit-scrollbar {
  width: 6px;
}

.byob-quickview-desc::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 6px;
}

.byob-quickview-desc::-webkit-scrollbar-track {
  background: #f2f2f2;
}

/* --- Empêcher la fenêtre QuickView d'être trop grande --- */
.byob-quickview-panel.byob-quickview-right,
.byob-quickview-popup .byob-quickview-content {
  max-height: 85vh !important;
  overflow-y: auto !important;
}
/* --- BYOB QuickView : rendre le panneau scrollable --- */
.byob-quickview-panel.byob-quickview-right {
  max-height: 80vh !important;
  overflow-y: auto !important;
  padding-right: 12px;
}

/* --- La zone de description doit pouvoir défiler --- */
.byob-quickview-panel.byob-quickview-right * {
  max-height: none !important;
}
/* --- FIX TOTAL POUR LE SCROLL DU QUICKVIEW BYOB --- */

/* Permet de faire défiler tout le panneau droit */
.byob-quickview-panel .byob-quickview-right {
  max-height: 80vh !important;
  overflow-y: auto !important;
  padding-right: 8px;
}

/* La zone de description peut défiler si elle est très longue */
.byob-quickview-desc {
  max-height: none !important;
  overflow: visible !important;
}

/* Empêche le contenu de se couper */
.byob-product-info {
  overflow: visible !important;
}
/* FOOTER CAMPAGNE URBAINE */
.cu-footer-container {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding: 40px 0;
  border-top: 1px solid #e8e8e8;
}

.cu-footer-col {
  flex: 1 1 250px;
}

.cu-footer-logo {
  width: 180px;
  margin-bottom: 15px;
}

.cu-footer-tagline {
  color: #6b6b6b;
  font-size: 14px;
  max-width: 260px;
}

.cu-footer-col h4 {
  margin-bottom: 15px;
  font-size: 16px;
}

.cu-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cu-footer-col ul li {
  margin-bottom: 10px;
}

.cu-footer-col ul li a {
  color: #6b6b6b;
  font-size: 14px;
  text-decoration: none;
}

.cu-footer-col ul li a:hover {
  opacity: 0.6;
}

.cu-footer-bottom {
  border-top: 1px solid #e8e8e8;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 13px;
  color: #6b6b6b;
}

.cu-footer-bottom a {
  color: #6b6b6b;
  margin-left: 15px;
  text-decoration: none;
}

.cu-footer-bottom a:hover {
  opacity: 0.6;
}

.cu-footer-legal {
  display: flex;
}
/* --------------------- */
/* FOOTER CAMPAGNE URBAINE */
/* --------------------- */

.cu-footer-wrapper {
  background: #F7F3EC; /* crème farmhouse */
  padding-top: 40px;
}

.cu-footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  justify-content: space-between;
}

.cu-footer-col {
  flex: 1 1 260px;
  min-width: 240px;
}

.cu-footer-logo {
  width: 150px;
  height: auto;
  margin-bottom: 18px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.cu-footer-tagline {
  color: #6b6b6b;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 25px;
  max-width: 260px;
}

/* FORMULAIRE INFOLETTRE */
.cu-footer-newsletter label {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  display: block;
}

.cu-footer-newsletter input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 14px;
  background: white;
}

.cu-footer-newsletter button {
  padding: 10px 16px;
  background: #4d4d4d;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  width: 100%;
}

.cu-footer-newsletter button:hover {
  opacity: 0.85;
}

/* TITRES */
.cu-footer-col h4 {
  font-size: 16px;
  margin-bottom: 15px;
  color: #333;
}

/* LISTES */
.cu-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cu-footer-col ul li {
  margin-bottom: 10px;
  font-size: 14px;
}

.cu-footer-col ul li a {
  color: #6b6b6b;
  text-decoration: none;
}

.cu-footer-col ul li a:hover {
  opacity: 0.6;
}

/* BAS DU FOOTER */
.cu-footer-bottom {
  border-top: 1px solid #E3DCD4;
  margin-top: 20px;
  padding: 20px 20px;
  display: flex;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 13px;
  color: #6b6b6b;
}

.cu-footer-bottom a {
  color: #6b6b6b;
  text-decoration: none;
  margin-left: 15px;
}

.cu-footer-bottom a:hover {
  opacity: 0.7;
}

.cu-footer-legal {
  display: flex;
}

/* --------------------- */
/* VERSION MOBILE (iPhone) */
/* --------------------- */

@media(max-width: 768px) {
  .cu-footer-container {
    flex-direction: column;
    gap: 40px;
    text-align: center;
  }

  .cu-footer-logo {
    margin-left: auto;
    margin-right: auto;
  }

  .cu-footer-tagline {
    margin-left: auto;
    margin-right: auto;
  }

  .cu-footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .cu-footer-legal {
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
  }
}

/* === FIX Shopify Dawn — Campagne Urbaine === */

/* Supprime le zoom interne */
.product__media-toggle,
.product__media-toggle img {
  cursor: default !important;
}
.product__media-zoom-hover,
.product__media-icon--hover {
  display: none !important;
}

/* Empêche Shopify de mettre des scroll internes */
.product__media,
.product__media-list,
.product__media-item,
.product-media-modal__content {
  overflow: visible !important;
}

/* Fix du focus bleu */
.product__media-toggle:focus-visible,
.thumbnail:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Fix lightbox (taille images dans popup) */
.product-media-modal__content img {
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}
/* === FIX HAUTEUR — Produit Shopify écrasé === */
.product__media-item img {
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}
/* ========================================================= */
/*   FOOTER PREMIUM CAMPAGNE URBAINE — VERSION EXCLUSIVE     */
/* ========================================================= */

.cu-footer-wide {
  width: 100%;
  background: #e7dfd2; /* Papier brun clair cozy */
  padding: 70px 25px 40px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(0,0,0,0.05);
}

/* Texture subtile haut-de-gamme */
.cu-footer-wide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('https://www.transparenttextures.com/patterns/paper-fibers.png');
  opacity: 0.12;
  pointer-events: none;
}

.cu-footer-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 70px;
  position: relative;
  z-index: 2;
}

/* Colonnes */
.cu-footer-col {
  text-align: left;
  color: #4a4a2f;
}

/* Mobile */
@media (max-width: 900px) {
  .cu-footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .cu-footer-col {
    text-align: center;
  }
}

/* Logo */
.cu-footer-logo {
  width: 120px;
  height: auto;
  margin-bottom: 15px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
}

/* Tagline */
.cu-footer-tagline {
  font-size: 15px;
  letter-spacing: 0.3px;
  line-height: 1.6;
  max-width: 260px;
}

/* Titres */
.cu-footer-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #4a4a2f;
  letter-spacing: 0.5px;
}

/* Texte */
.cu-footer-text {
  font-size: 15px;
  line-height: 1.5;
  color: #4a4a2f;
  margin-bottom: 15px;
}

/* Formulaire */
.cu-footer-form {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.cu-footer-form input {
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #b9aa99;
  background: #fff;
}

.cu-footer-form button {
  background: #4e5a45;
  color: white;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

.cu-footer-form button:hover {
  background: #37402e;
  transform: translateY(-2px);
}

/* Liens */
.cu-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cu-footer-links li {
  margin-bottom: 8px;
}

.cu-footer-links a {
  font-size: 15px;
  color: #4a4a2f;
  text-decoration: none;
  transition: 0.2s;
}

.cu-footer-links a:hover {
  color: #000;
  padding-left: 5px;
}

/* Bas de page */
.cu-footer-bottom {
  margin-top: 50px;
  text-align: center;
  padding-top: 20px;
  font-size: 14px;
  color: #4a4a2f;
  border-top: 1px solid rgba(0,0,0,0.1);
  position: relative;
}
/* --- ZOOM SUR IMAGE DANS LE POPUP BYOB --- */
.byob-quickview-feature {
  transition: transform 0.3s ease-in-out;
  cursor: zoom-in;
}

.byob-quickview-feature:hover {
  transform: scale(1.25);   /* Ajuste la force du zoom */
}

/* Ajuste la boîte de l’image dans le panier Dawn */
.cart-item__image-container,
.cart-item__media {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
}

/* Ajuste l’image elle-même */
.cart-item__image-container img,
.cart-item__image,
.cart-item__media img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}
/* ---- FIX MOBILE POUR IMAGES COUPÉES DANS LE PANIER ---- */
@media screen and (max-width: 749px) {

  .cart-item__image-container,
  .cart-item__media {
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      overflow: visible !important;
  }

  .cart-item__image-container img,
  .cart-item__image,
  .cart-item__media img {
      width: 100% !important;
      height: auto !important;
      object-fit: contain !important;
  }

}

/* ---- RESTAURE LE COMPORTEMENT NORMAL SUR ORDINATEUR ---- */
@media screen and (min-width: 750px) {

  .cart-item__image-container img,
  .cart-item__image,
  .cart-item__media img {
      width: auto !important;
      height: auto !important;
      max-width: 100% !important;
      object-fit: cover !important;
  }

}
/* ---- FIX DESKTOP POUR LE CONTENEUR D'IMAGE DANS LE PANIER ---- */
@media screen and (min-width: 750px) {

  .cart-item__image-container,
  .cart-item__media {
      width: 140px !important;
      max-width: 140px !important;
      flex: 0 0 140px !important;
  }

  .cart-item__image-container img,
  .cart-item__media img {
      width: 100% !important;
      height: auto !important;
      object-fit: cover !important;
  }

}
/* -------------------------------
   FIX BOUTONS DE PAIEMENT CHECKOUT
   – Mise en ligne sur ordinateur
   – Mise en colonne + visibles sur mobile
---------------------------------- */

/* MODE ORDINATEUR (≥ 750px) */
@media screen and (min-width: 750px) {

  .cart__dynamic-checkout-buttons {
      display: flex !important;
      flex-direction: row !important;
      justify-content: center !important;
      align-items: center !important;
      gap: 12px !important;        /* espace entre les boutons */
      width: 100% !important;
      flex-wrap: nowrap !important;
  }

  .cart__dynamic-checkout-buttons > * {
      flex: 1 1 0 !important;      /* chaque bouton prend la même largeur */
      min-width: 140px !important; /* largeur minimale */
      max-width: 180px !important;
  }
}

/* MODE MOBILE (≤ 749px) */
@media screen and (max-width: 749px) {

  .cart__dynamic-checkout-buttons {
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      align-items: stretch !important;
      gap: 10px !important;
      width: 100% !important;
  }

  .cart__dynamic-checkout-buttons > * {
      width: 100% !important;
      min-height: 48px !important;
      opacity: 1 !important; /* empêche la “ligne bleue” invisible */
      transform: scale(1) !important;
  }
}
/* --- MODE ORDINATEUR : alignement horizontal des boutons rapides --- */
@media screen and (min-width: 750px) {
  .cart__dynamic-checkout-buttons,
  .additional-checkout-buttons,
  .cart__footer .shopify-payment-button {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      flex-direction: row !important;
      gap: 14px !important;
      width: 100% !important;
  }

  .additional-checkout-buttons > * {
      flex: 0 0 auto !important;
  }
}

/* ====== FIX FINAL BOUTONS EXPRESS PAYPAL / SHOP PAY / G-PAY ====== */

/* Desktop : 3 boutons côte-à-côte */
@media screen and (min-width: 750px) {
  .cart__dynamic-checkout-buttons,
  .additional-checkout-buttons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
  }

  .cart__dynamic-checkout-buttons > *,
  .additional-checkout-buttons > * {
    flex: 1 1 auto !important;
    min-width: 150px !important;
    max-width: 200px !important;
  }
}

/* Mobile : afficher les boutons normalement en colonne */
@media screen and (max-width: 749px) {
  .cart__dynamic-checkout-buttons,
  .additional-checkout-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .cart__dynamic-checkout-buttons > *,
  .additional-checkout-buttons > * {
    width: 100% !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* === CENTRER LE BOUTON NOIR "PROCÉDER AU PAIEMENT" === */
.cart__ctas {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    text-align: center !important;
}

.cart__ctas button,
.cart__ctas .shopify-payment-button {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* === CENTRER LES BOUTONS EXPRESS EN DESSOUS === */
.cart__dynamic-checkout-buttons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
}

.cart__dynamic-checkout-buttons > * {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 130px !important;
}

.cu-coffret-intro {
  text-align: center;
  max-width: 820px;
  margin: 60px auto 40px;
}

.cu-coffret-intro h1 {
  font-size: 2.2rem;
  margin-bottom: 16px;
}

.cu-coffret-intro p {
  font-size: 1.05rem;
  color: #5c5c5c;
}

.cu-coffret-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 36px;
  max-width: 1200px;
  margin: 0 auto 80px;
  padding: 0 20px;
}

.cu-coffret-card {
  background: #faf7f2;
  border-radius: 16px;
  padding: 20px;
  text-align: center;
}

.cu-coffret-card img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 16px;
}

.cu-coffret-card h2 {
  font-size: 1.25rem;
  margin-bottom: 10px;
}

.cu-intention {
  font-size: 0.95rem;
  margin-bottom: 10px;
}

.cu-exemples {
  font-size: 0.9rem;
  color: #6b6b6b;
  margin-bottom: 18px;
}

.cu-btn {
  display: inline-block;
  padding: 10px 22px;
  background: #4a5a2a;
  color: #fff;
  border-radius: 24px;
  text-decoration: none;
  font-size: 0.9rem;
}

.cu-coffret-libre {
  text-align: center;
  padding: 70px 20px;
  background: #f3efe8;
}

.cu-btn-secondary {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 26px;
  border: 1px solid #4a5a2a;
  color: #4a5a2a;
  border-radius: 26px;
  text-decoration: none;
}

/* ===== PAGE : TYPE DE COFFRET (VERSION ÉDITORIALE) ===== */
.cu-coffret-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto 100px;
  padding: 0 20px;
}

.cu-coffret-card {
  background: transparent;
}

.cu-coffret-card img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 18px;
}

.cu-coffret-card h2 {
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 10px;
}

.cu-intention {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 8px;
}

.cu-exemples {
  font-size: 14px;
  color: #666;
  margin-bottom: 16px;
}

.cu-btn {
  padding: 12px 28px;
  font-size: 15px;
}

@media (max-width: 900px) {
  .cu-coffret-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .cu-coffret-card img {
    height: 320px;
  }
}
/* TITRE & INTRO – UNIVERS DE COFFRETS */
.cu-coffret-intro h1 {
  font-size: 38px;
  font-weight: 500;
  margin-bottom: 12px;
}

.cu-coffret-intro p {
  font-size: 18px;
  color: #555;
  line-height: 1.6;
}
.cu-coffret-tendance {
  max-width: 1200px;
  margin: 0 auto 100px;
  padding: 0 20px;
}

.cu-coffret-highlight {
  border-top: 1px solid #e6e2d8;
  padding-top: 40px;
}
.cu-section {
  text-align: center;
  padding: 80px 20px;
}

.cu-section-libre {
  background: #f6f1e9;
}

.cu-section-aide {
  background: #ffffff;
}

.cu-section-cta {
  background: #f6f1e9;
}

.cu-section h2 {
  font-size: 2.2rem;
  margin-bottom: 16px;
}

.cu-text-intro {
  max-width: 720px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

.cu-etapes p {
  margin: 8px 0;
}

.cu-spacer-footer {
  height: 120px;
}
/* ===================== */
/* COFFRET LIBRE CRÉATION */
/* ===================== */

.cu-libre-hero {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background-image: url("/cdn/shop/files/Sans_titre-2.png?v=1765802553");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 120px 20px;
  position: relative;
}

/* Léger voile UNIQUEMENT pour lisibilité du texte */
.cu-libre-overlay {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  background: rgba(255, 255, 255, 0.75); /* PAS transparent à l’extrême */
  padding: 60px 40px;
  border-radius: 12px;
}

/* TITRE – même impact que les autres coffrets */
.cu-libre-overlay h2 {
  font-size: 2.2rem;
  margin-bottom: 18px;
  color: #2f2f2f;
}

/* TEXTE */
.cu-libre-overlay p {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 32px;
  color: #4a4a4a;
}

/* Responsive */
@media (max-width: 768px) {
  .cu-libre-hero {
    padding: 80px 15px;
  }

  .cu-libre-overlay {
    padding: 40px 20px;
  }

  .cu-libre-overlay h2 {
    font-size: 1.8rem;
  }
}

/* ===================== */
/* COFFRET LIBRE CRÉATION */
/* ===================== */

.cu-libre-hero {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background-image: url("/cdn/shop/files/Sans_titre-2.png?v=1765802553");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 120px 20px;
  position: relative;
}

/* Voile lisibilité */
.cu-libre-overlay {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  background: rgba(255, 255, 255, 0.8);
  padding: 60px 40px;
  border-radius: 14px;
}

/* TITRE */
.cu-libre-overlay h2 {
  font-size: 2.8rem; /* harmonisé avec les autres coffrets */
  margin-bottom: 20px;
  color: #2f2f2f;
}

/* TEXTE */
.cu-libre-overlay p {
  font-size: 1.55rem;
  line-height: 1.95;
  margin-bottom: 36px;
  color: #4a4a4a;
}

/* ===================== */
/* RESPONSIVE IPHONE */
/* ===================== */
@media (max-width: 768px) {

  .cu-libre-hero{
    background-image: url("/cdn/shop/files/Sans_titre-2_4.png?v=1765805344");
    padding: 80px 15px;
    background-position: center;
  }

  .cu-libre-overlay{
    padding: 28px 20px;
    max-width: 92%;
    border-radius: 10px;
  }

  .cu-libre-overlay h2{
    font-size: 2.05rem;
    margin-bottom: 14px;
  }

  .cu-libre-overlay p{
    font-size: 1.12rem;
    line-height: 1.5;
    margin-bottom: 22px;
  }

  .cu-libre-overlay .cu-btn,
  .cu-libre-overlay .cu-btn-outline{
    padding: 14px 26px;
    font-size: 1.05rem;
  }

  .cu-coffret-grid{
    gap: 40px;
  }

  .cu-coffret-card{
    margin-bottom: 40px;
  }
}

.byob-circle-step-builder-container,
.byob-circle-step-builder-container * {
  position: sticky !important;
}

.byob-circle-step-builder-container {
  top: 105px !important;
  z-index: 9999 !important;
}

/* Bouton Ajouter au panier – Coffrets prêts */

.quick-add__submit,
.card__content .button {
  background-color: #4f5f2f !important;
  color: #ffffff !important;
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0px !important;
  box-shadow: none !important;
  outline: none !important;
}

.quick-add__submit:hover,
.card__content .button:hover {
  background-color: #3f4c25 !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0px !important;
}

.quick-add__submit:focus,
.card__content .button:focus {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0px !important;
}

/* Cibler les pseudo-éléments */
.quick-add__submit::before,
.quick-add__submit::after,
.card__content .button::before,
.card__content .button::after {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0px !important;
}
/* Arrondir les images des produits BYOB - Version étendue */
.byob-product-grid img,
.byob-product-item img,
.byob-bundle img,
.byob-product-grid .product-image,
.byob-product-item .product-image,
[class*="byob"] img,
.byob-product-card img,
.byob-grid-item img {
  border-radius: 40px !important;
  overflow: hidden !important;
}

/* Largeur pleine écran - Modification Février 2026 */
.page-width,
.container {
  max-width: 100% !important;
  padding-left: 2rem;
  padding-right: 2rem;
}

.header-wrapper {
  max-width: 100% !important;
}

.collection-grid,
.product-grid {
  max-width: 100% !important;
}

/* BYOB pleine largeur */
.byob-container,
[class*="byob"] {
  max-width: 100% !important;
}

/* ========================================
   POPUP BYOB - Améliorations UX (VERSION CORRIGÉE)
   Février 2026
   ======================================== */

/* 1. Élargir le popup BYOB sur desktop */
@media screen and (min-width: 750px) {
  .byob-quickview-container {
    max-width: 90vw !important;
    width: 90vw !important;
  }
  
  /* Agrandir l'image */
  .byob-quickview-left {
    flex: 1 1 55% !important;
  }
  
  .byob-quickview-right {
    flex: 1 1 45% !important;
  }
}

/* 2. Cacher SEULEMENT le premier H2 (titre dupliqué du produit) */
.byob-quickview-desc h2:first-of-type {
  display: none !important;
}

/* 3. Réorganiser : Prix → Bouton → Description */
.byob-product-info {
  display: flex !important;
  flex-direction: column !important;
}

/* Prix en premier */
.byob-quickview-price {
  order: 1 !important;
  margin-bottom: 1rem !important;
}

/* Options/Bouton en deuxième */
#byob-product-options1 {
  order: 2 !important;
  margin-bottom: 1.5rem !important;
  display: block !important;
  visibility: visible !important;
}

/* Description en dernier */
.byob-quickview-desc {
  order: 3 !important;
}

/* Cacher le deuxième bouton (duplication en bas) */
#byob-product-options2 {
  display: none !important;
}

/* AJUSTER TITRE ET PRIX - POPUP BYOB MOBILE */
@media screen and (max-width: 749px) {
  
  /* Titre du produit */
  .byob-quickview-title {
    font-size: 1.6rem !important; /* Changez ce chiffre pour grossir/réduire le titre */
    line-height: 1.2 !important;
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Prix du produit */
  .byob-quickview-price {
    font-size: 1.2rem !important; /* Changez ce chiffre pour ajuster la taille du prix */
    margin-top: 0.3rem !important;
    margin-bottom: 0.5rem !important;
  }
}

/* AJUSTER TITRE ET PRIX - POPUP BYOB DESKTOP */
@media screen and (min-width: 750px) {
  
  /* Titre du produit */
  .byob-quickview-title {
    font-size: 2.5rem !important; /* Changez ce chiffre pour ajuster la taille */
    line-height: 1.2 !important; /* Changez ce chiffre pour l'espace entre les lignes */
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Prix du produit */
  .byob-quickview-price {
    font-size: 1.9rem !important; /* Changez ce chiffre pour ajuster la taille du prix */
    margin-top: 0.3rem !important;
    margin-bottom: 0.5rem !important;
  }
}
/* Arrondir les boutons "Ajouter au kit" BYOB */
.btn-add-to-bundle,
.btn.Button.btn-add-to-bundle,
button.btn-add-to-bundle {
  border-radius: 20px !important;
}







/* Style personnalisé pour les boutons Ajouter au kit BYOB - DESKTOP ET MOBILE */
.btn-add-to-bundle,
.btn.Button.btn-add-to-bundle,
button.btn-add-to-bundle {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: 1px solid #6b7c59 !important;
  color: #333333 !important;
}

.btn-add-to-bundle .AddToBundleText,
.btn.Button.btn-add-to-bundle .AddToBundleText,
button.btn-add-to-bundle .AddToBundleText {
  color: #333333 !important;
}

.btn-add-to-bundle:hover,
.btn.Button.btn-add-to-bundle:hover,
button.btn-add-to-bundle:hover {
  background-color: #f8f8f8 !important;
  background: #f8f8f8 !important;
  border-color: #6b7c59 !important;
  color: #333333 !important;
}

/* Changer "Ajouter au kit" en "Ajouter au coffret" */
.btn-add-to-bundle .AddToBundleText {
  font-size: 0 !important;
}

.btn-add-to-bundle .AddToBundleText::after {
  font-size: 14px !important;
  content: "Ajouter au coffret" !important;
}

/* Version mobile */
@media (max-width: 749px) {
  .btn-add-to-bundle .AddToBundleText::after {
    font-size: 13px !important;
  }
}








/* Grossir les boutons "Ajouter au kit" en hauteur - DESKTOP seulement */
@media screen and (min-width: 750px) {
  
  .btn-add-to-bundle,
  .btn.Button.btn-add-to-bundle,
  button.btn-add-to-bundle {
    padding-top: 1rem !important; /* Changez ce chiffre pour ajuster la hauteur */
    padding-bottom: 1rem !important;
    min-height: 48px !important; /* Hauteur minimale */
  }
}
/* Grossir les boutons "Ajouter au kit" - DESKTOP */
@media screen and (min-width: 750px) {
  
  .btn-add-to-bundle,
  .btn.Button.btn-add-to-bundle,
  button.btn-add-to-bundle {
    padding: 1rem 2rem !important; /* Vertical | Horizontal */
    min-height: 48px !important;
    font-size: 1.6rem !important;
  }
}
/* Créer une séparation claire entre les produits BYOB - DESKTOP SEULEMENT */
@media screen and (min-width: 750px) {
  
  /* Réduire l'espace en bas du prix */
  .lb-price {
    margin-bottom: 0.1rem !important; /* ← Changez ce chiffre pour l'espace prix-bouton */
  }
  
  /* Réduire l'espace en haut du bouton */
  .btn-add-to-bundle,
  .btn.Button.btn-add-to-bundle {
    margin-top: 0.1rem !important; /* ← Petit espace entre prix et bouton */
  }
  
  /* Augmenter l'espace APRÈS le bouton (avant le prochain produit) */
  .btn-add-to-bundle,
  .btn.Button.btn-add-to-bundle {
    margin-bottom: 6rem !important; /* ← Grande séparation avant le prochain produit */
  }
}

/* Arrondir les images BYOB - MOBILE (moins arrondi) */
@media screen and (max-width: 749px) {
  .byob-product-grid img,
  .byob-product-item img,
  .byob-bundle img,
  .byob-product-grid .product-image,
  .byob-product-item .product-image,
  [class*="byob"] img,
  .byob-product-card img,
  .byob-grid-item img {
    border-radius: 12px !important; /* ← Changez ce chiffre pour ajuster l'arrondi mobile */
    overflow: hidden !important;
  }
  
 /* Rapprocher le bouton du prix sur MOBILE - VERSION ULTRA-AGRESSIVE */
@media screen and (max-width: 749px) {
  
  /* Éliminer TOUT l'espace autour du prix */
  .lb-price,
  b.lb-price,
  [class*="price"] {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Éliminer l'espace au-dessus du bouton ET de son conteneur parent */
  .btn-add-to-bundle,
  .btn.Button.btn-add-to-bundle,
  button.btn-add-to-bundle,
  .btn-add-to-bundle-wrapper,
  [class*="button-wrapper"],
  [class*="add-to-bundle"] {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Forcer le bouton lui-même à avoir un petit padding interne */
  .btn-add-to-bundle,
  .btn.Button.btn-add-to-bundle,
  button.btn-add-to-bundle {
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
  }
}
/* Réduire la hauteur et la typo du bouton BYOB - MOBILE SEULEMENT */
@media screen and (max-width: 749px) {
  
  .btn-add-to-bundle,
  .btn.Button.btn-add-to-bundle,
  button.btn-add-to-bundle {
    padding-top: 0.7rem !important; /* ← Changez ce chiffre pour la hauteur */
    padding-bottom: 0.6rem !important;
    font-size: 0.8rem !important; /* ← Changez ce chiffre pour la taille du texte */
    min-height: auto !important;
  }
  
  /* Réduire aussi le texte à l'intérieur */
  .AddToBundleText {
    font-size: 0.8rem !important;
  }
}

/* Diminuer la taille du texte "Ajouter au coffret" - IPHONE SEULEMENT */
@media screen and (max-width: 749px) {
  .btn-add-to-bundle,
  .btn.Button.btn-add-to-bundle,
  button.btn-add-to-bundle {
    font-size: 12px !important;
  }
  
  .btn-add-to-bundle .AddToBundleText::after {
    font-size: 12px !important;
  }
}













  /* Masquer les numéros 1. 2. 3. 4. */
  .byob-accordion-number {
    display: none !important;
  }

}







/* ===================================== */
/* BYOB – MOBILE LOGIQUE VISUELS         */
/* ===================================== */

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

  /* On s'assure que le container est positionné */
  .byob-accordion-container {
    position: relative;
  }

  /* VISUEL PAR DÉFAUT = CHANDELLE / COUVERTURE */
  .byob-accordion-container::after{
    content:"";
    position:absolute;
    top:-30px;
    left:50%;
    transform:translateX(-50%);
    width:180px;   /* un peu plus gros */
    height:220px;
    background-image:url("/cdn/shop/files/ChatGPT_Image_20_fevr._2026_14_02_00.png?v=1771614372");
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    opacity:0.25;
    pointer-events:none;
    z-index:0;
  }

  /* Étape 1 = CADEAU */
  .byob-accordion-container.cu-first-step::after{
    background-image:url("/cdn/shop/files/ChatGPT_Image_20_fevr._2026_10_47_41_2.png?v=1771605792") !important;
  }

  /* Dernière étape = CARTE */
  .byob-accordion-container.cu-last-step::after{
    background-image:url("/cdn/shop/files/ChatGPT_Image_20_fevr._2026_10_52_00_1.png?v=1771605792") !important;
  }

  /* On garde le contenu au-dessus */
  .byob-accordion > div{
    position:relative;
    z-index:2;
  }

}


/* ===================================== */
/* BYOB – ESPACE AVANT PRODUITS MOBILE  */
/* ===================================== */

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

  .byob-accordion {
    margin-bottom: 40px !important; /* Ajustable */
  }

}


/* ===================================== */
/* BYOB – STYLE RECTANGLE MOBILE        */
/* ===================================== */

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

  .byob-accordion {
    background-color: #f3f1ea !important;   /* beige */
    border-radius: 18px !important;
    padding: 22px 18px 18px 18px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08) !important;
    border: none !important;
    color: #2f4f44 !important;
  }

  /* Empêcher le retour du vert actif */
  .byob-accordion.active,
  .byob-accordion:focus,
  .byob-accordion:hover {
    background-color: #f3f1ea !important;
  }

}


/* =========================================================
   CAMPAGNE URBAINE — STRUCTURE VISUELLE DES VARIANTES
   Thème : Dawn
   Objectif :
   - Clarifier les sections (Moment vs Roman)
   - Supprimer la ligne collée au titre
   - Ajouter un vrai séparateur pleine largeur
   - Créer une respiration visuelle élégante
   ========================================================= */


/* ---------------------------------------------------------
   1) TITRES DES GROUPES DE VARIANTES
   (ex: Contenu du Moment / Choix du Roman)
   --------------------------------------------------------- */

.product-form__input .form__label,
.product-form__input legend {
  font-weight: 700;          /* Titre en gras */
  font-size: 15px;           /* Taille élégante */
  margin: 0 0 10px 0;        /* Espace sous le titre */
  display: block;            
  border: none !important;   /* Supprime toute ligne attachée */
}


/* ---------------------------------------------------------
   2) ESPACE GLOBAL SOUS CHAQUE GROUPE
   --------------------------------------------------------- */

.product-form__input {
  margin-bottom: 18px;
}


/* ---------------------------------------------------------
   3) SÉPARATEUR + ESPACE AVANT LE GROUPE SUIVANT
   (applique au 2e groupe et suivants)
   --------------------------------------------------------- */

.product-form__input + .product-form__input {
  margin-top: 22px;                               /* Descend le 2e bloc */
  padding-top: 18px;                              /* Air avant son titre */
  border-top: 1px solid rgba(0,0,0,0.12);          /* Ligne pleine largeur */
}



/* ============================================
   AJUSTEMENT DE LA LARGEUR IMAGE/DESCRIPTION 
   PAGE PRODUIT SHOPIFY STANDARD
   ============================================
   Ce code réduit la largeur de l'image produit
   sur la page de détails pour donner plus 
   d'espace à la description à droite.
   
   IMPORTANT : Ceci affecte UNIQUEMENT les pages
   produit Shopify standard, PAS les produits
   dans l'interface BYOB (Build Your Own Bundle).
   ============================================ */

/* Réduit la largeur de la zone d'image produit */
.product__media-wrapper {
  flex: 0 0 55% !important; /* Réduit de ~60% à 55% */
  max-width: 55% !important;
}

/* Augmente la largeur de la zone de description */
.product__info-wrapper {
  flex: 0 0 45% !important; /* Augmente de ~40% à 45% */
  max-width: 45% !important;
  padding-left: 3rem !important; /* Force l'utilisation de l'espace */
}

/* Retire les marges internes excessives dans la description */
.product__info-container {
  max-width: 85% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Responsive : sur mobile/tablette, garde le plein écran */
@media screen and (max-width: 989px) {
  .product__media-wrapper,
  .product__info-wrapper {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}


/* ============================================
   CORRECTION RESPONSIVE MOBILE
   Retire les paddings excessifs sur iPhone/mobile
   ============================================ */

@media screen and (max-width: 989px) {
  /* Retire tous les paddings latéraux sur mobile */
  .product__info-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* AJUSTEMENT : Contrôle la largeur maximale du conteneur de description */
  .product__info-container {
    max-width: 100% !important; /* Changez à 95% ou 90% pour rétrécir */
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Retire les paddings du conteneur parent si présent */
  .product__info-container > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* AJUSTEMENT PRINCIPAL : Contrôle l'alignement du texte */
  .product__title,
  .product__description,
  .product-form,
  .price {
    padding-left: 2rem !important;  /* GAUCHE : Augmentez pour pousser vers la droite */
    padding-right: 2rem !important; /* DROITE : Augmentez pour plus d'espace à droite */
  }
  
  /* CORRECTION SPÉCIFIQUE : Force le titre à s'aligner correctement */
  .product__title {
    padding-left: 2rem !important;  /* TITRE GAUCHE : Ajustez ce chiffre pour aligner "Moment Lecture" */
    padding-right: 2rem !important;
  }
}

@media screen and (max-width: 989px) {
  
  /* CORRECTION : Titre "Moment Lecture" - réduit le padding gauche */
  .product__title {
    padding-left: 1.2rem !important;  /* RÉDUISEZ ce chiffre pour rapprocher du bord gauche */
    padding-right: 2rem !important;
  }
  
  /* CORRECTION : Section AU-DESSUS du bouton "Ajouter au panier" */
  /* Cible la description, le prix, et les options de produit */
  .product__description,
  .price,
  .product-form__input,
  .product__info-container > div:not(.product-form__buttons) {
    padding-left: 2.3rem !important;  /* AUGMENTEZ ce chiffre pour plus d'espace à gauche */
    padding-right: 2.2rem !important;
  }
  
  /* GARDE le padding parfait pour la section EN-BAS du bouton */
  .product-form__buttons,
  .product__info-container > *:last-child {
    /* Ne touche pas à cette section - elle est déjà parfaite */
  }
}











/* ===== BYOB Coffret Visualizer ===== */

/* Modal overlay */
.byob-visualizer-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.byob-visualizer-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.byob-visualizer-content {
  position: relative;
  max-width: 90%;
  max-height: 90vh;
  margin: 5vh auto;
  background: white;
  border-radius: 8px;
  padding: 30px;
  overflow-y: auto;
  z-index: 10000;
}

/* Bouton fermer */
.byob-visualizer-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #8B7355;
  color: white;
  border: none;
  font-size: 30px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  transition: background 0.3s;
}

.byob-visualizer-close:hover {
  background: #6d5a43;
}

/* Container principal */
.byob-visualizer-container h2 {
  text-align: center;
  color: #8B7355;
  font-size: 28px;
  margin-bottom: 20px;
}

/* Template background */
.byob-template-background {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.byob-template-background img {
  width: 100%;
  height: auto;
  display: block;
}

/* Cadres pour les produits - positionnés sur l'image */
.byob-frame {
  position: absolute;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid transparent;
  transition: all 0.3s;
}

/* Positions des 9 cadres - APPROXIMATIVES, à ajuster selon votre image */
/* Rangée du haut - 3 cadres */
.byob-frame-1 { top: 15%; left: 8%; width: 18%; padding-bottom: 18%; }
.byob-frame-2 { top: 15%; left: 41%; width: 18%; padding-bottom: 18%; }
.byob-frame-3 { top: 15%; left: 74%; width: 18%; padding-bottom: 18%; }

/* Rangée du milieu - 3 cadres */
.byob-frame-4 { top: 42%; left: 8%; width: 18%; padding-bottom: 18%; }
.byob-frame-5 { top: 42%; left: 41%; width: 18%; padding-bottom: 18%; }
.byob-frame-6 { top: 42%; left: 74%; width: 18%; padding-bottom: 18%; }

/* Rangée du bas - 3 cadres */
.byob-frame-7 { top: 69%; left: 8%; width: 18%; padding-bottom: 18%; }
.byob-frame-8 { top: 69%; left: 41%; width: 18%; padding-bottom: 18%; }
.byob-frame-9 { top: 69%; left: 74%; width: 18%; padding-bottom: 18%; }

/* Zone produits supplémentaires en bas */
.byob-extra-products {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 30px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}

.byob-extra-frame {
  width: 100px;
  height: 100px;
  background-size: cover;
  background-position: center;
  border: 2px solid #8B7355;
  border-radius: 4px;
}






@media screen and (max-width: 749px) {
  .byob-footer {
    left: 2% !important;
    right: 2% !important;
    width: 96% !important;
    transform: none !important;
  }
}



/* 
  Style personnalisé Campagne Urbaine pour les pages légales Shopify.
  Ce code améliore l’apparence des pages générées automatiquement par Shopify,
  comme la Politique de confidentialité, afin qu’elles soient plus lisibles,
  mieux encadrées et visuellement cohérentes avec l’univers de la boutique.
*/
.shopify-policy__container{max-width:980px!important;margin:auto!important;padding:40px 28px!important;color:#4a4a2f}.shopify-policy__title h1{color:#4f5a36!important;font-family:Georgia,serif!important;font-size:38px!important}.shopify-policy__body{background:#faf7f0;border:1px solid #e4d9c9;border-radius:18px;padding:34px;line-height:1.75}.shopify-policy__body h2{color:#4f5a36!important;font-size:26px!important}





/* ==================================================
   AJUSTEMENTS RESPONSIVE — EN-TÊTE ET BANNIÈRE D’ACCUEIL

   Ce code harmonise l’affichage du logo, du menu et des icônes
   selon la largeur de l’écran :

   • Écran moyen (769 à 1599 px) :
     - uniformise la taille et la position du logo sur toutes les pages;
     - réduit la typographie et l’espacement du menu pour le garder
       sur une seule ligne;
     - ajuste la bannière d’accueil pour qu’elle remplisse correctement
       sa section sans espace blanc au-dessus ou au-dessous;
     - replace correctement l’encadré de texte dans la bannière.

   • Grand écran (1600 px et plus) :
     - agrandit la typographie du menu;
     - agrandit le sélecteur de langue, l’icône du compte et le panier;
     - ajuste l’espacement entre les éléments à droite de l’en-tête.

   • iPhone (768 px et moins) :
     - uniformise la taille du logo sur la page d’accueil
       et sur toutes les autres pages.

   IMPORTANT :
   Conserver ces règles ensemble et éviter d’ajouter ailleurs
   des règles contradictoires visant les mêmes éléments.
================================================== */

/* ==================================================
   ÉCRAN MOYEN — TABLETTE ET LAPTOP
   Même taille de logo sur toutes les pages
================================================== */

@media screen and (min-width: 769px) and (max-width: 1599px) {

  /* Même largeur du bloc logo sur l’accueil et les autres pages */
  .header__heading,
  .header__heading-link {
    width: 150px !important;
    max-width: 150px !important;
  }

  /* Même taille réelle du logo sur toutes les pages */
  .header__heading img,
  .header__heading-link img,
  .header__heading-logo {
    display: block !important;
    width: 150px !important;
    max-width: 150px !important;
    height: auto !important;
  }
}


/* ==================================================
   GRAND ÉCRAN — 1600 PX ET PLUS
================================================== */

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

  /* Menu principal */
  .header__inline-menu .header__menu-item,
  .header__inline-menu .list-menu__item,
  .header__inline-menu a {
    font-size: 20px !important;
    line-height: 1.35 !important;
  }

  /* Langue */
  .header__localization .localization-form__select,
  .header__localization .disclosure__button,
  .header__icons .localization-form__select {
    font-size: 20px !important;
  }

  /* Bonhomme */
  .header__icon--account {
    width: 52px !important;
    height: 52px !important;
  }

  .header__icon--account svg {
    width: 30px !important;
    height: 30px !important;
  }

  /* Panier */
  .header__icon--cart {
    width: 52px !important;
    height: 52px !important;
  }

  .header__icon--cart .icon-cart,
  .header__icon--cart .icon-cart-empty,
  .header__icon--cart svg.icon,
  a[href="/cart"] svg {
    width: 30px !important;
    height: 30px !important;
    transform: scale(1.5) !important;
    transform-origin: center !important;
  }

  /* Flèche de la langue */
  .header__localization .icon-caret,
  .localization-form__select .icon-caret {
    width: 12px !important;
    height: 7px !important;
  }

  /* Espacement entre langue, bonhomme et panier */
  .header__icons {
    gap: 8px !important;
  }
}


/* ==================================================
   IPHONE
   Même taille de logo sur toutes les pages
================================================== */

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

  /* Même largeur du bloc logo sur l’accueil et les autres pages */
  .header__heading,
  .header__heading-link {
    width: 100px !important;
    max-width: 100px !important;
  }

  /* Même taille réelle du logo sur toutes les pages */
  .header__heading img,
  .header__heading-link img,
  .header__heading-logo {
    display: block !important;
    width: 100px !important;
    max-width: 100px !important;
    height: auto !important;
  }
}


/* ==================================================
   ÉCRAN MOYEN SEULEMENT — 769 À 1599 PX
================================================== */

@media screen and (min-width: 769px) and (max-width: 1599px) {

  /* Menu plus petit pour qu’il reste sur une seule ligne */
  .header__inline-menu .list-menu--inline {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    column-gap: 0 !important;
  }

  .header__inline-menu .header__menu-item,
  .header__inline-menu .list-menu__item,
  .header__inline-menu a {
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  /* Réduit légèrement l’espace horizontal entre les choix du menu */
  .header__inline-menu .header__menu-item {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* La bannière remplit correctement toute sa zone */
  .cu-hero {
    background-size: cover !important;
    background-position: center center !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    /* Replace l’encadré à l’intérieur de l’image */
    padding-top: 75px !important;
  }

  /* Retire les espaces autour de la section contenant la bannière */
  .shopify-section:has(.cu-hero) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .shopify-section:has(.cu-hero) > div,
  .shopify-section:has(.cu-hero) [class*="-padding"],
  .shopify-section:has(.cu-hero) .color-scheme-1 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Retire l’espace avant la section suivante */
  .shopify-section:has(.cu-hero) + .shopify-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}



/* =====================================================
   PRODUIT-PONT ATELIER BYOB
   Cache le prix 0,00 $ du faux produit
   « Créer votre coffret personnalisé »
   sur l’accueil, les collections et après les filtres.
===================================================== */

.card-wrapper:has(a[href*="creez-votre-coffret"]) .price,
.card-wrapper:has(a[href*="creer-coffret-cadeau-personnalise"]) .price,
.card-wrapper:has(a[href*="votre-style-de-coffret"]) .price {
  display: none !important;
}



/* =====================================================
   FILTRES ACTIFS DES COLLECTIONS
   Cache seulement les pastilles des filtres sélectionnés,
   sans modifier la structure ni l’alignement des boutons.
===================================================== */

.active-facets__button,
.active-facets__button-remove {
  display: none !important;
}




/* =====================================================
   BOUTON X — MENU DES FILTRES
   Ajoute un bouton de fermeture dans le coin supérieur
   droit de la boîte blanche des options de filtre.
===================================================== */

.facets__display {
  position: relative;
}

.facets-close-button {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 5;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #3f3f3f;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.facets-close-button:hover {
  opacity: 0.65;
}


/* =====================================================
   INDICATEUR DE FILTRE ACTIF
   Affiche une petite pastille « Actif » directement
   dans le bouton Prix ou Type de coffret lorsqu’une
   sélection est appliquée, sans afficher les grosses
   pastilles de filtres actifs sous la barre.
===================================================== */

/* =====================================================
   INDICATEUR DE FILTRE ACTIF
   Pastille rouge foncé avec texte blanc.
===================================================== */

.facet-active-indicator {
  display: none;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #8f1f1f;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.facets__disclosure.facet-has-selection .facet-active-indicator {
  display: inline-flex;
}


/* =====================================================
   FLÈCHE ROUGE VERS LE FILTRE ACTIF
   Ajoute une petite flèche au-dessus du bouton concerné.
===================================================== */

.facets__disclosure.facet-has-selection {
  position: relative;
}

.facets__disclosure.facet-has-selection::before {
  content: "↓";
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  color: #8f1f1f;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

/* Fait légèrement ressortir le bouton actif */
.facets__disclosure.facet-has-selection
.facets__summary {
  border-color: #667238 !important;
  box-shadow: 0 0 0 1px #667238;
}

/* Abaisse Réinitialiser afin de laisser de la place au X */
.facets__display .facets__reset,
.facets__display a[href*="remove"] {
  transform: translateY(14px);
}





/* =========================================================
   LAINOHA — QUICK VIEW BYOB
   Bouton "Ajouter au coffret"
   Ciblage du vrai bouton utilisé dans la fenêtre Quick View.
========================================================= */

.byob-quickview-container #byob-product-options1 .btn-add-to-bundle,
.byob-quickview-container #byob-product-options1 button.btn-add-to-bundle {
  width: auto !important;
  min-width: 240px !important;
  min-height: 52px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin-top: 0 !important;
  margin-bottom: 2rem !important;

  padding: 13px 26px !important;

  background: linear-gradient(
    145deg,
    #6f7d44 0%,
    #526034 100%
  ) !important;

  color: #ffffff !important;

  border: 1px solid #526034 !important;
  border-radius: 999px !important;

  box-shadow:
    0 8px 18px rgba(82, 96, 52, 0.20),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}


/* Texte du bouton Quick View */
.byob-quickview-container #byob-product-options1
.btn-add-to-bundle .AddToBundleText::after {
  content: "Ajouter au coffret ♡" !important;

  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;

  color: #ffffff !important;

  white-space: nowrap !important;
}


/* Survol ordinateur */
.byob-quickview-container #byob-product-options1
.btn-add-to-bundle:hover {
  background: linear-gradient(
    145deg,
    #62713d 0%,
    #46552c 100%
  ) !important;

  border-color: #46552c !important;

  transform: translateY(-1px);

  box-shadow:
    0 11px 24px rgba(82, 96, 52, 0.26),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}


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

  .byob-quickview-container #byob-product-options1 .btn-add-to-bundle,
  .byob-quickview-container #byob-product-options1 button.btn-add-to-bundle {
    width: 100% !important;
    min-width: 0 !important;

    min-height: 40px !important;

    padding: 7px 14px !important;
  }

  .byob-quickview-container #byob-product-options1
  .btn-add-to-bundle .AddToBundleText::after {
    font-size: 12px !important;
    line-height: 1.1 !important;
  }
}



/* =========================================================
   LAINOHA — QUICK VIEW BYOB
   Encadrés avantages responsives
========================================================= */

/* Grand écran : 3 colonnes */
@media screen and (min-width: 1200px) {
  .byob-quickview-container .lainoha-keypoints {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Écran moyen / iPad paysage : 2 colonnes */
@media screen and (min-width: 900px) and (max-width: 1199px) {
  .byob-quickview-container .lainoha-keypoints {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* iPad portrait / mobile : 1 colonne */
@media screen and (max-width: 899px) {
  .byob-quickview-container .lainoha-keypoints {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   LAINOHA — QUICK VIEW BYOB
   Fond blanc de la fenêtre Quick View
========================================================= */

.byob-quickview-container,
.byob-quickview-panel,
.byob-quickview-left,
.byob-quickview-right {
  background:#ffffff !important;
}



/* =========================================================
   LAINOHA — QUICK VIEW BYOB
   Taille du titre produit
   Mobile + grand écran seulement
========================================================= */

/* iPhone / mobile */
@media screen and (max-width: 749px) {
  .byob-quickview-container .byob-quickview-title {
    font-size: 1.9rem !important;
    line-height: 1.2 !important;
  }
}

/* Grand écran */
@media screen and (min-width: 1200px) {
  .byob-quickview-container .byob-quickview-title {
    font-size: 3.6rem !important;
    line-height: 1.2 !important;
  }
}